Chosto
/
blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Blur image server side to avoid performance issues

master
Quentin Duchemin 2023-08-09 21:08:28 +02:00
parent 231d158c6f
commit bf11268599
Signed by: Chosto
GPG Key ID: 96AB8AE7DFEA3D74
4 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.yaml
View File

@ -21,6 +21,8 @@ markup:
renderer: renderer:
# Render newlines as <br> # Render newlines as <br>
hardWraps: true hardWraps: true
# Render HTML in MD files, necessary for superscript
unsafe: true
tableOfContents: tableOfContents:
endLevel: 3 endLevel: 3
ordered: false ordered: false

1
themes/chosto/layouts/partials/head.html
View File

@ -16,6 +16,7 @@
{{ $image = . }} {{ $image = . }}
{{ end }} {{ end }}
{{ $image = $image.Resize "3000x" }} {{ $image = $image.Resize "3000x" }}
{{ $image := $image | images.Filter (images.GaussianBlur 7) }}
<!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system --> <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
<style> <style>
.has-bg-img { .has-bg-img {

43
themes/chosto/layouts/partials/header.html
View File

@ -4,29 +4,27 @@
{{ $background := in "page home" .Kind }} {{ $background := in "page home" .Kind }}
<header> <header>
<section class='hero has-text-centered {{ if $background }}is-large is-info has-bg-img{{ end }}'> <section class='hero has-text-centered {{ if $background }}is-large is-info has-bg-img{{ end }}'>
<div class="blur"> <div class="hero-head mx-5">
<div class="hero-head mx-5"> <div class="level mt-4">
<div class="level mt-4"> <div class="level-left">
<div class="level-left"> {{ with .Params.imgLicence }}
{{ with .Params.imgLicence }} <p class="level-item subtitle is-size-5-desktop is-size-7-mobile">
<p class="level-item subtitle is-size-5-desktop is-size-7-mobile"> Image d'illustration {{ . }}
Image d'illustration {{ . }} </p>
</p> {{ end }}
{{ end }} </div>
</div> <div class="level-right mt-3 is-hidden-touch">
<div class="level-right mt-3 is-hidden-touch"> <div class="level-item">
<div class="level-item"> {{ with .Params.categories }}
{{ with .Params.categories }} <div class="tags colums is-vcentered">
<div class="tags colums is-vcentered"> {{ range . }}
{{ range . }} <span class="tag is-info is-light is-large mr-4"><a
<span class="tag is-info is-light is-large mr-4"><a href="{{ " categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span> href="{{ " categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
{{ end }}
</div>
{{ end }} {{ end }}
</div> </div>
{{ end }}
</div> </div>
</div> </div>
</div> </div>
<div class="hero-body {{ if not $background }}pb-0{{ end }} container has-text-centered"> <div class="hero-body {{ if not $background }}pb-0{{ end }} container has-text-centered">
<p class="title is-size-1-desktop is-size-3-mobile is-uppercase">{{ .Title }}</p> <p class="title is-size-1-desktop is-size-3-mobile is-uppercase">{{ .Title }}</p>
@ -41,14 +39,17 @@
<div class="level-left"> <div class="level-left">
<div class="level-item has-text-left"> <div class="level-item has-text-left">
<time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}"> <time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
<p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">📅&nbsp;&nbsp;Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p> <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">📅&nbsp;&nbsp;Article publié le
<strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }}
{{ .Date.Year }}</strong></p>
</time> </time>
</div> </div>
</div> </div>
<div class="level-right"> <div class="level-right">
<div class="level-item has-text-right"> <div class="level-item has-text-right">
<div> <div>
<p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">🕑&nbsp;&nbsp;Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture <p class="mb-2 subtitle is-size-5-desktop is-size-7-mobile">🕑&nbsp;&nbsp;Environ
<strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture
</p> </p>
</div> </div>
</div> </div>

7
themes/chosto/static/css/custom.css
View File

@ -9,11 +9,6 @@
font-display: swap; font-display: swap;
} }
/* Make the parent background blur under this element */
.blur {
backdrop-filter: blur(3px);
}
/* Trick which changes nothing visually but makes the footnote anchors /* Trick which changes nothing visually but makes the footnote anchors
virtually 40% lower. Otherwise the fixed navbar is just above the virtually 40% lower. Otherwise the fixed navbar is just above the
footnote link when going back from the bottom. That way, either footnote link when going back from the bottom. That way, either
@ -46,7 +41,7 @@ p:not(.title, .subtitle) {
font-size: 1rem; font-size: 1rem;
} }
figcaption h4 { figcaption h4, figcaption p {
margin-top: 10px; margin-top: 10px;
font-size: 1rem !important; font-size: 1rem !important;
font-weight: 400 !important; font-weight: 400 !important;