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"> <section class="popup-day popup-3part day01">
<!-- === Titelzeile === -->
<header class="popup-header"> <!-- HEADER + BUTTONS -->
<h2>🎁 1. Dezember – Der Anfang vom Zauber</h2> <div class="popup-header">
</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"> <div class="popup-body">
<!-- Linke Spalte: Story (dein bisheriger Text 1:1 übernommen) --> <!-- Linke Spalte: Story (dein bisheriger Text 1:1 übernommen) -->
<div class="story"> <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"> <div class="addon popup-recipe-content">
@@ -110,9 +110,10 @@
/2025/assets/images/1024/avif/Basisbild.avif 1024w, /2025/assets/images/1024/avif/Basisbild.avif 1024w,
/2025/assets/images/1366/avif/Basisbild.avif 1366w, /2025/assets/images/1366/avif/Basisbild.avif 1366w,
/2025/assets/images/1600/avif/Basisbild.avif 1600w, /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 --> <!-- WEBP -->
@@ -124,9 +125,10 @@
/2025/assets/images/1024/webp/Basisbild.webp 1024w, /2025/assets/images/1024/webp/Basisbild.webp 1024w,
/2025/assets/images/1366/webp/Basisbild.webp 1366w, /2025/assets/images/1366/webp/Basisbild.webp 1366w,
/2025/assets/images/1600/webp/Basisbild.webp 1600w, /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 --> <!-- JPEG -->
@@ -138,15 +140,15 @@
/2025/assets/images/1024/jpeg/Basisbild.jpg 1024w, /2025/assets/images/1024/jpeg/Basisbild.jpg 1024w,
/2025/assets/images/1366/jpeg/Basisbild.jpg 1366w, /2025/assets/images/1366/jpeg/Basisbild.jpg 1366w,
/2025/assets/images/1600/jpeg/Basisbild.jpg 1600w, /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" alt="Rezeptbild"
class="recipe-image" class="recipe-image"
decoding="async" decoding="async"
loading="lazy" loading="lazy"
> >
</picture> </picture>
<!-- Zutaten --> <!-- Zutaten -->

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

