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

feat: restyle recipe info cards with grid layout and lucide icons
All checks were successful
CI / update (push) Successful in 3m42s
Details

Browse Source 
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.
This commit is contained in:
Alexander Bocken
2026-04-10 20:55:17 +02:00
parent 72a77b9dc3
commit ee4eda7a32
2 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "homepage", "name": "homepage",
"version": "1.23.5", "version": "1.23.6",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {

50
src/lib/components/recipes/InstructionsPage.svelte
View File

@@ -1,4 +1,5 @@
<script> <script>
import { Timer, Wheat, Croissant, Flame, CookingPot, UtensilsCrossed } from '@lucide/svelte';
let { data } = $props(); let { data } = $props();
// svelte-ignore state_referenced_locally // svelte-ignore state_referenced_locally
@@ -128,52 +129,55 @@ ol li::marker{
} }
.additional_info{ .additional_info{
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: 1em; gap: 0.75rem;
} }
.additional_info > *{ .info-card{
flex-grow: 0; padding: 0.75rem 1rem;
padding: 1em; background: var(--color-surface);
background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
max-width: 30%
} }
@media screen and (max-width: 500px){ .info-card h3{
.additional_info > *{ display: flex;
max-width: 60%; align-items: center;
gap: 0.4rem;
margin: 0 0 0.25rem 0;
font-size: var(--text-sm);
color: var(--color-text-secondary);
} }
} .info-value{
font-size: 1rem;
h3{ font-weight: 600;
margin-block: 0; color: var(--color-text-primary);
} }
</style> </style>
<div class=instructions> <div class=instructions>
<div class=additional_info> <div class="additional_info">
{#if data.preparation} {#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}
{#if data.fermentation?.bulk} {#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}
{#if data.fermentation?.final} {#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}
{#if data.baking?.temperature} {#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}
{#if data.cooking} {#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}
{#if data.total_time} {#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} {/if}
</div> </div>