From c18a86885e558ada5b46166be7d0f311d7ee76c1 Mon Sep 17 00:00:00 2001 From: Bratonien Cosplay Date: Mon, 10 Nov 2025 13:18:41 +0100 Subject: [PATCH] styling und Fehlerkorrektur --- adventskalender/2025/content/day01.html | 40 ++++---- adventskalender/2025/css/day.css | 122 ++++++++++++++++++++++++ 2 files changed, 142 insertions(+), 20 deletions(-) create mode 100644 adventskalender/2025/css/day.css diff --git a/adventskalender/2025/content/day01.html b/adventskalender/2025/content/day01.html index e964bbd..5e62527 100644 --- a/adventskalender/2025/content/day01.html +++ b/adventskalender/2025/content/day01.html @@ -1,6 +1,6 @@ -
+
-

🎁 Türchen XX

+

🎁 Türchen 01

@@ -46,7 +46,7 @@ /2025/assets/images/2560/jpeg/Basisbild.jpeg 2560w, /2025/assets/images/3840/jpeg/Basisbild.jpeg 3840w" sizes="100vw" - alt="Bratonien Adventskalender – Tag XX" + alt="Bratonien Adventskalender – Tag 01" decoding="async">
@@ -64,24 +64,24 @@ poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg" > - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + Dein Browser unterstützt dieses Videoformat nicht. @@ -90,7 +90,7 @@
\ No newline at end of file diff --git a/adventskalender/2025/css/day.css b/adventskalender/2025/css/day.css new file mode 100644 index 0000000..9b0c46e --- /dev/null +++ b/adventskalender/2025/css/day.css @@ -0,0 +1,122 @@ +/* Bratonien Adventskalender 2025 – day.css + Voll responsive Darstellung der Türcheninhalte +*/ + +/* === POPUP-BASIS === */ +.popup-day { + width: 100%; + max-width: clamp(320px, 85vw, 1800px); + margin: 0 auto; + padding: clamp(1rem, 2vw, 3rem); + text-align: center; + color: var(--ci-darkgreen); + font-family: "Bratonien2025", cursive; + box-sizing: border-box; +} + +.popup-day h3 { + font-size: clamp(1.2rem, 2vw, 2.2rem); + color: var(--ci-gold); + margin-bottom: clamp(1rem, 2vw, 2rem); + letter-spacing: 0.05em; + text-shadow: + 0 0 4px rgba(0, 0, 0, 0.4), + 0 0 8px rgba(0, 0, 0, 0.3); +} + +/* === BILDER === */ +.image-wrapper { + position: relative; + width: 100%; + margin: 0 auto clamp(1.2rem, 2vw, 2.5rem); + overflow: hidden; + border-radius: 12px; + box-shadow: + 0 0 12px rgba(0, 0, 0, 0.25), + 0 0 20px color-mix(in srgb, var(--ci-gold) 25%, transparent); +} + +.image-wrapper picture, +.image-wrapper img { + width: 100%; + height: auto; + display: block; + object-fit: cover; +} + +/* === VIDEOS === */ +.video-wrapper { + position: relative; + width: 100%; + max-width: 100%; + margin: 0 auto clamp(1rem, 2vw, 2rem); + background: #000; + border-radius: 12px; + overflow: hidden; + box-shadow: + 0 0 16px rgba(0, 0, 0, 0.4), + 0 0 24px color-mix(in srgb, var(--ci-blue) 20%, transparent); +} + +/* verhindert Layoutsprung beim Laden */ +.video-wrapper::before { + content: ""; + display: block; + padding-top: 56.25%; /* 16:9 */ +} + +.video-wrapper video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + outline: none; + object-fit: cover; + border-radius: 12px; +} + +/* === AUDIO === */ +audio { + display: none; +} + +/* === RESPONSIVE FEINANPASSUNG === */ + +/* Smartphones (bis ca. 480 px) */ +@media (max-width: 480px) { + .popup-day { + padding: 1rem 0.5rem 1.5rem; + } + + .popup-day h3 { + font-size: 1.1rem; + } +} + +/* Tablets & kleine Laptops (768 px – 1366 px) */ +@media (min-width: 768px) and (max-width: 1366px) { + .popup-day { + max-width: 90vw; + } +} + +/* Große Monitore (ab 1600 px) */ +@media (min-width: 1600px) { + .popup-day { + max-width: 70vw; + } +} + +/* Ultrawide / 4K */ +@media (min-width: 2560px) { + .popup-day { + max-width: 65vw; + padding: 3rem 2rem 4rem; + } + + .popup-day h3 { + font-size: 2.4rem; + } +} \ No newline at end of file