From 4d8ded3981bba3d72e919fc5b4ae92514e2b6bba Mon Sep 17 00:00:00 2001 From: Bratonien Cosplay Date: Sat, 15 Nov 2025 13:34:34 +0100 Subject: [PATCH] no message --- adventskalender/2025/content/day02.html | 5 ++ adventskalender/2025/js/popup.js | 46 +++++++++++++++- adventskalender/shared/css/popup.css | 71 +++++++++++++++++++++---- 3 files changed, 110 insertions(+), 12 deletions(-) diff --git a/adventskalender/2025/content/day02.html b/adventskalender/2025/content/day02.html index 690c797..9402534 100644 --- a/adventskalender/2025/content/day02.html +++ b/adventskalender/2025/content/day02.html @@ -3,6 +3,11 @@

🎁 2. Dezember – Wenn es still wird

+
+ + + +
diff --git a/adventskalender/2025/js/popup.js b/adventskalender/2025/js/popup.js index 880fa89..94be88a 100644 --- a/adventskalender/2025/js/popup.js +++ b/adventskalender/2025/js/popup.js @@ -157,4 +157,48 @@ window.showLockedPopup = function (day) { `; popupOverlay.classList.add("active"); -}; \ No newline at end of file +}; + +// ============================================================ +// Zusatzfunktionen: Schriftart & SchriftgrĂ¶ĂŸe +// ============================================================ + +document.addEventListener("DOMContentLoaded", () => { + + const popupBody = document.querySelector(".popup-body"); + + // --- BUTTONS --- + const btnFontToggle = document.getElementById("btn-font-toggle"); + const btnFontUp = document.getElementById("btn-font-up"); + const btnFontDown = document.getElementById("btn-font-down"); + + if (!popupBody) return; + + // --- 1) Schriftart toggle --- + if (btnFontToggle) { + btnFontToggle.addEventListener("click", () => { + popupBody.classList.toggle("font-readable"); + }); + } + + // --- 2) SchriftgrĂ¶ĂŸe anpassen --- + let currentScale = 1; // 1 = normal + + function applyScale() { + popupBody.style.fontSize = `${currentScale}em`; + } + + if (btnFontUp) { + btnFontUp.addEventListener("click", () => { + currentScale = Math.min(currentScale + 0.1, 2); + applyScale(); + }); + } + + if (btnFontDown) { + btnFontDown.addEventListener("click", () => { + currentScale = Math.max(currentScale - 0.1, 0.5); + applyScale(); + }); + } +}); \ No newline at end of file diff --git a/adventskalender/shared/css/popup.css b/adventskalender/shared/css/popup.css index f3dcc9e..86b562c 100644 --- a/adventskalender/shared/css/popup.css +++ b/adventskalender/shared/css/popup.css @@ -1,5 +1,5 @@ /* ============================================================ - Bratonien Adventskalender – NEUE SAUBERE POPUP.CSS + Bratonien Adventskalender – POPUP.CSS ============================================================ */ /* ============================================================ @@ -23,7 +23,7 @@ } /* ============================================================ - POPUP-BOX + POPUP-BOX – GLOBALER STANDARD (Pinyon) ============================================================ */ #popup-box { @@ -37,6 +37,10 @@ color-mix(in srgb, var(--ci-gold) 15%, #fff9e6) ); + font-family: "Bratonien2025", serif; /* ← Pinyon Script als Standard */ + font-size: 0.96em; /* optisch passend kompensiert */ + line-height: 1.35; + border: 2px solid var(--ci-gold); border-radius: 16px; @@ -53,6 +57,16 @@ color: #333; } +/* ============================================================ + BODY – SPÄTER UMSCHALTBAR AUF LESBARE SCHRIFT + ============================================================ */ + +.popup-body.font-readable { + font-family: var(--ci-font-readable), serif; /* z.B. Georgia oder Cormorant */ + font-size: 1em; + line-height: 1.55; +} + /* ============================================================ CLOSE BUTTON ============================================================ */ @@ -73,7 +87,7 @@ font-size: 20px; font-weight: bold; line-height: 28px; - color: var(--ci-darkgreen); + color: var(--ci-gold); cursor: pointer; box-shadow: 0 0 8px rgba(0,0,0,0.2); @@ -109,8 +123,9 @@ .popup-header h2 { margin: 0; - font-size: clamp(1.6rem, 2.2vw, 2.8rem); + font-size: clamp(1.8rem, 2.4vw, 3.2rem); color: var(--ci-darkgreen); + font-family: "Bratonien2025", serif; /* fix: Header bleibt in Pinyon */ } /* ============================================================ @@ -123,7 +138,7 @@ gap: clamp(1rem, 2vw, 2.5rem); } -/* Linke Spalte (Story bleibt unverĂ€ndert) */ +/* Linke Spalte */ .story { line-height: 1.6; max-width: 70ch; @@ -149,17 +164,16 @@ } /* ============================================================ - REZEPTTAG – TEXT SOLL BILD UMWERBEN + REZEPTTAG – BILD SOLL TEXT UMWERBEN ============================================================ */ .popup-recipe .popup-body { - /* linke Spalte bleibt Grid-Item */ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2.5rem); } -/* rechte Spalte verliert Grid -> normaler Blockfluss */ +/* rechte Spalte → Blockfluss */ .popup-recipe .popup-recipe-content { display: block; width: 100%; @@ -184,7 +198,7 @@ shape-outside: inset(0 round 10px); } -/* inneres Bild: KEIN FLOAT */ +/* inneres Bild */ .popup-recipe-content .recipe-image { display: block; width: 100%; @@ -192,7 +206,7 @@ border-radius: 10px; } -/* Überschriften Zutaten/Zubereitung */ +/* Zutaten/Zubereitung */ .popup-recipe-content h4 { font-size: clamp(1rem, 1.2vw, 1.4rem); color: var(--ci-darkgreen); @@ -209,12 +223,12 @@ ============================================================ */ @media (max-width: 900px) { + .popup-body, .popup-recipe .popup-body { grid-template-columns: 1fr; } - /* Bild zentriert ohne Float */ .popup-recipe-content picture.recipe-image-wrapper { float: none; margin: 0 auto 1rem auto; @@ -236,4 +250,39 @@ @keyframes popIn { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } +} + +/* =========================================== + TOOLS/Buttons im Header + =========================================== */ + +.popup-header { + position: relative; +} + +.popup-tools { + position: absolute; + left: 0; /* ← spĂ€ter anpassbar */ + top: 50%; + transform: translateY(-50%); + display: flex; + gap: 0.4rem; +} + +.popup-tools button { + background: color-mix(in srgb, var(--ci-gold) 20%, #fff9e6); + border: 2px solid var(--ci-gold); + border-radius: 6px; + padding: 0.15rem 0.45rem; + + font-family: var(--ci-font-readable), serif; + font-size: 0.8rem; + color: var(--ci-darkgreen); + cursor: pointer; + + box-shadow: 0 0 6px rgba(0,0,0,0.15); +} + +.popup-tools button:hover { + background: color-mix(in srgb, var(--ci-gold) 35%, #fff2cc); } \ No newline at end of file