Merge pull request #196 from nunocoracao/193-blur-in-article-background-needs-improvements

enhavements to blur effects

assets/css/compiled/main.css

@@ -1651,12 +1651,12 @@ select {
   height: 2rem;
 }
 
-.h-\[200px\] {
-  height: 200px;
+.h-\[300px\] {
+  height: 300px;
 }
 
-.h-\[700px\] {
-  height: 700px;
+.h-\[900px\] {
+  height: 900px;
 }
 
 .h-36 {
@@ -2376,6 +2376,11 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.blur-xl {
+  --tw-blur: blur(24px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

exampleSite/assets/js/home.js

@@ -57,10 +57,6 @@ function switchList() {
   var currentDiv = document.getElementById(list_config[currentConfig])
   const configCode = document.querySelectorAll("code[id=config]");
 
-  console.log(currentConfig)
-  console.log(oldDiv)
-  console.log(currentDiv)
-
   currentDiv.style.display = "block";
   oldDiv.style.display = "none";
 

layouts/_default/single.html

@@ -24,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 backdrop-blur">
+      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10">
         {{ partial "toc.html" . }}
       </div>
       </div>
       {{ end }}
-      <div class="min-w-0 min-h-0 max-w-prose backdrop-blur">
+      <div class="min-w-0 min-h-0 max-w-prose">
         {{ partial "series.html" . }}
         {{ .Content | emojify }}
         </br></br>

layouts/partials/hero/background.html

@@ -3,15 +3,29 @@
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
 {{- with $featured -}}
 {{ with .Resize "1200x" }}
-<div id="hero" class="h-[200px]"></div>
-<div class="fixed inset-x-0 top-0 h-[700px] single_hero_background nozoom"
-    style="background-image:url({{ .RelPermalink }});">    
-    <div
-        class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
+<div id="hero" class="h-[300px]"></div>
+<div class="fixed inset-x-0 top-0 h-[900px] single_hero_background nozoom"
+    style="background-image:url({{ .RelPermalink }});">
+    <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>
+<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-[900px] single_hero_background nozoom blur-xl"
+    style="background-image:url({{ .RelPermalink }});">
+    <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>
+<script>
+    window.addEventListener('scroll', function (e) {
+        var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        var background_blur = document.getElementById('background-blur');
+        background_blur.style.opacity = (scroll / 150.0)
+    });
+</script>
 {{ end }}
 {{- end -}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hugo-blowfish-theme",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "description": "Blowfish theme for Hugo",
   "scripts": {
     "preinstall": "rimraf assets/vendor",