From 455d60a84632fa667cfaafa0a2036603db9de71b Mon Sep 17 00:00:00 2001 From: root Date: Fri, 2 Oct 2026 02:17:02 +0000 Subject: [PATCH] =?UTF-8?q?Speisekarte=20mobil:=20alle=20Kategorien=20auf?= =?UTF-8?q?=20einen=20Blick,=20beim=20Scrollen=20angeheftet;=20wei=C3=9Fe?= =?UTF-8?q?=20Karten=20zu=20zweit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Kategorie-Chips umbrechend sichtbar, beim Scrollen kompakte, fixierte Leiste unter der Navigation (Platzhalter hält die Höhe) - Handy: weiße Karten zweispaltig, rote Specials und Bucket-Promo weiter über volle Breite - Chicken-Wings-Classic-Kasten: Körnung als Überblendung statt Hintergrund-Ebene (iOS zeigte graue Fläche), Schrift wieder hell - Speisekarte-Kopf mobil: Burger tiefer, damit Zutaten nicht über dem Text liegen Co-Authored-By: Claude Opus 5.5 --- assets/css/style.css | 41 ++++++++++++++++++++++++++++++----------- assets/js/main.js | 23 ++++++++++++++++++++++- 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index cdd2c25..d8622b2 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -588,7 +588,9 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl } .wings__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "kick kick" "big big" "info hero"; align-items: start; } .wings__stage .kicker { grid-area: kick; justify-self: start; } -.wings .classic-wings, .wings .sauce { color: var(--ink); } +.wings .sauce { color: var(--ink); } +.wings .classic-wings { color: var(--cream); } +.classic-wings::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain) 0 0 / 240px; opacity: .3; mix-blend-mode: overlay; pointer-events: none; } .wings__big { grid-area: big; position: relative; z-index: 1; font-size: clamp(4.6rem, 15vw, 15.5rem); color: var(--cream); margin: 0; @@ -639,7 +641,8 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl .classic-wings { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2rem; align-items: center; - background: radial-gradient(70% 140% at 0% 50%, #4a1106, transparent 60%), var(--grain) 0 0 / 240px, var(--ink); background-blend-mode: normal, soft-light, normal; color: var(--cream); + position: relative; isolation: isolate; overflow: hidden; + background: radial-gradient(70% 140% at 0% 50%, #4a1106, transparent 60%), var(--ink); color: var(--cream); border: 3px solid var(--yellow); border-radius: calc(var(--radius) + 6px); box-shadow: 0 8px 0 #000, 0 30px 50px -10px rgba(60, 10, 0, .6); padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 3vw, 2.6rem); @@ -846,15 +849,21 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl .page-hero__st { position: absolute; right: 32%; top: 28%; z-index: 5; --r: -10deg; } .page-hero .flames { z-index: 4; --fh: clamp(60px, 8vw, 130px); } -.cat-nav { - position: sticky; top: 0; z-index: 800; - background: rgba(247, 235, 217, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); - border-bottom: 2px solid rgba(21, 13, 12, .1); +/* Kategorien: in Ruhe alle sichtbar (umbrechend), beim Scrollen als kompakte Leiste oben angeheftet. + .cat-nav hält dabei ihre Höhe (per JS), damit der Inhalt nicht springt. */ +.cat-nav { position: relative; z-index: 800; background: var(--cream); border-bottom: 2px solid rgba(21, 13, 12, .1); } +.cat-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: .9rem var(--gutter); } +.cat-nav.is-stuck ul { + position: fixed; left: 0; right: 0; top: 0; z-index: 800; + flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: .6rem; + background: rgba(251, 238, 214, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); + border-bottom: 2px solid rgba(21, 13, 12, .1); box-shadow: 0 8px 20px rgba(21, 13, 12, .1); transition: top .35s cubic-bezier(.2, .8, .2, 1); + animation: bar-in .3s cubic-bezier(.2, .8, .2, 1); } -body.nav-visible .cat-nav { top: var(--nav-h); } -.cat-nav ul { display: flex; gap: .5rem; overflow-x: auto; list-style: none; margin: 0; padding: .75rem var(--gutter); scrollbar-width: none; } +body.nav-visible .cat-nav.is-stuck ul { top: var(--nav-h); } .cat-nav ul::-webkit-scrollbar { display: none; } +@keyframes bar-in { from { transform: translateY(-100%); } } .cat-nav a { display: inline-block; white-space: nowrap; padding: .5em 1em; border-radius: 999px; border: 2px solid var(--ink); @@ -1135,7 +1144,7 @@ html.js.anim .juggle { visibility: hidden; } .dish-list { grid-template-columns: 1fr; } .cat-split { grid-template-columns: 1fr; } .only-here { grid-template-columns: 1fr; } - .page-hero__img { position: relative; right: auto; bottom: auto; width: 80vw; margin: 1.5rem auto -3rem; } + .page-hero__img { position: relative; right: auto; bottom: auto; width: 76vw; margin: 4.5rem auto -3rem; } .page-hero__st { right: 8%; top: auto; bottom: 30%; } } @@ -1145,8 +1154,18 @@ html.js.anim .juggle { visibility: hidden; } .sauce p { display: none; } .sauce h3 { font-size: 1.45rem; overflow-wrap: anywhere; } .sauce .price { font-size: .74rem; padding: .5em .6em; } - .dish-grid, .dish-grid--4, .dish-grid--2 { grid-template-columns: 1fr; } - .dish--promo { grid-column: auto; } + .dish-grid, .dish-grid--4, .dish-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } + .dish--special, .dish--promo { grid-column: 1 / -1; } + .dish:not(.dish--special) { --sq: 8px; --pad-x: .65rem; --media-h: clamp(110px, 34vw, 170px); padding-top: calc(var(--sq) * 2 + .9rem); padding-bottom: calc(var(--sq) * 2 + .9rem); } + .dish:not(.dish--special) .dish__name { font-size: clamp(.82rem, 10.5cqi, 1.3rem); } + .dish:not(.dish--special) .dish__media { margin-block: .2rem 0; } + .dish:not(.dish--special) .dish__body { gap: .5rem; } + .dish:not(.dish--special) p { font-size: .8rem; line-height: 1.35; } + .dish:not(.dish--special) .variants span { font-size: .68rem; padding: .2em .5em; } + .dish:not(.dish--special) .price { font-size: .8rem; } + .dish:not(.dish--special) .dish__badge { font-size: .65rem; border-width: 2px; top: 6%; } + .cat-nav ul { gap: .4rem; } + .cat-nav a { font-size: .78rem; padding: .45em .8em; } .footer__grid { grid-template-columns: 1fr; } .btn { font-size: 1rem; padding: .95em 1.4em 1em; } .hero__cta .btn { flex: 1 1 auto; } diff --git a/assets/js/main.js b/assets/js/main.js index 9afd3ad..18cba06 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -145,8 +145,29 @@ }, { threshold: 0 }).observe(heroEl); } - /* ---------- Speisekarte: aktive Kategorie ---------- */ + /* ---------- Speisekarte: Kategorien anheften ---------- */ var catNav = $('.cat-nav'); + if (catNav) { + var stuck = false; + var checkStuck = function () { + var navH = document.body.classList.contains('nav-visible') ? ((nav && nav.offsetHeight) || 0) : 0; + var top = catNav.getBoundingClientRect().top; + var shouldStick = top < navH; + if (shouldStick === stuck) return; + stuck = shouldStick; + if (stuck) catNav.style.height = catNav.offsetHeight + 'px'; + else catNav.style.height = ''; + catNav.classList.toggle('is-stuck', stuck); + }; + window.addEventListener('scroll', checkStuck, { passive: true }); + window.addEventListener('resize', function () { + if (stuck) { stuck = false; catNav.classList.remove('is-stuck'); catNav.style.height = ''; } + checkStuck(); + }); + checkStuck(); + } + + /* ---------- Speisekarte: aktive Kategorie ---------- */ if (catNav && 'IntersectionObserver' in window) { var links = $$('a', catNav); var list = $('ul', catNav);