From ef2392e891a845a9721a788feb5576a4135f8c9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= <nunocoracao@gmail.com>
Date: Sat, 25 Feb 2023 19:23:10 +0000
Subject: [PATCH] added new header

---
 assets/js/appearance.js                         |  3 ---
 config/_default/params.toml                     |  2 +-
 exampleSite/config/_default/params.toml         |  2 +-
 exampleSite/content/docs/configuration/index.md |  2 +-
 layouts/partials/header/fixed-fill-blur.html    | 14 ++++++++++++++
 5 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 layouts/partials/header/fixed-fill-blur.html

diff --git a/assets/js/appearance.js b/assets/js/appearance.js
index d5b1b053..0acf9f18 100644
--- a/assets/js/appearance.js
+++ b/assets/js/appearance.js
@@ -62,9 +62,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
 var updateMeta = () => {
   var elem, style;
   elem = document.querySelector('body');
-  console.log(elem)
   style = getComputedStyle(elem);
-  console.log(style.backgroundColor)
-
   document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor);
 }
\ No newline at end of file
diff --git a/config/_default/params.toml b/config/_default/params.toml
index f90e7fdb..5d5f35ce 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -24,7 +24,7 @@ disableImageOptimization = false
 # smartTOCHideUnfocusedChildren = true
 
 [header]
-  layout = "basic" # valid options: basic, fixed, fixed-fill
+  layout = "basic" # valid options: basic, fixed, fixed-fill, fixed-fill-blur
 
 [footer]
   showMenu = true
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 966e9123..406813f3 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -24,7 +24,7 @@ smartTOC = true
 smartTOCHideUnfocusedChildren = true
 
 [header]
-  layout = "fixed" # valid options: basic, fixed, fixed-fill
+  layout = "fixed" # valid options: basic, fixed, fixed-fill, fixed-fill-blur
 
 [footer]
   showMenu = true
diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md
index ad9e1e97..e1310e61 100644
--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@@ -154,7 +154,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 
 | Name            | Default   | Description                                                                       |
 | --------------- | --------- | --------------------------------------------------------------------------------- |
-| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, and `fixed-fill`. |
+| `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, and `fixed-fill-blur`. |
 ### Footer
 
 | Name                            | Default | Description                                                                                                                                                                                                               |
diff --git a/layouts/partials/header/fixed-fill-blur.html b/layouts/partials/header/fixed-fill-blur.html
new file mode 100644
index 00000000..534fe989
--- /dev/null
+++ b/layouts/partials/header/fixed-fill-blur.html
@@ -0,0 +1,14 @@
+<div class="min-h-[148px]"></div>
+<div class="fixed inset-x-0 pl-[24px] pr-[24px]" style="z-index:100">
+  <div id="menu-blur" class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom bg-neutral dark:bg-neutral-800"></div>
+  <div class="relative max-w-[64rem] ml-auto mr-auto">
+    {{ partial "partials/header/basic.html" . }}
+  </div>
+</div>
+<script>
+  window.addEventListener('scroll', function (e) {
+    var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    var background_blur = document.getElementById('menu-blur');
+    background_blur.style.opacity = (scroll / 300);
+  });
+</script>