From ee4eda7a32dd87a7a28d3da33488546ee42b929b Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 10 Apr 2026 20:55:17 +0200
Subject: [PATCH] feat: restyle recipe info cards with grid layout and lucide
 icons

Align recipe metadata cards with site-wide design language using
surface colors, borders, and rounded corners. Add distinct lucide
icons per card type (Timer, Wheat, Croissant, Flame, CookingPot,
UtensilsCrossed) and switch from flex-wrap to CSS grid for uniform
card widths.
---
 package.json                                  |  2 +-
 .../recipes/InstructionsPage.svelte           | 50 ++++++++++---------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 2202c43..6b16d83 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.23.5",
+	"version": "1.23.6",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/recipes/InstructionsPage.svelte b/src/lib/components/recipes/InstructionsPage.svelte
index e7293b3..f4f83d0 100644
--- a/src/lib/components/recipes/InstructionsPage.svelte
+++ b/src/lib/components/recipes/InstructionsPage.svelte
@@ -1,4 +1,5 @@
 <script>
+import { Timer, Wheat, Croissant, Flame, CookingPot, UtensilsCrossed } from '@lucide/svelte';
 let { data } = $props();
 
 // svelte-ignore state_referenced_locally
@@ -128,52 +129,55 @@ ol li::marker{
 }
 
 .additional_info{
-	display: flex;
-	flex-wrap: wrap;
-	gap: 1em;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	gap: 0.75rem;
 }
-.additional_info > *{
-	flex-grow: 0;
-	padding: 1em;
-	background-color: var(--color-bg-tertiary);
+.info-card{
+	padding: 0.75rem 1rem;
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-md);
 	box-shadow: var(--shadow-sm);
-	max-width: 30%
 }
-@media screen and (max-width: 500px){
-	.additional_info > *{
-		max-width: 60%;
-	}
+.info-card h3{
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+	margin: 0 0 0.25rem 0;
+	font-size: var(--text-sm);
+	color: var(--color-text-secondary);
 }
-
-h3{
-	margin-block: 0;
+.info-value{
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--color-text-primary);
 }
 </style>
 <div class=instructions>
-<div class=additional_info>
+<div class="additional_info">
 {#if data.preparation}
-<div><h3>{labels.preparation}</h3>{data.preparation}</div>
+<div class="info-card"><h3><Timer size={16} />{labels.preparation}</h3><span class="info-value">{data.preparation}</span></div>
 {/if}
 
-
 {#if data.fermentation?.bulk}
-	<div><h3>{labels.bulkFermentation}</h3>{data.fermentation.bulk}</div>
+<div class="info-card"><h3><Wheat size={16} />{labels.bulkFermentation}</h3><span class="info-value">{data.fermentation.bulk}</span></div>
 {/if}
 
 {#if data.fermentation?.final}
-	<div><h3>{labels.finalProof}</h3> {data.fermentation.final}</div>
+<div class="info-card"><h3><Croissant size={16} />{labels.finalProof}</h3><span class="info-value">{data.fermentation.final}</span></div>
 {/if}
 
 {#if data.baking?.temperature}
-<div><h3>{labels.baking}</h3> {data.baking.length} {labels.at} {data.baking.temperature} °C {data.baking.mode}</div>
+<div class="info-card"><h3><Flame size={16} />{labels.baking}</h3><span class="info-value">{data.baking.length} {labels.at} {data.baking.temperature} °C {data.baking.mode}</span></div>
 {/if}
 
 {#if data.cooking}
-<div><h3>{labels.cooking}</h3>{data.cooking}</div>
+<div class="info-card"><h3><CookingPot size={16} />{labels.cooking}</h3><span class="info-value">{data.cooking}</span></div>
 {/if}
 
 {#if data.total_time}
-<div><h3>{labels.onThePlate}</h3>{data.total_time}</div>
+<div class="info-card"><h3><UtensilsCrossed size={16} />{labels.onThePlate}</h3><span class="info-value">{data.total_time}</span></div>
 {/if}
 </div>