Adventskalender (#37)

* Add adventskalender

* Vorbereitung Adventskalender

* Credits

* Update Adventskalender

src/css/base/elements.css

@@ -19,6 +19,7 @@ html {
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   scroll-behavior: smooth;
+  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/css/base/footer.css

@@ -11,6 +11,7 @@
     @media (--L_and_up) {
       display: flex;
       flex-wrap: wrap;
+      align-items: center;
       justify-content: space-between;
 
       & p {

src/css/base/header.css

@@ -1,3 +1,20 @@
+.notice {
+  position: relative;
+  background: var(--color-card-bg);
+  transition-property: background-color;
+  transition-duration: var(--transition-duration-fast);
+  padding: var(--space-m) 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+
+  @media (--up_to_L) {
+    margin-top: calc(var(--logo-height) + var(--space-xxl) * 1.65);;
+    margin-bottom: calc((var(--logo-height) + var(--space-xxl) * 1.65) * -.75);
+  }
+}
+
 .header {
   background-color: var(--color-body-bg);
   transition-property: color, background-color, box-shadow;

src/css/base/snow.css

@@ -0,0 +1,473 @@
+.snowflake {
+  --size: 1vw;
+  width: var(--size);
+  height: var(--size);
+  background: white;
+  border-radius: 50%;
+  position: fixed;
+  z-index: 30000;
+  top: -5vh;
+}
+
+@keyframes snowfall {
+  0% {
+    transform: translate3d(var(--left-ini), 0, 0);
+  }
+  100% {
+    transform: translate3d(var(--left-end), 102vh, 0);
+  }
+}
+.snowflake:nth-child(1) {
+  --size: 0.4vw;
+  --left-ini: 5vw;
+  --left-end: 0vw;
+  left: 54vw;
+  animation: snowfall 8s linear infinite;
+  animation-delay: -6s;
+}
+
+.snowflake:nth-child(2) {
+  --size: 0.4vw;
+  --left-ini: -9vw;
+  --left-end: -9vw;
+  left: 64vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -2s;
+}
+
+.snowflake:nth-child(3) {
+  --size: 0.8vw;
+  --left-ini: 7vw;
+  --left-end: 5vw;
+  left: 86vw;
+  animation: snowfall 6s linear infinite;
+  animation-delay: -9s;
+}
+
+.snowflake:nth-child(4) {
+  --size: 0.8vw;
+  --left-ini: -6vw;
+  --left-end: 2vw;
+  left: 66vw;
+  animation: snowfall 10s linear infinite;
+  animation-delay: -1s;
+}
+
+.snowflake:nth-child(5) {
+  --size: 0.6vw;
+  --left-ini: 7vw;
+  --left-end: 7vw;
+  left: 10vw;
+  animation: snowfall 9s linear infinite;
+  animation-delay: -7s;
+}
+
+.snowflake:nth-child(6) {
+  --size: 0.8vw;
+  --left-ini: 1vw;
+  --left-end: 7vw;
+  left: 91vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -10s;
+}
+
+.snowflake:nth-child(7) {
+  --size: 1vw;
+  --left-ini: 1vw;
+  --left-end: 3vw;
+  left: 35vw;
+  animation: snowfall 7s linear infinite;
+  animation-delay: -3s;
+}
+
+.snowflake:nth-child(8) {
+  --size: 0.2vw;
+  --left-ini: 8vw;
+  --left-end: 7vw;
+  left: 65vw;
+  animation: snowfall 6s linear infinite;
+  animation-delay: -9s;
+}
+
+.snowflake:nth-child(9) {
+  --size: 0.8vw;
+  --left-ini: 2vw;
+  --left-end: 0vw;
+  left: 7vw;
+  animation: snowfall 15s linear infinite;
+  animation-delay: -10s;
+}
+
+.snowflake:nth-child(10) {
+  --size: 0.4vw;
+  --left-ini: 4vw;
+  --left-end: 8vw;
+  left: 2vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -10s;
+}
+
+.snowflake:nth-child(11) {
+  --size: 0.8vw;
+  --left-ini: 10vw;
+  --left-end: -5vw;
+  left: 4vw;
+  animation: snowfall 14s linear infinite;
+  animation-delay: -5s;
+}
+
+.snowflake:nth-child(12) {
+  --size: 0.6vw;
+  --left-ini: -3vw;
+  --left-end: -4vw;
+  left: 68vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -7s;
+}
+
+.snowflake:nth-child(13) {
+  --size: 0.4vw;
+  --left-ini: -9vw;
+  --left-end: 10vw;
+  left: 75vw;
+  animation: snowfall 15s linear infinite;
+  animation-delay: -9s;
+}
+
+.snowflake:nth-child(14) {
+  --size: 0.6vw;
+  --left-ini: 3vw;
+  --left-end: -9vw;
+  left: 18vw;
+  animation: snowfall 6s linear infinite;
+  animation-delay: -2s;
+}
+
+.snowflake:nth-child(15) {
+  --size: 0.4vw;
+  --left-ini: 7vw;
+  --left-end: 4vw;
+  left: 31vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -8s;
+}
+
+.snowflake:nth-child(16) {
+  --size: 0.6vw;
+  --left-ini: -7vw;
+  --left-end: 7vw;
+  left: 73vw;
+  animation: snowfall 13s linear infinite;
+  animation-delay: -6s;
+}
+
+.snowflake:nth-child(17) {
+  --size: 0.2vw;
+  --left-ini: -5vw;
+  --left-end: -3vw;
+  left: 48vw;
+  animation: snowfall 14s linear infinite;
+  animation-delay: -6s;
+}
+
+.snowflake:nth-child(18) {
+  --size: 0.2vw;
+  --left-ini: 0vw;
+  --left-end: -4vw;
+  left: 43vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -7s;
+}
+
+.snowflake:nth-child(19) {
+  --size: 0.4vw;
+  --left-ini: 3vw;
+  --left-end: 10vw;
+  left: 19vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -9s;
+}
+
+.snowflake:nth-child(20) {
+  --size: 0.2vw;
+  --left-ini: 2vw;
+  --left-end: -5vw;
+  left: 47vw;
+  animation: snowfall 6s linear infinite;
+  animation-delay: -9s;
+}
+
+.snowflake:nth-child(21) {
+  --size: 1vw;
+  --left-ini: 1vw;
+  --left-end: -6vw;
+  left: 16vw;
+  animation: snowfall 11s linear infinite;
+  animation-delay: -2s;
+}
+
+.snowflake:nth-child(22) {
+  --size: 0.4vw;
+  --left-ini: -3vw;
+  --left-end: 9vw;
+  left: 20vw;
+  animation: snowfall 11s linear infinite;
+  animation-delay: -10s;
+}
+
+.snowflake:nth-child(23) {
+  --size: 1vw;
+  --left-ini: 3vw;
+  --left-end: 3vw;
+  left: 58vw;
+  animation: snowfall 13s linear infinite;
+  animation-delay: -4s;
+}
+
+.snowflake:nth-child(24) {
+  --size: 0.8vw;
+  --left-ini: -3vw;
+  --left-end: 3vw;
+  left: 11vw;
+  animation: snowfall 11s linear infinite;
+  animation-delay: -1s;
+}
+
+.snowflake:nth-child(25) {
+  --size: 0.6vw;
+  --left-ini: 0vw;
+  --left-end: 0vw;
+  left: 35vw;
+  animation: snowfall 11s linear infinite;
+  animation-delay: -9s;
+}
+
+.snowflake:nth-child(26) {
+  --size: 0.6vw;
+  --left-ini: 9vw;
+  --left-end: 8vw;
+  left: 60vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -5s;
+}
+
+.snowflake:nth-child(27) {
+  --size: 1vw;
+  --left-ini: -2vw;
+  --left-end: 8vw;
+  left: 6vw;
+  animation: snowfall 11s linear infinite;
+  animation-delay: -10s;
+}
+
+.snowflake:nth-child(28) {
+  --size: 0.6vw;
+  --left-ini: 10vw;
+  --left-end: 1vw;
+  left: 21vw;
+  animation: snowfall 6s linear infinite;
+  animation-delay: -7s;
+}
+
+.snowflake:nth-child(29) {
+  --size: 1vw;
+  --left-ini: 10vw;
+  --left-end: -8vw;
+  left: 13vw;
+  animation: snowfall 14s linear infinite;
+  animation-delay: -1s;
+}
+
+.snowflake:nth-child(30) {
+  --size: 0.4vw;
+  --left-ini: -4vw;
+  --left-end: -5vw;
+  left: 95vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -8s;
+}
+
+.snowflake:nth-child(31) {
+  --size: 1vw;
+  --left-ini: 0vw;
+  --left-end: 3vw;
+  left: 92vw;
+  animation: snowfall 11s linear infinite;
+  animation-delay: -8s;
+}
+
+.snowflake:nth-child(32) {
+  --size: 1vw;
+  --left-ini: 7vw;
+  --left-end: 10vw;
+  left: 59vw;
+  animation: snowfall 10s linear infinite;
+  animation-delay: -10s;
+}
+
+.snowflake:nth-child(33) {
+  --size: 0.8vw;
+  --left-ini: 4vw;
+  --left-end: -2vw;
+  left: 1vw;
+  animation: snowfall 7s linear infinite;
+  animation-delay: -9s;
+}
+
+.snowflake:nth-child(34) {
+  --size: 0.2vw;
+  --left-ini: -9vw;
+  --left-end: 4vw;
+  left: 75vw;
+  animation: snowfall 10s linear infinite;
+  animation-delay: -4s;
+}
+
+.snowflake:nth-child(35) {
+  --size: 0.2vw;
+  --left-ini: -9vw;
+  --left-end: 6vw;
+  left: 47vw;
+  animation: snowfall 6s linear infinite;
+  animation-delay: -6s;
+}
+
+.snowflake:nth-child(36) {
+  --size: 0.2vw;
+  --left-ini: -6vw;
+  --left-end: -2vw;
+  left: 50vw;
+  animation: snowfall 8s linear infinite;
+  animation-delay: -3s;
+}
+
+.snowflake:nth-child(37) {
+  --size: 0.4vw;
+  --left-ini: 9vw;
+  --left-end: -6vw;
+  left: 15vw;
+  animation: snowfall 7s linear infinite;
+  animation-delay: -7s;
+}
+
+.snowflake:nth-child(38) {
+  --size: 1vw;
+  --left-ini: -9vw;
+  --left-end: -3vw;
+  left: 94vw;
+  animation: snowfall 10s linear infinite;
+  animation-delay: -7s;
+}
+
+.snowflake:nth-child(39) {
+  --size: 0.6vw;
+  --left-ini: 1vw;
+  --left-end: 8vw;
+  left: 29vw;
+  animation: snowfall 14s linear infinite;
+  animation-delay: -8s;
+}
+
+.snowflake:nth-child(40) {
+  --size: 1vw;
+  --left-ini: -1vw;
+  --left-end: 1vw;
+  left: 59vw;
+  animation: snowfall 13s linear infinite;
+  animation-delay: -6s;
+}
+
+.snowflake:nth-child(41) {
+  --size: 0.4vw;
+  --left-ini: -4vw;
+  --left-end: -3vw;
+  left: 48vw;
+  animation: snowfall 13s linear infinite;
+  animation-delay: -3s;
+}
+
+.snowflake:nth-child(42) {
+  --size: 0.4vw;
+  --left-ini: 1vw;
+  --left-end: 8vw;
+  left: 92vw;
+  animation: snowfall 15s linear infinite;
+  animation-delay: -9s;
+}
+
+.snowflake:nth-child(43) {
+  --size: 0.4vw;
+  --left-ini: 5vw;
+  --left-end: 9vw;
+  left: 45vw;
+  animation: snowfall 9s linear infinite;
+  animation-delay: -5s;
+}
+
+.snowflake:nth-child(44) {
+  --size: 1vw;
+  --left-ini: 1vw;
+  --left-end: 6vw;
+  left: 76vw;
+  animation: snowfall 12s linear infinite;
+  animation-delay: -5s;
+}
+
+.snowflake:nth-child(45) {
+  --size: 0.2vw;
+  --left-ini: 9vw;
+  --left-end: -7vw;
+  left: 13vw;
+  animation: snowfall 14s linear infinite;
+  animation-delay: -4s;
+}
+
+.snowflake:nth-child(46) {
+  --size: 0.4vw;
+  --left-ini: 1vw;
+  --left-end: -7vw;
+  left: 72vw;
+  animation: snowfall 9s linear infinite;
+  animation-delay: -5s;
+}
+
+.snowflake:nth-child(47) {
+  --size: 1vw;
+  --left-ini: 0vw;
+  --left-end: -2vw;
+  left: 22vw;
+  animation: snowfall 13s linear infinite;
+  animation-delay: -4s;
+}
+
+.snowflake:nth-child(48) {
+  --size: 0.8vw;
+  --left-ini: -5vw;
+  --left-end: -2vw;
+  left: 83vw;
+  animation: snowfall 10s linear infinite;
+  animation-delay: -5s;
+}
+
+.snowflake:nth-child(49) {
+  --size: 0.6vw;
+  --left-ini: -2vw;
+  --left-end: 1vw;
+  left: 85vw;
+  animation: snowfall 9s linear infinite;
+  animation-delay: -1s;
+}
+
+.snowflake:nth-child(50) {
+  --size: 1vw;
+  --left-ini: -6vw;
+  --left-end: -4vw;
+  left: 26vw;
+  animation: snowfall 9s linear infinite;
+  animation-delay: -3s;
+}
+
+/* added small blur every 6 snowflakes*/
+.snowflake:nth-child(6n) {
+  filter: blur(1px);
+}