From 3673294d287acc7774813eb4efd77326af013f32 Mon Sep 17 00:00:00 2001
From: Leilukin <contact@leilukin.com>
Date: Sat, 20 Apr 2024 17:23:05 +0800
Subject: [PATCH] Style pagination

---
 src/_includes/global/pagination-oldnew.njk | 89 ++++++++++++++++++----
 1 file changed, 76 insertions(+), 13 deletions(-)

diff --git a/src/_includes/global/pagination-oldnew.njk b/src/_includes/global/pagination-oldnew.njk
index 098f06b6..6ae65f08 100644
--- a/src/_includes/global/pagination-oldnew.njk
+++ b/src/_includes/global/pagination-oldnew.njk
@@ -1,13 +1,76 @@
-<p class="center-text">
-    {% if pagination.href.previous %}
-        <a href=" {{ pagination.href.previous }}">Newer</a>
-    {% else %}
-        Newer
-    {% endif %}
-    /
-    {% if pagination.href.next %}
-        <a href=" {{ pagination.href.next }}">Older</a>
-    {% else %}
-        Older
-    {% endif %}
-</p>
+<nav aria-label="pagination" class="pagination__wrapper">
+    <ul class="pagination">
+        <li>
+            {% if pagination.href.first %}
+                <a href=" {{ pagination.href.first }}">Newest</a>
+            {% else %}
+                Newest
+            {% endif %}
+        </li>
+        <li>
+            {% if pagination.href.previous %}
+                <a href=" {{ pagination.href.previous }}">Newer</a>
+            {% else %}
+                Newer
+            {% endif %}
+        </li>
+        <li>
+             {% if pagination.href.next %}
+                <a href=" {{ pagination.href.next }}">Older</a>
+            {% else %}
+                Older
+            {% endif %}
+        </li>
+        <li>
+            {% if pagination.href.last %}
+                <a href=" {{ pagination.href.last }}">Oldest</a>
+            {% else %}
+                Oldest
+            {% endif %}
+        </li>
+    </ul>
+</nav>
+
+<style>
+    .pagination__wrapper {
+        display: grid;
+        place-content: center;
+        margin-top: 1.5em;
+    }
+
+    .pagination {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .pagination li {
+        text-align: center;
+        padding: 0.3em 0.7em;
+        color: var(--clr-link-hover);
+        background-color: var(--clr-code-bg);
+    }
+
+    .pagination li:has(a) {
+        background-color: var(--clr-title-border);
+    }
+
+    .pagination li:has(a):hover {
+        cursor: pointer;
+        background-color: var(--clr-link-hover);
+    }
+
+    .pagination li:has(a):focus-within {
+        outline: 0.2em solid var(--clr-title-border);
+        outline-offset: 0.15em;
+    }
+
+    .pagination li a {
+        color: var(--clr-link-btn-hover);
+        text-decoration: none;
+    }
+</style>
\ No newline at end of file