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">
{{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
{{- 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="scrolling-posts-item-title">{{ .Title }}</span>
<p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
</a>
{{- end -}}
{{- end -}}
</div>
<div class="scrolling-posts {{ $direction }}-scroll">
{{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
{{- 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="scrolling-posts-item-title">{{ .Title }}</span>
<p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
</a>
{{- end -}}
{{- end -}}
</div>
</div>
</div>
@ -69,7 +82,6 @@
background-position: center;
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: blur(100px);
}
.scrolling-posts-item-title {
@ -116,7 +128,6 @@
transform: translateY(-100%);
}
}
@keyframes scrollDown {
0% {
transform: translateY(-100%);