matt/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile hero safe area and nav jitter
All checks were successful
build-website / build (push) Successful in 1m38s
Details

Browse Source
This commit is contained in:
matt
2025-09-21 14:25:52 +02:00
parent 96972a2bca
commit f27b6695e0
1 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/website/assets/css/voyage-layout.css
View File

@@ -222,7 +222,7 @@ html {
z-index: 1000; z-index: 1000;
background: rgba(255, 255, 255, 0); background: rgba(255, 255, 255, 0);
backdrop-filter: blur(0); backdrop-filter: blur(0);
transition: var(--transition-slow); transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
padding: calc(var(--space-md) + env(safe-area-inset-top, 0)) 0 var(--space-md) 0; padding: calc(var(--space-md) + env(safe-area-inset-top, 0)) 0 var(--space-md) 0;
} }
@@ -233,6 +233,30 @@ html {
padding: calc(var(--space-sm) + env(safe-area-inset-top, 0)) 0 var(--space-sm) 0; padding: calc(var(--space-sm) + env(safe-area-inset-top, 0)) 0 var(--space-sm) 0;
} }
@media (max-width: 768px) {
.voyage-nav,
.voyage-nav.scrolled {
padding: calc(var(--space-sm) + env(safe-area-inset-top, 0)) 0 var(--space-sm) 0;
}
}
@supports (padding-top: constant(safe-area-inset-top)) {
.voyage-nav {
padding: calc(var(--space-md) + constant(safe-area-inset-top)) 0 var(--space-md) 0;
}
.voyage-nav.scrolled {
padding: calc(var(--space-sm) + constant(safe-area-inset-top)) 0 var(--space-sm) 0;
}
@media (max-width: 768px) {
.voyage-nav,
.voyage-nav.scrolled {
padding: calc(var(--space-sm) + constant(safe-area-inset-top)) 0 var(--space-sm) 0;
}
}
}
.nav-container { .nav-container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
@@ -425,15 +449,23 @@ html {
left: 0; left: 0;
right: 0; right: 0;
/* Pull the background up into the unsafe area */ /* Pull the background up into the unsafe area */
top: calc(-1 * env(safe-area-inset-top)); top: calc(-1 * env(safe-area-inset-top, 0));
height: calc(100lvh + env(safe-area-inset-top)); height: calc(100lvh + env(safe-area-inset-top, 0));
z-index: -1; /* Behind everything */ z-index: -1; /* Behind everything */
} }
/* Fallback for browsers without lvh support */ /* Fallback for browsers without lvh support */
@supports not (height: 100lvh) { @supports not (height: 100lvh) {
.hero-video-container { .hero-video-container {
height: calc(100vh + env(safe-area-inset-top)); height: calc(100vh + env(safe-area-inset-top, 0));
}
}
/* Older iOS fallback that still uses constant() */
@supports (top: constant(safe-area-inset-top)) {
.hero-video-container {
top: calc(-1 * constant(safe-area-inset-top));
height: calc(100vh + constant(safe-area-inset-top));
} }
} }