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

feat: chapter openers on phones and a roadside avatar at the destination

Browse Source
This commit is contained in:
LucaP
2026-10-10 19:00:08 +03:00
parent e5c9f01818
commit 565deccd25
1 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/styles/route.css
View File

@@ -6,8 +6,8 @@
or an aria-label, so the semantic document is unchanged. Imported after or an aria-label, so the semantic document is unchanged. Imported after
wayfinding.css, before print.css. */ wayfinding.css, before print.css. */
/* ---------- Chapter openers over the road (tablet and up) ---------- */ /* ---------- Chapter openers over the road ---------- */
@media screen and (min-width: 768px) { @media screen {
.reading-stage .portfolio-section { .reading-stage .portfolio-section {
margin-block: clamp(220px, 44vh, 480px) 0; margin-block: clamp(220px, 44vh, 480px) 0;
padding-block-end: clamp(150px, 20vh, 230px); padding-block-end: clamp(150px, 20vh, 230px);
@@ -118,7 +118,37 @@
} }
} }
/* Phones: the same opener, scaled to the column; the chapter gap stays
long enough to see the road between chapters. */
@media screen and (max-width: 767px) {
.reading-stage .portfolio-section {
margin-block: clamp(120px, 24vh, 220px) 0;
padding-block-end: clamp(40px, 8vh, 80px);
}
.reading-stage .portfolio-section:not([data-layout='project-stage']) {
padding-block-start: 2.6rem;
}
.reading-stage :is(.portfolio-section, .project-stage__lead) > h2 {
font-size: clamp(42px, 12.5vw, 64px);
}
.reading-stage .chapter-body {
padding: clamp(20px, 5.5vw, 28px);
}
}
@media screen and (min-width: 521px) and (max-width: 767px) {
.reading-stage .portfolio-section {
padding-block-end: 130px;
}
}
/* ---------- Destination: the ending is a place, not a small card ---------- */ /* ---------- Destination: the ending is a place, not a small card ---------- */
@media screen {
/* The avatar stands at the roadside beside the heading, above the panel. */
.reading-stage #contact .contact-avatar {
inset-block: auto calc(100% + 14px);
inset-inline-end: clamp(12px, 3vw, 40px);
}
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.reading-stage .portfolio-section[data-layout='destination'] { .reading-stage .portfolio-section[data-layout='destination'] {
inline-size: min(900px, 64%); inline-size: min(900px, 64%);