visual polish for backgrounds and featured images

assets/css/compiled/main.css

@@ -1960,6 +1960,10 @@ input[type="range"]:active::-webkit-slider-thumb {
   min-height:0px
 }
 
+.min-h-\[130px\] {
+  min-height:130px
+}
+
 .min-h-\[148px\] {
   min-height:148px
 }
@@ -2552,6 +2556,10 @@ input[type="range"]:active::-webkit-slider-thumb {
   --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
 }
 
+.from-60\% {
+  --tw-gradient-from-position:60%
+}
+
 .to-neutral {
   --tw-gradient-to:rgba(var(--color-neutral), 1) var(--tw-gradient-to-position)
 }
@@ -3066,6 +3074,10 @@ input[type="range"]:active::-webkit-slider-thumb {
   opacity:0.6
 }
 
+.opacity-65 {
+  opacity:0.65
+}
+
 .mix-blend-normal {
   mix-blend-mode:normal
 }

config/_default/params.toml

@@ -26,7 +26,7 @@ disableTextInHeader = false
 # smartTOCHideUnfocusedChildren = true
 
 [header]
-  layout = "basic" # valid options: basic, fixed, fixed-fill, fixed-fill-blur
+  layout = "basic" # valid options: basic, fixed, fixed-fill, fixed-gradient, fixed-fill-blur
 
 [footer]
   showMenu = true

exampleSite/config/_default/languages.en.toml

@@ -10,14 +10,14 @@ title = "Blowfish"
   dateFormat = "2 January 2006"
   logo = "img/blowfish_logo_transparent.png"
   # secondaryLogo = "PATH"
-  description = "A powerful, lightweight theme for Hugo built with Tailwind CSS."
+  description = "A powerful, lightweight theme for Hugo."
   # copyright = "Copy, _right?_ :thinking_face:"
 
 [author]
   name = "Blowfish"
   image = "img/blowfish_logo.png"
-  headline = "A powerful, lightweight theme for Hugo built with Tailwind CSS."
-  bio = "A powerful, lightweight theme for Hugo built with Tailwind CSS."
+  headline = "A powerful, lightweight theme for Hugo."
+  bio = "A powerful, lightweight theme for Hugo."
   links = [
     { x-twitter = "https://twitter.com/burufugu" },
     #{ mastodon = "https://masto.ai/@blowfish" },

exampleSite/config/_default/params.toml

@@ -18,15 +18,15 @@ mainSections = ["docs"]
 disableImageOptimization = false
 disableTextInHeader = false
 
-defaultBackgroundImage = "/img/gradient.svg"
-defaultFeaturedImage = "/img/ocean.jpg"
+defaultBackgroundImage = "/img/background.svg"
+defaultFeaturedImage = "/img/featured.svg"
 
 highlightCurrentMenuArea = true
 smartTOC = true
 smartTOCHideUnfocusedChildren = false
 
 [header]
-  layout = "fixed" # valid options: basic, fixed, fixed-fill, fixed-fill-blur
+  layout = "fixed-gradient" # valid options: basic, fixed, fixed-fill, fixed-gradient, fixed-fill-blur
 
 [footer]
   showMenu = true

exampleSite/content/_index.md

@@ -3,18 +3,12 @@ title: "Welcome to Blowfish! :tada:"
 description: "This page was built using the Blowfish theme for Hugo."
 ---
 
-Welcome to Blowfish, one of the most flexible and robust Hugo themes. It is designed to be simple, fast and content-focused. Learn more about how to install [here]({{< ref "docs/installation" >}}) or get started with our CLI using:
-
 ```node
 npx blowfish-tools
 ```  
 
 {{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}
 
-<!--You can also find the complete theme documentation in [docs]({{< ref "docs" >}}). Blowfish is highly customizable and can be configured to fit your needs: from a static website to a blog. Checkout some [examples](/examples) and what some of our [users](/users) have been building.
-
-Explore the [shortcode list]({{< ref "docs/shortcodes" >}}) and [sample pages]({{< ref "samples" >}}) to get a feel for what Blowfish can do. If you like what you see, check out the project on <a target="_blank" href="https://github.com/nunocoracao/blowfish">Github</a> or read the [Installation guide]({{< ref "docs/installation" >}}) to get started.-->
-
 <div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
   <span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
     {{< icon "triangle-exclamation" >}}

layouts/partials/header/fixed-gradient.html

@@ -0,0 +1,15 @@
+<div class="min-h-[148px]"></div>
+<div class="fixed inset-x-0 min-h-[130px] opacity-65 pl-[24px] pr-[24px] bg-gradient-to-b from-neutral from-60% dark:from-neutral-800 to-transparent mix-blend-normal" style="z-index:80"></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 backdrop-blur-2xl shadow-2xl"></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>