gribse/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

optimize images and blur them
Some checks are pending
/ test (push) Waiting to run
Details

Browse source
This commit is contained in:
gribse 2025-04-21 18:00:27 +02:00
parent 24ca5c54c1
commit 683b2c6cdd
1 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
layouts/partials/posts-defile.html
View file

@ -8,26 +8,39 @@
<div class="scrolling-posts {{ $direction }}-scroll"> <div class="scrolling-posts {{ $direction }}-scroll">
{{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}} {{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
{{- range (sort $pages "Date" "desc") -}} {{- range (sort $pages "Date" "desc") -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2)), url('{{ .Permalink }}{{ .Params.cover.image }}');"> {{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
{{- if $image -}}
{{- $fittedImage := $image.Fit "400x400 webp q95" -}}
{{- $optimizedBlurredImage := $fittedImage.Filter (images.GaussianBlur 3) -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2)), url('{{ $optimizedBlurredImage.RelPermalink }}');">
<span class="section-badge">{{ .Section }}</span> <span class="section-badge">{{ .Section }}</span>
<span class="scrolling-posts-item-title">{{ .Title }}</span> <span class="scrolling-posts-item-title">{{ .Title }}</span>
<p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p> <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
</a> </a>
{{- end -}} {{- end -}}
{{- end -}}
</div> </div>
<div class="scrolling-posts {{ $direction }}-scroll"> <div class="scrolling-posts {{ $direction }}-scroll">
{{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}} {{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
{{- range (sort $pages "Date" "desc") -}} {{- range (sort $pages "Date" "desc") -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2)), url('{{ .Permalink }}{{ .Params.cover.image }}');"> {{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
{{- if $image -}}
{{- $fittedImage := $image.Fit "400x400 webp q85" -}}
{{- $optimizedBlurredImage := $fittedImage.Filter (images.GaussianBlur 3) -}}
<a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2)), url('{{ $optimizedBlurredImage.RelPermalink }}');">
<span class="section-badge">{{ .Section }}</span> <span class="section-badge">{{ .Section }}</span>
<span class="scrolling-posts-item-title">{{ .Title }}</span> <span class="scrolling-posts-item-title">{{ .Title }}</span>
<p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p> <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
</a> </a>
{{- end -}} {{- end -}}
{{- end -}}
</div> </div>
</div> </div>
</div> </div>
@ -69,7 +82,6 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
backdrop-filter: blur(100px);
} }
.scrolling-posts-item-title { .scrolling-posts-item-title {
@ -116,7 +128,6 @@
transform: translateY(-100%); transform: translateY(-100%);
} }
} }
@keyframes scrollDown { @keyframes scrollDown {
0% { 0% {
transform: translateY(-100%); transform: translateY(-100%);