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

Compare commits

base: Alexander:177e2c8fca9acdb664f53ea0aad88d146535ade2
Branches Tags
Alexander:master
...
compare: Alexander:61488a8ce9884d13989d3c4d095d7c4670987db3
Branches Tags
Alexander:master

2 Commits
177e2c8fca ... 61488a8ce9

Author SHA1 Message Date
Alexander Bocken
61488a8ce9
fix Search 2024-01-22 14:47:22 +01:00
Alexander Bocken
ef78686432
no blurred image if JS disabled 2024-01-22 14:43:52 +01:00
2 changed files with 13 additions and 3 deletions
Show Stats Expand all files Collapse all files

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

@ -48,6 +48,8 @@ onMount(() => {
height: 255px; height: 255px;
object-fit: cover; object-fit: cover;
transition: 200ms; transition: 200ms;
}
.blur{
filter: blur(10px); filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@ -168,11 +170,14 @@ onMount(() => {
} }
</style> </style>
<a class=card_anchor href="/rezepte/{recipe.short_name}"> <a class=card_anchor href="/rezepte/{recipe.short_name}" class:search_me={search} data-tags=[{recipe.tags}]>
<div class="card" class:search_me={search} data-tags=[{recipe.tags}]> <div class="card" >
<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'})">
<img class:unblur={isloaded} id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}" on:load={() => isloaded=true}/> <noscript>
<img id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}"/>
</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}/>
</div> </div>
</div> </div>
{#if icon_override || recipe.season.includes(current_month)} {#if icon_override || recipe.season.includes(current_month)}

5
src/lib/components/TitleImgParallax.svelte
View File

@ -170,6 +170,11 @@ dialog button{
<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/> <img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>
</div> </div>
</div> </div>
<noscript>
<div class=placeholder style="background-image:url({placeholder_src})" >
<img class="unblur" id=image {src} on:load={() => {isloaded=true}} alt=""/>
</div>
</noscript>
</div> </div>
</figure> </figure>
<div class=content><slot></slot></div> <div class=content><slot></slot></div>