From f4ee63282b8caaf694e7a0c84b769281380dab2a Mon Sep 17 00:00:00 2001 From: Mischa Date: Sat, 20 Jun 2026 11:24:36 +0200 Subject: [PATCH] fix(story): nav title hidden on load, DM Serif Display typography MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Was visible on load because story-hero__content starts below the viewport fold (bottom:18% of 140vh hero) — IO fired immediately as 'not intersecting'. Fixed with hasBeenVisible flag: nav title only appears after the element has entered then exited the viewport. Typography changed from DM Sans/500 to DM Serif Display/400 at --text-lg (1.375rem) with -0.01em tracking — same face as the hero title, scaled down for the 60px nav bar. Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr --- themes/intotheeast/css/style.css | 7 ++++--- themes/intotheeast/templates/story.html.twig | 8 +++++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index 26826e4..e7526af 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -1200,9 +1200,10 @@ body::after { left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); - font-family: var(--font-ui); - font-size: var(--text-sm); - font-weight: 500; + font-family: var(--font-display); + font-size: var(--text-lg); + font-weight: 400; + letter-spacing: -0.01em; color: var(--color-ink); white-space: nowrap; max-width: 40%; diff --git a/themes/intotheeast/templates/story.html.twig b/themes/intotheeast/templates/story.html.twig index cce4be0..271b011 100644 --- a/themes/intotheeast/templates/story.html.twig +++ b/themes/intotheeast/templates/story.html.twig @@ -93,8 +93,14 @@ var navTitle = document.getElementById('story-nav-title'); var heroContent = document.querySelector('.story-hero__content'); if (!navTitle || !heroContent) return; + var hasBeenVisible = false; new IntersectionObserver(function (entries) { - navTitle.classList.toggle('is-visible', !entries[0].isIntersecting); + if (entries[0].isIntersecting) { + hasBeenVisible = true; + navTitle.classList.remove('is-visible'); + } else if (hasBeenVisible) { + navTitle.classList.add('is-visible'); + } }, { threshold: 0 }).observe(heroContent); })();