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

fix: file the end-of-route sign inside the destination panel

Browse Source
This commit is contained in:
LucaP
2026-10-11 00:43:25 +03:00
parent 4eaf327c2d
commit 7fa1c08ce8
1 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/styles/route.css
View File

@@ -154,13 +154,30 @@
@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%);
/* The end-of-route sign hangs below the destination in its margin, so /* The destination is the last stop: it ends just above the lower
the destination itself still fits one desktop viewport. */ letterbox bar (and its credit), so the whole stack, heading included,
sits below the upper bar when the page is scrolled to the end. */
padding-block-end: 0; padding-block-end: 0;
margin-block-end: clamp(140px, 20vh, 200px); margin-block-end: 0;
} }
/* Padding, not margin: a trailing margin collapses out of the column. */
.reading-stage .portfolio-main:has(> [data-layout='destination']) {
padding-block-end: calc(min(8vh, 72px) + 28px);
}
/* The end-of-route sign is filed inside the panel's lower right, level
with the social links, instead of hanging over the credit below. It is
static: nothing about it depends on the arrived state. */
.reading-stage .portfolio-section[data-layout='destination']::after { .reading-stage .portfolio-section[data-layout='destination']::after {
inset-block: calc(100% + 28px) auto; inset-block: auto clamp(22px, 3.4vh, 40px);
inset-inline: auto clamp(24px, 3vw, 44px);
padding: 0;
border: 0;
background: none;
box-shadow: none;
color: rgb(255 226 196 / 82%);
font-size: 0.68rem;
line-height: 1.6;
text-align: end;
} }
.reading-stage [data-layout='destination'] > h2 { .reading-stage [data-layout='destination'] > h2 {
font-size: clamp(64px, min(10vw, 15vh), 168px); font-size: clamp(64px, min(10vw, 15vh), 168px);