Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

No message

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-16 00:21:52 +01:00
parent 14a262618b
commit 46308b8143
7 changed files with 125 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
adventskalender/2025/content/day01.html
View File

@@ -1,10 +1,16 @@
<section class="popup-day popup-3part day01">
<!-- === Titelzeile === -->
<header class="popup-header">
<h2>🎁 1. Dezember – Der Anfang vom Zauber</h2>
</header>
<!-- HEADER + BUTTONS -->
<div class="popup-header">
<h2><🎁 1. Dezember – Der Anfang vom Zauber</h2>
<div class="popup-tools">
<button id="btn-font-toggle">Aa ↔ &#x1D49C;</button>
<button id="btn-font-up">A+</button>
<button id="btn-font-down">A−</button>
</div>
</div>
<!-- === Hauptbereich mit zwei Spalten === -->
<div class="popup-body">
<!-- Linke Spalte: Story (dein bisheriger Text 1:1 übernommen) -->
<div class="story">

18
adventskalender/2025/content/day02.html
View File

@@ -91,7 +91,7 @@
<!-- ============================
RECHTE SPALTE – REZEPT
RECHTE SPALTE – Basisbild
============================ -->
<div class="addon popup-recipe-content">
@@ -110,9 +110,10 @@
/2025/assets/images/1024/avif/Basisbild.avif 1024w,
/2025/assets/images/1366/avif/Basisbild.avif 1366w,
/2025/assets/images/1600/avif/Basisbild.avif 1600w,
/2025/assets/images/1920/avif/Basisbild.avif 1920w
/2025/assets/images/1920/avif/Basisbild.avif 1920w,
/2025/assets/images/2560/avif/Basisbild.avif 2560w,
/2025/assets/images/3840/avif/Basisbild.avif 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
>
<!-- WEBP -->
@@ -124,9 +125,10 @@
/2025/assets/images/1024/webp/Basisbild.webp 1024w,
/2025/assets/images/1366/webp/Basisbild.webp 1366w,
/2025/assets/images/1600/webp/Basisbild.webp 1600w,
/2025/assets/images/1920/webp/Basisbild.webp 1920w
/2025/assets/images/1920/webp/Basisbild.webp 1920w,
/2025/assets/images/2560/webp/Basisbild.webp 2560w,
/2025/assets/images/3840/webp/Basisbild.webp 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
>
<!-- JPEG -->
@@ -138,15 +140,15 @@
/2025/assets/images/1024/jpeg/Basisbild.jpg 1024w,
/2025/assets/images/1366/jpeg/Basisbild.jpg 1366w,
/2025/assets/images/1600/jpeg/Basisbild.jpg 1600w,
/2025/assets/images/1920/jpeg/Basisbild.jpg 1920w
/2025/assets/images/1920/jpeg/Basisbild.jpg 1920w,
/2025/assets/images/2560/jpeg/Basisbild.jpg 2560w,
/2025/assets/images/3840/jpeg/Basisbild.jpg 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
alt="Rezeptbild"
class="recipe-image"
decoding="async"
loading="lazy"
>
</picture>
<!-- Zutaten -->

45
adventskalender/shared/css/popup.css
View File

