Restyle homepage and PostCard component

src/components/common/Layout.js

@@ -71,6 +71,7 @@ const DefaultLayout = ({ data, children, bodyClass, isHome, hasFeatureImage }) =
                 </header>
 
                 <main className={
+                    isHome ? "site-main grey-background" :
                     hasFeatureImage ? "site-main has-feature-image" : "site-main"
                 }>
                     {/* All the main content gets inserted here, index.js, post.js */}

src/components/common/PostCard.js

@@ -4,36 +4,39 @@ import { Link } from 'gatsby'
 import { Tags } from '@tryghost/helpers-gatsby'
 import { readingTime as readingTimeHelper } from '@tryghost/helpers'
 
-const PostCard = ({ post }) => {
+const PostCard = ({ post, isLarge }) => {
     const url = `/${post.slug}/`
     const readingTime = readingTimeHelper(post)
 
     return (
-        <Link to={url} className="post-card">
+        <Link to={url} className={ isLarge ? "post-card post-card-large" : "post-card" }>
             <header className="post-card-header">
                 {post.feature_image &&
                     <div className="post-card-image" style={{
                         backgroundImage: `url(${post.feature_image})` ,
                     }}></div>}
-                {post.tags && <div className="post-card-tags"> <Tags post={post} visibility="public" autolink={false} /></div>}
+            </header>
+            <div className="post-card-content">
+                {/*post.tags && <div className="post-card-tags"> <Tags post={post} visibility="public" autolink={false} /></div>*/}
+                {post.tags && <div className="post-card-tags">{post.tags[0].name}</div>}
                 {post.featured && <span>Featured</span>}
                 <h2 className="post-card-title">{post.title}</h2>
-            </header>
+                <section className="post-card-excerpt">{post.subtitle}</section>
-            <section className="post-card-excerpt">{post.excerpt}</section>
+                <footer className="post-card-footer">
-            <footer className="post-card-footer">
+                    <div className="post-card-footer-left">
-                <div className="post-card-footer-left">
+                        <div className="post-card-avatar">
-                    <div className="post-card-avatar">
+                            {post.primary_author.profile_image ?
-                        {post.primary_author.profile_image ?
+                                <img className="author-profile-image" src={post.primary_author.profile_image} alt={post.primary_author.name}/> :
-                            <img className="author-profile-image" src={post.primary_author.profile_image} alt={post.primary_author.name}/> :
+                                <img className="default-avatar" src="/images/icons/avatar.svg" alt={post.primary_author.name}/>
-                            <img className="default-avatar" src="/images/icons/avatar.svg" alt={post.primary_author.name}/>
+                            }
-                        }
+                        </div>
+                        <span>{ post.primary_author.name }</span>
                     </div>
-                    <span>{ post.primary_author.name }</span>
+                    <div className="post-card-footer-right">
-                </div>
+                        <div>{readingTime}</div>
-                <div className="post-card-footer-right">
+                    </div>
-                    <div>{readingTime}</div>
+                </footer>
-                </div>
+            </div>
-            </footer>
         </Link>
     )
 }
@@ -55,6 +58,7 @@ PostCard.propTypes = {
             profile_image: PropTypes.string,
         }).isRequired,
     }).isRequired,
+    isLarge: PropTypes.bool,
 }
 
 export default PostCard

src/styles/app.css

@@ -769,6 +769,10 @@ h6 {
     padding: 4vw 0;
 }
 
+.site-main.grey-background {
+    background: #f4f8fb;
+}
+
 .site-main.has-feature-image {
     padding: 0 0 4vw 0; /* Leave space for pic */
 }
@@ -777,10 +781,8 @@ h6 {
 /* ---------------------------------------------------------- */
 
 .post-feed {
-    display: grid;
+    display:flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
-    grid-gap: 30px;
-    grid-template-columns: 1fr 1fr 1fr;
 }
 
 @media (max-width: 980px) {
@@ -797,17 +799,28 @@ h6 {
 .post-card {
     color: inherit;
     text-decoration: none;
+    flex: 1 1 300px;
+    margin: 1rem;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 8px 14px 38px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03);
+    display: flex;
+    flex-direction: column;
 }
 
 .post-card:hover {
     text-decoration: none;
+    box-shadow: rgba(39,44,49,0.07) 8px 28px 50px, rgba(39, 44, 49, 0.04) 1px 6px 12px;
+    transition: all 0.4s ease;
+    transform: translate3D(0, -1px, 0) scale(1.02);
 }
 
 .post-card-tags {
     margin: 0 0 5px 0;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     line-height: 1.15em;
     color: var(--color-secondary);
+    text-transform: uppercase;
 }
 
 
@@ -816,6 +829,18 @@ h6 {
     padding: 0;
 }
 
+.post-card-content {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.post-card-content::before {
+    margin-top: auto;
+    content: "";
+}
+
 .post-card-excerpt {
     font-size: 1.6rem;
     line-height: 1.55em;
@@ -827,13 +852,14 @@ h6 {
     height: 200px;
     background: var(--color-secondary) no-repeat center center;
     background-size: cover;
+    border-radius: 5px 5px 0 0;
 }
 
 .post-card-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 10px 0 0 0;
+    margin: auto 0 0 0;
     color: var(--color-secondary);
 }
 
@@ -869,6 +895,31 @@ h6 {
     width: 26px;
 }
 
+@media (min-width: 980px) {
+    .post-card-large {
+      flex: 1 1 100%;
+      flex-direction: row;
+      border-radius: 1rem;
+    }
+
+    .post-card-large h2 {
+        font-size: 2.6rem;
+    }
+    
+    .post-card-large .post-card-header {
+      flex: 1 1 auto;
+    }
+    .post-card-large .post-card-image {
+      height: 400px;
+      margin-bottom: 0;
+      border-radius: 1rem 0 0 1rem;
+    }
+    .post-card-large .post-card-content {
+      flex: 0 1 357px;
+      padding: 3rem;
+    }
+}
+
 
 /* Tag Archives
 /* ---------------------------------------------------------- */

src/templates/index.js

@@ -22,9 +22,9 @@ const Index = ({ data, location, pageContext }) => {
             <Layout isHome={true}>
                 <div className="container">
                     <section className="post-feed">
-                        {posts.map(({ node }) => (
+                        {posts.map(( {node}, count ) => (
                             // The tag below includes the markup for each post - components/common/PostCard.js
-                            <PostCard key={node.id} post={node} />
+                            <PostCard key={node.id} post={node} isLarge={ count % 6 == 0 ? true : false} />
                         ))}
                     </section>
                     <Pagination pageContext={pageContext} />