Add new post meta layout to post headers.

hackersandslackers · Jan 29, 2024 · cab1f5b · cab1f5b
1 parent 3dfe337
commit cab1f5b
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 65 deletions.
diff --git a/post.hbs b/post.hbs
@@ -21,21 +21,26 @@
             {{!-- Post Metadata --}}
             <div class="post-meta">
               {{#primary_author}}
-                <div class="post-meta-item link">
-                  <i class="fa-sharp fa-solid fa-user-pen"></i>
-                  <a href="{{url}}" class="author-name">{{name}}</a>
+                <div class="post-meta-author-avatar">
+                  {{#if profile_image}}
+                    <img class="post-meta-author-img" src="{{img_url profile_image}}" alt="{{name}}" />
+                  {{else}}
+                    <i class="fa-sharp fa-solid fa-user-pen"></i>
+                  {{/if}}
                 </div>
               {{/primary_author}}
-              <div class="post-meta-item">
-                <i class="fa-sharp fa-solid fa-calendar"></i>
-                <time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
-              </div>
-              {{#if reading_time}}
-                <div class="post-meta-item">
-                  <i class="fa-sharp fa-solid fa-eye"></i>
-                  <span class="reading-time">{{reading_time}}</span>
+              <div class="post-published-meta">
+                {{#primary_author}}
+                  <a href="{{url}}" class="post-meta-author-name">{{name}}</a>
+                {{/primary_author}}
+                <div class="post-published-time-meta">
+                  <time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+                  <span class="post-meta-separator"> • </span>
+                  {{#if reading_time}}
+                    <span class="reading-time">{{reading_time}}</span>
+                  {{/if}}
                 </div>
-              {{/if}}
+              </div>
             </div>
             {{!-- Post Image --}}
             {{#if feature_image}}

diff --git a/src/scss/footer.scss b/src/scss/footer.scss
@@ -257,7 +257,7 @@
     }
 
     .footer-description {
-      font-size: 1.1em;
+      font-size: 1.05em;
       font-family: $body-font-light;
       color: #4c5c71;
       line-height: 1.5;

diff --git a/src/scss/post.scss b/src/scss/post.scss
@@ -218,7 +218,7 @@
       @media(max-width: $tablet-breakpoint) {
         padding: unset;
         max-width: 90vw;
-        margin: 6vw auto 0;
+        margin: 8vw auto 0;
       }
 
       .post-excerpt {
@@ -249,62 +249,43 @@
       .post-meta {
         display: flex;
         flex-wrap: wrap;
-        margin: 20px 0 30px;
+        margin: 20px 0;
         align-items: center;
+        color: #414d5a;
 
-        @media(max-width: 767px) {
-          margin: 15px 0;
-        }
-
-        .post-meta-item {
-          margin-right: 25px;
-          color: #7e8da3;
-          line-height: 1;
-          font-family: $body-font;
-          color: $color-body-font;
-          display: flex;
-          align-items: center;
-          font-size: 1.05em;
-
-          @media(max-width: $tablet-breakpoint) {
-            margin: 0 25px 10px 0;
-          }
-
-          @media(max-width: $mobile-breakpoint) {
-            margin-right: 16px;
-            white-space: nowrap;
-            margin-bottom: 12px;
+        .post-meta-author-avatar {
+          border-radius: 50%;
+          overflow: hidden;
+          display: block;
+          height: 50px;
+          min-width: 50px;
+          overflow: hidden;
+          margin-right: 10px;
+
+          .post-meta-author-img {
+            width: 100%;
+            height: 100%;
           }
+        }
 
-          a,
-          span,
-          time {
-            color: #7e8da3;
-            font-family: $body-font-semibold;
-            transition: $transition;
-            line-height: 1;
-          }
+        .post-meta-author-name {
+          display: block;
+          font-family: $header-font-semibold;
+          font-size: 1.1em;
+          color: #414d5a;
 
-          i,
-          svg {
-            margin-right: 5px;
-            color: #7e8da3;
-            line-height: 1;
-            font-size: .8em;
+          &:hover {
+            color: $color-hover;
+            cursor: pointer;
           }
+        }
 
-          &.link {
-            transition: $transition;
-
-            &:hover {
-              cursor: pointer;
+        .post-meta-separator {
+          padding: 0 5px;
+        }
 
-              * {
-                color: $color-hover;
-                fill: $color-hover;
-              }
-            }
-          }
+        .post-published-time-meta {
+          font-family: $body-font;
         }
       }
     }
@@ -382,7 +363,7 @@
 
     @media(max-width: $tablet-breakpoint) {
       max-width: 90vw;
-      margin: 8vw auto;
+      margin: 6vw auto;
     }
 
     iframe {

diff --git a/src/scss/related-posts.scss b/src/scss/related-posts.scss
@@ -18,8 +18,7 @@
   .related-posts-header {
     color: $color-lightgrey;
     font-family: $header-font-semibold;
-    font-size: 1.4em;
-    letter-spacing: 1px;
+    font-size: 1.3em;
     line-height: 1;
     text-transform: uppercase;
     margin: 28px 0 16px;