dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 15:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhavements to blur effects

Browse Source
This commit is contained in:
Nuno Coração
2022-11-06 00:59:44 +00:00
parent 9848ca7b44
commit 83f28f8cca
5 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_default/single.html
+2 -2
View File
@@ -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
+19 -5
View File
@@ -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 -}}