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

Safari and Firefox render cards correctly

Browse Source
This commit is contained in:
Alexander Bocken 2023-10-19 14:04:44 +02:00
parent c22253f4bc
commit 780bca5f96
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
1 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,6 +66,28 @@ div:has(div #image){
width: var(--card-width); width: var(--card-width);
top: 0; top: 0;
} }
@supports(-moz-appearance:none){
#image{
}
#image, #div_image{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
height: 100%;
}
#div_image{
background-repeat: no-repeat;
background-size: cover;
}
#div_div_image{
height: calc(var(--card-width)*0.85);
position: absolute;
width: var(--card-width);
top: 0;
}
}
.card:hover, .card:hover,
.card:focus-within{ .card:focus-within{
transform: scale(1.02,1.02); transform: scale(1.02,1.02);
@ -164,8 +186,8 @@ div:has(div #image){
</style> </style>
<a class="card {search}" href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]> <a class="card {search}" href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
<div> <div id=div_div_image >
<div style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})"> <div id=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}/> <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}/>
</div> </div>
</div> </div>