feat: better navigation

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));
+  }
 }

templates/base.html

@@ -58,7 +58,7 @@
         <header>
           <div id="skiptocontent"><a href="#content">skip to main content</a></div>
           <hgroup>
-            <h1 class="z-20 relative text-4xl md:text-7xl font-bold text-rp-dawn-foam"><a class="no-underline text-rp-dawn-pine dark:text-rp-moon-foam" href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
+            <h1 class="z-20 relative text-4xl md:text-7xl font-bold text-rp-dawn-foam"><a class="no-underline hover:no-underline text-rp-dawn-pine dark:text-rp-moon-foam" href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
             {% if SITESUBTITLE %}
             <h2 class="z-10 bg-gradient-to-r from-rp-dawn-gold from-10% to-rp-dawn-pine to-90% absolute -rotate-3 text-base -mt-11 ml-14 md:text-xl text-rp-dawn-overlay dark:text-rp-moon-highlight-med"><tt style="font-family: 'C64 Pro Mono'; letter-spacing: -0.2em;">{{ SITESUBTITLE }}</tt></h2>
             {% endif %}

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>