Kreative Haufen in CSS (#254)
All checks were successful
website-main / prod-build (push) Successful in 15s
website-main / test-build (push) Successful in 4s

Schließt #211

Reviewed-on: #254
This commit is contained in:
2024-01-02 21:55:31 +01:00
parent 71aac39f00
commit 02c5040281
43 changed files with 886 additions and 426 deletions

View File

@ -993,4 +993,75 @@ link:focus,
.min-w-0 {
min-width: 0;
}
}
/* Kreative Haufen */
.kh-parent {
display: grid;
grid: repeat(3, 1fr) / repeat(4, 1fr);
justify-content: space-between;
align-content: space-between;
gap: .5rem;
}
.kh-parent > * {
justify-self: center;
text-align: center;
align-self: center;
}
.kh-parent > [onclick] {
cursor: pointer;
}
.kh-parent > [onclick]:hover {
transition: transform 0.3s ease-in-out;
transform: scale(1.1);
}
.kh-jahr {
grid-area: 2 / 2 / span 1 / span 2;
rotate: -25deg;
color: #ffbc3b;
margin: 0;
}
.kh-jahr[onclick]:hover {
text-shadow: rgba(255, 186, 59, 0.8) 0px 0px 170px;
}
.kh-jahr > * {
font-size: 3em;
}
.kh {
color: #1a1a37;
hyphens: manual;
}
.kh:hover {
text-shadow: rgba(26, 26, 55, 0.9) 0px 0px 70px;
}
.kh[data-id="0"] {
grid-area: 1 / 1 / span 1 / span 2;
}
.kh[data-id="1"] {
grid-area: 3 / 3 / span 1 / span 2;
}
.kh[data-id="2"] {
grid-area: 3 / 1 / span 1 / span 2;
}
.kh[data-id="3"] {
grid-area: 1 / 3 / span 1 / span 2;
}
@media (min-width: 1200px) {
.kh > * {
font-size: 1.5em;
}
}