From df34aec7f21bb713e1b801be87769b0284b3ccb4 Mon Sep 17 00:00:00 2001
From: Oliver Ladner <waste@lugh.ch>
Date: Thu, 22 May 2025 12:14:30 +0200
Subject: [PATCH] feat: better navigation

---
 static/css/out.css        | 33 ++++++++++++++++--
 templates/pagination.html | 70 +++++++++++++++++++++++----------------
 2 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/static/css/out.css b/static/css/out.css
index fba8b564..02c3aaad 100644
--- a/static/css/out.css
+++ b/static/css/out.css
@@ -1331,14 +1331,18 @@ code {
   grid-template-columns: repeat(9, minmax(0, 1fr));
 }
 
-.grid-cols-\[max-content_max-content_max-content\] {
-  grid-template-columns: max-content max-content max-content;
+.grid-cols-\[max-content_max-content_max-content_max-content\] {
+  grid-template-columns: max-content max-content max-content max-content;
 }
 
 .grid-cols-\[max-content_max-content_max-content_max-content_max-content\] {
   grid-template-columns: max-content max-content max-content max-content max-content;
 }
 
+.grid-cols-\[max-content_max-content_max-content_max-content_max-content_max-content\] {
+  grid-template-columns: max-content max-content max-content max-content max-content max-content;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1379,6 +1383,11 @@ code {
   background-color: rgb(250 244 237 / var(--tw-bg-opacity, 1));
 }
 
+.bg-rp-dawn-gold {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 157 52 / var(--tw-bg-opacity, 1));
+}
+
 .bg-rp-dawn-overlay {
   --tw-bg-opacity: 1;
   background-color: rgb(242 233 225 / var(--tw-bg-opacity, 1));
@@ -1389,6 +1398,16 @@ code {
   background-color: rgb(255 250 243 / var(--tw-bg-opacity, 1));
 }
 
+.bg-rp-dawn-subtle {
+  --tw-bg-opacity: 1;
+  background-color: rgb(121 117 147 / var(--tw-bg-opacity, 1));
+}
+
+.bg-rp-dawn-muted {
+  --tw-bg-opacity: 1;
+  background-color: rgb(152 147 165 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -2246,6 +2265,11 @@ code {
     background-color: rgb(42 39 63 / var(--tw-bg-opacity, 1));
   }
 
+  .dark\:bg-rp-moon-pine {
+    --tw-bg-opacity: 1;
+    background-color: rgb(62 143 176 / var(--tw-bg-opacity, 1));
+  }
+
   .dark\:text-rp-moon-foam {
     --tw-text-opacity: 1;
     color: rgb(156 207 216 / var(--tw-text-opacity, 1));
@@ -2270,4 +2294,9 @@ code {
     --tw-text-opacity: 1;
     color: rgb(224 222 244 / var(--tw-text-opacity, 1));
   }
+
+  .dark\:text-rp-moon-surface {
+    --tw-text-opacity: 1;
+    color: rgb(42 39 63 / var(--tw-text-opacity, 1));
+  }
 }
diff --git a/templates/pagination.html b/templates/pagination.html
index b6ef2dd3..933904be 100644
--- a/templates/pagination.html
+++ b/templates/pagination.html
@@ -1,8 +1,9 @@
-{% if DEFAULT_PAGINATION %} {% set first_page = articles_paginator.page(1) %} {%
-set last_page = articles_paginator.page(articles_paginator.num_pages) %}
+{% if DEFAULT_PAGINATION %}
+{% set first_page = articles_paginator.page(1) %}
+{% set last_page = articles_paginator.page(articles_paginator.num_pages) %}
 <nav class="flex justify-center items-center">
-        {% if articles_page.has_previous() %}
-    <ul class="list-none inline-grid grid-cols-[max-content_max-content_max-content_max-content_max-content] border-t-2 border-rp-dawn-overlay dark:border-rp-moon-overlay m-4 p-4">
+    {% if articles_page.has_previous() %}
+    <ul class="list-none inline-grid grid-cols-[max-content_max-content_max-content_max-content_max-content_max-content] border-t-2 border-rp-dawn-overlay dark:border-rp-moon-overlay m-4 p-4">
         <span class="p-1">
             <li class="text-center bg-rp-dawn-overlay dark:bg-rp-moon-overlay w-12">
                 <a
@@ -12,34 +13,47 @@ set last_page = articles_paginator.page(articles_paginator.num_pages) %}
                 ><tt>&laquo;</tt></a>
             </li>
         </span>
-        {% else %}
-        <!--If we are on the first page, there's no previous links, so reduce grid sizing-->
-    <ul class="list-none inline-grid grid-cols-[max-content_max-content_max-content] border-t-2 border-rp-dawn-overlay dark:border-rp-moon-overlay m-4 p-4">
-        {% endif %}
+    {% else %}
+    <!--If we are on the first page, there's no previous links, so reduce grid sizing-->
+    <ul class="list-none inline-grid grid-cols-[max-content_max-content_max-content_max-content_max-content] border-t-2 border-rp-dawn-overlay dark:border-rp-moon-overlay m-4 p-4">
+    {% endif %}
+        <!-- Current page -->
         <span class="p-1">
-            <li class="text-center">
-                Page {{ articles_page.number }} of {{ articles_paginator.num_pages }}
+            <li class="text-center bg-rp-dawn-gold dark:bg-rp-moon-pine dark:text-rp-moon-surface w-8 font-bold">
+                    {{ articles_page.number }}
             </li>
         </span>
         {% if articles_page.has_next() %}
-        <span class="p-1">
-            <li class="text-center bg-rp-dawn-overlay dark:bg-rp-moon-overlay w-8">
-                <a
-                    class="block no-underline hover:no-underline"
-                    href="{{ SITEURL }}/{{ articles_next_page.url }}"
-                    title="Go to page {{ articles_page.next_page_number() }}"
-                    >{{ articles_page.next_page_number() }}</a>
-            </li>
-        </span>
-        <span class="p-1">
-            <li class="text-center bg-rp-dawn-overlay dark:bg-rp-moon-overlay w-12">
-                <a
-                    class="block no-underline hover:no-underline align-top"
-                    href="{{ SITEURL }}/{{ articles_next_page.url }}"
-                    title="Go to the next page"
-                ><tt>&raquo;</tt></a>
-            </li>
-        </span>
+          <span class="p-1">
+              <li class="text-center bg-rp-dawn-overlay dark:bg-rp-moon-overlay w-8">
+                  <a
+                      class="block no-underline hover:no-underline"
+                      href="{{ SITEURL }}/{{ articles_next_page.url }}"
+                      title="Go to page {{ articles_page.next_page_number() }}"
+                      >{{ articles_page.next_page_number() }}</a>
+              </li>
+          </span>
+          <span class="p-1">
+              …
+          </span>
+          <span class="p-1">
+              <li class="text-center bg-rp-dawn-overlay dark:bg-rp-moon-overlay w-8">
+                  <a
+                      class="block no-underline hover:no-underline"
+                      href="{{ SITEURL }}/{{ last_page.url }}"
+                      title="Go to last page"
+                      >{{ articles_paginator.num_pages }}</a>
+              </li>
+          </span>
+          <span class="p-1">
+              <li class="text-center bg-rp-dawn-overlay dark:bg-rp-moon-overlay w-12">
+                  <a
+                      class="block no-underline hover:no-underline align-top"
+                      href="{{ SITEURL }}/{{ articles_next_page.url }}"
+                      title="Go to the next page"
+                  ><tt>&raquo;</tt></a>
+              </li>
+          </span>
         {% endif %}
     </ul>
 </nav>