Related posts stack on mobile.

hackersandslackers · Jan 17, 2024 · 99c2137 · 99c2137
1 parent b73ef10
commit 99c2137
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 94 deletions.
diff --git a/assets/built/main.js b/assets/built/main.js
diff --git a/assets/built/post.js b/assets/built/post.js
diff --git a/partials/post/related-posts.hbs b/partials/post/related-posts.hbs
@@ -2,12 +2,13 @@
 <div class="related-posts">
   {{#get "posts" limit="3" filter="id:-{{id}}+tag:{{primary_tag.slug}}" as |related_posts|}}
     {{#if related_posts}}
+      <h4>Related Posts</h4>
       <aside class="read-more-wrap">
         <div class="read-more inner">
           {{#foreach related_posts}}
             {{> "post-card"}}
           {{/foreach}}
         </div>
+    {{/if}}
   {{/get}}
-  {{/if}}
 </div>
diff --git a/post.hbs b/post.hbs
@@ -74,15 +74,18 @@
 
       This query gets the latest 3 posts on the site, but adds a filter to
       exclude the post we're currently on from being included. --}}
-      <section class="related-posts">
-        {{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}}
-          {{#if more_posts}}
-            {{#foreach more_posts}}
-              {{> "post-card"}}
-            {{/foreach}}
-          {{/if}}
-        {{/get}}
-      </section>
+      {{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}}
+        {{#if more_posts}}
+          <section class="related-posts">
+            <h4 class="related-posts-header">Related Posts</h4>
+            <div class="related-posts-wrapper">
+              {{#foreach more_posts}}
+                {{> "post-card"}}
+              {{/foreach}}
+            </div>
+          </section>
+        {{/if}}
+      {{/get}}
     </div>
   </div>
 {{/post}}
diff --git a/src/scss/footer.scss b/src/scss/footer.scss
@@ -251,7 +251,7 @@
     }
 
     .footer-description {
-      font-size: 1.05em;
+      font-size: 1.1em;
       font-family: $body-font;
       color: #4c5c71;
       line-height: 1.5;

diff --git a/src/scss/related-posts.scss b/src/scss/related-posts.scss
@@ -3,9 +3,6 @@
 
 
 .related-posts {
-  grid-gap: 2vmin;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
   max-width: 850px;
   margin: 0 auto;
 
@@ -14,118 +11,161 @@
   }
 
   @media(max-width: $mobile-breakpoint) {
-    grid-template-columns: 1fr;
     max-width: 90% !important;
-    grid-gap: 6vmin;
     margin-bottom: 20px !important;
   }
 
-  .post-card {
-    flex-direction: column;
-    display: flex;
+  .related-posts-header {
+    color: $color-lightgrey;
+    font-family: $header-font-semibold;
+    font-size: 1.4em;
+    letter-spacing: 1px;
+    line-height: 1;
+    text-transform: uppercase;
+    margin: 28px 0 16px;
+    border-bottom: 1px solid #dee1e7;
+    padding-bottom: 8px;
+    text-align: left;
+  }
+
+  .related-posts-wrapper {
+    grid-gap: 2vmin;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
 
-    .post-card-image-link {
-      overflow: unset;
+    @media(max-width: $mobile-breakpoint) {
+      grid-template-columns: 1fr;
+      grid-gap: 3vmin;
     }
 
-    .post-card-title {
-      font-size: 1.3em;
-      line-height: 1.1;
-      font-family: $header-font;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      line-clamp: 3;
-      text-overflow: ellipsis;
-      word-wrap: break-word;
-
-      @media(max-width: $tablet-breakpoint) {
-        font-size: 1.3em;
-      }
+    .post-card {
+      flex-direction: column;
+      display: flex;
 
       @media(max-width: $mobile-breakpoint) {
-        font-size: 1.5em;
+        flex-direction: row;
       }
 
-      @media(max-width: 450px) {
-        font-size: 1.3em;
+      .post-card-image-link {
+        position: relative;
+        overflow: hidden;
+        height: auto;
+        max-height: 147px;
+
+        @media(max-width: $mobile-breakpoint) {
+          display: inline-flex;
+          min-width: 35vw;
+        }
       }
-    }
 
-    .post-card-content-link {
-      max-height: 64px;
-      text-overflow: ellipsis;
-      margin-bottom: 15px;
-    }
+      .post-card-image {
+        position: relative;
 
-    .post-card-excerpt {
-      font-size: 1em !important;
-      margin: 10px 0;
-      display: none;
+        @media(max-width: $mobile-breakpoint) {
+          object-fit: cover;
+          object-position: left center;
+        }
+      }
 
-      @media(max-width: $mobile-breakpoint) {
-        font-size: 1.1m !important;
+      .post-card-title {
+        font-size: 1.3em;
+        line-height: 1.1;
+        font-family: $header-font;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+
+        @media(max-width: $tablet-breakpoint) {
+          font-size: 1.3em;
+        }
+
+        @media(max-width: $mobile-breakpoint) {
+          font-size: 1.5em;
+        }
+
+        @media(max-width: 450px) {
+          font-size: 1.3em;
+        }
       }
-    }
 
-    .post-card-meta {
-      padding: unset;
-    }
+      .post-card-content-link {
+        max-height: 64px;
+        text-overflow: ellipsis;
+        margin-bottom: 15px;
+      }
 
-    .post-card-meta-details {
-      padding: 15px 0 0;
-      justify-content: space-between;
-      display: flex;
-      align-items: center;
-      width: 100%
-    }
+      .post-card-excerpt {
+        font-size: 1em !important;
+        margin: 10px 0;
+        display: none;
 
-    .post-card-content {
-      height: 100%;
-      padding: 15px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+        @media(max-width: $mobile-breakpoint) {
+          font-size: 1.1m !important;
+        }
+      }
 
       .post-card-meta {
-        width: 100%;
+        padding: unset;
+      }
+
+      .post-card-meta-details {
+        padding: 15px 0 0;
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+        width: 100%
+      }
 
-        .meta-items-left {
-          display: block;
-          white-space: unset;
+      .post-card-content {
+        // height: 100%;
+        padding: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .post-card-meta {
           width: 100%;
-        }
 
-        .post-card-meta-item {
-          display: block;
-          font-family: $body-font-bold;
+          .meta-items-left {
+            display: block;
+            white-space: unset;
+            width: 100%;
+          }
 
-          * {
+          .post-card-meta-item {
+            display: block;
             font-family: $body-font-bold;
-          }
 
+            * {
+              font-family: $body-font-bold;
+            }
 
-          &.separator {
-            display: none !important;
-          }
 
-          &.reading-time {
-            display: block !important;
+            &.separator {
+              display: none !important;
+            }
+
+            &.reading-time {
+              display: block !important;
+            }
           }
         }
-      }
 
-      &:hover {
-        background: $color-theme;
-        cursor: pointer;
+        &:hover {
+          background: $color-theme;
+          cursor: pointer;
 
-        * {
-          color: white;
-        }
+          * {
+            color: white;
+          }
 
-        .meta-items-left * {
-          color: white;
-          cursor: pointer;
+          .meta-items-left * {
+            color: white;
+            cursor: pointer;
+          }
         }
       }
     }