WEBklar/Chickago-Boys
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Speisekarte mobil: alle Kategorien auf einen Blick, beim Scrollen angeheftet; weiße Karten zu zweit

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5.5 committed 2026-10-02 02:17:02 +00:00
1 parent 08f687822f
commit 455d60a846
2 files changed
+52 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/style.css
+30 -11
View File
@@ -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; }
assets/js/main.js
+22 -1
View File
@@ -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);