dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reveal the editorial page top-to-bottom: wrap every block and cascade the first screenful

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 08:13:29 +00:00
commit 134bc9ede0
4 changed files with 74 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/app/globals.css
View file

@ -33,6 +33,8 @@
--fill: rgba(235, 219, 178, 0.035);
--fill-strong: rgba(235, 219, 178, 0.07);
--ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Beats page.css's :root when the editorial theme is active. */
@ -230,19 +232,19 @@ html[data-device="phone"] .desktop-toggle {
Motion — scroll reveals only
------------------------------------------------------------------ */
/* Visible by default: Reveal only hides elements that start below the fold, so
above-the-fold content (the hero) is never hidden while waiting for JS. */
/* Scroll reveal. Hidden until `.is-in` lands, and every block on the editorial
page is wrapped, so the page fills in from top to bottom: the first screenful
cascades in document order on load, everything else reveals as it scrolls in.
A failed JS bundle leaves the page visible via the <noscript> rule in layout. */
.reveal {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition:
opacity 0.55s ease-out,
transform 0.55s ease-out;
opacity 0.8s var(--ease-cinematic),
transform 0.8s var(--ease-cinematic);
transition-delay: var(--delay, 0ms);
}
.reveal.reveal-armed {
opacity: 0;
transform: translate3d(0, 14px, 0);
}
.reveal.reveal-armed.is-in {
.reveal.is-in {
opacity: 1;
transform: none;
}