feat: new post design

author.hbs

@@ -1,10 +1,13 @@
-{{!< default}} {{#author}} {{> header-background background=cover_image}} <div class="page-header">
+{{!< default}} <div class="page-header page-header--short">
   <div class="page-header__background responsive-header-img">
     <div class="page-header__overlay"></div>
   </div>
   <div class="page-header__contents">
+  </div>
+  </div>
+  {{#author}}
   <div class="post-header container mx-auto main">
-        <p class="page-header__text">
+    <p class="post-header__text">
       <span class="post-header__tag-name">Author</span>
     </p>
     <div class="post-header__heading post-header__heading--tag">
@@ -20,32 +23,34 @@
       {{else}}
       <span class="post-header__heading--tag-color"></span>
       {{/if}}
-          <h1 class="post-header__heading--tag-text">
+      <h1 class="post-header__heading">
         {{name}}
       </h1>
     </div>
-        <p class="page-header__text">
+    <p class="post-header__text">
       {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
     </p>
-        <p class="page-header__text">
+    <p class="post-header__text">
       {{#if website}}
-          <span class=""><a class="post-header__social" href="{{website}}" target="_blank"
+      <span class=""><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
-              rel="noopener">Website</a></span>
       {{/if}}
       {{#if twitter}}
-          <span class=""><a class="post-header__social" href="{{twitter_url}}" target="_blank"
+      <span class=""><a href="{{twitter_url}}" target="_blank"
           rel="noopener">Twitter</a></span>
       {{/if}}
       {{#if facebook}}
-          <span class=""><a class="post-header__social" href="{{facebook_url}}" target="_blank"
+      <span class=""><a href="{{facebook_url}}" target="_blank"
           rel="noopener">Facebook</a></span>
       {{/if}}
     </p>
     {{#if bio}}
     <p class="page-header__text">{{bio}}</p>
     {{/if}}
-      </div>
+    {{#if cover_image}}
-    </div>
+    <figure class="post-header__featured-image">
+      <img src="{{cover_image}}" alt="{{name}}" loading="lazy">
+    </figure>
+    {{/if}}
   </div>
   {{/author}}
   <main class="post-list container mx-auto">

page.hbs

@@ -1,22 +1,32 @@
 {{!< default}} {{#post}} <div class="relative group index-header">
 
-  {{> header-background background=feature_image}}
+  <div class="page-header page-header--short">
-  <div class="page-header">
+    <div class="page-header__background">
-    <div class="page-header__background responsive-header-img">
       <div class="page-header__overlay"></div>
     </div>
     <div class="page-header__contents">
+    </div>
+  </div>
+
   <div class="post-header container mx-auto main">
-        <h1 class="page-header__heading">{{title}}</h1>
+    <h1 class="post-header__heading">{{title}}</h1>
-      </div>
+    {{#if feature_image}}
-    </div>
+    <figure class="post-header__featured-image">
+      <img src="{{feature_image}}" alt="{{feature_image_alt}}" loading="lazy">
+      {{#if feature_image_caption}}
+
+      <figcaption>{{feature_image_caption}}</figcaption>
+      {{/if}}
+    </figure>
+    {{/if}}
   </div>
 
+
   <main id="post" class="container mx-auto main">
     {{content}}
   </main>
-
   {{/post}}
+
   {{#contentFor "scripts"}}
   <script>
   </script>

post.hbs

@@ -1,14 +1,16 @@
 {{!< default}} {{#post}} <div class="relative group index-header">
 
-  {{> header-background background=feature_image}}
+  <div class="page-header page-header--short">
-  <div class="page-header">
+    <div class="page-header__background">
-    <div class="page-header__background responsive-header-img">
       <div class="page-header__overlay"></div>
     </div>
     <div class="page-header__contents">
+    </div>
+  </div>
+
   <div class="post-header container mx-auto main">
     {{> primary-tag}}
-        <h1 class="page-header__heading">{{title}}</h1>
+    <h1 class="post-header__heading">{{title}}</h1>
     <p class="post-header__time">
       <span>
         <time datetime="{{date format=" YYYY-MM-DD"}}">
@@ -40,16 +42,18 @@
       </div>
     </div>
     {{/if}}
+    {{#if feature_image}}
+    <figure class="post-header__featured-image">
+      <img src="{{feature_image}}" alt="{{feature_image_alt}}" loading="lazy">
       {{#if feature_image_caption}}
-        <p class="post-header__caption">
+
-          <span class="post-header__caption-text">
+      <figcaption>{{feature_image_caption}}</figcaption>
-            {{feature_image_caption}}
+      {{/if}}
-          </span>
+    </figure>
-        </p>
+
     {{/if}}
   </div>
-    </div>
+
-  </div>
 
   <main id="post" class="container mx-auto main">
     {{content}}

tag.hbs

@@ -1,15 +1,18 @@
-{{!< default}} {{#tag}} {{> header-background background=feature_image}}
+{{!< default}} 
-  <div class="page-header">
+  <div class="page-header page-header--short">
-    <div class="page-header__background responsive-header-img">
+    <div class="page-header__background">
       <div class="page-header__overlay"></div>
     </div>
     <div class="page-header__contents">
+    </div>
+  </div>
+{{#tag}}
   <div class="post-header container mx-auto main">
     <p>
       <span class="post-header__tag-name">Tag</span>
     </p>
     <div class="post-header__heading post-header__heading--tag">
-          <h1 class="post-header__heading--tag-text">
+      <h1 class="post-header__heading">
         {{name}}
       </h1>
       {{#if accent_color}}
@@ -18,9 +21,14 @@
       <span class="post-header__heading--tag-color"></span>
       {{/if}}
     </div>
-        <p class="page-header__text">{{description}}</p>
+    {{#if description}}
-      </div>
+    <p>{{description}}</p>
-    </div>
+    {{/if}}
+    {{#if feature_image}}
+    <figure class="post-header__featured-image">
+      <img src="{{feature_image}}" alt="{{name}}" loading="lazy">
+    </figure>
+    {{/if}}
   </div>
   {{/tag}}