Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Card.svelte: placeholder image also blurred if JS disabled

Browse Source
This commit is contained in:
Alexander Bocken 2024-01-22 14:53:26 +01:00
parent 61488a8ce9
commit 1222fe7487
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/components/Card.svelte
View File

@ -51,10 +51,9 @@ onMount(() => {
} }
.blur{ .blur{
filter: blur(10px); filter: blur(10px);
backdrop-filter: blur(10px);
} }
.unblur{ .backdrop_blur{
filter: blur(0px) !important; backdrop-filter: blur(10px);
} }
.div_image, .div_image,
.div_div_image{ .div_div_image{
@ -175,9 +174,9 @@ onMount(() => {
<div class=div_div_image > <div class=div_div_image >
<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})"> <div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
<noscript> <noscript>
<img id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}"/> <img id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}"/>
</noscript> </noscript>
<img class:blur={!isloaded} id=image class=blur src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}" on:load={() => isloaded=true}/> <img class:blur={!isloaded} id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}" on:load={() => isloaded=true}/>
</div> </div>
</div> </div>
{#if icon_override || recipe.season.includes(current_month)} {#if icon_override || recipe.season.includes(current_month)}