xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: clear the plates before the headings when a sign takes the frame

Browse Source
This commit is contained in:
LucaP
2026-10-11 01:28:03 +03:00
parent 6f8449d39b
commit 06c7592f9d
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/styles/gantry.css
View File

@@ -729,28 +729,30 @@ html .drive-controls__audio-status {
/* ---------- The interlude under the gantry ---------- */ /* ---------- The interlude under the gantry ---------- */
/* While a sign approaches (environment.ts sets data-interlude='on'), the /* While a sign approaches (environment.ts sets data-interlude='on'), the
reading plates step up and out in 180 ms, so the road and the sign have reading plates step up and out in 160 ms (front-loaded, so most of the
the frame to themselves; the headings follow once the plates are gone, so plate is gone in the first 60 ms) and the road and the sign have the frame
a departing plate never ghosts over an arriving title. Then ('rise', about to themselves; the headings follow from 60 ms and are gone by 190 ms, so a
departing plate never ghosts over a title, and the chapters a navigator
scroll passes are already dark when they go by. Then ('rise', about
180 ms before the sign docks) they come back up from below in sequence. 180 ms before the sign docks) they come back up from below in sequence.
Headings only fade: journey and audio measure them. */ Headings only fade: journey and audio measure them. */
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
html[data-interlude='on'] .reading-stage .portfolio-main > * > * { html[data-interlude='on'] .reading-stage .portfolio-main > * > * {
opacity: 0; opacity: 0;
transition: opacity 200ms cubic-bezier(0.5, 0, 0.75, 0) 160ms; transition: opacity 130ms cubic-bezier(0.5, 0, 0.75, 0) 60ms;
} }
html[data-interlude='on'] .reading-stage .portfolio-main > * > :not(h1, h2, :has(h1, h2)) { html[data-interlude='on'] .reading-stage .portfolio-main > * > :not(h1, h2, :has(h1, h2)) {
transform: translateY(-24px); transform: translateY(-24px);
transition: transition:
opacity 180ms cubic-bezier(0.5, 0, 0.75, 0), opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
transform 180ms cubic-bezier(0.5, 0, 0.75, 0); transform 160ms cubic-bezier(0.5, 0, 0.75, 0);
} }
/* The exit tag's strike-on animation restarts as the plates return. */ /* The exit tag's strike-on animation restarts as the plates return. */
html[data-interlude='on'] .reading-stage .portfolio-section::before, html[data-interlude='on'] .reading-stage .portfolio-section::before,
html[data-interlude='on'] .reading-stage .portfolio-section[data-exit='08']::after { html[data-interlude='on'] .reading-stage .portfolio-section[data-exit='08']::after {
opacity: 0; opacity: 0;
animation: none; animation: none;
transition: opacity 180ms cubic-bezier(0.5, 0, 0.75, 0); transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
} }
html[data-interlude='rise'] .reading-stage .portfolio-section[data-exit='08']::after, html[data-interlude='rise'] .reading-stage .portfolio-section[data-exit='08']::after,
html[data-interlude='rise'] .reading-stage .portfolio-main > .portfolio-section > *, html[data-interlude='rise'] .reading-stage .portfolio-main > .portfolio-section > *,