kbenestad/mdcms
1
0
Fork 0
mirror of https://github.com/kbenestad/mdcms.git synced 2026-06-18 07:24:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix sidebar header and theme toggle colours on accent-coloured nav backgrounds

Browse source 
Site name, site description, and dark/light mode toggle all used content-area
colour variables (--font-colour, --font-colour-muted, --divider) which clash
when nav-background differs from the page background. All three now reference
the nav colour variables (--nav-link-colour, --nav-link-active-colour,
--nav-section-heading-colour) with graceful fallbacks, so they remain legible
on any nav background colour without requiring new theme.yml keys.

https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB
This commit is contained in:
Claude 2026-05-18 14:37:44 +00:00
parent f2bc729e40
commit 4e66024be0
No known key found for this signature in database
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/index.html
View file

@ -196,14 +196,14 @@ body {
font-family: var(--font-title);
font-weight: var(--font-title-weight);
font-size: 1.15rem;
color: var(--font-colour);
color: var(--nav-link-colour, var(--font-colour));
line-height: 1.3;
text-decoration: none;
display: block;
}
.sidebar-sitename:hover { color: var(--accent); }
.sidebar-sitename:hover { color: var(--nav-link-active-colour, var(--accent)); }
.sidebar-description { font-size: 0.8rem; color: var(--font-colour-muted); margin-top: 0.25rem; line-height: 1.4; }
.sidebar-description { font-size: 0.8rem; color: var(--nav-section-heading-colour, var(--font-colour-muted)); margin-top: 0.25rem; line-height: 1.4; }
/* Search */
.search-container { padding: 0.75rem 1.25rem; flex-shrink: 0; }
@ -341,9 +341,9 @@ body {
gap: 0.5rem;
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
color: var(--font-colour-muted);
color: var(--nav-section-heading-colour, var(--font-colour-muted));
background: none;
border: 1px solid var(--divider);
border: 1px solid color-mix(in srgb, var(--bg-nav) 70%, var(--nav-link-colour, var(--font-colour)));
border-radius: 6px;
cursor: pointer;
font-family: var(--font-body);
@ -351,7 +351,7 @@ body {
width: 100%;
justify-content: center;
}
.theme-toggle:hover { color: var(--font-colour); border-color: var(--font-colour-muted); }
.theme-toggle:hover { color: var(--nav-link-colour, var(--font-colour)); border-color: var(--nav-section-heading-colour, var(--font-colour-muted)); }
.theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
/* ═══════════════════════════════════════════