From cda6582c57ea068d4ac7f0f50cffbd04baff955a Mon Sep 17 00:00:00 2001 From: Bratonien Cosplay Date: Tue, 11 Nov 2025 11:56:49 +0100 Subject: [PATCH] =?UTF-8?q?Layout=C3=A4nderung?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- adventskalender/2025/content/day01.html | 136 +++++++------------- adventskalender/2025/css/popup.css | 161 +++++++++++++++++++++--- adventskalender/2025/index.php | 2 - 3 files changed, 187 insertions(+), 112 deletions(-) diff --git a/adventskalender/2025/content/day01.html b/adventskalender/2025/content/day01.html index dbc567f..ca1e408 100644 --- a/adventskalender/2025/content/day01.html +++ b/adventskalender/2025/content/day01.html @@ -1,66 +1,19 @@ -
+
+ +
+

🎁 1. Dezember – Der Anfang vom Zauber

+
-

🎁 Türchen 01

- - - - -
-
+ +
+ +

Draußen riecht die Luft nach kaltem Holz und ersten Plätzchen.
Über den Dächern von Bratonien hängt ein dünner Dunst aus Zucker und Geheimnissen,
und im Schloss knistert das Kaminfeuer wie eine Erinnerung daran,
dass jeder Anfang ein kleines bisschen Mut braucht.

-

Erna steht am Fenster, eine Tasse Kakao in der Hand,
+

Erna steht am Fenster, eine Tasse Kaffee in der Hand,
und beobachtet, wie Barney im Hof versucht, die Lichterkette zu entwirren.
„Das Jahr geht nie leise zu Ende“, murmelt sie –
und er antwortet, ohne aufzusehen: „Dann fangen wir besser laut an.“

@@ -71,46 +24,42 @@ die Adventszeit.

- Und wer genau hinsieht, entdeckt: das kleine Daumenkino unten im Bild verändert sich.
- Mit jedem neuen Tag kommt ein Stück Geschichte hinzu – bis am Ende alles zusammenfindet.
+ Und wer genau hinsieht, entdeckt: das kleine Daumenkino verändert sich.
+ Mit jedem neuen Tag kommt ein Stück bratonische Weihnacht hinzu – bis am Ende alles zusammenfindet.
Also lohnt es sich, wiederzukommen … jeden Tag.

