From 780bca5f96b34ce175f8067ecdef4c419762e1a9 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 19 Oct 2023 14:04:44 +0200
Subject: [PATCH] Safari and Firefox render cards correctly

---
 src/lib/components/Card.svelte | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index fd99990..6b54a42 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -66,6 +66,28 @@ div:has(div #image){
 	width: var(--card-width);
 	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:focus-within{
 	transform: scale(1.02,1.02);
@@ -164,8 +186,8 @@ div:has(div #image){
 </style>
 
 <a class="card {search}" href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
-	<div>
-	<div style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
+	<div id=div_div_image >
+	<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}/>
 	</div>
 	</div>