Single post template

assets/css/screen.css

@@ -13,7 +13,6 @@
     --font-sans: Mulish, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; /* stylelint-disable-line value-keyword-case */
     --content-font-name: var(--font-sans);
     --content-font-size: 1.9rem;
-    --content-letter-spacing: -0.01em;
 }
 
 .gh-head-logo {
@@ -239,8 +238,8 @@
 }
 
 .gh-subscribe {
-    padding: 8vmin 0;
-    margin-top: 12vmin;
+    padding: 7.2vmin 0 8vmin;
+    margin: 12vmin 0 8vmin;
     background-color: var(--color-lighter-gray);
 }
 
@@ -303,31 +302,75 @@
     text-transform: uppercase;
 }
 
-.gh-article-navigation {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    padding-top: 2rem;
-    font-size: 1.3rem;
-    font-weight: 700;
+.gh-article-meta {
+    margin-top: 2.4rem;
+    font-size: 1.4rem;
+    font-weight: 500;
+    color: var(--color-secondary-text);
     text-transform: uppercase;
-    letter-spacing: 0.01em;
-    border-top: 2px solid var(--color-darker-gray);
 }
 
-.gh-article-navigation-previous {
-    display: flex;
-    margin-left: -5px;
+.gh-article-meta a {
+    font-weight: 700;
 }
 
-.gh-article-navigation-all {
-    color: var(--ghost-accent-color);
+.gh-article-title {
+    font-weight: 800;
 }
 
-.gh-article-navigation-next {
-    margin-right: -5px;
+.gh-article-footer {
+    padding-top: 3.2rem;
+    margin-top: 8rem;
+    border-top: 1px solid var(--color-light-gray);
+}
+
+.gh-navigation {
+    grid-column: wide-start / wide-end;
+}
+
+.gh-navigation > div {
+    align-items: flex-start;
+    height: 100%;
+}
+
+.gh-navigation-link {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.gh-navigation-next .gh-navigation-link {
+    align-items: flex-end;
     text-align: right;
 }
 
+.gh-navigation-link svg {
+    width: 20px;
+    height: 20px;
+}
+
+.gh-navigation-previous svg {
+    margin-left: -2px;
+}
+
+.gh-navigation-next svg {
+    margin-right: -2px;
+}
+
+.gh-navigation-label {
+    display: flex;
+    align-items: center;
+    font-size: 2.4rem;
+    font-weight: 800;
+    letter-spacing: -0.01em;
+}
+
+.gh-navigation-title {
+    margin-top: 0.4rem;
+    font-size: 1.7rem;
+    font-weight: 400;
+    letter-spacing: 0;
+}
+
 .gh-pagehead {
     display: flex;
     margin: 8vmin 0 max(8vmin, 4.8rem);

partials/icons/arrow-left.hbs

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="19" y1="12" x2="5" y2="12"></line>
+    <polyline points="12 19 5 12 12 5"></polyline>
+</svg>

post.hbs

@@ -4,7 +4,70 @@
 
 <main class="gh-main">
     <article class="gh-article {{post_class}}">
+        <header class="gh-article-header gh-canvas">
+            <h1 class="gh-article-title">{{title}}</h1>
 
+            {{#is "post"}}
+                <span class="gh-article-meta">
+                    {{#primary_author}}By <a href="{{url}}">{{name}}</a>{{/primary_author}}
+                    {{#if primary_tag}}
+                        in
+                        <a class="gh-article-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
+                    {{/if}}
+                    —
+                    <time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+                </span>
+            {{/is}}
+
+            {{#if custom_excerpt}}
+                <p class="gh-article-excerpt">{{custom_excerpt}}</p>
+            {{/if}}
+
+            {{#if feature_image}}
+                <figure class="gh-article-image">
+                    <img
+                        srcset="{{img_url feature_image size="s"}} 300w,
+                                {{img_url feature_image size="m"}} 720w,
+                                {{img_url feature_image size="l"}} 960w,
+                                {{img_url feature_image size="xl"}} 1200w,
+                                {{img_url feature_image size="xxl"}} 2000w"
+                        sizes="(max-width: 1200px) 100vw, 1200px"
+                        src="{{img_url feature_image size="xl"}}"
+                        alt="{{title}}"
+                    >
+                </figure>
+            {{/if}}
+        </header>
+
+        <div class="gh-content gh-canvas">
+            {{content}}
+        </div>
+
+        {{#is "post"}}
+            <footer class="gh-article-footer gh-canvas">
+                <nav class="gh-navigation">
+                    <div class="gh-navigation-previous">
+                        {{#prev_post}}
+                            <a class="gh-navigation-link" href="{{url}}">
+                                <span class="gh-navigation-label">{{> icons/arrow-left}} Previous issue</span>
+                                <h4 class="gh-navigation-title">{{title}}</h4>
+                            </a>
+                        {{/prev_post}}
+                    </div>
+
+                    <div class="gh-navigation-middle"></div>
+
+                    <div class="gh-navigation-next">
+                        {{#next_post}}
+                            <a class="gh-navigation-link" href="{{url}}">
+                                <span class="gh-navigation-label">Next issue {{> icons/arrow-right}}</span>
+                                <h4 class="gh-navigation-title">{{title}}</h4>
+                            </a>
+                        {{/next_post}}
+                    </div>
+                </nav>
+            </footer>
+        {{/is}}
     </article>
 </main>