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

Take-away: Befunde aus der Prüfung behoben

Browse Source 
- Restaurant-Karte sitzt rechts über dem Pin (Zentrierung wurde vom Reveal überschrieben), Spitze zeigt auf den Pin, Überschrift bleibt frei
- Liefer-Karte rechts neben dem Zuhause-Symbol, der Weg kommt von oben aufs Haus statt hinter der Karte durch; keine Überschneidung mit dem Einleitungstext
- Karte blendet an allen Kanten weich aus (keine geraden Schnittkanten mehr), Straßenname Merkurstraße östlich vom Pin, damit der Weg ihn nicht überdeckt
- Weißer Weg-Schimmer wird mit aufgedeckt, Hahn kippt nicht mehr um und blendet am Anfang/Ende weich aus
- OpenStreetMap-Hinweis sichtbar in der Bühne, dunkler, nach den Karten in der Lesereihenfolge
- Untereinander-Ansicht schon bis 1000 px, Kartenausschnitt volle Breite; Neuaufbau nach Größenänderung verzögert

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5.5 committed 2026-10-02 10:10:21 +00:00
1 parent 0364ddc793
commit e791d0312d
4 files changed
+59 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/style.css
+37 -28
View File
@@ -731,11 +731,11 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
/* Bühne: Karte rechts (läuft aus dem Bild), roter Pin am Restaurant, Weg nach links zum Zuhause */
.tstage {
--mw: clamp(1050px, 88vw, 1650px); /* Breite der Karte; Restaurant liegt bei 40 % / 62 % */
--mw: clamp(1050px, 88vw, 1500px); /* Breite der Karte; Restaurant liegt bei 40 % / 62 % */
--pin-x: 70%; --pin-y: 50%; /* Restaurant auf der Bühne */
--home-x: 8%; --home-y: 92%;
--home-x: 6%; --home-y: 84%;
/* Bühne zieht sich rechts neben die Überschrift hoch, links bleibt der Text frei */
position: relative; height: clamp(600px, 50vw, 760px); margin-top: clamp(-320px, -21vw, -200px);
position: relative; height: clamp(600px, 50vw, 760px); margin-top: clamp(-320px, calc(-40vw + 260px), -120px);
}
.tmap {
position: absolute; z-index: 0; pointer-events: none;
@@ -744,17 +744,20 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
}
.tmap__img {
width: 100%; height: 100%;
-webkit-mask: radial-gradient(ellipse 58% 72% at 50% 56%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%);
mask: radial-gradient(ellipse 58% 72% at 50% 56%, #000 45%, rgba(0, 0, 0, .6) 72%, transparent 100%);
/* weich ausblenden: an allen vier Kanten auf 0, dazu ein runder Verlauf, damit es nicht nach Rechteck aussieht */
-webkit-mask: radial-gradient(ellipse 62% 70% at 50% 58%, #000 40%, transparent 100%), linear-gradient(90deg, transparent, #000 24%, #000 88%, transparent), linear-gradient(transparent, #000 30%, #000 76%, transparent);
-webkit-mask-composite: source-in, source-in;
mask: radial-gradient(ellipse 62% 70% at 50% 58%, #000 40%, transparent 100%), linear-gradient(90deg, transparent, #000 24%, #000 88%, transparent), linear-gradient(transparent, #000 30%, #000 76%, transparent);
mask-composite: intersect;
}
.tmap__credit { position: absolute; z-index: 2; right: 0; bottom: calc(-1 * clamp(3.5rem, 8vw, 7rem)); font-size: .7rem; color: rgba(23, 11, 9, .55); text-decoration: none; }
.tmap__credit { position: absolute; z-index: 2; right: 0; bottom: 0; padding: .4rem .2rem; font-size: .72rem; color: rgba(23, 11, 9, .85); text-decoration: none; }
.tmap__credit:hover { text-decoration: underline; }
.troute { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.troute path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.troute__glow { stroke: rgba(255, 255, 255, .55); stroke-width: 14; }
.troute__line { stroke: var(--red); stroke-width: 6; stroke-dasharray: .1 14; }
.troute__reveal { stroke: #fff; stroke-width: 30; }
.troute__rider { position: absolute; left: 0; top: 0; z-index: 2; width: clamp(42px, 3.6vw, 56px); pointer-events: none; will-change: transform; }
.troute__rider { position: absolute; left: 0; top: 0; z-index: 3; visibility: hidden; width: clamp(42px, 3.6vw, 56px); pointer-events: none; will-change: transform; }
.tspot { position: absolute; z-index: 2; width: 0; height: 0; }
.tspot--shop { left: var(--pin-x); top: var(--pin-y); }
@@ -792,11 +795,11 @@ body.menu-open .menu-panel { transform: scale(1); opacity: 1; visibility: visibl
padding: clamp(1.1rem, 2vw, 1.6rem);
box-shadow: 8px 8px 0 var(--ink), 14px 24px 34px rgba(90, 50, 0, .3);
}
.tspot--shop .tcard { left: 0; translate: -50% 0; }
.tspot--home .tcard { left: -44px; bottom: 74px; }
.tspot--shop .tcard { left: -64px; } /* Karte rechts über dem Pin: links bleibt Platz für die Überschrift */
.tspot--home .tcard { left: 62px; bottom: auto; top: -96px; } /* rechts neben dem Zuhause-Symbol */
.tcard::after { content: ""; position: absolute; bottom: -14px; width: 22px; height: 22px; background: inherit; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); background-color: #fdf4e3; }
.tspot--shop .tcard::after { left: calc(50% - 11px); }
.tspot--home .tcard::after { left: 33px; }
.tspot--shop .tcard::after { left: 53px; }
.tspot--home .tcard::after { left: -14px; bottom: auto; top: 84px; transform: rotate(135deg); }
.tcard__kicker { display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--red-deep); }
.tcard__kicker svg { width: 1.1em; height: 1.1em; }
.tcard h3 { font-family: var(--f-sticker); text-transform: uppercase; font-weight: 400; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); line-height: 1; margin: .45rem 0 .5rem; }
@@ -1187,6 +1190,29 @@ html.js.anim .juggle { visibility: hidden; }
}
/* ============ Responsive ============ */
/* Take-away: bis 1000 px untereinander (Kartenausschnitt mit Pin, darunter die beiden Karten) */
@media (max-width: 1000px) {
.tstage { height: auto; display: flex; flex-direction: column; gap: 2.4rem; margin-top: 1.5rem; }
.tmap, .troute, .troute__rider { display: none; }
.tspot { position: relative; left: auto; top: auto; width: auto; height: auto; }
.tspot__minimap {
display: block; position: relative; height: 300px; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
-webkit-mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%);
}
.tspot__minimap img { position: absolute; width: 900px; max-width: none; left: calc(50% - 360px); top: calc(50% - 430px); }
.tspot--shop .tpin { left: 50%; top: 150px; }
.tcard, .tspot--shop .tcard, .tspot--home .tcard { position: relative; left: auto; bottom: auto; width: auto; translate: none; }
.tspot--shop .tcard { margin-top: -2.2rem; }
.tcard::after, .tspot--shop .tcard::after, .tspot--home .tcard::after { bottom: auto; top: -14px; left: calc(50% - 11px); transform: rotate(-135deg); }
.tspot--home { display: flex; flex-direction: column; align-items: center; }
.tspot--home::before { content: ""; height: 70px; border-left: 6px dotted var(--red); margin: -1rem 0 1.2rem; }
.tapp { position: relative; left: auto; top: auto; }
.tspot--home .tcard { margin-top: 1.6rem; align-self: stretch; top: auto; }
.tspot--shop, .tspot--home { align-self: center; width: min(100%, 560px); }
.tspot--shop .tcard { left: auto; }
.tmap__credit { position: static; order: 9; align-self: flex-end; margin-top: -1rem; }
}
@media (max-width: 1100px) {
.sauce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
.footer__grid { grid-template-columns: 1fr 1fr; }
@@ -1228,23 +1254,6 @@ html.js.anim .juggle { visibility: hidden; }
.classic-wings__prices { justify-content: flex-start; }
.fight-card-row { grid-template-columns: 1fr; }
.vs { justify-self: center; margin: -.5rem 0; }
.tstage { height: auto; display: flex; flex-direction: column; gap: 2.4rem; margin-top: 1.5rem; }
.tmap, .troute, .troute__rider { display: none; }
.tmap__credit { position: static; order: 9; align-self: flex-end; margin-top: -1rem; }
.tspot { position: relative; left: auto; top: auto; width: auto; height: auto; }
.tspot__minimap {
display: block; position: relative; height: 300px; margin: 0 calc(-1 * var(--gutter)); overflow: hidden;
-webkit-mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 70% 50% at 50% 50%, #000 40%, transparent 100%);
}
.tspot__minimap img { position: absolute; width: 900px; max-width: none; left: calc(50% - 360px); top: calc(50% - 430px); }
.tspot--shop .tpin { left: 50%; top: 150px; }
.tcard, .tspot--shop .tcard, .tspot--home .tcard { position: relative; left: auto; bottom: auto; width: auto; translate: none; }
.tspot--shop .tcard { margin-top: -2.2rem; }
.tcard::after, .tspot--shop .tcard::after, .tspot--home .tcard::after { bottom: auto; top: -14px; left: calc(50% - 11px); transform: rotate(-135deg); }
.tspot--home { display: flex; flex-direction: column; align-items: center; }
.tspot--home::before { content: ""; height: 70px; border-left: 6px dotted var(--red); margin: -1rem 0 1.2rem; }
.tapp { position: relative; left: auto; top: auto; }
.tspot--home .tcard { margin-top: 1.6rem; align-self: stretch; }
.orderbar { display: flex; }
.cta__rooster { width: 46vw; margin-top: -.5rem; }
.footer { padding-bottom: 5.5rem; }