Add post navigation

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/common.scss

@@ -33,6 +33,8 @@ h4,
 h5,
 h6 {
   font-weight: 500;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 hr {

assets/sass/main.scss

@@ -16,8 +16,9 @@ $width-wide: 75rem;
 @import "gallery";
 
 @import "header";
-@import "content";
 @import "hero";
+@import "content";
+@import "postnav";
 @import "footer";
 
 @import "photoswipe";

assets/sass/postnav.scss

@@ -0,0 +1,59 @@
+.postnav {
+  max-width: $width-content;
+  margin: 0 auto;
+  padding: 2rem;
+
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+
+  a {
+    flex: 50%;
+    color: inherit;
+  }
+
+  a:hover {
+    color: var(--text-800);
+  }
+
+  p {
+    margin: 0.5rem 0 0.5rem 0;
+  }
+
+  .caption {
+    font-weight: 500;
+  }
+
+  .title {
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+
+  .next {
+    text-align: right;
+  }
+
+  .previous .caption::before {
+    content: "‹ ";
+  }
+
+  .next .caption::after {
+    content: " ›";
+  }
+}
+
+.content + .postnav {
+  padding-top: 0;
+}
+
+@media (max-width: $width-mobile) {
+  .postnav {
+    padding: 1rem;
+
+    flex-direction: column;
+
+    a {
+      flex: auto;
+    }
+  }
+}

layouts/_default/single.html

@@ -1,8 +1,9 @@
 {{ define "main" }}
   <main>
-    {{ partial "components/hero/default.html" . }}
+    {{ partial "components/hero/index.html" . }}
     <div class="content">
       {{ .Content }}
     </div>
+    {{ partial "components/postnav/index.html" . }}
   </main>
 {{ end }}

layouts/partials/components/postnav/index.html

@@ -0,0 +1,22 @@
+{{ $pages := .CurrentSection.Pages.ByDate }}
+
+
+<div class="postnav">
+  {{ with $pages.Prev . }}
+    <a href="{{ .RelPermalink }}">
+      <div class="previous">
+        <p class="caption">Previous Post</p>
+        <p class="title">{{ .Title }}</p>
+      </div>
+    </a>
+  {{ end }}
+
+  {{ with $pages.Next . }}
+    <a href="{{ .RelPermalink }}">
+      <div class="next">
+        <p class="caption">Next Post</p>
+        <p class="title">{{ .Title }}</p>
+      </div>
+    </a>
+  {{ end }}
+</div>