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

feat: weave speed-reactive terrain and ground roadside signs

Browse Source 
Anchor desktop signs beside the road and feather the compact reading edge with measured chapter landings. Add a continuous cyan-to-coral terrain grid and a bounded rear wake that builds with existing drive speed.

Preserve approved content, media, soundtrack, and canonical journey contracts.
This commit is contained in:
LucaP
2026-09-05 06:22:49 +03:00
parent b188cac7ed
commit 51a9c743da
7 changed files with 416 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/styles/evolution.css
View File

@@ -2,7 +2,7 @@
Existing content, navigation and audio controls retain their contracts. */
:root {
--canvas: #080d18;
--surface: rgb(12 20 32 / 96%);
--surface: rgb(12 20 32 / 98.5%);
--surface-strong: #0c1420;
--surface-soft: #132130;
--line: rgb(160 196 212 / 18%);
@@ -871,13 +871,32 @@ body {
}
}
/* The live scene has a genuine viewing corridor below navigation. */
/* Preserve the sign corridor while landing headings above the unchanged
journey activation line, including short windows and padded panels. */
html[data-expressway='live'] .portfolio-section {
scroll-margin-block-start: calc(var(--sign-stage-bottom, 188px) + 18px);
scroll-margin-block-start: min(
max(
var(
--chapter-landing-space,
calc(var(--sign-stage-bottom, 188px) + 18px)
),
calc(
var(--sign-reading-top, 220px) + var(--chapter-reading-inset, 4px) -
var(--chapter-heading-offset, 70px)
)
),
calc(35svh - var(--chapter-heading-offset, 70px) - 6px)
);
}
html[data-expressway='live'] .portfolio-section[data-layout='project-stage'] {
--chapter-landing-space: calc(var(--sign-stage-bottom, 188px) + 50px);
--chapter-reading-inset: 30px;
}
@media print {
.portfolio-main {
.portfolio-main,
.portfolio-main > * {
clip-path: none !important;
mask-image: none !important;
}
}
@@ -956,7 +975,13 @@ html[data-expressway='live'] .portfolio-section {
}
@media (max-height: 650px) {
html[data-expressway='live'] .portfolio-section {
scroll-margin-block-start: calc(var(--sign-stage-bottom) - 28px);
--chapter-landing-space: calc(var(--sign-stage-bottom) - 28px);
}
html[data-expressway='live'] #contact {
--chapter-landing-space: calc(var(--sign-stage-bottom) - 52px);
}
html[data-expressway='live'] .portfolio-section[data-layout='project-stage'] {
--chapter-landing-space: calc(var(--sign-stage-bottom) - 22px);
}
}
@media (min-width: 768px) and (max-width: 900px) {
@@ -971,6 +996,15 @@ html[data-expressway='live'] .portfolio-section {
font-size: 32px;
}
}
@media (max-height: 559px) {
html[data-expressway='live'] .portfolio-section,
html[data-expressway='live'] #contact {
--chapter-landing-space: calc(var(--sign-stage-bottom) + 12px);
}
html[data-expressway='live'] .portfolio-section[data-layout='project-stage'] {
--chapter-landing-space: calc(var(--sign-stage-bottom) + 34px);
}
}
@media (min-width: 768px) and (max-height: 559px) {
html[data-expressway='live'] .portfolio-section[data-layout] {
inline-size: 60%;