looks good so far

layouts/_partials/header.html

@@ -2,15 +2,33 @@
 <header class="fixed inset-x-0 z-100">
   <div
     id="menu-blur"
-    class="absolute opacity-0 inset-x-0 top-0 h-full backdrop-blur-2xl shadow-2xl"
+    class="absolute opacity-100 inset-x-0 top-0 h-full backdrop-blur-2xl shadow-2xl"
     role="presentation"
     tab-index="-1"></div>
+    {{ with resources.Get "js/background-blur.js" }}
+      {{ with . | minify | fingerprint "sha256" }}
+        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" data-blur-id="menu-blur"></script>
+      {{ end }}
+    {{ end }}
   <div
     class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-25 lg:px-32">
-    <nav class="flex items-center py-6 pr-2 md:pr-4 pb-[3px] pl-0">
-      <a href="{{ "/" | relURL }}" class="text-base font-medium"
-        >{{ .Site.Title }}</a
-      >
+    <nav class="flex items-center py-6">
+      <a href="{{ "/" | relURL }}" class="text-base font-serif font-bold hover:drop-shadow-pink-400 hover:drop-shadow-[0_0_6px]">
+        {{ .Site.Title }}
+      </a>
     </nav>
   </div>
 </header>
+{{ with .Params.Image | default "/images/bg-landing.jpg" }}
+  <div class="fixed inset-0 top-0 -z-10 bg-black/60">
+    <img src="{{ . }}" class="w-full h-full object-cover -z-10" role="presentation">
+    <div class="absolute inset-0 h-full bg-linear-to-t to-transparent mix-blend-soft-light from-neutral-800"></div>
+    <div class="absolute inset-0 h-full bg-linear-to-t opacity-60 mix-blend-soft-light from-neutral-800 to-neutral-800"></div>
+  </div>
+  <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full -z-10 backdrop-blur-2xl"></div>
+  {{ with resources.Get "js/background-blur.js" }}
+    {{ with . | minify | fingerprint "sha256" }}
+      <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" data-blur-id="background-blur"></script>
+    {{ end }}
+  {{ end }}
+{{ end }}