Simple post list styling

assets/css/components/global.css

@@ -125,7 +125,7 @@ h4,
 h5,
 h6 {
     margin: 0;
-    line-height: 1.1em;
+    line-height: 1.15em;
     font-weight: 700;
 }
 
@@ -140,11 +140,11 @@ h1 {
 }
 
 h2 {
-    font-size: 3.4rem;
+    font-size: 3.6rem;
 }
 @media (max-width: 500px) {
     h2 {
-        font-size: 2rem;
+        font-size: 2.2rem;
     }
 }
 

assets/css/screen.css

@@ -75,19 +75,46 @@ html,
 /* ---------------------------------------------------------- */
 
 .post-card {
-    margin: 0 0 4vw;
+    margin: 0 auto 6vw;
 }
 
 .post-card-link {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
 }
 
 .post-card-image {
-    margin-left: 4vw;
+    width: 100%;
-    width: 300px;
+    max-height: 700px;
-    height: 200px;
     object-fit: cover;
+    margin-bottom: 2vw;
+}
+
+.post-card-meta {
+    display: block;
+    margin: 0 0 1rem;
+    font-size: 1.3rem;
+    text-transform: uppercase;
+    opacity: 0.6;
+}
+
+.post-card-content {
+    max-width: 720px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.post-card-content p {
+    margin: 1rem 0;
+    padding: 0 4vw;
+}
+
+.post-card-content > strong {
+    display: inline-block;
+    padding: 1px 0;
+    font-weight: 500;
+    box-shadow: 0 -1px 0 0 inset currentColor;
+    opacity: 0.6;
 }
 
 

partials/post-card.hbs

@@ -4,10 +4,6 @@ Re-usable card for linking to posts
 
 <article class="post-card {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}">
     <a class="post-card-link" href="{{url}}">
-        <div class="post-card-content">
-            <h2 class="post-card-title">{{title}}</h2>
-            <p>{{excerpt}}</p>
-        </div>
         {{#if feature_image}}
             <img class="post-card-image"
                 srcset="{{img_url feature_image size="s"}} 300w,
@@ -19,5 +15,11 @@ Re-usable card for linking to posts
                 alt="{{title}}"
             />
         {{/if}}
+        <div class="post-card-content">
+            <span class="post-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
+            <h2 class="post-card-title">{{title}}</h2>
+            <p>{{excerpt}}</p>
+            <strong>Read more</strong>
+        </div>
     </a>
 </article>