@@ -191,7 +191,7 @@
/* Bild floaten lassen */ /* Bild floaten lassen */
.popup-recipe-content picture.recipe-image-wrapper { .popup-recipe-content picture.recipe-image-wrapper {
float: left; float: left;
width: clamp(200px, 40%, 330px); width: clamp(260px, 70%, 3840px);
margin: 0 1.5rem 1.2rem 0; margin: 0 1.5rem 1.2rem 0;
border-radius: 10px; border-radius: 10px;
display: block; display: block;
@@ -279,7 +279,7 @@
padding: 0.15rem 0.45rem; padding: 0.15rem 0.45rem;
font-family: var(--ci-font-readable), serif; font-family: var(--ci-font-readable), serif;
font-size: 1.05rem; font-size: 1.3rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.3px; letter-spacing: 0.3px;
color: var(--ci-darkgreen); color: var(--ci-darkgreen);
@@ -295,4 +295,43 @@ display: flex;
.popup-tools button:hover { .popup-tools button:hover {
background: color-mix(in srgb, var(--ci-gold) 35%, #fff2cc); 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 --> <!-- TITEL -->
<div class="popup-header"> <div class="popup-header">
<h2><!-- TITEL DES TAGES --></h2> <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> </div>
<!-- 2 SPALTEN --> <!-- ZWEI SPALTEN -->
<div class="popup-body"> <div class="popup-body">
<!-- ================================ <!-- ================================
@@ -16,9 +23,9 @@
</div> </div>
<!-- ================================ <!-- ================================
RECHTE SPALTE – SOUND RECHTE SPALTE – AUDIO
================================ --> ================================ -->
<div class="addon"> <div class="addon addon-audio-wrapper">
<audio controls preload="auto" class="addon-audio"> <audio controls preload="auto" class="addon-audio">
<source src="/2025/assets/sounds/SOUND.mp3" type="audio/mpeg"> <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"> <section class="popup-day popup-3part">
<!-- TITEL --> <!-- TITEL + BUTTONS -->
<div class="popup-header"> <div class="popup-header">
<h2><!-- TITEL DES TAGES --></h2> <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>
<!-- 2 SPALTEN --> <!-- 2 SPALTEN -->
<div class="popup-body"> <div class="popup-body">
<!-- ================================ <!-- LINKE SPALTE -->
LINKE SPALTE – DEIN TEXT
================================ -->
<div class="story"> <div class="story">
<!-- HIER DEIN TEXT --> <!-- DEIN TEXT -->
</div> </div>
<!-- ================================ <!-- RECHTE SPALTE -->
RECHTE SPALTE – BILD (RESPONSIV) <div class="addon addon-picture">
================================ -->
<div class="addon">
<!-- RESPONSIVES BILD -->
<picture> <picture>
<!-- AVIF --> <!-- AVIF -->
@@ -39,7 +40,7 @@
/2025/assets/images/dayXX/2560/avif/BILD.avif 2560w, /2025/assets/images/dayXX/2560/avif/BILD.avif 2560w,
/2025/assets/images/dayXX/3840/avif/BILD.avif 3840w /2025/assets/images/dayXX/3840/avif/BILD.avif 3840w
" "
sizes="(max-width: 900px) 100vw, 40vw" sizes="90vw"
> >
<!-- WEBP --> <!-- WEBP -->
@@ -55,7 +56,7 @@
/2025/assets/images/dayXX/2560/webp/BILD.webp 2560w, /2025/assets/images/dayXX/2560/webp/BILD.webp 2560w,
/2025/assets/images/dayXX/3840/webp/BILD.webp 3840w /2025/assets/images/dayXX/3840/webp/BILD.webp 3840w
" "
sizes="(max-width: 900px) 100vw, 40vw" sizes="90vw"
> >
<!-- JPEG --> <!-- JPEG -->
@@ -71,16 +72,14 @@
/2025/assets/images/dayXX/2560/jpeg/BILD.jpg 2560w, /2025/assets/images/dayXX/2560/jpeg/BILD.jpg 2560w,
/2025/assets/images/dayXX/3840/jpeg/BILD.jpg 3840w /2025/assets/images/dayXX/3840/jpeg/BILD.jpg 3840w
" "
sizes="(max-width: 900px) 100vw, 40vw" sizes="90vw"
alt="Bild zum Tag" alt="Bild zum Tag"
class="addon-image" class="addon-picture-image"
decoding="async"
loading="lazy"
> >
</picture> </picture>
</div> </div>
</div>
</div>
</section> </section>

43
templates/recipe.txt
View File

@@ -3,28 +3,34 @@
<!-- TITEL --> <!-- TITEL -->
<div class="popup-header"> <div class="popup-header">
<h2><!-- TITEL HIER --></h2> <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> </div>
<!-- HAUPTBEREICH --> <!-- ZWEI-SPALTEN-LAYOUT -->
<div class="popup-body"> <div class="popup-body">
<!-- ===================================== <!-- =====================================
LINKE SPALTE – STORYTEXT LINKE SPALTE – STORYTEXT
===================================== --> ===================================== -->
<div class="story"> <div class="story">
<!-- DEIN STORYTEXT HIER REIN --> <!-- DEIN STORYTEXT -->
</div> </div>
<!-- ===================================== <!-- =====================================
RECHTE SPALTE – REZEPT (mit responsivem Bild) RECHTE SPALTE – REZEPT
===================================== --> ===================================== -->
<div class="addon popup-recipe-content"> <div class="addon popup-recipe-content">
<!-- REZEPTNAME --> <!-- Rezeptname -->
<h3 class="recipe-title"><!-- Rezeptname --></h3> <h3 class="recipe-title"><!-- Rezeptname --></h3>
<!-- RESPONSIVES REZEPTBILD --> <!-- RESPONSIVES BILD -->
<picture class="recipe-image-wrapper"> <picture class="recipe-image-wrapper">
<!-- AVIF --> <!-- AVIF -->
@@ -36,9 +42,10 @@
/2025/assets/images/rezepte/1024/avif/REZEPT.avif 1024w, /2025/assets/images/rezepte/1024/avif/REZEPT.avif 1024w,
/2025/assets/images/rezepte/1366/avif/REZEPT.avif 1366w, /2025/assets/images/rezepte/1366/avif/REZEPT.avif 1366w,
/2025/assets/images/rezepte/1600/avif/REZEPT.avif 1600w, /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 --> <!-- WEBP -->
@@ -50,12 +57,13 @@
/2025/assets/images/rezepte/1024/webp/REZEPT.webp 1024w, /2025/assets/images/rezepte/1024/webp/REZEPT.webp 1024w,
/2025/assets/images/rezepte/1366/webp/REZEPT.webp 1366w, /2025/assets/images/rezepte/1366/webp/REZEPT.webp 1366w,
/2025/assets/images/rezepte/1600/webp/REZEPT.webp 1600w, /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 <img
src="/2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg" src="/2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg"
srcset=" srcset="
@@ -64,32 +72,29 @@
/2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg 1024w, /2025/assets/images/rezepte/1024/jpeg/REZEPT.jpg 1024w,
/2025/assets/images/rezepte/1366/jpeg/REZEPT.jpg 1366w, /2025/assets/images/rezepte/1366/jpeg/REZEPT.jpg 1366w,
/2025/assets/images/rezepte/1600/jpeg/REZEPT.jpg 1600w, /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" alt="Rezeptbild"
class="recipe-image" class="recipe-image"
decoding="async" decoding="async"
loading="lazy" loading="lazy"
> >
</picture> </picture>
<!-- Zutaten --> <!-- Zutaten -->
<h4>Zutaten</h4> <h4>Zutaten</h4>
<ul> <ul>
<!-- Zutaten --> <!-- Zutatenliste -->
</ul> </ul>
<!-- Zubereitung --> <!-- Zubereitung -->
<h4>Zubereitung</h4> <h4>Zubereitung</h4>
<p> <p>
<!-- Zubereitung --> <!-- Zubereitungstext -->
</p> </p>
</div> </div>
</div> </div>
</section> </section>

17
templates/video.txt
View File

@@ -3,8 +3,15 @@
============================================ --> ============================================ -->
<section class="popup-day popup-3part"> <section class="popup-day popup-3part">
<!-- HEADER + BUTTONS -->
<div class="popup-header"> <div class="popup-header">
<h2><!-- TITEL DES TAGES --></h2> <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>
<div class="popup-body"> <div class="popup-body">
@@ -15,15 +22,15 @@
</div> </div>
<!-- VIDEO --> <!-- VIDEO -->
<div class="addon"> <div class="addon addon-video-wrapper">
<video <video
class="thumbkino-video"
autoplay autoplay
playsinline
muted
loop loop
muted
playsinline
preload="auto" preload="auto"
class="addon-video" poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg">
poster="/2025/assets/images/dayXX/1024/jpeg/BILD.jpg"
> >
<!-- WEBM --> <!-- WEBM -->