diff --git a/adventskalender/shared/style.css b/adventskalender/shared/style.css index be94229..03104c2 100644 --- a/adventskalender/shared/style.css +++ b/adventskalender/shared/style.css @@ -17,60 +17,33 @@ html, body { margin: 0; padding: 0; - font-family: sans-serif; + width: 100vw; + height: 100dvh; 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; - overflow-x: hidden; + overflow: hidden; } -/* === Jahrgangs-Navigation === */ -.year-list ul { - list-style: none; - padding: 0; - margin: 2rem 0; -} - -.year-list li { - margin: 1rem 0; -} - -.year-list a { - text-decoration: none; - font-size: 1.2rem; - 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; -} - -.year-list a:hover { - background-color: var(--ci-gold); - color: var(--ci-blue); -} - -/* === Kalenderbild (zentriert, festgelegt, ohne erzwungene Breite) === */ +/* === Kalenderbild: Bild + Rahmen === */ .kalenderbild { width: 100vw; - height: 100vh; + height: 100dvh; display: flex; justify-content: center; align-items: center; + padding: 0; + margin: 0; overflow: hidden; } .kalenderbild img { - max-width: calc(100vh * (16 / 9)); - max-height: 100vh; + display: block; aspect-ratio: 16 / 9; + max-width: 100vw; + max-height: 100dvh; border: 4px solid var(--ci-gold); border-radius: 12px; - display: block; object-fit: contain; } \ No newline at end of file