m038andClaude Opus 4.8
d7a772ae02
- Header: offset the 4px green ::before bar so content centres in the visible dark area, not the geometric box (fixes wordmark/nav/icon sitting ~2px high — the root cause behind the whole alignment saga) - Mobile (≤768px): collapse nav into a slide-down hamburger panel (standalone js/nav.js); inline nav retained on desktop - Nav: use the display serif in sentence case so it shares the wordmark's anatomy and aligns naturally (no optical nudge needed) - Typography tokens: three-tier display tracking (--tracking-display, --tracking-display-sm), --tracking-caps, --color-error, paper-glass overlays, --text-story/--leading-story; applied across components - trip-dates: move inline styles to a class Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BftDn9vu9SonFAY4vxu4uk
38 lines
1.4 KiB
JavaScript
38 lines
1.4 KiB
JavaScript
/* Mobile nav: hamburger toggle for the slide-down menu panel.
|
|
Standalone (not part of the esbuild bundle) — a small progressive
|
|
enhancement for the header. Loaded via base.html.twig. */
|
|
(function () {
|
|
var toggle = document.querySelector('.nav-toggle');
|
|
var nav = document.getElementById('site-nav');
|
|
if (!toggle || !nav) return;
|
|
|
|
function setOpen(open) {
|
|
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
|
toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
|
|
nav.setAttribute('data-open', open ? 'true' : 'false');
|
|
}
|
|
|
|
toggle.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
setOpen(toggle.getAttribute('aria-expanded') !== 'true');
|
|
});
|
|
|
|
/* Tapping a link closes the panel before navigating. */
|
|
nav.addEventListener('click', function (e) {
|
|
if (e.target.closest('a')) setOpen(false);
|
|
});
|
|
|
|
/* Close on outside tap or Escape. */
|
|
document.addEventListener('click', function (e) {
|
|
if (!nav.contains(e.target) && !toggle.contains(e.target)) setOpen(false);
|
|
});
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') setOpen(false);
|
|
});
|
|
|
|
/* Reset to closed if the viewport grows back to desktop. */
|
|
window.addEventListener('resize', function () {
|
|
if (window.innerWidth > 768) setOpen(false);
|
|
});
|
|
})();
|