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-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
--initial-safe-area-top: 0px;
--safe-area-cover-top: max(var(--safe-area-top), var(--initial-safe-area-top));
--safe-area-cover-top: env(safe-area-max-inset-top, env(safe-area-inset-top, 0px));
--safe-area-cover-bottom: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
}
@@ -239,6 +239,8 @@ html {
:root {
--safe-area-top: constant(safe-area-inset-top);
--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;
z-index: 10;
height: 100%;
min-height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: flex-start;
align-items: center;
gap: var(--space-md);
text-align: center;
/* 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 {
@@ -1724,25 +1727,25 @@ html {
left: 0;
right: 0;
/* 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;
height: calc(100lvh + env(safe-area-inset-top));
z-index: -1; /* Behind everything */
height: calc(100lvh + env(safe-area-max-inset-top, env(safe-area-inset-top)));
z-index: 0; /* Behind content */
pointer-events: none;
}
/* Fallback for browsers without lvh support */
@supports not (height: 100lvh) {
.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 {
/* Adjust padding to account for safe areas on all sides */
padding: clamp(1rem, 4vw, 2rem);
padding-top: max(env(safe-area-inset-top, 0), clamp(2rem, 4vw, 3rem));
padding-bottom: max(env(safe-area-inset-bottom, 0), clamp(1rem, 4vw, 2rem));
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-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-right: max(env(safe-area-inset-right, 0), clamp(1rem, 3vw, 2rem));
width: 100%;

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

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