xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keep chapter numerals static and limit scroll reveal to small cards

Browse Source
This commit is contained in:
LucaP
2026-10-10 14:18:58 +03:00
parent d16ce88639
commit 8f95fda49e
1 changed files with 6 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/styles/nightshift.css
View File

@@ -126,9 +126,9 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti
.project-stage__lead > h2::before { .project-stage__lead > h2::before {
content: '0' counter(chapter); content: '0' counter(chapter);
position: absolute; position: absolute;
inset-block-end: 100%; inset-block-start: 50%;
inset-inline-start: 0; inset-inline-end: 0;
margin-block-end: 0.15em; translate: 0 -50%;
font: 700 var(--step-4)/0.85 var(--mono); font: 700 var(--step-4)/0.85 var(--mono);
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: transparent; color: transparent;
@@ -156,26 +156,15 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
@supports (animation-timeline: view()) { @supports (animation-timeline: view()) {
.portfolio-section > h2::before, .project-card {
.project-stage__lead > h2::before {
animation: ns-drift linear both;
animation-timeline: view();
animation-range: entry 0% cover 60%;
}
.project-card,
.project-case-study {
animation: ns-rise linear both; animation: ns-rise linear both;
animation-timeline: view(); animation-timeline: view();
animation-range: entry 0% entry 60%; animation-range: entry 0% entry 40%;
} }
} }
} }
@keyframes ns-drift {
from { transform: translateX(-12%); opacity: 0; }
to { transform: none; opacity: 1; }
}
@keyframes ns-rise { @keyframes ns-rise {
from { transform: translateY(28px); opacity: 0.2; } from { transform: translateY(28px); opacity: 0.45; }
to { transform: none; opacity: 1; } to { transform: none; opacity: 1; }
} }