no antifreeze omg

kvarteret · Jan 20, 2025 · bc999e7 · bc999e7
1 parent 6b90d63
commit bc999e7
Showing 1 changed file with 61 additions and 0 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -23,6 +23,8 @@ const headerContent = `
 
   <body class="bg-black text-primary-gold font-glacial mx-auto">
     <header class="sticky top-0">
+      <div class="backdrop"></div>
+      <div class="backdrop-edge"></div>
       <div class="overflow-x-hidden py-4">
         <Marquee className="[--duration:60s] [--gap:0rem]">
 		  <div set:html={headerContent}></div>
@@ -41,13 +43,72 @@ const headerContent = `
     </footer>
   </body>
 
+  <!-- https://www.joshwcomeau.com/css/backdrop-filter/ -->
   <style>
     html,
     body {
       margin: 0;
       width: 100%;
       height: 100%;
     }
+
+    header {
+      --thickness: 4px;
+      position: sticky;
+      top: 0;
+      background: hsl(0deg 0% 0% / 0.3);
+    }
+
+    @supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
+      header {
+        background: hsl(0deg 0% 0% / 0.1);
+      }
+
+      .backdrop {
+        position: absolute;
+        inset: 0;
+        -webkit-backdrop-filter: blur(16px);
+        backdrop-filter: blur(16px);
+        background: linear-gradient(
+          to bottom,
+          hsl(0deg 0% 0% / 0.1),
+          transparent 50%
+        );
+        pointer-events: none;
+      }
+    }
+
+    @supports (mask-image: none) or (-webkit-mask-image: none) {
+      .backdrop {
+        height: 200%;
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          black 0% 50%,
+          transparent 50% 100%
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          black 0% 50%,
+          transparent 50% 100%
+        );
+      }
+      .backdrop-edge {
+        height: 100%;
+        inset: 0;
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          black 0,
+          black var(--thickness),
+          transparent var(--thickness)
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          black 0,
+          black var(--thickness),
+          transparent var(--thickness)
+        );
+      }
+    }
   </style>
 
 </html>