Kreative Haufen in CSS (#254)

Schließt #211

Reviewed-on: #254

assets/css/style.css

@@ -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;
+  }
+}