From c439f2f6b092f3407e42876e047532e28d3a3cd7 Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Thu, 9 Apr 2026 22:04:43 +0200 Subject: [PATCH] feat: redesign LinksGrid with semantic theming, rounded corners, and new layout - Use semantic CSS variables (--color-surface, --shadow-sm, etc.) instead of hardcoded Nord values and manual dark mode overrides - Add border-radius and overflow:hidden for rounded card corners - Move icon fill variables (--grid-fill-*) into app.css theme system: colorful (red/orange/green) in light, cool blues in dark - Mottled fill distribution via prime-offset nth-child selectors - Reorder homepage links: Recipes, Shopping, Fitness, Faith, Tasks first - Add Nutrition direct link with heart-pulse icon - Document site-wide design language in CLAUDE.md --- CLAUDE.md | 35 ++++++++++ package.json | 2 +- src/app.css | 17 +++++ src/lib/components/LinksGrid.svelte | 99 ++++++----------------------- src/routes/(main)/+page.svelte | 58 +++++++++++------ 5 files changed, 109 insertions(+), 102 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 8b37a6ff..195dd33f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -83,6 +83,41 @@ Re-create the chart on theme change via `MutationObserver` on `data-theme` + `ma ### Toggle component Use `Toggle.svelte` (iOS-style) instead of raw `` for user-facing boolean switches. +## Site-Wide Design Language + +### Layout & Spacing +- Max content width: `1000px`–`1200px` with `margin-inline: auto` +- Card/grid gaps: `2rem` desktop, `1rem` tablet, `0.5rem` mobile +- Breakpoints: `410px` (small mobile), `560px` (tablet), `900px` (rosary), `1024px` (desktop) + +### Border Radius Tokens +- `--radius-pill: 1000px` — nav bar, pill buttons +- `--radius-card: 20px` — major cards (recipe cards) +- `--radius-lg: 0.75rem` — medium rounded elements +- `--radius-md: 0.5rem` — standard rounding +- `--radius-sm: 0.3rem` — small elements + +### Shadow Tokens +- `--shadow-sm` / `--shadow-md` / `--shadow-lg` / `--shadow-hover` — use these, don't hardcode +- Shadows are spread-based (`0 0 Xem Yem`) not offset-based + +### Hover & Interaction Patterns +- Cards/links: `scale: 1.02` + shadow elevation on hover +- Tags/pills: `scale: 1.05` with `--transition-fast` (100ms) +- Standard transitions: `--transition-normal` (200ms) +- Nav bar: glassmorphism (`backdrop-filter: blur(16px)`, semi-transparent bg) + +### Typography +- Font stack: Helvetica, Arial, "Noto Sans", sans-serif +- Size tokens: `--text-sm` through `--text-3xl` +- Headings in grids: `1.5rem` desktop → `1.2rem` tablet → `0.95rem` mobile + +### Surfaces & Cards +- Use `--color-surface` / `--color-surface-hover` for card backgrounds +- Use `--color-bg-elevated` for hover/active states +- Recipe cards: 300px wide, `--radius-card` corners +- Global utility classes: `.g-icon-badge` (circular), `.g-pill` (pill-shaped) + ## Versioning When committing, bump version numbers as appropriate using semver: diff --git a/package.json b/package.json index cd44df8f..83b96136 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "homepage", - "version": "1.21.2", + "version": "1.22.0", "private": true, "type": "module", "scripts": { diff --git a/src/app.css b/src/app.css index 3e12987c..858499b6 100644 --- a/src/app.css +++ b/src/app.css @@ -152,6 +152,12 @@ /* Shopping icon filter — white PNGs need invert in light mode */ --shopping-icon-filter: invert(1); + + /* LinksGrid icon fills — colorful in light */ + --grid-fill-base: var(--nord10); + --grid-fill-pop-a: var(--nord11); + --grid-fill-pop-b: var(--nord12); + --grid-fill-pop-c: var(--nord14); } /* ============================================ @@ -217,6 +223,12 @@ --color-link-hover: var(--nord7); --shopping-icon-filter: none; + + /* LinksGrid icon fills — cool blues/whites in dark */ + --grid-fill-base: var(--nord8); + --grid-fill-pop-a: var(--nord9); + --grid-fill-pop-b: var(--nord7); + --grid-fill-pop-c: var(--nord4); } } @@ -268,6 +280,11 @@ --color-link-hover: var(--nord7); --shopping-icon-filter: none; + + --grid-fill-base: var(--nord8); + --grid-fill-pop-a: var(--nord9); + --grid-fill-pop-b: var(--nord7); + --grid-fill-pop-c: var(--nord4); } /* ============================================ diff --git a/src/lib/components/LinksGrid.svelte b/src/lib/components/LinksGrid.svelte index 95ed2ecb..a6d714ac 100644 --- a/src/lib/components/LinksGrid.svelte +++ b/src/lib/components/LinksGrid.svelte @@ -1,20 +1,6 @@
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte index 29f00b31..eab5207c 100644 --- a/src/routes/(main)/+page.svelte +++ b/src/routes/(main)/+page.svelte @@ -57,6 +57,7 @@ documents: isEnglish ? 'Documents' : 'Dokumente', audiobooksPodcasts: isEnglish ? 'Audiobooks & Podcasts' : 'Hörbücher & Podcasts', fitness: 'Fitness', + nutrition: isEnglish ? 'Nutrition' : 'Ernährung', tasks: isEnglish ? 'Tasks' : 'Aufgaben' }); @@ -142,6 +143,37 @@ section h2{

{labels.recipes}

+ + + + +

{labels.shopping}

+ + + + + +

{labels.fitness}

+ + + + + +

{labels.tasks}

+ + + + +

{labels.faith}

+ + + + + + +

{labels.nutrition}

+ +

{labels.git}

@@ -158,15 +190,7 @@ section h2{

{labels.familyPhotos}

 - - -

{labels.faith}

- - - - -

{labels.fitness}

- +

{labels.videoConferences}

@@ -177,18 +201,13 @@ section h2{

{labels.searchEngine}

 - - - -

{labels.shopping}

- -

{labels.familyTree}

 - + +

{labels.cloud}

@@ -214,21 +233,18 @@ section h2{

{labels.documents}

 {/if} +

{labels.transmission}

 +

{labels.audiobooksPodcasts}

 - - - -

{labels.tasks}

-