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

styling und Fehlerkorrektur

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-10 13:18:41 +01:00
parent e82891c544
commit c18a86885e
2 changed files with 142 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<section class="popup-day dayXX">
<section class="popup-day day01">
<h3>🎁 Türchen XX</h3>
<h3>🎁 Türchen 01</h3>
<!-- === Basisbild (Platzhalter oder Hauptmotiv) === -->
<div class="image-wrapper">
@@ -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">
</picture>
</div>
@@ -64,24 +64,24 @@
poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg"
>
<!-- WEBM-Varianten -->
<source src="/2025/assets/videos/nHD/XX.webm" type="video/webm" media="(max-width: 640px)">
<source src="/2025/assets/videos/FWVGA/XX.webm" type="video/webm" media="(max-width: 854px)">
<source src="/2025/assets/videos/qHD/XX.webm" type="video/webm" media="(max-width: 960px)">
<source src="/2025/assets/videos/HD/XX.webm" type="video/webm" media="(max-width: 1280px)">
<source src="/2025/assets/videos/HDplus/XX.webm" type="video/webm" media="(max-width: 1600px)">
<source src="/2025/assets/videos/FullHD/XX.webm" type="video/webm" media="(max-width: 1920px)">
<source src="/2025/assets/videos/1440p/XX.webm" type="video/webm" media="(max-width: 2560px)">
<source src="/2025/assets/videos/4K/XX.webm" type="video/webm" media="(min-width: 2561px)">
<source src="/2025/assets/videos/nHD/01.webm" type="video/webm" media="(max-width: 640px)">
<source src="/2025/assets/videos/FWVGA/01.webm" type="video/webm" media="(max-width: 854px)">
<source src="/2025/assets/videos/qHD/01.webm" type="video/webm" media="(max-width: 960px)">
<source src="/2025/assets/videos/HD/01.webm" type="video/webm" media="(max-width: 1280px)">
<source src="/2025/assets/videos/HDplus/01.webm" type="video/webm" media="(max-width: 1600px)">
<source src="/2025/assets/videos/FullHD/01.webm" type="video/webm" media="(max-width: 1920px)">
<source src="/2025/assets/videos/1440p/01.webm" type="video/webm" media="(max-width: 2560px)">
<source src="/2025/assets/videos/4K/01.webm" type="video/webm" media="(min-width: 2561px)">
<!-- MP4-Fallbacks -->
<source src="/2025/assets/videos/nHD/XX.mp4" type="video/mp4" media="(max-width: 640px)">
<source src="/2025/assets/videos/FWVGA/XX.mp4" type="video/mp4" media="(max-width: 854px)">
<source src="/2025/assets/videos/qHD/XX.mp4" type="video/mp4" media="(max-width: 960px)">
<source src="/2025/assets/videos/HD/XX.mp4" type="video/mp4" media="(max-width: 1280px)">
<source src="/2025/assets/videos/HDplus/XX.mp4" type="video/mp4" media="(max-width: 1600px)">
<source src="/2025/assets/videos/FullHD/XX.mp4" type="video/mp4" media="(max-width: 1920px)">
<source src="/2025/assets/videos/1440p/XX.mp4" type="video/mp4" media="(max-width: 2560px)">
<source src="/2025/assets/videos/4K/XX.mp4" type="video/mp4" media="(min-width: 2561px)">
<source src="/2025/assets/videos/nHD/01.mp4" type="video/mp4" media="(max-width: 640px)">
<source src="/2025/assets/videos/FWVGA/01.mp4" type="video/mp4" media="(max-width: 854px)">
<source src="/2025/assets/videos/qHD/01.mp4" type="video/mp4" media="(max-width: 960px)">
<source src="/2025/assets/videos/HD/01.mp4" type="video/mp4" media="(max-width: 1280px)">
<source src="/2025/assets/videos/HDplus/01.mp4" type="video/mp4" media="(max-width: 1600px)">
<source src="/2025/assets/videos/FullHD/01.mp4" type="video/mp4" media="(max-width: 1920px)">
<source src="/2025/assets/videos/1440p/01.mp4" type="video/mp4" media="(max-width: 2560px)">
<source src="/2025/assets/videos/4K/01.mp4" type="video/mp4" media="(min-width: 2561px)">
Dein Browser unterstützt dieses Videoformat nicht.
</video>
@@ -90,7 +90,7 @@
<!-- === Hintergrundmusik (optional) === -->
<audio id="bgmusic" autoplay loop>
<source src="/2025/assets/audio/dayXX_theme.mp3" type="audio/mpeg">
<source src="/2025/assets/audio/day01_theme.mp3" type="audio/mpeg">
</audio>
</section>

122
adventskalender/2025/css/day.css Normal file
View File

@@ -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;
}
}