adventskalender/shared/style.css aktualisiert

This commit is contained in:
2025-11-02 21:47:05 +00:00
parent b8ca40215d
commit e28d6e7a64

View File

@@ -17,60 +17,33 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: sans-serif; width: 100vw;
height: 100dvh;
background: linear-gradient(180deg, var(--ci-darkgreen), var(--ci-blue)); background: linear-gradient(180deg, var(--ci-darkgreen), var(--ci-blue));
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
color: var(--ci-creamwhite); overflow: hidden;
text-align: center;
overflow-x: hidden;
} }
/* === Jahrgangs-Navigation === */ /* === Kalenderbild: Bild + Rahmen === */
.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 { .kalenderbild {
width: 100vw; width: 100vw;
height: 100vh; height: 100dvh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0;
margin: 0;
overflow: hidden; overflow: hidden;
} }
.kalenderbild img { .kalenderbild img {
max-width: calc(100vh * (16 / 9)); display: block;
max-height: 100vh;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
max-width: 100vw;
max-height: 100dvh;
border: 4px solid var(--ci-gold); border: 4px solid var(--ci-gold);
border-radius: 12px; border-radius: 12px;
display: block;
object-fit: contain; object-fit: contain;
} }