/* ══════════════════════════════════════════════════════════════
tandoco · vita skeletons
──────────────────────────────────────────────────────────────
Placeholder shapes that hold a content area open while its data
is still travelling, so a slow phone shows "something's coming"
instead of an empty hole that snaps full a few seconds later.
Vita rules this follows:
· warm paper base with a GOLD-tinted sweep (never grey)
· the same radii as real vita cards (22px card, 50% disc, 999px pill)
· one slow, soft sweep — no strobing, no pulsing opacity
· prefers-reduced-motion kills the sweep, keeps the shape
Naming: every class here is prefixed `tsk-` and every attribute
`data-sk-`. The bare `.sk` class was NOT used on purpose — the
homepage blog rail already owns it (styles/home.css `.blog-skel .sk`)
and a collision would double up two different shimmers.
Markup contract (the script does the rest — see scripts/skeleton.js):
…
![]()
…
![]()
is a replaced element and can't carry a
::before pseudo-element:
A · a WRAPPER around the image → sweep on a ::before, photo fades up
B · the ![]()
ITSELF → sweep painted as the image's own
background, which the picture covers the instant it decodes.
Case B adds nothing but a background, so it can't move layout — that's
what makes the automatic mode safe. */
/* A · wrapper */
[data-sk-photo]:not(img){position:relative;background:var(--tsk-base);}
[data-sk-photo]:not(img).tsk-photo-wait::before{
content:"";
position:absolute;inset:0;z-index:0;
background:linear-gradient(100deg,
transparent 25%,
var(--tsk-sweep) 48%,
var(--tsk-tint) 56%,
transparent 76%);
transform:translateX(-100%);
animation:tsk-sweep var(--tsk-dur) cubic-bezier(.4,0,.25,1) infinite;
pointer-events:none;
}
/* the photo fades up instead of popping in */
[data-sk-photo]:not(img) > img{transition:opacity .45s ease;}
[data-sk-photo]:not(img).tsk-photo-wait > img{opacity:0;}
/* B · the image itself */
img.tsk-photo-wait{
/* An ![]()
with no pixels yet renders its alt text inside the box — so a
shimmering placeholder ends up with "swole roll" or "cinnacloud-web"
printed across it, which reads as a raw file name rather than as
loading. Hide the text while we're waiting; it comes straight back
when the class is dropped, so screen readers and broken-image
fallbacks are untouched. */
font-size:0;
color:transparent;
text-indent:-9999px;
background-color:var(--tsk-base);
background-image:linear-gradient(100deg,
var(--tsk-base) 24%,
var(--tsk-sweep) 47%,
var(--tsk-tint) 55%,
var(--tsk-base) 76%);
background-size:230% 100%;
background-repeat:no-repeat;
animation:tsk-bg var(--tsk-dur) cubic-bezier(.4,0,.25,1) infinite;
}
@keyframes tsk-bg{
0%{background-position:160% 0;}
60%,100%{background-position:-60% 0;}
}
/* a photo that never arrived — keep the calm cream box, and swap the
browser's torn-image glyph for a transparent pixel. `content` on a
replaced element is what does the swap; where it isn't supported we
simply fall back to today's behaviour. The alt attribute is untouched,
so screen readers still get the description. */
img.tsk-photo-failed{
background-color:var(--tsk-base);
font-size:0;color:transparent;
content:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
object-fit:cover;
}
/* ── respect the setting ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
.tsk::after,[data-sk-photo]:not(img).tsk-photo-wait::before{animation:none;opacity:.5;}
img.tsk-photo-wait{animation:none;background-image:none;}
[data-sk-item].tsk-done{transition:none;}
[data-sk-photo]:not(img) > img{transition:none;}
}