-
- -
- -
+ +
+
@@ -118,5 +67,4 @@ -
\ No newline at end of file diff --git a/adventskalender/2025/css/popup.css b/adventskalender/2025/css/popup.css index 94222ca..61de9a6 100644 --- a/adventskalender/2025/css/popup.css +++ b/adventskalender/2025/css/popup.css @@ -1,4 +1,8 @@ -/* Bratonien Adventskalender 2025 – Popup Design (bandbreitenoptimiert, hell & festlich) */ +/* ============================================================ + Bratonien Adventskalender 2025 – Popup Design + Bandbreitenoptimiert, hell & festlich + Enthält Layouts: Standard, 3-Part (Story), Recipe + ============================================================ */ /* === Overlay === */ #popup-overlay { @@ -31,7 +35,6 @@ 0 0 25px color-mix(in srgb, var(--ci-gold) 40%, transparent), inset 0 0 10px rgba(255, 255, 255, 0.4); - /* Dynamisch skalierendes Layout */ width: min(90vw, 1800px); max-height: 90vh; overflow-y: auto; @@ -46,31 +49,146 @@ box-sizing: border-box; } -/* === Inhalt === */ +/* === Grundlayout für Inhalte === */ #popup-content { margin-top: 1rem; font-family: "Bratonien2025", cursive; font-size: clamp(1rem, 1.2vw, 1.5rem); line-height: 1.6; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); + display: flex; + flex-direction: column; align-items: center; - justify-items: center; - gap: clamp(1rem, 2vw, 3rem); + gap: clamp(1rem, 2vw, 2.5rem); } -/* === Medien (Video, Bild etc.) === */ -#popup-content video, -#popup-content img { +/* ============================================================ + DREITEILIGES POPUP-LAYOUT (Titel / Story / Inhalt) + ============================================================ */ + +.popup-day.popup-3part { + display: flex; + flex-direction: column; + gap: clamp(1rem, 2vw, 2.5rem); + width: 100%; + max-width: 1200px; + margin: 0 auto; + text-align: left; +} + +/* --- Titelzeile --- */ +.popup-header { + text-align: center; + border-bottom: 2px solid var(--ci-gold); + padding-bottom: 0.5rem; +} + +.popup-header h2 { + font-size: clamp(1.5rem, 2vw, 2.5rem); + color: var(--ci-darkgreen); + margin: 0; +} + +/* --- Hauptbereich mit zwei Spalten --- */ +.popup-body { + display: grid; + grid-template-columns: 1fr 1fr; + gap: clamp(1rem, 2vw, 2rem); + align-items: start; +} + +.popup-body .story { + max-width: 70ch; + line-height: 1.6; + color: #333; +} + +.popup-body .addon { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.popup-body .addon video, +.popup-body .addon img, +.popup-body .addon audio { max-width: 100%; height: auto; - display: block; border-radius: 8px; background: #000; - object-fit: contain; + box-shadow: 0 0 10px rgba(0,0,0,0.2); } -/* === Titel & Text === */ +/* --- Mobile Ansicht: einspaltig --- */ +@media (max-width: 900px) { + .popup-body { + grid-template-columns: 1fr; + } + .popup-day.popup-3part { + text-align: center; + } + .popup-body .addon { + margin-top: 1rem; + } +} + +/* ============================================================ + REZEPT-LAYOUT (Text umfließt Bild) + ============================================================ */ + +.popup-recipe .popup-body { + display: block; + column-count: 2; + column-gap: clamp(1.5rem, 3vw, 3rem); + text-align: justify; +} + +.popup-recipe .popup-body img.recipe-image { + float: left; + width: clamp(240px, 30%, 380px); + margin: 0 1.5rem 1rem 0; + border-radius: 10px; + box-shadow: 0 0 8px rgba(0,0,0,0.15); + shape-outside: inset(0 round 10px); +} + +.popup-recipe .popup-body h3 { + column-span: all; + font-size: clamp(1.2rem, 1.6vw, 1.8rem); + color: var(--ci-darkgreen); + margin: 1rem 0 0.5rem 0; +} + +.popup-recipe .popup-body ul, +.popup-recipe .popup-body ol { + margin: 0 0 1rem 1.5rem; + padding: 0; + line-height: 1.6; +} + +.popup-recipe .popup-body li { + break-inside: avoid; +} + +/* --- Mobile Ansicht: Rezept einspaltig --- */ +@media (max-width: 900px) { + .popup-recipe .popup-body { + column-count: 1; + } + .popup-recipe .popup-body img.recipe-image { + float: none; + display: block; + margin: 0 auto 1rem auto; + width: 100%; + max-width: 500px; + } +} + +/* ============================================================ + Allgemeine Gestaltung & Animationen + ============================================================ */ + +/* Titel & Text */ #popup-content h2 { font-size: clamp(1.4rem, 2vw, 2.6rem); color: var(--ci-darkgreen); @@ -84,7 +202,18 @@ max-width: 65ch; } -/* === Close-Button === */ +/* Medien allgemein */ +#popup-content video, +#popup-content img { + max-width: 100%; + height: auto; + display: block; + border-radius: 8px; + background: #000; + object-fit: contain; +} + +/* Close-Button */ #popup-close { position: absolute; top: 12px; @@ -103,7 +232,7 @@ color: color-mix(in srgb, var(--ci-blue) 35%, var(--ci-gold)); } -/* === Animationen === */ +/* Animationen */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } @@ -114,7 +243,7 @@ 100% { transform: scale(1); opacity: 1; } } -/* === Geräteübergreifende Anpassung === */ +/* Geräteübergreifende Anpassung */ @media (max-height: 600px) { #popup-box { max-height: 85vh; diff --git a/adventskalender/2025/index.php b/adventskalender/2025/index.php index 8c64324..e21633f 100644 --- a/adventskalender/2025/index.php +++ b/adventskalender/2025/index.php @@ -27,8 +27,6 @@
-

Bratonien Adventskalender 2025

-