New Backdrop

src/components/Navbar.svelte

@@ -33,22 +33,22 @@
 
     function handleScroll() {
         if (window.scrollY > 0) {
-            navbar.classList.add("scrolled");
+            navbar.classList.add("before:scale-y-100");
         } else {
-            navbar.classList.remove("scrolled");
+            navbar.classList.remove("before:scale-y-100");
         }
     }
 </script>
 
 <svelte:window on:scroll={handleScroll}/>
 
-<nav class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center before:bg-black before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"  bind:this={navbar}>
+<nav class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"  bind:this={navbar}>
     <div class="flex flex-col md:flex-row items-center justify-evenly md:justify-between match">
         <a class="flex items-center" href={l("/")}>
             <slot name="logo"></slot>
             <h1 class="text-2xl uppercase font-bold inline-block dark:text-white">
                 {t("navbar.title")}
-                <span class="scrolled" style="display: none"></span>
+                <span class="before:scale-y-100" style="display: none" aria-hidden="true"></span>
             </h1>
         </a>
         <div class="flex justify-center flex-wrap">
@@ -113,14 +113,6 @@
 </nav>
 
 <style lang="scss">
-    .scrolled {
-        @apply text-white;
-
-        &::before {
-            @apply scale-y-100;
-        }
-    }
-
     .match {
         width: min(100vw, 70em);
     }