From 51381c3f3dc40ea37addc39a4f7f01d02e04815e Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Wed, 24 Jan 2024 11:09:54 +0100
Subject: [PATCH] only margin-right in MediaScroller

---
 src/lib/components/Card.svelte  | 9 ++++++---
 src/routes/rezepte/+page.svelte | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index f9c7a30..c347997 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -6,6 +6,7 @@ export let search = true;
 import "$lib/css/nordtheme.css";
 import "$lib/css/shake.css";
 import "$lib/css/icon.css";
+export let do_margin_right = false;
 
 if(icon_override){
 	current_month = recipe.season[0]
@@ -25,7 +26,6 @@ onMount(() => {
 	border-radius: 20px;
 }
 .card{
-	margin-right: 2em; /* gap in MediaScroller does not work due to double insertion of a tag on server side */
 	--card-width: 300px;
 	position: relative;
 	flex-shrink: 0;
@@ -168,10 +168,13 @@ onMount(() => {
 {
 	animation: shake 0.6s;
 }
+.margin_right{
+	margin-right: 2em;
+}
 </style>
 
-<a class=card_anchor href="/rezepte/{recipe.short_name}" class:search_me={search} data-tags=[{recipe.tags}]>
-<div class="card" >
+<a class=card_anchor href="/rezepte/{recipe.short_name}" class:search_me={search} data-tags=[{recipe.tags}] >
+<div class="card" class:margin_right={do_margin_right}>
 	<div class=div_div_image >
 		<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
 			<noscript>
diff --git a/src/routes/rezepte/+page.svelte b/src/routes/rezepte/+page.svelte
index d90375a..0db536a 100644
--- a/src/routes/rezepte/+page.svelte
+++ b/src/routes/rezepte/+page.svelte
@@ -30,14 +30,14 @@ h1{
 
 <MediaScroller title="In Saison">
 {#each data.season as recipe}
-	<Card {recipe} {current_month}></Card>
+	<Card {recipe} {current_month} do_margin_right={true}></Card>
 {/each}
 </MediaScroller>
 
 {#each categories as category}
 	<MediaScroller title={category}>
 	{#each data.all_brief.filter(recipe => recipe.category == category) as recipe}
-		<Card {recipe} {current_month}></Card>
+		<Card {recipe} {current_month} do_margin_right={true}></Card>
 	{/each}
 	</MediaScroller>
 {/each}