--

public/assets/css/style-extra.css

@@ -1,3 +1,10 @@
+header {
+    view-transition-name: header-content;
+    will-change: transform;
+    background-color: transparent;
+    background-image: linear-gradient(to bottom, var(--color-dark-grey), oklch(from var(--color-dark-grey) l c h / 0));
+    backdrop-filter: blur(16px);
+}
 main {
     view-transition-name: main-content;
     padding-top: 60px;
@@ -9,47 +16,6 @@ footer {
     view-transition-name: footer-content;
 }
 
-/* Progressive Blur */
-header {
-    view-transition-name: header-content;
-    will-change: transform;
-    background-color: transparent;
-    overflow: hidden;
-    isolation: isolate;
-}
-header::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background: linear-gradient(to top, transparent, var(--color-dark-grey));
-    pointer-events: none;
-}
-.header-blur {
-    position: absolute;
-    inset: 0;
-    z-index: -2;
-    pointer-events: none;
-}
-.header-blur > div {
-    position: absolute;
-    inset: 0;
-    backdrop-filter: blur(var(--blur));
-    -webkit-backdrop-filter: blur(var(--blur));
-    -webkit-mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
-            mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
-}
-.header-blur > div:nth-child(1)  { --blur: 1.1px;  --from: 0%;   --to: 10%;  }
-.header-blur > div:nth-child(2)  { --blur: 1.5px;  --from: 10%;  --to: 20%;  }
-.header-blur > div:nth-child(3)  { --blur: 2px;    --from: 20%;  --to: 30%;  }
-.header-blur > div:nth-child(4)  { --blur: 2.6px;  --from: 30%;  --to: 40%;  }
-.header-blur > div:nth-child(5)  { --blur: 3.5px;  --from: 40%;  --to: 50%;  }
-.header-blur > div:nth-child(6)  { --blur: 4.6px;  --from: 50%;  --to: 60%;  }
-.header-blur > div:nth-child(7)  { --blur: 6px;    --from: 60%;  --to: 70%;  }
-.header-blur > div:nth-child(8)  { --blur: 8px;    --from: 70%;  --to: 80%;  }
-.header-blur > div:nth-child(9)  { --blur: 10.5px; --from: 80%;  --to: 90%;  }
-.header-blur > div:nth-child(10) { --blur: 14px;   --from: 90%;  --to: 100%; }
-
 /* Fonts */
 @font-face {
     font-family: "MesloLGS Nerd Font";

public/assets/js/script-extra.js

@@ -1,16 +1,3 @@
-/* Progressive Blur */
-function initProgressiveHeaderBlur() {
-    const header = document.querySelector('header');
-    if (!header || header.querySelector('.header-blur')) return;
-
-    const container = document.createElement('div');
-    container.className = 'header-blur';
-    container.setAttribute('aria-hidden', 'true');
-    for (let i = 0; i < 10; i++) container.appendChild(document.createElement('div'));
-    header.prepend(container);
-}
-initProgressiveHeaderBlur();
-
 /* View Transition */
 (() => {
     if (!document.startViewTransition) return;
@@ -139,7 +126,6 @@ initProgressiveHeaderBlur();
                 });
             }
 
-            initProgressiveHeaderBlur();
             history.pushState(null, '', response.url);
 
             if (typeof window.__cursorReinit === 'function') {