diff --git a/docs/screenshots/favorites-dark-desktop.png b/docs/screenshots/favorites-dark-desktop.png index 4dba6ea..9ae7e20 100644 Binary files a/docs/screenshots/favorites-dark-desktop.png and b/docs/screenshots/favorites-dark-desktop.png differ diff --git a/docs/screenshots/favorites-dark-mobile.png b/docs/screenshots/favorites-dark-mobile.png index 7be9ab6..eb58791 100644 Binary files a/docs/screenshots/favorites-dark-mobile.png and b/docs/screenshots/favorites-dark-mobile.png differ diff --git a/docs/screenshots/favorites-dark-tablet.png b/docs/screenshots/favorites-dark-tablet.png index 8be7d7b..90de92d 100644 Binary files a/docs/screenshots/favorites-dark-tablet.png and b/docs/screenshots/favorites-dark-tablet.png differ diff --git a/docs/screenshots/library-desktop.png b/docs/screenshots/library-desktop.png index 639110a..2ed9753 100644 Binary files a/docs/screenshots/library-desktop.png and b/docs/screenshots/library-desktop.png differ diff --git a/docs/screenshots/library-mobile.png b/docs/screenshots/library-mobile.png index 166d117..3c10bf8 100644 Binary files a/docs/screenshots/library-mobile.png and b/docs/screenshots/library-mobile.png differ diff --git a/docs/screenshots/library-tablet.png b/docs/screenshots/library-tablet.png index 1554143..39583ac 100644 Binary files a/docs/screenshots/library-tablet.png and b/docs/screenshots/library-tablet.png differ diff --git a/src/app/globals.css b/src/app/globals.css index 3597249..6ff677a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -172,7 +172,7 @@ small, min-height: calc(100vh - 200px); } .site-header { - height: 88px; + height: 64px; border-bottom: 1px solid var(--line); background: var(--bg); position: relative; @@ -192,7 +192,7 @@ small, align-items: center; gap: 9px; font-family: 'Fraunces', serif; - font-size: 32px; + font-size: 27px; font-weight: 500; letter-spacing: -2px; } @@ -459,39 +459,37 @@ small, /* The cookbook */ .home-hero { display: grid; - grid-template-columns: 1.05fr 1fr; - margin-top: 36px; - min-height: 455px; - border-radius: 20px; + grid-template-columns: minmax(0, 1fr) 160px; + align-items: center; + gap: 24px; + padding: 20px 24px; + margin-top: 24px; + border-radius: 14px; overflow: hidden; background: var(--surface-2); } .hero-copy { - padding: 48px 35px 35px 44px; - position: relative; + min-width: 0; +} +.hero-copy .eyebrow { + font-size: 8px; + letter-spacing: 1.4px; } .hero-copy h1 { - font-size: clamp(40px, 4.35vw, 59px); - margin: 24px 0 22px; - line-height: 1.08; - letter-spacing: -2.5px; + font-size: clamp(26px, 2.6vw, 34px); + margin: 10px 0 8px; + line-height: 1.2; + letter-spacing: -1px; } .hero-copy p { - font-size: 13px; + font-size: 12px; color: var(--muted); - margin-bottom: 25px; + margin-bottom: 12px; line-height: 1.8; } -.hero-copy .button { - padding: 13px 21px; -} -.hero-note { - display: flex; - gap: 10px; - align-items: center; - font-size: 10px; - color: var(--muted); - margin-top: 27px; +.hero-copy .text-button { + font-size: 11px; + min-height: 32px; } .note-icon { width: 38px; @@ -507,6 +505,9 @@ small, .hero-visual { position: relative; min-width: 0; + height: 140px; + border-radius: 10px; + overflow: hidden; } .hero-visual > img { width: 100%; @@ -514,55 +515,8 @@ small, position: absolute; object-position: center; } -.hero-image-shade { - position: absolute; - inset: 0; - background: linear-gradient(0deg, #102516b3, transparent 65%); -} -.hero-stamp { - position: absolute; - right: 24px; - top: 26px; - width: 100px; - height: 100px; - border: 1px solid #fff8; - outline: 5px solid #fff2; - border-radius: 50%; - background: #f6f3e9ec; - color: #3e5740; - font-size: 9px; - letter-spacing: 2px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 3px; - transform: rotate(11deg); -} -.hero-stamp span { - font-family: 'Fraunces'; - font-size: 20px; - letter-spacing: -1px; -} -.hero-caption { - position: absolute; - bottom: 29px; - left: 33px; - color: #fff9ed; -} -.hero-caption > span { - font-size: 8px; - letter-spacing: 2px; -} -.hero-caption p { - font-family: 'Fraunces'; - font-size: 28px; - line-height: 1.15; - margin: 10px 0 0; - letter-spacing: -1px; -} .library-section { - padding-top: 56px; + padding-top: 32px; } .section-heading { display: flex; @@ -1991,22 +1945,6 @@ input[type='checkbox'] { .header-inner { padding: 0 28px; } - .home-hero { - min-height: 420px; - } - .hero-copy { - padding: 38px 28px; - } - .hero-copy h1 { - font-size: 46px; - } - .hero-copy .eyebrow { - font-size: 8px; - letter-spacing: 1.4px; - } - .hero-note { - font-size: 9px; - } .card-image { height: 190px; } @@ -2084,13 +2022,13 @@ input[type='checkbox'] { padding: 0 20px; } .site-header { - height: 72px; + height: 60px; } .header-inner { padding: 0 20px; } .brand { - font-size: 29px; + font-size: 25px; } .desktop-nav { display: none; @@ -2148,63 +2086,25 @@ input[type='checkbox'] { font-size: 12px; } .home-hero { - grid-template-columns: 1fr; - margin-top: 20px; - border-radius: 16px; - min-height: 0; - } - .hero-copy { - padding: 30px 25px; + grid-template-columns: minmax(0, 1fr) 72px; + gap: 14px; + padding: 18px; + margin-top: 16px; + border-radius: 12px; } .hero-copy h1 { - font-size: 44px; - letter-spacing: -2px; - margin: 20px 0 17px; - } - .hero-copy p { - font-size: 12px; - margin-bottom: 20px; + font-size: 25px; + letter-spacing: -0.7px; } .hero-copy .eyebrow { - font-size: 8px; - letter-spacing: 1.5px; - } - .hero-copy .button { - font-size: 11px; - padding: 12px 17px; - } - .hero-note { - display: none; + font-size: 7px; + letter-spacing: 1px; } .hero-visual { - height: 220px; - } - .hero-caption { - bottom: 23px; - left: 25px; - } - .hero-caption p { - font-size: 25px; - } - .hero-caption > span { - font-size: 7px; - } - .hero-stamp { - width: 80px; - height: 80px; - right: 20px; - top: 20px; - font-size: 7px; - gap: 1px; - } - .hero-stamp span { - font-size: 17px; - } - .hero-stamp svg { - width: 17px; + height: 96px; } .library-section { - padding-top: 35px; + padding-top: 24px; } .section-heading { margin-bottom: 20px; @@ -2875,11 +2775,8 @@ input[type='checkbox'] { .container { padding: 0 15px; } - .hero-copy { - padding: 27px 22px; - } .hero-copy h1 { - font-size: 39px; + font-size: 23px; } .recipe-grid { grid-template-columns: 1fr; diff --git a/src/components/library.tsx b/src/components/library.tsx index 7496b5b..fbc60dd 100644 --- a/src/components/library.tsx +++ b/src/components/library.tsx @@ -10,7 +10,6 @@ import { Clock3, Heart, SlidersHorizontal, - Leaf, Utensils, X, ChefHat, @@ -144,23 +143,12 @@ export function Library({ : household.toLocaleUpperCase('de')}
- Für die schnellen Abende. Die langen Sonntage.
-
Und alles, was wir gerne zusammen genießen.
-
Deine Lieblingsrezepte für jeden Tag.
+ Was kochen wir heute?
- Ein guter Tag beginnt
-
- mit etwas Gutem.
-