From dffbe447d6efb2abe6c72649e4d7eb070f6558e6 Mon Sep 17 00:00:00 2001
From: Michael Fabian 'Xaymar' Dirks <info@xaymar.com>
Date: Fri, 25 Nov 2022 22:44:47 +0100
Subject: [PATCH] Add proper pagination

---
 _layouts/index.liquid  | 21 +++++++++++++++++---
 _sass/_base.scss       |  9 +++++++++
 _sass/_content.scss    |  1 +
 _sass/_pagination.scss | 44 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 _sass/_pagination.scss

diff --git a/_layouts/index.liquid b/_layouts/index.liquid
index 31161b8..41ed8e3 100644
--- a/_layouts/index.liquid
+++ b/_layouts/index.liquid
@@ -14,13 +14,28 @@
 {% if paginator.total_pages > 1 %}
 	<ul class="pager">
 		{% if paginator.previous_page %}
-		<li class="previous">
-			<a href="{{ paginator.previous_page_path | absolute_url }}">&larr; Newer Posts</a>
+		<li class="first">
+			<a href="{{ paginator.first_page_path | absolute_url }}" alt="Oldest Entries">&laquo</a>
+		</li>
+		<li class="prev">
+			<a href="{{ paginator.previous_page_path | absolute_url }}" alt="Older Entries">&larr;</a>
 		</li>
 		{% endif %}
+
+		{% if paginator.page_trail %}
+		{% for trail in paginator.page_trail %}
+		<li class="page{% if page.url == trail.path %} selected{% endif %}">
+			<a href="{{ trail.path | absolute_url }}">{{ trail.num }}</a>
+		</li>
+		{% endfor %}
+		{% endif %}
+
 		{% if paginator.next_page %}
 		<li class="next">
-			<a href="{{ paginator.next_page_path | absolute_url }}">Older Posts &rarr;</a>
+			<a href="{{ paginator.next_page_path | absolute_url }}" alt="Newer Entries">&rarr;</a>
+		</li>
+		<li class="last">
+			<a href="{{ paginator.last_page_path | absolute_url }}" alt="Newest Entries">&raquo;</a>
 		</li>
 		{% endif %}
 	</ul>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 8cce7fa..b0a7ed7 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -47,6 +47,15 @@ $theme-button-background: hsl($theme-hue, 100%, 30.0%);
 $theme-button-background-active: hsl($theme-hue, 100%, 50%);
 $theme-button-color: hsl($theme-hue, 0%, 100%);
 $theme-button-color-active: hsl($theme-hue, 100%, 100%);
+$theme-pagination-background: hsl($theme-hue, 50%, 10%);
+$theme-pagination-background-active: hsl($theme-hue, 100%, 50%);
+$theme-pagination-background-selected: hsl($theme-hue, 100%, 33%);
+$theme-pagination-shadow: 0px 3px 6px 1px hsla(0, 0, 0, 0.75);
+$theme-pagination-shadow-active: 0px 3px 6px 1px hsla(0, 0, 0, 0.75);
+$theme-pagination-shadow-selected: 0px 3px 6px 1px hsla(0, 0, 0, 0.75);
+$theme-pagination-color: $theme-content-color;
+$theme-pagination-color-active: hsl($theme-hue, 100%, 100%);
+$theme-pagination-color-selected: hsl($theme-hue, 100%, 50%);
 
 * {
 	box-sizing: border-box;
diff --git a/_sass/_content.scss b/_sass/_content.scss
index bfc256f..80c97a9 100644
--- a/_sass/_content.scss
+++ b/_sass/_content.scss
@@ -11,3 +11,4 @@ body > .content {
 @import "_blocks.scss";
 @import "_comments.scss";
 @import "_index.scss";
+@import "_pagination.scss";
diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss
new file mode 100644
index 0000000..8bbad9f
--- /dev/null
+++ b/_sass/_pagination.scss
@@ -0,0 +1,44 @@
+.pager {
+	display: block;
+	width: fit-content;
+	margin: 1rem auto;
+	padding: 0;
+	list-style: none inside;
+}
+
+.pager > li {
+	display: inline-block;
+	margin: 0 .25rem;
+	padding: 0;
+	font-weight: bold;
+	font-size: 1.333rem;
+	line-height: 1.333rem;
+	vertical-align: top;
+
+	background: $theme-pagination-background;
+	box-shadow: $theme-pagination-shadow;
+	color: $theme-pagination-color;
+}
+
+.pager > li:hover,
+.pager > li:focus {
+	background: $theme-pagination-background-active;
+	box-shadow: $theme-pagination-shadow-active;
+	color: $theme-pagination-color-active;
+}
+
+.pager > .selected {
+	background: $theme-pagination-background-selected;
+	box-shadow: $theme-pagination-shadow-selected;
+	color: $theme-pagination-color-selected;
+}
+
+.pager > li > a {
+	display: block;
+	margin: 0;
+	padding: 0;
+	text-align: center;
+	line-height: 2.5rem;
+	width: 5rem;
+	height: 2.5rem;
+}