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

fixes
All checks were successful
build-website / build (push) Successful in 1m36s
Details

Browse Source
This commit is contained in:
matt
2025-09-21 15:27:21 +02:00
parent 81a8c6cf4b
commit 36046ca864
2 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,8 +37,8 @@
/* Safe area helpers */ /* Safe area helpers */
--safe-area-top: env(safe-area-inset-top, 0px); --safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px);
--initial-safe-area-top: 0px; --safe-area-cover-top: env(safe-area-max-inset-top, env(safe-area-inset-top, 0px));
--safe-area-cover-top: max(var(--safe-area-top), var(--initial-safe-area-top)); --safe-area-cover-bottom: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
} }
@@ -239,6 +239,8 @@ html {
:root { :root {
--safe-area-top: constant(safe-area-inset-top); --safe-area-top: constant(safe-area-inset-top);
--safe-area-bottom: constant(safe-area-inset-bottom); --safe-area-bottom: constant(safe-area-inset-bottom);
--safe-area-cover-top: constant(safe-area-inset-top);
--safe-area-cover-bottom: constant(safe-area-inset-bottom);
} }
} }
@@ -496,15 +498,16 @@ html {
position: relative; position: relative;
z-index: 10; z-index: 10;
height: 100%; height: 100%;
min-height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
gap: var(--space-md); gap: var(--space-md);
text-align: center; text-align: center;
/* Apply safe area padding HERE to protect content from being obscured */ /* Apply safe area padding HERE to protect content from being obscured */
padding: calc(max(var(--safe-area-cover-top), var(--space-lg))) var(--space-md) calc(max(var(--safe-area-bottom), var(--space-lg)) + var(--space-sm)); padding: calc(max(var(--safe-area-cover-top), clamp(6rem, 14vh, 10rem))) var(--space-md) calc(max(var(--safe-area-cover-bottom), clamp(5rem, 12vh, 8rem)) + var(--space-sm));
} }
.trust-badge { .trust-badge {
@@ -1724,25 +1727,25 @@ 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-max-inset-top, env(safe-area-inset-top)));
width: 100vw; width: 100vw;
height: calc(100lvh + env(safe-area-inset-top)); height: calc(100lvh + env(safe-area-max-inset-top, env(safe-area-inset-top)));
z-index: -1; /* Behind everything */ z-index: 0; /* Behind content */
pointer-events: none; pointer-events: none;
} }
/* 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-max-inset-top, env(safe-area-inset-top)));
} }
} }
.hero-content { .hero-content {
/* Adjust padding to account for safe areas on all sides */ /* Adjust padding to account for safe areas on all sides */
padding: clamp(1rem, 4vw, 2rem); padding: clamp(1rem, 4vw, 2rem);
padding-top: max(env(safe-area-inset-top, 0), clamp(2rem, 4vw, 3rem)); padding-top: max(env(safe-area-max-inset-top, env(safe-area-inset-top, 0)), clamp(2rem, 4vw, 3rem));
padding-bottom: max(env(safe-area-inset-bottom, 0), clamp(1rem, 4vw, 2rem)); padding-bottom: max(env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0)), clamp(1rem, 4vw, 2rem));
padding-left: max(env(safe-area-inset-left, 0), clamp(1rem, 3vw, 2rem)); padding-left: max(env(safe-area-inset-left, 0), clamp(1rem, 3vw, 2rem));
padding-right: max(env(safe-area-inset-right, 0), clamp(1rem, 3vw, 2rem)); padding-right: max(env(safe-area-inset-right, 0), clamp(1rem, 3vw, 2rem));
width: 100%; width: 100%;

2
apps/website/components/HeroSection.vue
View File

@@ -209,7 +209,7 @@ onMounted(() => {
.scroll-to-explore { .scroll-to-explore {
margin-top: auto; margin-top: auto;
margin-bottom: var(--space-md); margin-bottom: calc(max(var(--safe-area-cover-bottom, 0px), var(--space-lg)));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;