yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

Fix scroll-driven proof graphics

Browse source
This commit is contained in:
Yun Chan 2026-08-30 21:49:10 +09:00
parent dcb1415aaa
commit 3c39a1731d
4 changed files with 523 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

49
apps/site/src/components/Landing.astro
View file

@ -269,12 +269,30 @@ const copiedLabel = lang === "ko" ? "복사했어요" : "Copied";
}
.stage-list {
position: relative;
list-style: none;
margin: 0;
padding: 0;
padding: 0 0 0 var(--space-5);
border-top: var(--line-width) solid var(--line-inverse);
}
.stage-list::before,
.stage-list::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 2px;
pointer-events: none;
}
.stage-list::before { background: var(--line-inverse); }
.stage-list::after {
background: var(--accent);
transform-origin: top center;
scale: 1 1;
}
.stage-list li {
position: relative;
display: grid;
@ -297,24 +315,21 @@ const copiedLabel = lang === "ko" ? "복사했어요" : "Copied";
}
@supports (animation-timeline: view()) {
.stage-list {
view-timeline-name: --process-list;
view-timeline-axis: block;
}
@media (prefers-reduced-motion: no-preference) {
.stage-list li::after {
content: "";
position: absolute;
inset-inline-start: 0;
bottom: calc(var(--line-width) * -1);
width: 2.5rem;
height: var(--line-width);
background: var(--accent);
transform-origin: left center;
animation: stage-rail-register linear both;
animation-timeline: view(block);
animation-range: entry 12% cover 32%;
.stage-list::after {
animation: process-rail-fill linear both;
animation-timeline: --process-list;
animation-range: entry 0% cover 72%;
}
@keyframes stage-rail-register {
from { opacity: 0.25; transform: scaleX(0); }
to { opacity: 1; transform: scaleX(1); }
@keyframes process-rail-fill {
from { scale: 1 0; }
to { scale: 1 1; }
}
}
}
@ -458,6 +473,7 @@ const copiedLabel = lang === "ko" ? "복사했어요" : "Copied";
@media (prefers-reduced-motion: reduce) {
.audit-details summary svg { transition: none; }
.stage-list::after { animation: none; scale: 1 1; }
}
@media (max-width: 68rem) {
@ -489,6 +505,7 @@ const copiedLabel = lang === "ko" ? "복사했어요" : "Copied";
grid-template-columns: 2rem minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
}
.stage-list { padding-inline-start: var(--space-4); }
.stage-list p { grid-column: 2; }
}