OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Sync: enhance header behavior for light hero backgrounds with dynamic class toggling

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 14:42:45 -05:00
parent 8926a9b071
commit a89f9067e2
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
theme/assets/css/main.css
View File

@@ -295,10 +295,12 @@ p:last-child { margin-bottom: 0; }
}
.logo-text strong { font-weight: 800; color: var(--color-accent); }
/* When header is over light background (inner pages) */
.page-header-light .site-header { background: var(--color-bg); box-shadow: var(--shadow-sm); }
.page-header-light .logo-text { color: var(--color-heading); }
.page-header-light .nav-menu a { color: var(--color-text); }
/* When header is over a light hero (set by JS) — unscrolled only */
.site-header.over-light-hero:not(.scrolled) .nav-menu a { color: var(--color-text); }
.site-header.over-light-hero:not(.scrolled) .nav-menu a:hover,
.site-header.over-light-hero:not(.scrolled) .nav-menu .current-menu-item > a { color: var(--color-primary); }
.site-header.over-light-hero:not(.scrolled) .logo-text { color: var(--color-heading); }
.site-header.over-light-hero:not(.scrolled) .nav-toggle span { background: var(--color-heading); }
/* Nav */
.site-nav { margin-left: auto; }

13
theme/assets/js/main.js
View File

@@ -17,6 +17,19 @@ document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('scroll', () => {
header.classList.toggle('scrolled', window.scrollY > 40);
}, { passive: true });
/* Detect whether the hero beneath the header has a light background.
.hero (homepage) is white in light mode; .page-hero stays dark.
Re-evaluate when the theme toggle changes data-theme. */
function updateHeroContrast() {
const isLight = document.documentElement.getAttribute('data-theme') !== 'dark';
const hasLightHero = isLight && document.querySelector('.hero') && !document.querySelector('.page-hero');
header.classList.toggle('over-light-hero', !!hasLightHero);
}
updateHeroContrast();
new MutationObserver(updateHeroContrast).observe(document.documentElement, {
attributes: true, attributeFilter: ['data-theme']
});
}
/* ── Mobile nav toggle ──────────────────────────────────── */