From e2a76d40800fcbfb699a6bbc60ca91472fe2ee1d Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sun, 31 Aug 2025 21:07:10 +0200
Subject: [PATCH] Fix Card.svelte icon positioning and styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Restored icon to top-right position with absolute positioning
- Added proper circular background with nord0 color
- Set correct dimensions (50px × 50px) and border-radius for circular shape
- Added shadow and hover effects to match original design
- Fixed z-index to ensure icon appears above other elements
- Maintained shake animation on card hover for visual feedback

The icon now appears correctly in the top-right corner with a round
background instead of being positioned at bottom center with transparent
background.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/Card.svelte | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index b1354ad..667641b 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -55,6 +55,21 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
 	border: none;
 	background: none;
 	cursor: pointer;
+	position: absolute;
+	top: 15px;
+	right: 15px;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	background-color: var(--nord0);
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5em;
+	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
+	transition: 100ms;
+	z-index: 10;
 }
 #image{
 	width: 300px;
@@ -177,6 +192,18 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
 	scale: 0.9 0.9;
 }
 
+.icon:hover,
+.icon:focus-visible
+{
+	transform: scale(1.1, 1.1);
+	background-color: var(--nord3);
+	box-shadow: 0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.8);
+}
+
+.icon:focus {
+	transform: scale(0.9, 0.9);
+}
+
 .card:hover .icon,
 .card:focus-visible .icon
 {