From c4c8032d77dcf3851d38bb10cdd6180917273e00 Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Sun, 2 Nov 2025 21:17:19 +0000 Subject: [PATCH] adventskalender/shared/style.css aktualisiert --- adventskalender/shared/style.css | 43 +++++++++++++++++++++----------- 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/adventskalender/shared/style.css b/adventskalender/shared/style.css index 4e259e5..9e44938 100644 --- a/adventskalender/shared/style.css +++ b/adventskalender/shared/style.css @@ -7,27 +7,33 @@ --ci-creamwhite: #f7f3e8; } -/* === Basislayout (global) === */ +/* === Reset & Grundstruktur === */ +*, +*::before, +*::after { + box-sizing: border-box; +} + html, body { - height: 100%; - min-height: 100%; margin: 0; padding: 0; + height: 100vh; + width: 100vw; + overflow: hidden; font-family: sans-serif; + color: var(--ci-creamwhite); + text-align: center; background: linear-gradient(180deg, var(--ci-darkgreen), var(--ci-blue)); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; - color: var(--ci-creamwhite); - text-align: center; - box-sizing: border-box; - overflow-x: hidden; - width: 100%; } +/* === Jahrgangs-Navigation === */ .year-list ul { list-style: none; padding: 0; + margin: 2rem 0; } .year-list li { @@ -37,28 +43,37 @@ html, body { .year-list a { text-decoration: none; font-size: 1.2rem; - background: var(--ci-blue); + background-color: var(--ci-blue); color: var(--ci-creamwhite); padding: 0.5rem 1rem; border-radius: 8px; display: inline-block; + border: 2px solid var(--ci-gold); + transition: all 0.2s ease-in-out; } -*, *::before, *::after { - box-sizing: inherit; +.year-list a:hover { + background-color: var(--ci-gold); + color: var(--ci-blue); } +/* === Kalenderbild === */ .kalenderbild { width: 100%; - margin: 0 auto; - overflow: hidden; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; } .kalenderbild img { + display: block; width: 100%; height: auto; + max-height: 100%; aspect-ratio: 16 / 9; - display: block; border: 4px solid var(--ci-gold); border-radius: 12px; object-fit: contain;