fix hero background showing over content (directus#19046)

Co-authored-by: Pascal Jufer <[email protected]>
VincentKempers · Jul 3, 2023 · afdc48e · afdc48e
1 parent 84bd5d0
commit afdc48e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/docs/home.css b/docs/home.css
@@ -7,6 +7,10 @@
 	margin-inline: auto;
 }
 
+.sectionContainerHero {
+	position: relative;
+}
+
 .sectionPaddingHero {
 	padding-block: 108px;
 }
@@ -75,7 +79,6 @@
 	box-shadow: 0 0 100px 24px rgba(255, 255, 255, 0.3);
 	backdrop-filter: blur(4px);
 	margin-left: 20px;
-	z-index: 1;
 }
 
 .flex {

diff --git a/docs/index.md b/docs/index.md
@@ -9,7 +9,10 @@ import Github from './.vitepress/components/home/icons/Github.vue';
 </script>
 
 <section :class="[$style.hero, $style.paddingBox]">
-	<div :class="[$style.sectionContainer, $style.flex]">
+	<div :class="$style.heroPattern">
+		 <Pattern />
+	</div>
+	<div :class="[$style.sectionContainer, $style.sectionContainerHero, $style.flex]">
 		<div :class="[$style.heroContent, $style.sectionPaddingHero]">
 			<div :class="$style.heroBadge">Resource Hub</div>
 			<h1>Directus Documentation</h1>
@@ -67,9 +70,7 @@ await directus.items('articles').readOne(4, {
 </SnippetToggler>
 		</div>
 	</div>
-	<div :class="$style.heroPattern">
-		 <Pattern />
-	</div>
+
 </section>
 
 <section :class="[$style.sectionPaddingLg, $style.paddingBox]">