diff --git a/adventskalender/shared/style.css b/adventskalender/shared/style.css index b29ee13..7f3afc1 100644 --- a/adventskalender/shared/style.css +++ b/adventskalender/shared/style.css @@ -7,7 +7,7 @@ --ci-creamwhite: #f7f3e8; } -/* === Reset & Grundlayout === */ +/* === Reset & Grundstruktur === */ *, *::before, *::after { @@ -23,47 +23,46 @@ html, body { font-family: sans-serif; color: var(--ci-creamwhite); background: linear-gradient(180deg, var(--ci-darkgreen), var(--ci-blue)); - background-repeat: no-repeat; - background-attachment: fixed; background-size: cover; + background-repeat: no-repeat; display: flex; flex-direction: column; } /* === Hauptbereich === */ main { - flex: 1 1 auto; display: flex; flex-direction: column; - overflow: hidden; + height: 100%; + width: 100%; } -/* === Überschrift oben === */ +/* === Überschrift === */ main > h1 { flex: 0 0 auto; - margin: 1rem 0; - font-size: 2rem; + font-size: 1.8rem; text-align: center; + margin: 0.5rem 0; + padding: 0 1rem; } -/* === Bildcontainer passt sich an === */ +/* === Bildcontainer === */ .kalenderbild { flex: 1 1 auto; display: flex; - justify-content: center; align-items: center; + justify-content: center; overflow: hidden; + padding: 0.5rem; } -/* === Bild passt sich dem verfügbaren Platz an === */ +/* === Bild selbst === */ .kalenderbild img { - max-width: 90%; - max-height: 90%; - width: auto; + display: block; + max-width: 100%; + max-height: calc(100dvh - 3rem); /* Platz für h1 */ height: auto; - aspect-ratio: 16 / 9; + width: auto; border: 4px solid var(--ci-gold); border-radius: 12px; - object-fit: contain; - display: block; } \ No newline at end of file