m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(story): nav title hidden on load, DM Serif Display typography

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
Mischa
2026-06-20 11:24:36 +02:00
parent 326f28e4ac
commit f4ee63282b
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/style.css
+4 -3
View File
@@ -1200,9 +1200,10 @@ body::after {
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
font-family: var(--font-ui); font-family: var(--font-display);
font-size: var(--text-sm); font-size: var(--text-lg);
font-weight: 500; font-weight: 400;
letter-spacing: -0.01em;
color: var(--color-ink); color: var(--color-ink);
white-space: nowrap; white-space: nowrap;
max-width: 40%; max-width: 40%;
themes/intotheeast/templates/story.html.twig
+7 -1
View File
@@ -93,8 +93,14 @@
var navTitle = document.getElementById('story-nav-title'); var navTitle = document.getElementById('story-nav-title');
var heroContent = document.querySelector('.story-hero__content'); var heroContent = document.querySelector('.story-hero__content');
if (!navTitle || !heroContent) return; if (!navTitle || !heroContent) return;
var hasBeenVisible = false;
new IntersectionObserver(function (entries) { 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); }, { threshold: 0 }).observe(heroContent);
})(); })();