diff --git a/adventskalender/shared/style.css b/adventskalender/shared/style.css index a633a8b..dfc9bfd 100644 --- a/adventskalender/shared/style.css +++ b/adventskalender/shared/style.css @@ -7,7 +7,7 @@ --ci-creamwhite: #f7f3e8; } -/* === Global Reset === */ +/* === Reset & Grundlayout === */ *, *::before, *::after { @@ -18,6 +18,7 @@ html, body { margin: 0; padding: 0; height: 100dvh; + width: 100vw; overflow: hidden; font-family: sans-serif; color: var(--ci-creamwhite); @@ -29,7 +30,15 @@ html, body { flex-direction: column; } -/* === Hauptüberschrift === */ +/* === Hauptbereich === */ +main { + flex: 1 1 auto; + display: flex; + flex-direction: column; + overflow: hidden; +} + +/* === Überschrift oben === */ main > h1 { flex: 0 0 auto; margin: 1rem 0; @@ -37,7 +46,7 @@ main > h1 { text-align: center; } -/* === Kalenderbildbereich === */ +/* === Bildcontainer passt sich an === */ .kalenderbild { flex: 1 1 auto; display: flex; @@ -46,13 +55,15 @@ main > h1 { overflow: hidden; } -/* === Bild selbst === */ +/* === Bild passt sich dem verfügbaren Platz an === */ .kalenderbild img { max-width: 100%; max-height: 100%; + width: auto; + height: auto; aspect-ratio: 16 / 9; - display: block; border: 4px solid var(--ci-gold); border-radius: 12px; object-fit: contain; + display: block; } \ No newline at end of file