From 1f2e84658decef2eb2699a7c45eaf7320af74ddb Mon Sep 17 00:00:00 2001 From: Michael Victory Date: Wed, 17 Jun 2026 11:09:38 -0700 Subject: [PATCH] Flip expanded menu theme at the text's leading edge, not panel midpoint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The mobile menu links are top-anchored, so the panel's vertical midpoint sits well below them. Triggering the light/dark flip at that midpoint meant the dark boundary had already risen past the text before the switch fired. Probe the lowest link's bottom edge instead so the fade lands as the boundary reaches the text — matching how the thin nav bar flips at its own content. Co-Authored-By: Claude Opus 4.8 --- index.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d3bbc51..f8bc2e7 100644 --- a/index.html +++ b/index.html @@ -266,8 +266,16 @@ var nr = nav.getBoundingClientRect(); nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2)); if (menu && menu.classList.contains('open')) { - var mr = menu.getBoundingClientRect(); - menu.classList.toggle('on-dark', darkBehind((mr.top + mr.bottom) / 2)); + // Flip the menu when the dark boundary reaches its TEXT — the lowest link's + // leading edge — not the panel's midpoint. The links are top-anchored, so the + // midpoint sits well below them: by the time dark reached it, the text had + // already been over dark. Probing the lowest link makes the switch land as the + // boundary enters the text, just like the (thin) nav bar flips at its content. + var links = menu.querySelectorAll('a'); + var probe = links.length + ? links[links.length - 1].getBoundingClientRect().bottom + : (function () { var mr = menu.getBoundingClientRect(); return (mr.top + mr.bottom) / 2; })(); + menu.classList.toggle('on-dark', darkBehind(probe)); } } updateNavTheme();