diff --git a/pages/index/+Page.module.sass b/pages/index/+Page.module.sass index 7be47e5c1..5d46ac11e 100644 --- a/pages/index/+Page.module.sass +++ b/pages/index/+Page.module.sass @@ -58,14 +58,14 @@ top: 0 left: 50% bottom: 0 - margin-left: -50vw width: 100vw height: 100% + margin-left: calc(-50vw - 8px) z-index: -1 object-fit: cover - overflow: hidden - background-position: 50% 50% background-size: cover + background-position: center + .hero-content text-align: center diff --git a/src/components/navigation/sticky-header.module.sass b/src/components/navigation/sticky-header.module.sass index 2ec3822c4..6b33d9b55 100644 --- a/src/components/navigation/sticky-header.module.sass +++ b/src/components/navigation/sticky-header.module.sass @@ -1,11 +1,19 @@ .sticky-header position: sticky top: -1em - // Provide some overlap for intersection observer z-index: 100 - margin: 0 0 0 - padding: 1em 0 0em + margin: 0 + padding: 1em 0 0 + .backdrop + height: 3em + background-color: var(--background-color) + width: 100vw + position: fixed + top: 0 + left: 0 + pointer-events: none + z-index: -1 &:global(.is-stuck) .backdrop @@ -15,14 +23,3 @@ .backdrop background: linear-gradient(var(--background-color) 90%, rgba(255, 255, 255, 0)) border-bottom: none - - .backdrop - position: absolute - top: 0 - left: 50% - width: 100vw - height: 100% - background: var(--background-color) - margin: 0 -50vw 0 - z-index: -1 -