use https://github.com/nunocoracao/blowfish.git

1 files changed, 70 insertions, 0 deletions

diff --git a/themes/blowfish/layouts/partials/hero/thumbAndBackground.html b/themes/blowfish/layouts/partials/hero/thumbAndBackground.html
new file mode 100644
index 0000000..4b807ac
--- /dev/null
+++ b/themes/blowfish/layouts/partials/hero/thumbAndBackground.html
@@ -0,0 +1,70 @@
+{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
+
+{{- $images := .Resources.ByType "image" -}}
+{{- $background := $images.GetMatch "*background*" -}}
+{{- if not $background }}{{ with .Site.Params.defaultBackgroundImage }}{{ $background = resources.Get . }}{{ end }}{{ end -}}
+{{- if not $background }}{{ $background = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- if not $background }}{{ $background = $images.GetMatch "*feature*" }}{{ end -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{ if .Params.featureimage }}
+{{- $url:= .Params.featureimage -}}
+{{- if not $featured }}{{ $featured = resources.GetRemote $url }}{{ end -}}
+{{ end }}
+{{- if not $featured }}{{ $featured = $images.GetMatch "*background*" }}{{ end -}}
+{{- if not $featured }}{{ with .Site.Params.defaultBackgroundImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
+{{ $isParentList := eq (.Scratch.Get "scope") "list"  }}
+{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or 
+        (and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList)) 
+        (and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
+    ) }}
+
+{{- with $featured -}}
+{{ if or $disableImageOptimization (strings.HasSuffix . ".svg")}}
+{{ with . }}
+<div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+{{ end }}
+{{ else }}
+{{ with .Resize "1200x" }}
+<div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+{{ end }}
+{{ end }}
+{{- end -}}
+
+{{- with $background -}}
+
+{{ if or $disableImageOptimization (strings.HasSuffix . ".svg")}}
+{{ with . }}
+<div class="fixed inset-x-0 top-0 h-[800px] 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>{{ end }}
+{{ else }}
+{{ with .Resize "1200x" }}
+<div class="fixed inset-x-0 top-0 h-[800px] 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>{{ end }}
+{{ end }}
+
+{{- end -}}
+
+{{ if $shouldBlur | default false }}
+<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></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 / 300)
+    });
+</script>
+{{ end }}
+