refactor: changed render order of background container in GrillBackgr…

…ound
EATSTEAK · Jun 24, 2024 · 71748fd · 71748fd
1 parent 0aafe86
commit 71748fd
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/src/components/GrillContainer.tsx b/src/components/GrillContainer.tsx
@@ -10,13 +10,6 @@ export const GrillContainer: Component<{
 }> = (props) => {
   return (
     <section class={props.parentClassOverride ?? "relative h-72"}>
-      <Show when={props.absoluteBackground}>
-        <div class="background-container">
-          <div class="background-element">
-            {props.absoluteBackground}
-          </div>
-        </div>
-      </Show>
       <div class={`grill-background size-full ${props.grillClassOverride ?? "before:bg-slate-700 dark:before:bg-slate-400 before:bg-opacity-30 before:rotate-3"}`}>
         <div
           class={
@@ -27,6 +20,13 @@ export const GrillContainer: Component<{
           {props.children}
         </div>
       </div>
+      <Show when={props.absoluteBackground}>
+        <div class="background-container">
+          <div class="background-element">
+            {props.absoluteBackground}
+          </div>
+        </div>
+      </Show>
     </section>
   );
 };
diff --git a/src/components/grill_container.css b/src/components/grill_container.css
@@ -1,5 +1,5 @@
 .background-container {
-    @apply absolute top-0 right-0 w-full h-full;
+    @apply absolute top-0 right-0 w-full h-full -z-10;
 }
 
 .background-element {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -19,9 +19,9 @@ const page = pathname.slice(1);
     <BaseHead title={title} description={description} image={image} />
   </head>
   <body
-    class="relative -z-20 flex flex-col bg-slate-50 dark:bg-slate-900 dark:text-white transition-colors"
+    class="relative -z-30 flex flex-col bg-slate-50 dark:bg-slate-900 dark:text-white transition-colors"
   >
-    <div class="relative -z-10 bg-white dark:bg-slate-950 transition-colors">
+    <div class="relative -z-20 bg-white dark:bg-slate-950 transition-colors">
       <Header page={page} />
       <slot />
     </div>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -88,7 +88,7 @@
     height: 200%;
     top: -50%;
     left: -50%;
-    z-index: -1;
+    z-index: -10;
     mask-size: 2rem;
     mask-image: url("/images/grill.png");
     mask-repeat: repeat;