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

Anpassung Darstellung

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-11 12:08:27 +01:00
parent cda6582c57
commit 8d55b195b9
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
adventskalender/2025/css/popup.css
View File

@@ -1,7 +1,7 @@
/* ============================================================ /* ============================================================
Bratonien Adventskalender 2025 – Popup Design Bratonien Adventskalender 2025 – Popup Design
Bandbreitenoptimiert, hell & festlich Bandbreitenoptimiert, hell & festlich
Enthält Layouts: Standard, 3-Part (Story), Recipe Layouts: Standard, 3-Part (Story+Media), Recipe (Text+Bild)
============================================================ */ ============================================================ */
/* === Overlay === */ /* === Overlay === */
@@ -109,14 +109,16 @@
flex-direction: column; flex-direction: column;
} }
.popup-body .addon video, /* === Medien im 3-Part Layout === */
.popup-body .addon img, .popup-3part .popup-body .addon video,
.popup-body .addon audio { .popup-3part .popup-body .addon img {
max-width: 100%; width: 100%;
max-width: clamp(300px, 40vw, 700px);
height: auto; height: auto;
border-radius: 8px; border-radius: 10px;
object-fit: contain;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
background: #000; background: #000;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
} }
/* --- Mobile Ansicht: einspaltig --- */ /* --- Mobile Ansicht: einspaltig --- */
@@ -130,10 +132,15 @@
.popup-body .addon { .popup-body .addon {
margin-top: 1rem; margin-top: 1rem;
} }
.popup-3part .popup-body .addon video,
.popup-3part .popup-body .addon img {
max-width: 100%;
width: 100%;
}
} }
/* ============================================================ /* ============================================================
REZEPT-LAYOUT (Text umfließt Bild) REZEPT-LAYOUT (Text mit umflossenem Bild)
============================================================ */ ============================================================ */
.popup-recipe .popup-body { .popup-recipe .popup-body {