From c1d83b4bd6dd8c4997439d4bf3bec48eae8b62bb Mon Sep 17 00:00:00 2001
From: kbenestad <kristian@benestad.net>
Date: Tue, 19 May 2026 13:25:29 +0700
Subject: [PATCH] Fix category picker and hamburger using page colours instead
 of nav colours (#22)

Both elements render against --bg-nav but were using --font-colour (the page
text colour). Switch to --nav-link-colour / --nav-section-heading-colour /
--nav-link-active-colour so they remain legible when nav-background is set to
a colour that contrasts with the page text colour (e.g. dark blue nav with
white nav-link text).

https://claude.ai/code/session_01MA8V1FvCmxjkCYyTxseaxB

Co-authored-by: Claude <noreply@anthropic.com>
---
 app/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/index.html b/app/index.html
index c813133..ab6d934 100644
--- a/app/index.html
+++ b/app/index.html
@@ -448,7 +448,7 @@ body {
   border: none;
   cursor: pointer;
   padding: 0.4rem;
-  color: var(--font-colour);
+  color: var(--nav-link-colour, var(--font-colour));
   z-index: 150;
 }
 .hamburger svg { width: 22px; height: 22px; }
@@ -627,17 +627,17 @@ body {
   padding: 0.55rem 0.85rem;
   cursor: pointer;
   font-size: 0.88rem;
-  color: var(--font-colour);
+  color: var(--nav-link-colour, var(--font-colour));
   border-bottom: 1px solid var(--divider);
   transition: background 0.1s;
 }
 .category-option:last-child { border-bottom: none; }
 .category-option:hover { background: var(--nav-hover-bg); }
-.category-option.active { background: var(--nav-active-bg); color: var(--accent); font-weight: 600; }
+.category-option.active { background: var(--nav-active-bg); color: var(--nav-link-active-colour, var(--accent)); font-weight: 600; }
 .category-option .secondary {
   display: block;
   font-size: 0.75rem;
-  color: var(--font-colour-muted);
+  color: var(--nav-section-heading-colour, var(--font-colour-muted));
   margin-top: 0.15rem;
 }