amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(hero): prevent scenic artwork clipping

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-07 22:08:27 +03:30
parent 90459f7d7c
commit 71f55b465a
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ScenicHeroJourney.module.css
View File

@@ -21,7 +21,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: auto; height: auto;
min-height: clamp(36.25rem, 48vw, 43.75rem); min-height: clamp(41.25rem, 52vw, 47.5rem);
overflow: hidden; overflow: hidden;
background: var(--bg-page); background: var(--bg-page);
} }
@@ -138,7 +138,7 @@
@media (max-width: 1100px) and (min-width: 651px) { @media (max-width: 1100px) and (min-width: 651px) {
.heroStage { .heroStage {
height: auto; height: auto;
min-height: clamp(33.75rem, 64vw, 40rem); min-height: clamp(38rem, 66vw, 43rem);
} }
/* Left — visible slice ≈ width - 150px, always < content padding */ /* Left — visible slice ≈ width - 150px, always < content padding */
@@ -202,14 +202,13 @@
/* ================================================================ /* ================================================================
ULTRA-WIDE > 1440px ULTRA-WIDE > 1440px
Canvas capped at 1440px but vw keeps growing → bleed explodes. Canvas capped at 1440px but vw keeps growing → bleed explodes.
Freeze at the values the clamp() formulas resolve to @ 1440px. Freeze at the values the clamp() formulas resolve to @ 1440px and
heroStage overflow:visible lets illustrations escape into the keep enough stage height to contain the full illustration.
extra viewport space (body overflow-x:hidden prevents scrollbar).
================================================================ */ ================================================================ */
@media (min-width: 1441px) { @media (min-width: 1441px) {
.heroStage { .heroStage {
height: auto; height: auto;
min-height: 42.5rem; min-height: 47.5rem;
overflow: visible; overflow: visible;
} }