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>
This commit is contained in:
Kristian Benestad 2026-05-19 13:25:29 +07:00 committed by GitHub
parent cef2318210
commit c1d83b4bd6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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;
}