From b2c2db846007d9137bae74a2a061d2cde07dc478 Mon Sep 17 00:00:00 2001
From: Derek Lewis <DerekNonGeneric@inf.is>
Date: Thu, 20 Aug 2026 23:18:12 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=F0=9F=94=A7=EF=BC=9Alift=20the=20n?=
 =?UTF-8?q?avbar=20links=20off=20the=20ink?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bootstrap's dark navbar draws its links at white 55%, which on our ink
is 6.04:1. It clears AA and still reads washed. 78% is 10.93:1.

That leaves the current page without a marker, since it was white among
greys. It takes a rule in the brand teal instead, sitting on the bar's
bottom edge, and the `aria-current` that belongs beside the class.

The sidebar is untouched: not `navbar-dark`, and already marked down
its left.

Signed-off-by: Derek Lewis <DerekNonGeneric@inf.is>
Assisted-by: Claude-Code:claude-opus-5
---
 _assets/styles/_nav.scss | 28 +++++++++++++++++++++++++++-
 _includes/header.liquid  |  6 ++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/_assets/styles/_nav.scss b/_assets/styles/_nav.scss
index 192c6a13e..a124cc69f 100644
--- a/_assets/styles/_nav.scss
+++ b/_assets/styles/_nav.scss
@@ -1,3 +1,7 @@
+// The fixed navbar's height: the brand mark plus the padding around it.
+// _custom.scss offsets the page by the same number.
+$navbar-height: 74px;
+
 .navbar-toggler svg {
   height: 24px;
 }
@@ -5,7 +9,7 @@
 .navbar-toggler-wrapper {
   display: flex;
   flex-direction: row-reverse;
-  height: 74px;
+  height: $navbar-height;
 }
 
 bento-sidebar {
@@ -21,3 +25,25 @@ bento-sidebar {
     border-left-color: $primary;
   }
 }
+
+// 78% white is 10.93:1 on the ink, and stays back from the current page.
+.navbar-dark {
+  --bs-navbar-color: rgb(255 255 255 / 78%);
+  --bs-navbar-hover-color: #fff;
+}
+
+// Full height, so the current-page rule lands on the bar's bottom edge. The
+// negative margin reaches out through the navbar's padding, and reads it
+// rather than repeating it.
+.navbar-dark .navbar-nav .nav-link {
+  display: flex;
+  align-items: center;
+  height: $navbar-height;
+  padding-block: 0;
+  margin-block: calc(var(--bs-navbar-padding-y) * -1);
+}
+
+// Marks the current page beside `aria-current`, so it is not colour alone.
+.navbar-dark .nav-link.active {
+  border-bottom: 2px solid $primary;
+}
diff --git a/_includes/header.liquid b/_includes/header.liquid
index 059bc517c..b17ebac8c 100644
--- a/_includes/header.liquid
+++ b/_includes/header.liquid
@@ -23,6 +23,9 @@
               <a
                 class='nav-link{% if body_classes contains link.class %} active{% endif %}'
                 href='/{{ link.permalink }}'
+                {% if body_classes contains link.class %}
+                  aria-current='page'
+                {% endif %}
               >
                 {{ link.text }}
               </a>
@@ -54,6 +57,9 @@
           <a
             class='nav-link{% if body_classes contains link.class %} active{% endif %}'
             href='/{{ link.permalink }}'
+            {% if body_classes contains link.class %}
+              aria-current='page'
+            {% endif %}
           >
             {{ link.text }}
           </a>