Merge nucleic/olive-north-lynx-rstf into main
Mirrored from corpo 39013c0.
This commit is contained in:
+9
-44
@@ -611,52 +611,15 @@ const canonical = new URL('/', Astro.site);
|
|||||||
animation: drift-up 11s 1.5s ease-in-out backwards;
|
animation: drift-up 11s 1.5s ease-in-out backwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The swipe: a soft blade of the palette's pale green crossing the line left to
|
/* The swipe is a soft pale-green blade crossing only “runs.” once as the
|
||||||
right — the way the sentence reads, the way the verb points — then resting for
|
second line arrives. The pseudo-element duplicates the verb, clips its
|
||||||
the balance of the cycle. What separates this from a loading shimmer is
|
gradient to those glyphs, and is intentionally held by .runs so “that”
|
||||||
everything quantitative: the light is the gradient's own mint rather than
|
stays static. Its transparent parked positions also leave reduced-motion
|
||||||
white, it happens exactly once — a single ~0.65s dash as the line arrives,
|
rendering unchanged. */
|
||||||
never repeating — and the band is asymmetric — a long dim tail behind a
|
.line-runs .runs::after {
|
||||||
crisp leading edge — so it reads as something moving through, not a surface
|
content: 'runs.';
|
||||||
effect.
|
|
||||||
Over "that" (flat secondary grey) the glint is faint; over the "runs."
|
|
||||||
gradient it lands hardest on the dark tail end, so the pass finishes brightest
|
|
||||||
at the period — the light arrives where the sentence does.
|
|
||||||
|
|
||||||
It rides a pseudo-element that duplicates the line's text and clips the band
|
|
||||||
to the glyphs. A pseudo because the front must cross both words at one screen
|
|
||||||
speed, and background-position percentages are relative to each element's own
|
|
||||||
width — separate backgrounds on .that and .runs cannot share a speed. The
|
|
||||||
content string must match the markup ("that" space "runs.") and the
|
|
||||||
padding-right must match .word's, or the duplicate lays out on different
|
|
||||||
lines-breaks than the text it overlays. Accessibility is already handled
|
|
||||||
above this: the h1's aria-label replaces every descendant, this copy
|
|
||||||
included.
|
|
||||||
|
|
||||||
The band is a plateau, not a spike — alpha holds at its peak for ~14% of the
|
|
||||||
image — and its white is set above the brightest glyph pixel. Both are
|
|
||||||
measured corrections: a single peak stop averaged away to a couple of RGB
|
|
||||||
levels across a bucket of glyphs, and a mint as bright as the "runs."
|
|
||||||
gradient's own start (green 234) mathematically cannot lift it — a normal
|
|
||||||
blend brightens in proportion to the distance left to white. The dip over
|
|
||||||
that bright stretch never fully goes away; it just means the light lands
|
|
||||||
hardest where the type is darkest, which is what a real glint over a
|
|
||||||
gradient does. The pass ends on the darkest glyphs, so the period is where
|
|
||||||
the light finishes brightest.
|
|
||||||
|
|
||||||
Geometry: the image is 60% of the line's width, so the position percentage
|
|
||||||
maps offset = 0.4 x width x p. Parked at -115% only the image's trailing
|
|
||||||
transparent region (past 71%) can overlap the line — off-glyph by
|
|
||||||
construction, which is what reduced-motion needs: the global animation: none
|
|
||||||
leaves the pseudo at this specified position and the line renders exactly as
|
|
||||||
it did before this existed. 235% clears the tail past the right edge; when
|
|
||||||
the single run ends, the value reverts to the park — both states are
|
|
||||||
invisible, so there is nothing to fill. */
|
|
||||||
.line-runs .word::after {
|
|
||||||
content: 'that runs.';
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
padding-right: 0.06em;
|
|
||||||
color: transparent;
|
color: transparent;
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(
|
||||||
100deg,
|
100deg,
|
||||||
@@ -690,6 +653,8 @@ const canonical = new URL('/', Astro.site);
|
|||||||
}
|
}
|
||||||
|
|
||||||
.line-runs .runs {
|
.line-runs .runs {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
background: linear-gradient(100deg, #cdead9 8%, #2f8f5c 82%);
|
background: linear-gradient(100deg, #cdead9 8%, #2f8f5c 82%);
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
|
|||||||
Reference in New Issue
Block a user