From 20dcd73340b4dd4b4b965b9944d897508c7ad746 Mon Sep 17 00:00:00 2001
From: Juraj Oravec <jurajoravec@mailo.com>
Date: Sat, 30 Apr 2022 12:10:59 +0200
Subject: [PATCH] Add nav-bar to each tutorial page (next, previous)

Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>
---
 assets/scss/dark.scss        | 19 ++++++++++++++-----
 layouts/_default/list.html   |  2 +-
 layouts/_default/single.html | 17 +++++++++++++++++
 static/css/layout.css        | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/assets/scss/dark.scss b/assets/scss/dark.scss
index 20f9269..c1b474b 100644
--- a/assets/scss/dark.scss
+++ b/assets/scss/dark.scss
@@ -93,7 +93,7 @@ th {
 	color: map-get($theme-colors, "main-sec");
 }
 
-.copyright, {
+.copyright {
 	color: map-get($theme-colors, "copyright");
 }
 
@@ -104,10 +104,23 @@ th {
 	background: #181818;
 }
 
+.post-preview .meta {
+	border-bottom: 1px solid #303030;
+}
+
 .post-preview .title a {
 	color: map-get($theme-colors, "main-sec");
 }
 
+.post-footer-data {
+	background-color: #0a0a0a;
+	border-bottom: 1px solid #303030;
+}
+
+.post-footer hr {
+	color: #303030;
+}
+
 .rmore {
 	color: map-get($theme-colors, "main-text");
 }
@@ -133,10 +146,6 @@ th {
 	 color: map-get($theme-colors, "main-sec");
 }
 
-table.stats td.graph div {
-	background-color: map-get($theme-colors, "main-sec");
-}
-
 .content-list .archive-list a:hover {
 	 filter: brightness(1.2);
 }
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ef51be4..63810da 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -7,7 +7,7 @@
 <div class="content-list">
 
 <ul class="archive-list">
-{{ range sort .Data.Pages ".Params.number" }}
+{{ range (.Pages.ByParam "number") }}
   <li>
     <a href="{{ .Permalink }}">{{ .Title }}</a>
   </li>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6132593..b451a22 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -3,6 +3,23 @@
 <article class="post">
     <h1 class="title"> {{ .Title }} </h1>
     <div class="content"> {{ .Content }} </div>
+
+    <footer class="post-footer">
+    <div class="post-footer-data">
+    <div class="nav-bar">
+
+    {{ $pages := where site.RegularPages "Section" .Section }}
+    {{ with ($pages.ByParam "number").Reverse.Prev . }}
+        <a class="link-previous" title="{{ .Title }}" href="{{ .Permalink }}">&lt;&lt; Previous</a>
+    {{ end }}
+
+    {{ with ($pages.ByParam "number").Reverse.Next . }}
+        <a class="link-next" title="{{ .Title }}" href="{{ .Permalink }}">Next &gt;&gt;</a>
+    {{ end }}
+
+    </div>
+    </div>
+    </footer>
 </article>
 
 {{ partial "footer.html" . }}
diff --git a/static/css/layout.css b/static/css/layout.css
index b365a30..3142118 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -192,6 +192,38 @@ th, td {
 .post .content p{
 }
 
+.post-footer-data {
+	padding: 1em;
+}
+
+.post-footer hr {
+	width: 100%;
+}
+
+.post-footer .nav-bar {
+	display: table;
+	width: 100%;
+}
+
+.post-footer .nav-bar .link-next {
+	text-align: right;
+	display: table-cell;
+    float: none;
+	width: 50%;
+}
+
+.post-footer .nav-bar .link-previous {
+	text-align: left;
+	display: table-cell;
+    float: none;
+	width: 50;
+}
+
+.post-footer-menu {
+	justify-content: space-between;
+	font-size: 0.8em;
+	margin: 0.5em 4em;
+}
 
 .post-prev a {
 	text-decoration: none;