improvements to background component in homepage and articles

assets/css/compiled/main.css

@@ -1651,8 +1651,12 @@ select {
   height: 2rem;
 }
 
-.h-\[300px\] {
+.h-\[200px\] {
-  height: 300px;
+  height: 200px;
+}
+
+.h-\[700px\] {
+  height: 700px;
 }
 
 .h-36 {
@@ -2006,6 +2010,10 @@ select {
   --tw-gradient-to: transparent;
 }
 
+.to-neutral {
+  --tw-gradient-to: rgba(var(--color-neutral), 1);
+}
+
 .to-secondary-700 {
   --tw-gradient-to: rgba(var(--color-secondary-700), 1);
 }
@@ -2332,6 +2340,14 @@ select {
   opacity: 0;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .mix-blend-normal {
   mix-blend-mode: normal;
 }
@@ -3408,8 +3424,8 @@ body:has(#menu-controller:checked) {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.dark .dark\:to-neutral-300 {
+.dark .dark\:to-neutral-800 {
-  --tw-gradient-to: rgba(var(--color-neutral-300), 1);
+  --tw-gradient-to: rgba(var(--color-neutral-800), 1);
 }
 
 .dark .dark\:to-secondary-800 {
@@ -3488,8 +3504,8 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
 }
 
-.dark .dark\:mix-blend-multiply {
+.dark .dark\:opacity-60 {
-  mix-blend-mode: multiply;
+  opacity: 0.6;
 }
 
 .dark .dark\:hover\:bg-primary-900:hover {

exampleSite/assets/js/home.js

@@ -1,7 +1,7 @@
 var layouts = [
-  "profile",
   "background",
   "hero",
+  "profile",
   "page",
   "card"
 ]

exampleSite/content/_index.md

@@ -10,7 +10,7 @@ This is a demo site built entirely using Blowfish. It also contains a complete s
     {{< icon "triangle-exclamation" >}}
   </span>
   <span class="flex items-center justify-between grow dark:text-neutral-300">
-    <span class="prose dark:prose-invert">This is a demo of the <code id="layout">profile</code> layout.</span>
+    <span class="prose dark:prose-invert">This is a demo of the <code id="layout">background</code> layout.</span>
     <button
       id="switch-layout-button"
       class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"

exampleSite/layouts/partials/home/custom.html

@@ -1,11 +1,11 @@
 {{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint "sha512" }}
-<div id="background" style="display:none">
+<div id="background">
   {{ partial "partials/home/background.html" . }}
 </div>
 <div id="hero" style="display:none">
   {{ partial "partials/home/hero.html" . }}
 </div>
-<div id="profile" class="">
+<div id="profile" style="display:none">
   {{ partial "partials/home/profile.html" . }}
 </div>
 <div id="card" style="display:none">

layouts/_default/single.html

@@ -8,6 +8,7 @@
   {{ partial "partials/hero/basic.html" . }}
   {{ end }}
   {{- end -}}
+  
   <header id="single_header" class="mt-5 max-w-prose">
     {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
     {{ partial "breadcrumbs.html" . }}
@@ -23,12 +24,12 @@
     {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
     .TableOfContents "<ul") }} 
     <div class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
-      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10">
+      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10 backdrop-blur">
         {{ partial "toc.html" . }}
       </div>
       </div>
       {{ end }}
-      <div class="min-w-0 min-h-0 max-w-prose">
+      <div class="min-w-0 min-h-0 max-w-prose backdrop-blur">
         {{ partial "series.html" . }}
         {{ .Content | emojify }}
         </br></br>
@@ -148,17 +149,6 @@
           }
         }
 
-        var header = document.getElementById("single_header")
-        var style = getComputedStyle(header);
-        var hero = document.getElementById('hero')
-        if (hero) {
-          var margin = '-' + (parseInt(style.height) + parseInt(style.marginTop) + parseInt(style.marginBottom) + 20) + 'px'
-          var height = (-parseInt(margin) + parseInt(getComputedStyle(hero).height)) + "px"
-          console.log(height)
-          hero.style["margin-bottom"] = margin;
-          hero.style["height"] = height;
-        }
-
       </script>
   </section>
   <footer class="pt-8 max-w-prose print:hidden">

layouts/partials/article-link-card.html

@@ -3,7 +3,7 @@
   {{ else }}
   <a href="{{ .RelPermalink }}" class="min-w-full">
     {{ end }}
-    <div class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
+    <div class="border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
 
       {{- with $.Params.images -}}
       {{- range first 6 . }}

layouts/partials/article-link.html

@@ -1,4 +1,4 @@
-{{ $articleClasses := "flex flex-wrap article" }}
+{{ $articleClasses := "flex flex-wrap article backdrop-blur" }}
 {{ if .Site.Params.list.showCards }}
 {{ $articleClasses = delimit (slice $articleClasses "border" "border-neutral-200 dark:border-neutral-700 border-2 rounded-md") " " }}
 {{ end }}

layouts/partials/hero/background.html

@@ -2,9 +2,16 @@
 {{- $featured := $images.GetMatch "*feature*" -}}
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
 {{- with $featured -}}
-    {{ with .Resize "1200x" }}
+{{ with .Resize "1200x" }}
-        <div id="hero" class="relative h-[300px] single_hero_background nozoom" style="background-image:url({{ .RelPermalink }});">
+<div id="hero" class="h-[200px]"></div>
-            <div class="hero_gradient bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
+<div class="fixed inset-x-0 top-0 h-[700px] single_hero_background nozoom"
-        </div>
+    style="background-image:url({{ .RelPermalink }});">    
-    {{ end }}
+    <div
+        class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
+    </div>
+    <div
+        class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
+    </div>
+</div>
+{{ end }}
 {{- end -}}

layouts/partials/home/background.html

@@ -3,16 +3,16 @@
         <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
         <div class="mx-auto max-w-7xl p-0">
             <div class="relative sm:overflow-hidden">
-                <div class="absolute inset-0">
+                <div class="fixed inset-x-0 top-0" style="z-index:-10">
                     {{ with .Site.Params.homepage.homepageImage }}
                     {{ $homepageImage := resources.Get . }}
                     {{ if $homepageImage }}
                     <img class="h-full w-full object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}">
                     <div
-                        class="absolute inset-0 bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent dark:to-neutral-300  mix-blend-normal dark:mix-blend-multiply">
+                        class="absolute inset-0 bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent mix-blend-normal">
                     </div>
                     <div
-                        class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
+                        class="opacity-70 absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
                     </div>
                     {{ end }}
                     {{ end }}