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

recipes: Swissmilk-inspired hero redesign with parallax and card refresh

Browse Source 
- Full-bleed hero image with CSS parallax (scaleY technique matching TitleImgParallax)
- Hero picks random seasonal recipe with hashed image on each visit
- Left-aligned title, subheading, and featured recipe link over the hero
- Category chips with ellipsis collapse on small screens (<600px)
- Search bar anchored to hero/grid boundary regardless of chip count
- CompactCard redesign: 3/2 aspect ratio, rounded corners, subtle hover zoom
- Search component margin adjusted to sit flush at hero boundary
This commit is contained in:
Alexander Bocken
2026-02-16 13:53:48 +01:00
parent 0e9daf296d
commit f900d4217d
3 changed files with 562 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/lib/components/recipes/CompactCard.svelte Normal file
View File

@@ -0,0 +1,134 @@
<script lang="ts">
import "$lib/css/shake.css";
let {
recipe,
current_month = 0,
isFavorite = false,
showFavoriteIndicator = false,
loading_strat = "lazy",
routePrefix = '/rezepte'
} = $props();
const img_name = $derived(
recipe.images?.[0]?.mediapath ||
`${recipe.germanShortName || recipe.short_name}.webp`
);
const img_alt = $derived(
recipe.images?.[0]?.alt || recipe.name
);
const isInSeason = $derived(recipe.season?.includes(current_month));
</script>
<style>
.compact-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius-card);
overflow: hidden;
background: var(--color-surface);
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
cursor: pointer;
}
.compact-card:hover,
.compact-card:focus-within {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.compact-card:hover .img-wrap img {
transform: scale(1.05);
}
.compact-card:hover .icon,
.compact-card:focus-within .icon {
animation: shake 0.6s;
}
.card-link {
position: absolute;
inset: 0;
z-index: 1;
}
.img-wrap {
aspect-ratio: 3 / 2;
overflow: hidden;
}
.img-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.info {
position: relative;
padding: 0.8em 0.9em 0.7em;
flex: 1;
}
.name {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.3em;
margin-top: 0.5em;
position: relative;
z-index: 2;
}
.tag {
font-size: 0.7rem;
padding: 0.15em 0.6em;
}
.icon {
position: absolute;
top: -0.75em;
right: 0.6em;
width: 2em;
height: 2em;
font-size: 1rem;
background-color: var(--color-primary);
color: white;
z-index: 3;
}
.favorite {
position: absolute;
top: 0.5em;
left: 0.5em;
font-size: 1.1rem;
filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
z-index: 2;
pointer-events: none;
}
</style>
<div class="compact-card">
<a href="{routePrefix}/{recipe.short_name}" class="card-link" aria-label={recipe.name}></a>
{#if showFavoriteIndicator && isFavorite}
<span class="favorite">❤️</span>
{/if}
<div class="img-wrap">
<img
src="https://bocken.org/static/rezepte/thumb/{img_name}"
alt={img_alt}
loading={loading_strat}
/>
</div>
<div class="info">
{#if isInSeason}
<span class="icon g-icon-badge">{recipe.icon}</span>
{/if}
<p class="name">{@html recipe.name}</p>
{#if recipe.tags?.length}
<div class="tags">
{#each recipe.tags as tag (tag)}
<a href="{routePrefix}/tag/{tag}" class="tag g-tag">{tag}</a>
{/each}
</div>
{/if}
</div>
</div>

8
src/lib/components/recipes/Search.svelte
View File

@@ -319,15 +319,15 @@ input::placeholder{
}
.search {
width: 500px;
max-width: 85vw;
width: 560px;
max-width: 88vw;
position: relative;
margin: 2.5rem auto 1.2rem;
margin: 0 auto;
font-size: 1.6rem;
display: flex;
align-items: center;
transition: var(--transition-fast);
filter: drop-shadow(0.4em 0.5em 0.4em rgba(0,0,0,0.4))
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
.search:hover,

484
src/routes/[recipeLang=recipeLang]/+page.svelte
View File

@@ -1,11 +1,10 @@
<script lang="ts">
import type { PageData } from './$types';
import MediaScroller from '$lib/components/recipes/MediaScroller.svelte';
import AddButton from '$lib/components/AddButton.svelte';
import Card from '$lib/components/recipes/Card.svelte';
import CompactCard from '$lib/components/recipes/CompactCard.svelte';
import Search from '$lib/components/recipes/Search.svelte';
import LazyCategory from '$lib/components/LazyCategory.svelte';
import { getCategories } from '$lib/js/categories';
let { data } = $props<{ data: PageData }>();
let current_month = new Date().getMonth() + 1;
@@ -14,7 +13,6 @@
let matchedCategories = $state(new Set());
let hasActiveSearch = $state(false);
// Handle search results from Search component
function handleSearchResults(ids, categories) {
matchedRecipeIds = ids;
matchedCategories = categories || new Set();
@@ -24,50 +22,102 @@
const isEnglish = $derived(data.lang === 'en');
const categories = $derived(getCategories(data.lang));
// Pre-compute category-to-recipes Map for O(1) lookups
// Pick a seasonal hero recipe (changes daily) — only recipes with hashed images
// Only recipes with hashed images (e.g. myrecipe.a1b2c3d4.webp)
const hasHashedImage = (r) => r.images?.length > 0 && /\.\w+\.\w+$/.test(r.images[0].mediapath);
// Pick once on mount — not reactive, so image and link always match
const heroIndex = Math.random();
const heroRecipe = $derived.by(() => {
const seasonPool = data.season.filter(hasHashedImage);
const pool = seasonPool.length > 0 ? seasonPool : data.all_brief.filter(hasHashedImage);
if (pool.length === 0) return null;
return pool[Math.floor(heroIndex * pool.length)];
});
const heroImg = $derived(
heroRecipe ? heroRecipe.images[0].mediapath : ''
);
// Category chip state: 'all', 'season', or a category name
let activeChip = $state('all');
let chipsExpanded = $state(false);
// Incremental rendering
const BATCH_SIZE = 24;
let visibleCount = $state(BATCH_SIZE);
let sentinel = $state<HTMLElement | null>(null);
// Reset visible count when chip or search changes
$effect(() => {
// Track dependencies
activeChip;
hasActiveSearch;
matchedRecipeIds;
visibleCount = BATCH_SIZE;
});
// IntersectionObserver for infinite scroll
$effect(() => {
if (!sentinel) return;
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
visibleCount += BATCH_SIZE;
}
}, { rootMargin: '200px' });
observer.observe(sentinel);
return () => observer.disconnect();
});
// Pre-compute category-to-recipes Map
const recipesByCategory = $derived.by(() => {
const map = new Map();
const map = new Map<string, typeof data.all_brief>();
for (const recipe of data.all_brief) {
if (!map.has(recipe.category)) {
map.set(recipe.category, []);
}
map.get(recipe.category).push(recipe);
map.get(recipe.category)!.push(recipe);
}
return map;
});
// Memoized filtered recipes by category
const filteredRecipesByCategory = $derived.by(() => {
if (!hasActiveSearch) {
// No search active - return all recipes by category
return recipesByCategory;
// Category counts (unfiltered, for chip badges)
const categoryCounts = $derived.by(() => {
const counts = new Map<string, number>();
for (const [cat, recipes] of recipesByCategory) {
counts.set(cat, recipes.length);
}
// Filter each category's recipes based on search results
const filtered = new Map();
for (const [category, recipes] of recipesByCategory) {
const matchedInCategory = recipes.filter(r => matchedRecipeIds.has(r._id));
if (matchedInCategory.length > 0) {
filtered.set(category, matchedInCategory);
}
}
return filtered;
return counts;
});
// Memoized season recipes
const seasonRecipes = $derived.by(() => {
const recipes = data.season;
if (!hasActiveSearch) {
return recipes;
// Filtered recipes for the active view
const displayRecipes = $derived.by(() => {
let pool: typeof data.all_brief;
if (activeChip === 'all') {
pool = data.all_brief;
} else if (activeChip === 'season') {
pool = data.season;
} else {
pool = recipesByCategory.get(activeChip) || [];
}
return recipes.filter(recipe => matchedRecipeIds.has(recipe._id));
if (hasActiveSearch) {
pool = pool.filter(r => matchedRecipeIds.has(r._id));
}
return pool;
});
// Sliced for incremental rendering
const visibleRecipes = $derived(displayRecipes.slice(0, visibleCount));
const hasMore = $derived(visibleCount < displayRecipes.length);
const labels = $derived({
title: isEnglish ? 'Recipes' : 'Rezepte',
subheading: isEnglish
? `${data.all_brief.length} recipes and constantly growing...`
: `${data.all_brief.length} Rezepte und stetig wachsend...`,
all: isEnglish ? 'All' : 'Alle',
inSeason: isEnglish ? 'In Season' : 'In Saison',
metaTitle: isEnglish ? 'Bocken Recipes' : 'Bocken Rezepte',
metaDescription: isEnglish
@@ -77,17 +127,232 @@
});
</script>
<style>
h1{
text-align: center;
margin-bottom: 0;
font-size: 4rem;
/* ─── Hero parallax (same scaleY technique as TitleImgParallax) ─── */
.hero-section {
--parallax-scale: 0.3;
margin-bottom: -20vh;
transform-origin: center top;
transform: translateY(-1rem) scaleY(calc(1 - var(--parallax-scale)));
}
.subheading{
text-align: center;
margin-top: 0;
font-size: 1.5rem;
@media (prefers-reduced-motion) {
.hero-section {
--parallax-scale: 0;
margin-bottom: 0;
}
}
.hero-section > * {
transform-origin: center top;
transform: scaleY(calc(1 / (1 - var(--parallax-scale))));
}
/* Sticky image — stays at top while content scrolls over it */
.hero {
position: sticky;
top: 0;
height: min(60vh, 520px);
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
z-index: -1;
}
.hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.1) 0%,
rgba(0,0,0,0.55) 100%
);
}
/* ─── Scrollable content that moves over the sticky hero ─── */
.hero-scroll-content {
position: relative;
margin: -20vh auto 0;
transition: margin-top 0.25s ease;
}
.hero-scroll-content.chips-open {
margin-top: -25vh;
}
/* Title area: overlaps the lower portion of the hero */
.hero-text {
max-width: 1200px;
margin: 0 auto;
padding: 0 2em 3.5em;
color: white;
position: relative;
}
.hero-text h1 {
margin: 0;
font-size: clamp(2.4rem, 6vw, 3.8rem);
line-height: 1.05;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.hero-text .subheading {
margin: 0.3em 0 0;
font-size: clamp(1rem, 2.5vw, 1.3rem);
opacity: 0.9;
text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
/* Featured recipe link — inline below subheading */
.hero-featured,
.hero-featured:visited,
.hero-featured:link {
display: inline-flex;
align-items: center;
gap: 0.4em;
margin-top: 0.5em;
font-size: 0.95rem;
color: white;
text-decoration: none;
opacity: 0.85;
transition: var(--transition-normal);
}
.hero-featured:hover {
opacity: 1;
}
.hero-featured .icon {
font-family: "Noto Color Emoji", emoji, sans-serif;
}
.hero-featured .recipe-name {
font-weight: 600;
}
.hero-featured .arrow-icon {
width: 0.7em;
height: 0.7em;
fill: currentColor;
}
/* ─── Category chip bar ─── */
.chip-wrap {
display: flex;
gap: 0.5em;
align-items: flex-start;
margin: 0.8em 0 0;
}
.chip-bar {
display: flex;
gap: 0.5em;
padding: 0.5em 0;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
/* On small screens, collapse to single row */
@media (max-width: 600px) {
.chip-bar:not(.expanded) {
max-height: 2.4em;
overflow: hidden;
}
}
.chip {
white-space: nowrap;
padding: 0.35em 0.9em;
font-size: 0.85rem;
font-weight: 500;
background: rgba(255,255,255,0.85);
color: var(--nord0);
flex-shrink: 0;
}
.chip:hover {
background: white;
transform: scale(1.04);
}
.chip.active {
background: var(--color-primary);
color: white;
}
.chip.season {
background: var(--color-secondary);
color: white;
}
.chip .count {
font-size: 0.8em;
opacity: 0.7;
margin-left: 0.25em;
}
/* Ellipsis button — outside chip-bar overflow, always visible */
.chip-more {
background: rgba(255,255,255,0.5);
font-weight: 700;
letter-spacing: 0.1em;
flex-shrink: 0;
margin-top: 0.5em;
}
@media (min-width: 601px) {
.chip-more {
display: none;
}
}
/* ─── Content below the hero (grid, etc.) ─── */
.below-hero {
background: var(--color-bg-primary);
padding-top: 2.5em;
overflow: visible;
}
/* ─── Search bar — anchored to top of below-hero, straddles the boundary ─── */
.hero-search-wrap {
max-width: 1200px;
margin: -4em auto 0;
padding: 0 2em;
position: relative;
z-index: 10;
}
/* ─── Recipe grid ─── */
.recipe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5em;
padding: 0 1.5em;
max-width: 1400px;
margin: 0 auto 2em;
}
@media (min-width: 600px) {
.recipe-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
@media (min-width: 1024px) {
.recipe-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.8em;
}
}
.sentinel {
height: 1px;
}
/* ─── No-hero fallback ─── */
.hero-fallback {
text-align: left;
padding: 3em 2em 1em;
max-width: 1200px;
margin: 0 auto;
}
.hero-fallback h1 {
margin: 0;
font-size: clamp(2.4rem, 6vw, 3.8rem);
line-height: 1.05;
}
.hero-fallback .subheading {
margin: 0.3em 0 0;
font-size: clamp(1rem, 2.5vw, 1.3rem);
opacity: 0.7;
}
</style>
<svelte:head>
<title>{labels.metaTitle}</title>
<meta name="description" content="{labels.metaDescription}" />
@@ -97,42 +362,127 @@ h1{
<meta property="og:image:alt" content="{labels.metaAlt}" />
</svelte:head>
{#if heroRecipe}
<section class="hero-section">
<figure class="hero">
<img
class="hero-img"
src="https://bocken.org/static/rezepte/full/{heroImg}"
alt=""
loading="eager"
/>
<div class="hero-overlay"></div>
</figure>
<div class="hero-scroll-content" class:chips-open={chipsExpanded}>
<div class="hero-text">
<h1>{labels.title}</h1>
<p class=subheading>{labels.subheading}</p>
<p class="subheading">{labels.subheading}</p>
<a href="/{data.recipeLang}/{heroRecipe.short_name}" class="hero-featured">
<span class="icon">{heroRecipe.icon}</span>
<span class="recipe-name">{@html heroRecipe.name}</span>
<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -197 535 410"><path d="M503 31c12-13 12-33 0-46L343-175c-13-12-33-12-46 0-12 13-12 33 0 46L403-24H32C14-24 0-10 0 8s14 32 32 32h371L297 145c-12 13-12 33 0 46 13 12 33 12 46 0L503 31z"/></svg>
</a>
<Search lang={data.lang} recipes={data.all_brief} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
{#if seasonRecipes.length > 0}
<LazyCategory title={labels.inSeason} eager={true}>
{#snippet children()}
<MediaScroller title={labels.inSeason}>
{#each seasonRecipes as recipe}
<Card {recipe} {current_month} loading_strat={"eager"} do_margin_right={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
{/each}
</MediaScroller>
{/snippet}
</LazyCategory>
{/if}
{#each categories as category, index}
{@const categoryRecipes = filteredRecipesByCategory.get(category) || []}
{#if categoryRecipes.length > 0}
<LazyCategory
title={category}
eager={index < 2 || hasActiveSearch}
estimatedHeight={300}
rootMargin="600px"
<div class="chip-wrap">
<div class="chip-bar" class:expanded={chipsExpanded}>
<button
class="chip g-pill"
class:active={activeChip === 'all'}
onclick={() => activeChip = 'all'}
>
{#snippet children()}
<MediaScroller title={category}>
{#each categoryRecipes as recipe}
<Card {recipe} {current_month} do_margin_right={true} isFavorite={recipe.isFavorite} showFavoriteIndicator={!!data.session?.user} routePrefix="/{data.recipeLang}"></Card>
{/each}
</MediaScroller>
{/snippet}
</LazyCategory>
{labels.all}
<span class="count">({data.all_brief.length})</span>
</button>
{#if data.season.length > 0}
<button
class="chip g-pill"
class:season={activeChip === 'season'}
class:active={activeChip === 'season'}
onclick={() => activeChip = 'season'}
>
{labels.inSeason}
<span class="count">({data.season.length})</span>
</button>
{/if}
{#each categories as cat (cat)}
{@const count = categoryCounts.get(cat) || 0}
{#if count > 0}
<button
class="chip g-pill"
class:active={activeChip === cat}
onclick={() => activeChip = cat}
>
{cat}
<span class="count">({count})</span>
</button>
{/if}
{/each}
</div>
<button
class="chip chip-more g-pill"
onclick={() => chipsExpanded = !chipsExpanded}
>
{chipsExpanded ? '\u2715' : '\u2026'}
</button>
</div>
</div>
<div class="below-hero">
<div class="hero-search-wrap">
<Search lang={data.lang} recipes={data.all_brief} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
</div>
<div class="recipe-grid">
{#each visibleRecipes as recipe, i (recipe._id)}
<CompactCard
{recipe}
{current_month}
isFavorite={recipe.isFavorite}
showFavoriteIndicator={!!data.session?.user}
loading_strat={i < 12 ? "eager" : "lazy"}
routePrefix="/{data.recipeLang}"
/>
{/each}
</div>
{#if hasMore}
<div class="sentinel" bind:this={sentinel}></div>
{/if}
{#if !isEnglish}
<AddButton href="/rezepte/add"></AddButton>
{/if}
</div>
</div>
</section>
{:else}
<div class="hero-fallback">
<h1>{labels.title}</h1>
<p class="subheading">{labels.subheading}</p>
</div>
<Search lang={data.lang} recipes={data.all_brief} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
<div class="recipe-grid">
{#each visibleRecipes as recipe, i (recipe._id)}
<CompactCard
{recipe}
{current_month}
isFavorite={recipe.isFavorite}
showFavoriteIndicator={!!data.session?.user}
loading_strat={i < 12 ? "eager" : "lazy"}
routePrefix="/{data.recipeLang}"
/>
{/each}
</div>
{#if hasMore}
<div class="sentinel" bind:this={sentinel}></div>
{/if}
{#if !isEnglish}
<AddButton href="/rezepte/add"></AddButton>
{/if}
{/if}