Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adventskalender/shared/style.css aktualisiert

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-02 21:17:19 +00:00
parent b6b69ba3be
commit c4c8032d77
1 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
adventskalender/shared/style.css
View File

@@ -7,27 +7,33 @@
--ci-creamwhite: #f7f3e8; --ci-creamwhite: #f7f3e8;
} }
/* === Basislayout (global) === */ /* === Reset & Grundstruktur === */
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body { html, body {
height: 100%;
min-height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
font-family: sans-serif; font-family: sans-serif;
color: var(--ci-creamwhite);
text-align: center;
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);
text-align: center;
box-sizing: border-box;
overflow-x: hidden;
width: 100%;
} }
/* === Jahrgangs-Navigation === */
.year-list ul { .year-list ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 2rem 0;
} }
.year-list li { .year-list li {
@@ -37,28 +43,37 @@ html, body {
.year-list a { .year-list a {
text-decoration: none; text-decoration: none;
font-size: 1.2rem; font-size: 1.2rem;
background: var(--ci-blue); background-color: var(--ci-blue);
color: var(--ci-creamwhite); color: var(--ci-creamwhite);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 8px; border-radius: 8px;
display: inline-block; display: inline-block;
border: 2px solid var(--ci-gold);
transition: all 0.2s ease-in-out;
} }
*, *::before, *::after { .year-list a:hover {
box-sizing: inherit; background-color: var(--ci-gold);
color: var(--ci-blue);
} }
/* === Kalenderbild === */
.kalenderbild { .kalenderbild {
width: 100%; width: 100%;
margin: 0 auto; height: 100%;
overflow: hidden; display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
} }
.kalenderbild img { .kalenderbild img {
display: block;
width: 100%; width: 100%;
height: auto; height: auto;
max-height: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
display: block;
border: 4px solid var(--ci-gold); border: 4px solid var(--ci-gold);
border-radius: 12px; border-radius: 12px;
object-fit: contain; object-fit: contain;