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 {
@@ -1743,6 +1743,10 @@ select {
   max-width: 65ch;
 }
 
+.max-w-\[1600px\] {
+  max-width: 1600px;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -2372,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);
@@ -3065,7 +3074,7 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 300px;
+  height: 250px;
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center;

assets/css/main.css

@@ -348,7 +348,7 @@ body:has(#menu-controller:checked) {
 }
 
 .thumbnail_card {
-  height: 300px;
+  height: 250px;
   background-repeat:no-repeat;
   background-size:cover; 
   background-position:center;

exampleSite/assets/js/home.js

@@ -35,8 +35,8 @@ window.addEventListener("DOMContentLoaded", (event) => {
 });
 
 var list_config = [
-  "CardViewProse",
   "CardViewScreenWidth",
+  "CardViewProse",
   "NormalView"
 ]
 
@@ -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";
 

exampleSite/layouts/partials/recent-articles-demo.html

@@ -16,7 +16,7 @@
     </span>
 </div>
 
-<div id="CardViewProse" class="">
+<div id="CardViewProse" class="hidden h-full">
     <section class="w-full">
         <div class="flex flex-wrap">
             {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
@@ -28,8 +28,9 @@
         </div>
     </section>
 </div>
-<div id="CardViewScreenWidth" class="hidden h-full">
-    <section class="relative w-screen" style="left: calc(-50vw + 50%);">
+
+<div id="CardViewScreenWidth" class="">
+    <section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
         <div class="flex flex-wrap pl-8 pr-8">
             {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
             .Site.Params.mainSections)).Pages }}
@@ -40,6 +41,7 @@
         </div>
     </section>
 </div>
+
 <div id="NormalView" class="hidden h-full">
     <section class="space-y-10 w-full">
         {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"

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 -}}

layouts/partials/recent-articles.html

@@ -8,7 +8,7 @@
 
 {{ if .Site.Params.homepage.cardView | default false }}
 {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
-<section class="relative w-screen" style="left: calc(-50vw + 50%);">
+<section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
   <div class="flex flex-wrap pl-8 pr-8">
     {{ else }}
     <section class="w-full">

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",