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

fix: keep the destination within one desktop viewport and let the phone route scroll

Browse Source
This commit is contained in:
LucaP
2026-10-10 19:19:43 +03:00
parent da7bd9940e
commit 8008edb855
1 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/styles/route.css
View File

@@ -152,13 +152,22 @@
@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%);
margin-block-end: clamp(80px, 12vh, 140px); /* The end-of-route sign hangs below the destination in its margin, so
the destination itself still fits one desktop viewport. */
padding-block-end: 0;
margin-block-end: clamp(140px, 20vh, 200px);
}
.reading-stage .portfolio-section[data-layout='destination']::after {
inset-block: calc(100% + 28px) auto;
} }
.reading-stage [data-layout='destination'] > h2 { .reading-stage [data-layout='destination'] > h2 {
font-size: clamp(72px, 10vw, 168px); font-size: clamp(64px, min(10vw, 15vh), 168px);
}
.reading-stage [data-layout='destination'] .chapter-body {
padding: clamp(22px, 3.4vh, 40px) clamp(24px, 3vw, 44px);
} }
.reading-stage [data-layout='destination'] .contact-destination__copy { .reading-stage [data-layout='destination'] .contact-destination__copy {
font-size: clamp(26px, 2.4vw, 38px); font-size: clamp(22px, min(2.4vw, 3.6vh), 38px);
line-height: 1.22; line-height: 1.22;
letter-spacing: -0.03em; letter-spacing: -0.03em;
} }
@@ -168,6 +177,21 @@
font-size: 1.05rem; font-size: 1.05rem;
} }
} }
@media screen and (min-width: 768px) and (max-height: 780px) {
.reading-stage .portfolio-section[data-layout='destination'] {
padding-block-start: 2.25rem;
}
.reading-stage [data-layout='destination'] > h2 {
font-size: clamp(64px, 13vh, 168px);
margin-block-end: 0.9rem;
}
.reading-stage [data-layout='destination'] .contact-destination__copy {
font-size: 23px;
}
.reading-stage [data-layout='destination'] .contact-social {
margin-block-start: 0.9rem;
}
}
/* ---------- Case studies: evidence beside media that stays in view ---------- */ /* ---------- Case studies: evidence beside media that stays in view ---------- */
@media screen and (min-width: 1100px) { @media screen and (min-width: 1100px) {
@@ -283,6 +307,11 @@
.site-navigation ul { .site-navigation ul {
position: relative; position: relative;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
/* Eight exits in one column outgrow short or zoomed viewports; the
route scrolls inside the fixed bar instead of leaving the screen. */
max-block-size: calc(100dvh - var(--site-navigation-block-size, 70px) - 12px);
overflow-y: auto;
overscroll-behavior: contain;
} }
.site-navigation li { .site-navigation li {
position: relative; position: relative;