Read more

assets/css/screen.css

@@ -148,6 +148,59 @@ html,
     margin: 2rem 0;
 }
 
+
+/* Read More
+/* ---------------------------------------------------------- */
+
+.gh-readmore {
+    padding: 4vw;
+    font-size: 2.6rem;
+}
+
+.gh-readmore .gh-container {
+    display: grid;
+    grid-gap: 4vw;
+    grid-template-columns: 1fr 1fr;
+}
+
+.gh-readmore-prev {
+    justify-content: flex-end;
+    text-align: right;
+}
+
+.gh-readmore a {
+    display: flex;
+    color: currentColor;
+    text-decoration: none;
+}
+
+.gh-readmore h4 {
+    width: 100%;
+    font-size: inherit;
+}
+
+.gh-readmore svg {
+    display: inline-block;
+    vertical-align: middle;
+    height: 1em;
+    margin: 0.15em 0 0;
+}
+
+.gh-readmore svg + h4,
+.gh-readmore h4 + svg {
+    margin-left: 2vmin;
+}
+
+@media (max-width: 700px) {
+    .gh-readmore {
+        font-size: 1.6rem;
+    }
+    .gh-readmore svg {
+        margin: 0.1em 0 0;
+    }
+}
+
+
 /* Errors
 /* ---------------------------------------------------------- */
 

index.hbs

@@ -6,7 +6,7 @@
         <div class="post-feed">
         {{#foreach posts}}
 
-            {{> "postcard"}} {{!-- partials/post-card.hbs --}}
+            {{> "postcard"}} {{!-- partials/postcard.hbs --}}
 
         {{/foreach}}
         </div>

partials/icons/arrow-left.hbs

@@ -0,0 +1 @@
+<svg viewBox="0 0 17 27" xmlns="http://www.w3.org/2000/svg"><path d="M15.54 2.426l-13.143 11.5 13.143 11.5" stroke-width="3" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>

partials/icons/arrow-right.hbs

@@ -0,0 +1 @@
+<svg viewBox="0 0 18 27" xmlns="http://www.w3.org/2000/svg"><path d="M2.397 25.426l13.143-11.5-13.143-11.5" stroke-width="3" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>

post.hbs

@@ -35,4 +35,20 @@
     </footer>
 
 </article>
-{{/post}}
+
+<aside class="gh-readmore">
+    <div class="gh-container">
+        {{#next_post}}
+            <div class="gh-readmore-next">
+                <a href="{{url}}">{{> "icons/arrow-left"}} <h4>{{title}}</h4></a>
+            </div>
+        {{/next_post}}
+        {{#prev_post}}
+            <div class="gh-readmore-prev">
+                <a href="{{url}}"><h4>{{title}}</h4> {{> "icons/arrow-right"}}</a>
+            </div>
+        {{/prev_post}}
+    </div>
+</aside>
+
+{{/post}}