Pagination on single posts

3 files changed, 105 insertions, 7 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index b4ab3bc..0b47100 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -114,8 +114,10 @@ code {
 }
 
 hr {
-  border: 1px solid var(--content-primary);
-  margin-top: 3rem;
+  border: none;
+  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 */
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index dc391d6..a8f5079 100644
--- a/layouts/_default/single.html
+++ b/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">
diff --git a/layouts/partials/pagination-single.html b/layouts/partials/pagination-single.html
new file mode 100644
index 0000000..9bc5ced
--- /dev/null
+++ b/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 }}