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

Revert "fix: restructure layout to allow video extension into iOS safe area"
All checks were successful
build-website / build (push) Successful in 1m49s
Details

Browse Source 
This reverts commit c53ac80779.
This commit is contained in:
matt
2025-09-21 20:06:33 +02:00
parent c53ac80779
commit 1b9581e90a
5 changed files with 8 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/website/assets/css/main.css
View File

@@ -7,8 +7,8 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
/* Background color for areas not covered by video */ /* Transparent background to allow video in safe area */
background: #000; /* Black background as fallback */ background: transparent;
} }
/* Smooth Scroll Behavior and iOS Overscroll Prevention */ /* Smooth Scroll Behavior and iOS Overscroll Prevention */

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

@@ -1729,7 +1729,7 @@ html {
min-height: 100dvh; min-height: 100dvh;
/* Video will extend under notch - no padding-top here */ /* Video will extend under notch - no padding-top here */
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
overflow: visible; /* Allow video to extend into safe area */ overflow: clip; /* Allow video to extend while preventing scrollbars */
max-width: 100vw !important; max-width: 100vw !important;
} }

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

@@ -172,19 +172,20 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
/* Hero video container using fixed positioning for iOS Safari safe area */ /* Hero video container using standard safe-area-inset-top for iOS Safari */
.hero-video-container { .hero-video-container {
position: fixed !important; /* Fixed to extend beyond layout constraints */ position: absolute;
left: 0; left: 0;
right: 0; right: 0;
width: 100vw; width: 100vw;
/* Use standard safe-area-inset-top */
/* Pull up by the safe area to extend under notch */ /* Pull up by the safe area to extend under notch */
top: calc(-1 * env(safe-area-inset-top, 0px)); top: calc(-1 * env(safe-area-inset-top, 0px));
/* Extend height to compensate */ /* Extend height to compensate */
height: calc(100vh + env(safe-area-inset-top, 0px)); height: calc(100vh + env(safe-area-inset-top, 0px));
z-index: -1; /* Behind all content */ z-index: 0;
pointer-events: none; pointer-events: none;
/* No background color to allow video visibility */ /* Removed white background to allow transparency */
} }
/* iOS Safari portrait bug workaround - env() returns 0 in portrait */ /* iOS Safari portrait bug workaround - env() returns 0 in portrait */
@@ -266,7 +267,6 @@ onMounted(() => {
min-height: 100vh; min-height: 100vh;
/* Allow video to extend into safe area */ /* Allow video to extend into safe area */
overflow: visible; overflow: visible;
z-index: 1; /* Above fixed video background */
} }
.hero-main { .hero-main {

12
apps/website/layouts/hero.vue
View File

@@ -1,12 +0,0 @@
<template>
<!-- Custom layout for hero page without constraining wrapper div -->
<!-- This allows the hero video to extend into iOS safe area -->
<AppNavbar />
<slot />
<AppFooter />
</template>
<script setup lang="ts">
// Custom layout for pages with hero sections that need to extend into safe areas
// No wrapper div means no flex constraints blocking video extension
</script>

4
apps/website/pages/index.vue
View File

@@ -24,10 +24,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// Use custom hero layout without constraining wrapper
definePageMeta({
layout: 'hero'
})
// SEO meta tags aligned with static mockup // SEO meta tags aligned with static mockup
useHead({ useHead({
title: 'Harbor Smith - Personalized Service Maintenance For Your Boat', title: 'Harbor Smith - Personalized Service Maintenance For Your Boat',