Pagination on single posts

assets/css/main.css

@@ -114,8 +114,10 @@ code {
 }
 
 hr {
-  border: 1px solid var(--content-primary);
+  border: none;
-  margin-top: 3rem;
+  height: 1px;
+  background: var(--content-secondary);
+  margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
@@ -259,7 +261,6 @@ footer a {
 }
 
 .single-title {
-  /* margin-top: 1rem; */
   margin-bottom: .5rem;
 }
 
@@ -274,7 +275,7 @@ footer a {
 }
 
 .single-content {
-  margin-bottom: 6rem;
+  margin-bottom: 5rem;
 }
 
 .single-tags {
@@ -285,6 +286,56 @@ footer a {
   margin-right: .3rem;
 }
 
+/* Single pagination */
+
+.single-pagination {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.single-pagination a {
+  margin-left: .4rem;
+  margin-right: .4rem;
+}
+
+.single-pagination hr {
+  margin: 0;
+}
+
+.single-pagination-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+}
+
+.single-pagination-prev {
+  min-width: 50%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  text-align: right;
+}
+
+.single-pagination-next {
+  min-width: 50%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.single-pagination-container-next {
+  display: flex;
+  min-height: 100%;
+  padding: .5rem;
+}
+
+.single-pagination-container-prev {
+  display: flex;
+  min-height: 100%;
+  padding: .5rem;
+  float: right;
+}
+
 /* Table of contents */
 
 .toc {
@@ -419,7 +470,7 @@ figcaption {
   font-family: "Monaspace";
   font-size: small;
   margin-bottom: 2rem;
-  margin-top: -3rem;
+  /* margin-top: -3rem; */
 }
 
 /* Code in paragraphs */

layouts/_default/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-{{/* Intro */}}
+{{/* Breadcrumbs */}}
 
 {{ partial "breadcrumbs.html" . }}
 
@@ -59,13 +59,21 @@
   </aside>
   {{ end }}
 
-  {{/* Actual document content */}}
+  {{/* Page content */}}
 
   <div class="single-content">
     {{ .Content }}
     {{ partial "comments.html" . }}
   </div>
 
+  {{/* Next prev controls */}}
+
+  {{ if not (.Param "hidePagination") }}
+  {{ partial "pagination-single.html" . }}
+  {{ end }}
+
+  {{/* Back to top */}}
+
   {{ if not (.Param "hideBackToTop") }}
   <div class="back-to-top">
     <a href="#top">

layouts/partials/pagination-single.html

@@ -0,0 +1,39 @@
+{{ if or .NextInSection .PrevInSection }}
+
+<div class="single-pagination">
+    <hr />
+
+    <div class="flex">
+
+        <div class="single-pagination-prev">
+            {{ with .PrevInSection }}
+            <div class="single-pagination-container-prev">
+                <div class="single-pagination-text">←</div>
+                <div class="single-pagination-text">
+                    <a href="{{ .Permalink }}">
+                        {{ .Title }}
+                    </a>
+                </div>
+            </div>
+            {{ end }}
+        </div>
+
+        <div class="single-pagination-next">
+            {{ with .NextInSection }}
+            <div class="single-pagination-container-next">
+                <div class="single-pagination-text">
+                    <a href="{{ .Permalink }}">
+                        {{ .Title }}
+                    </a>
+                </div>
+                <div class="single-pagination-text">→</div>
+            </div>
+            {{ end }}
+        </div>
+
+    </div>
+
+    <hr />
+</div>
+
+{{ end }}