@@ -191,7 +191,7 @@
/* Bild floaten lassen */
.popup-recipe-content picture.recipe-image-wrapper {
float: left;
width: clamp(200px, 40%, 330px);
width: clamp(260px, 70%, 3840px);
margin: 0 1.5rem 1.2rem 0;
border-radius: 10px;
display: block;
@@ -279,7 +279,7 @@
padding: 0.15rem 0.45rem;
font-family: var(--ci-font-readable), serif;
font-size: 1.05rem;
font-size: 1.3rem;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--ci-darkgreen);
@@ -295,4 +295,43 @@ display: flex;
.popup-tools button:hover {
background: color-mix(in srgb, var(--ci-gold) 35%, #fff2cc);
}
}
/* ============================================================
ADDON – PICTURE-VORLAGE
============================================================ */
.addon-picture {
display: flex;
justify-content: center;
}
.addon-picture-image {
width: 90%;
height: auto;
display: block;
}
.addon-audio {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.addon-audio audio {
width: 100%;
max-width: 700px; /* gleiche Breite wie andere Addons */
}
.addon-video-wrapper {
display: flex;
justify-content: center;
}
.addon-video {
width: 90%;
height: auto;
display: block;
}

13
templates/audio.txt
View File

@@ -3,9 +3,16 @@
<!-- TITEL -->
<div class="popup-header">
<h2><!-- TITEL DES TAGES --></h2>
<!-- TOOL-BUTTONS -->
<div class="popup-tools">
<button id="btn-font-toggle">Aa ↔ &#x1D49C;</button>
<button id="btn-font-up">A+</button>
<button id="btn-font-down">A−</button>
</div>
</div>
<!-- 2 SPALTEN -->
<!-- ZWEI SPALTEN -->
<div class="popup-body">
<!-- ================================
@@ -16,9 +23,9 @@
</div>
<!-- ================================
RECHTE SPALTE – SOUND
RECHTE SPALTE – AUDIO
================================ -->
<div class="addon">
<div class="addon addon-audio-wrapper">
<audio controls preload="auto" class="addon-audio">
<source src="/2025/assets/sounds/SOUND.mp3" type="audio/mpeg">

33
templates/picture.txt
View File

@@ -3,27 +3,28 @@
============================================ -->
<section class="popup-day popup-3part">
<!-- TITEL -->
<!-- TITEL + BUTTONS -->
<div class="popup-header">
<h2><!-- TITEL DES TAGES --></h2>
<div class="popup-tools">
<button id="btn-font-toggle">Aa ↔ &#x1D49C;</button>
<button id="btn-font-up">A+</button>
<button id="btn-font-down">A−</button>
</div>
</div>
<!-- 2 SPALTEN -->
<div class="popup-body">
<!-- ================================
LINKE SPALTE – DEIN TEXT
================================ -->
<!-- LINKE SPALTE -->
<div class="story">
<!-- HIER DEIN TEXT -->
<!-- DEIN TEXT -->
</div>
<!-- ================================
RECHTE SPALTE – BILD (RESPONSIV)
================================ -->
<div class="addon">
<!-- RECHTE SPALTE -->
<div class="addon addon-picture">
<!-- RESPONSIVES BILD -->
<picture>
<!-- AVIF -->
@@ -39,7 +40,7 @@
/2025/assets/images/dayXX/2560/avif/BILD.avif 2560w,
/2025/assets/images/dayXX/3840/avif/BILD.avif 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
sizes="90vw"
>
<!-- WEBP -->
@@ -55,7 +56,7 @@
/2025/assets/images/dayXX/2560/webp/BILD.webp 2560w,
/2025/assets/images/dayXX/3840/webp/BILD.webp 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
sizes="90vw"
>
<!-- JPEG -->
@@ -71,16 +72,14 @@
/2025/assets/images/dayXX/2560/jpeg/BILD.jpg 2560w,
/2025/assets/images/dayXX/3840/jpeg/BILD.jpg 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
sizes="90vw"
alt="Bild zum Tag"
class="addon-image"
decoding="async"
loading="lazy"
class="addon-picture-image"
>
</picture>
</div>
</div>
</div>
</section>

43
templates/recipe.txt
View File

@@ -3,28 +3,34 @@
<!-- TITEL -->
<div class="popup-header">
<h2><!-- TITEL HIER --></h2>
<!-- TOOLS: Schriftart & Schriftgröße -->
<div class="popup-tools">
<button id="btn-font-toggle" aria-label="Schriftart umschalten">Aa ↔ &#x1D49C;</button>
<button id="btn-font-up" aria-label="Schrift vergrößern">A+</button>
<button id="btn-font-down" aria-label="Schrift verkleinern">A−</button>
</div>
</div>
<!-- HAUPTBEREICH -->
<!-- ZWEI-SPALTEN-LAYOUT -->
<div class="popup-body">
<!-- =====================================
LINKE SPALTE – STORYTEXT
===================================== -->
<div class="story">
<!-- DEIN STORYTEXT HIER REIN -->
<!-- DEIN STORYTEXT -->
</div>
<!-- =====================================
RECHTE SPALTE – REZEPT (mit responsivem Bild)
RECHTE SPALTE – REZEPT
===================================== -->
<div class="addon popup-recipe-content">
<!-- REZEPTNAME -->
<!-- Rezeptname -->
<h3 class="recipe-title"><!-- Rezeptname --></h3>
<!-- RESPONSIVES REZEPTBILD -->
<!-- RESPONSIVES BILD -->
<picture class="recipe-image-wrapper">
<!-- AVIF -->
@@ -36,9 +42,10 @@
/2025/assets/images/rezepte/1024/avif/REZEPT.avif 1024w,
/2025/assets/images/rezepte/1366/avif/REZEPT.avif 1366w,
/2025/assets/images/rezepte/1600/avif/REZEPT.avif 1600w,
/2025/assets/images/rezepte/1920/avif/REZEPT.avif 1920w
/2025/assets/images/rezepte/1920/avif/REZEPT.avif 1920w,
/2025/assets/images/rezepte/2560/avif/REZEPT.avif 2560w,
/2025/assets/images/rezepte/3840/avif/REZEPT.avif 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
>
<!-- WEBP -->
@@ -50,12 +57,13 @@
/2025/assets/images/rezepte/1024/webp/REZEPT.webp 1024w,
/2025/assets/images/rezepte/1366/webp/REZEPT.webp 1366w,
/2025/assets/images/rezepte/1600/webp/REZEPT.webp 1600w,
/2025/assets/images/rezepte/1920/webp/REZEPT.webp 1920w
/2025/assets/images/rezepte/1920/webp/REZEPT.webp 1920w,
/2025/assets/images/rezepte/2560/webp/REZEPT.webp 2560w,
/2025/assets/images/rezepte/3840/webp/REZEPT.webp 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
>
<!-- JPEG Fallback -->
<!-- JPEG -->
<img
src="/2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg"
srcset="
@@ -64,32 +72,29 @@
/2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg 1024w,
/2025/assets/images/rezepte/1366/jpeg/REZEPT.jpg 1366w,
/2025/assets/images/rezepte/1600/jpeg/REZEPT.jpg 1600w,
/2025/assets/images/rezepte/1920/jpeg/REZEPT.jpg 1920w
/2025/assets/images/rezepte/1920/jpeg/REZEPT.jpg 1920w,
/2025/assets/images/rezepte/2560/jpeg/REZEPT.jpg 2560w,
/2025/assets/images/rezepte/3840/jpeg/REZEPT.jpg 3840w
"
sizes="(max-width: 900px) 100vw, 40vw"
alt="Rezeptbild"
class="recipe-image"
decoding="async"
loading="lazy"
>
</picture>
<!-- Zutaten -->
<h4>Zutaten</h4>
<ul>
<!-- Zutaten -->
<!-- Zutatenliste -->
</ul>
<!-- Zubereitung -->
<h4>Zubereitung</h4>
<p>
<!-- Zubereitung -->
<!-- Zubereitungstext -->
</p>
</div>
</div>
</section>

17
templates/video.txt
View File

@@ -3,8 +3,15 @@
============================================ -->
<section class="popup-day popup-3part">
<!-- HEADER + BUTTONS -->
<div class="popup-header">
<h2><!-- TITEL DES TAGES --></h2>
<div class="popup-tools">
<button id="btn-font-toggle">Aa ↔ &#x1D49C;</button>
<button id="btn-font-up">A+</button>
<button id="btn-font-down">A−</button>
</div>
</div>
<div class="popup-body">
@@ -15,15 +22,15 @@
</div>
<!-- VIDEO -->
<div class="addon">
<div class="addon addon-video-wrapper">
<video
class="thumbkino-video"
autoplay
playsinline
muted
loop
muted
playsinline
preload="auto"
class="addon-video"
poster="/2025/assets/images/dayXX/1024/jpeg/BILD.jpg"
poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg">
>
<!-- WEBM -->