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 ---------- */
/* 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
the frame to themselves; the headings follow once the plates are gone, so
a departing plate never ghosts over an arriving title. Then ('rise', about
reading plates step up and out in 160 ms (front-loaded, so most of the
plate is gone in the first 60 ms) and the road and the sign have the frame
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.
Headings only fade: journey and audio measure them. */
@media (prefers-reduced-motion: no-preference) {
html[data-interlude='on'] .reading-stage .portfolio-main > * > * {
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)) {
transform: translateY(-24px);
transition:
opacity 180ms cubic-bezier(0.5, 0, 0.75, 0),
transform 180ms cubic-bezier(0.5, 0, 0.75, 0);
opacity 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
transform 160ms cubic-bezier(0.5, 0, 0.75, 0);
}
/* 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[data-exit='08']::after {
opacity: 0;
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-main > .portfolio-section > *,