refactor: removed unnecesary z-index

rubenbupe · Aug 15, 2024 · 50ddb0b · 50ddb0b
1 parent de6f581
commit 50ddb0b
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 14 deletions.
diff --git a/src/components/ExpandableHoloJobCard.tsx b/src/components/ExpandableHoloJobCard.tsx
@@ -49,13 +49,13 @@ export function ExpandableHoloJobCard({
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-card/20 h-full w-full z-10 backdrop-blur-md"
+            className="fixed inset-0 bg-card/20 h-full w-full z-[1] backdrop-blur-md"
           />
         )}
       </AnimatePresence>
       <AnimatePresence>
         {active && typeof active === "object" ? (
-          <div className="fixed inset-0  grid place-items-center z-[100]">
+          <div className="fixed inset-0  grid place-items-center z-[1]">
             <motion.div
               layoutId={`card-${active.id}-${id}`}
               ref={ref}

diff --git a/src/components/FlipWords.tsx b/src/components/FlipWords.tsx
@@ -57,7 +57,7 @@ export const FlipWords = ({
           position: "absolute",
         }}
         className={cn(
-          "z-10 inline-block relative text-left px-2",
+          "inline-block relative text-left px-2",
           className
         )}
         key={currentWord}

diff --git a/src/components/MeteorAnimation.astro b/src/components/MeteorAnimation.astro
@@ -24,7 +24,7 @@ const meteors = [...new Array(number)].map(() => ({
                 )}
                 style={style}
             >
-                <div class="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent" />
+                <div class="pointer-events-none absolute top-1/2 -z-[1] h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent" />
             </span>
         ))
     }

diff --git a/src/components/Pin3d.astro b/src/components/Pin3d.astro
@@ -39,7 +39,7 @@ const { href, title, className, containerClassName } = Astro.props;
                     )}
                 >
                     <span
-                        class="relative z-20 text-white text-xs font-bold inline-block py-0.5"
+                        class="relative text-white text-xs font-bold inline-block py-0.5"
                     >
                         {title}
                     </span>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -57,8 +57,8 @@ const { title } = Astro.props;
     <body
         class="relative w-full flex flex-col selection:bg-foreground selection:text-background"
     >
-        <Header class="z-10" />
-        <main class="w-full flex flex-col items-center">
+        <Header class="z-[1]" />
+        <main class="relative w-full flex flex-col items-center">
             <Spotlight
                 class="left-0 md:left-40 max-w-[90%] top-[30vh] h-[100vh]"
                 fill="#d1d1d1"

diff --git a/src/sections/Contact.astro b/src/sections/Contact.astro
@@ -13,11 +13,6 @@ import { mailUrl } from "../constants/site";
         id="jobs"
         class="py-24 h-full flex flex-col justify-center items-center"
     >
-        <div
-            class="absolute inset-0 w-full h-full bg-background z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none"
-        >
-        </div>
-
         <h2
             class="relative text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl text-center"
         >
@@ -41,6 +36,10 @@ import { mailUrl } from "../constants/site";
         <Anchor size="default" href={mailUrl} target="_blank" class="mt-8">
             Get in touch
         </Anchor>
+        <div
+            class="absolute inset-0 w-full h-full bg-background [mask-image:radial-gradient(transparent,white)] pointer-events-none"
+        >
+        </div>
     </Section>
     <p class="relative mt-auto mb-2 text-center text-foreground/80 text-xs">
         © {new Date().getFullYear()} Rubén Buzón.

diff --git a/src/sections/Projects.astro b/src/sections/Projects.astro
@@ -230,8 +230,7 @@ const projects = [
                         </div>
                         <div
                             class={cn(
-                                "relative w-full aspect-video p-8 overflow-hidden",
-                                project.feature ? "" : ""
+                                "relative w-full aspect-video p-8 overflow-hidden"
                             )}
                         >
                             <div class="absolute inset-8 bg-foreground/20 group-hover:translate-x-2 group-hover:translate-y-2 transition-all duration-500 ease-in-out group-hover:[box-shadow:inset_0_0_10px_0_rgba(255,255,255,0.2)]" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,7 @@ const meteors = [...new Array(number)].map(() => ({ @@
                     )}
                     style={style}
                 >
-                    <div class="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent" />
+                    <div class="pointer-events-none absolute top-1/2 -z-[1] h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent" />
                 </span>
             ))
         }
@@ Expand Down @@