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

fix: apply review findings; make ops strip text CSS-generated

Browse Source
This commit is contained in:
LucaP
2026-10-10 14:28:16 +03:00
parent 8f95fda49e
commit 7280133fed
4 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/styles/nightshift.css
View File

@@ -41,8 +41,10 @@ body::after {
text-transform: uppercase;
pointer-events: none;
}
.ops-strip strong { color: var(--text); font-weight: 600; }
.ops-strip__item::before { content: attr(data-label) ' '; }
.ops-strip__item::after { content: attr(data-value); color: var(--text); font-weight: 600; }
.ops-strip__sep { opacity: 0.4; }
.ops-strip__sep::before { content: '/'; }
.ops-strip__dot {
width: 7px;
height: 7px;
@@ -90,7 +92,7 @@ html[data-headlight='on'] .reading-viewport::before {
content: '';
position: fixed;
inset: 0;
z-index: var(--z-atmosphere);
z-index: -1;
pointer-events: none;
background: radial-gradient(420px circle at var(--hx, 50%) var(--hy, 50%), rgb(255 214 147 / 10%), transparent 70%);
mix-blend-mode: screen;
@@ -102,11 +104,13 @@ html[data-headlight='on'] .reading-viewport::before {
.contact-destination,
.infrastructure-flow-figure {
position: relative;
isolation: isolate;
}
html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-destination, .infrastructure-flow-figure)::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgb(120 216 229 / 14%), transparent 65%);
@@ -124,7 +128,7 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti
.portfolio-section { counter-increment: chapter; }
.portfolio-section > h2::before,
.project-stage__lead > h2::before {
content: '0' counter(chapter);
content: '0' counter(chapter) / '';
position: absolute;
inset-block-start: 50%;
inset-inline-end: 0;
@@ -142,7 +146,10 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti
}
@media (forced-colors: active) {
.portfolio-section > h2::before,
.project-stage__lead > h2::before { display: none; }
.project-stage__lead > h2::before,
body::after,
.reading-viewport::before,
:is(.project-case-study, .project-card, .contact-destination, .infrastructure-flow-figure)::after { display: none !important; }
}
/* Kinetic type + scroll-linked reveals (progressive enhancement). */
@@ -156,7 +163,7 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti
letter-spacing: 0.02em;
}
@supports (animation-timeline: view()) {
.project-card {
.reading-stage:not([data-reading-stage='live']) .project-card {
animation: ns-rise linear both;
animation-timeline: view();
animation-range: entry 0% entry 40%;
@@ -170,5 +177,8 @@ html[data-headlight='on'] :is(.project-case-study, .project-card, .contact-desti
@media print {
body::after, .ops-strip, .boot-sequence { display: none !important; }
.portfolio-section > h2::before { display: none; }
.portfolio-section > h2::before,
.project-stage__lead > h2::before,
.reading-viewport::before,
:is(.project-case-study, .project-card, .contact-destination, .infrastructure-flow-figure)::after { display: none !important; }
}