feat: Add falling snowflake effect (in December and January)

1 files changed, 104 insertions, 0 deletions

diff --git a/src/styles.css b/src/styles.css
index 747ec72..ea758c6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -152,6 +152,9 @@ li > div:only-child > img {
   font-size: 1.2em;
   line-height: 1em;
   text-align: center;
+
+  line-height: 1.6em;
+  padding-top: calc(1rem - 0.3em);
 }
 #settingsWrapper > .setting-btn { font-size: 0.6em; }
 
@@ -532,3 +535,104 @@ td:empty { height: 1em; }
   .language-terminal { color: var(--fg-color); background-color: var(--bg-color); }
   .slide, .absolute-slide { transform: none !important; margin: 0; }
 }
+
+/*## Snow ##*/
+
+.snowContainer {
+  position: absolute;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.noSnow > .snowflake {
+  display: none !important;
+  animation: none !important;
+}
+
+.snowflake {
+  pointer-events: none;
+
+  position: fixed;
+  border: 1px solid white;
+  box-shadow: 1px 1px 2px black;
+
+  width: 0;
+  height: 0;
+
+  top: -20vh;
+  animation:
+    70s linear      0s infinite           snowfall,
+    10s ease-in-out 0s infinite alternate snowsway;
+}
+
+@keyframes snowfall {
+  from {
+    display: initial;
+    top: -3vh;
+  };
+  to {
+    display: initial;
+    top: 101vh;
+  };
+}
+
+@keyframes snowsway {
+  from {
+    transform: translateX(-20px);
+  };
+  to {
+    transform: translateX(20px);
+  };
+}
+
+.snow-column-1  { left:  3%; }
+.snow-column-2  { left:  5%; }
+.snow-column-3  { left:  8%; }
+.snow-column-4  { left: 13%; }
+.snow-column-5  { left: 18%; }
+.snow-column-6  { left: 23%; }
+.snow-column-7  { left: 28%; }
+.snow-column-8  { left: 35%; }
+.snow-column-9  { left: 40%; }
+.snow-column-10 { left: 45%; }
+.snow-column-11 { left: 52%; }
+.snow-column-12 { left: 58%; }
+.snow-column-13 { left: 62%; }
+.snow-column-14 { left: 68%; }
+.snow-column-15 { left: 71%; }
+.snow-column-16 { left: 79%; }
+.snow-column-17 { left: 84%; }
+.snow-column-18 { left: 87%; }
+.snow-column-19 { left: 92%; }
+.snow-column-20 { left: 97%; }
+
+.snow-start-1  { animation-delay: 0s; }
+.snow-start-2  { animation-delay: 2s; }
+.snow-start-3  { animation-delay: 4s; }
+.snow-start-4  { animation-delay: 7s; }
+.snow-start-5  { animation-delay: 10s; }
+.snow-start-6  { animation-delay: 15s; }
+.snow-start-7  { animation-delay: 22s; }
+.snow-start-8  { animation-delay: 26s; }
+.snow-start-9  { animation-delay: 27s; }
+.snow-start-10 { animation-delay: 31s; }
+.snow-start-11 { animation-delay: 33s; }
+.snow-start-12 { animation-delay: 36s; }
+.snow-start-13 { animation-delay: 38s; }
+.snow-start-14 { animation-delay: 40s; }
+.snow-start-15 { animation-delay: 42s; }
+.snow-start-16 { animation-delay: 45s; }
+.snow-start-17 { animation-delay: 47s; }
+.snow-start-18 { animation-delay: 50s; }
+.snow-start-19 { animation-delay: 55s; }
+.snow-start-20 { animation-delay: 60s; }
+
+.snow-speed-1 { animation-duration: 65s, 10s; };
+.snow-speed-2 { animation-duration: 66s, 10s; };
+.snow-speed-3 { animation-duration: 68s, 10s; };
+.snow-speed-4 { animation-duration: 70s, 10s; };
+.snow-speed-5 { animation-duration: 71s, 10s; };
+.snow-speed-6 { animation-duration: 73s, 10s; };
+.snow-speed-7 { animation-duration: 75s, 10s; };
+.snow-speed-8 { animation-duration: 77s, 10s; };
+.snow-speed-9 { animation-duration: 81s, 10s; };