--

public/assets/js/script-extra.js

@@ -3,35 +3,11 @@
     const header = document.querySelector('header');
     if (!header) return;
 
-    const LAYERS = [
-        { blur: 1,  from:  0, to: 15 },
-        { blur: 3,  from: 15, to: 35 },
-        { blur: 6,  from: 35, to: 55 },
-        { blur: 10, from: 55, to: 75 },
-        { blur: 16, from: 75, to: 95 },
-    ];
-
     const container = document.createElement('div');
     container.className = 'header-blur';
     container.setAttribute('aria-hidden', 'true');
-
-    LAYERS.forEach(cfg => {
-        const layer = document.createElement('div');
-        layer.className = 'blur-layer';
-        layer.style.setProperty('--blur', cfg.blur + 'px');
-        layer.style.setProperty(
-            '--mask',
-            `linear-gradient(to top, transparent ${cfg.from}%, black ${cfg.to}%)`
-        );
-        container.appendChild(layer);
-    });
-
-    header.parentNode.insertBefore(container, header);
-
-    const sync = () => { container.style.height = header.offsetHeight + 'px'; };
-    sync();
-    if ('ResizeObserver' in window) new ResizeObserver(sync).observe(header);
-    else window.addEventListener('resize', sync);
+    for (let i = 0; i < 5; i++) container.appendChild(document.createElement('div'));
+    header.prepend(container);
 })();
 
 /* View Transition */