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

6 files changed, 185 insertions, 6 deletions

diff --git a/meta/footer.html b/meta/footer.html
index 86da5d0..74c62dd 100644
--- a/meta/footer.html
+++ b/meta/footer.html
@@ -16,5 +16,6 @@
 <script type="text/javascript" src="/scripts/theme-changer.js" crossorigin="anonymous" defer></script>
 <script type="text/javascript" src="/scripts/back-to-top.js" crossorigin="anonymous" defer></script>
 <script type="text/javascript" src="/scripts/keyboard.js" crossorigin="anonymous" defer></script>
+<script type="text/javascript" src="/scripts/snow.js" crossorigin="anonymous" defer></script>
 
 </html>
diff --git a/meta/header.html b/meta/header.html
index f377483..2858d03 100644
--- a/meta/header.html
+++ b/meta/header.html
@@ -75,6 +75,7 @@
 		<nav id="settingsWrapper" class="sidebar-section">
 			<span id="changeThemeBtn" class="btn setting-btn"><span>Light</span> theme</span>
 			<span id="changeWidthBtn" class="btn setting-btn"><span>Wide</span> text</span>
+			<span id="snowBtn" class="btn setting-btn nodisplay"><span>Remove</span> snowflakes</span>
 		</nav>
 
 		<span class="nocss-aid"><br></span>
@@ -110,4 +111,5 @@
 
 	<article>
 		<script type="text/javascript" src="/scripts/page-width.js" crossorigin="anonymous" defer></script>
+		<script type="text/javascript" src="/scripts/snow-preload.js" crossorigin="anonymous" defer></script>
 		<div id="article-container">
diff --git a/src/regarding-js.du b/src/regarding-js.du
index 3c6eeeb..2251d3f 100644
--- a/src/regarding-js.du
+++ b/src/regarding-js.du
@@ -52,8 +52,8 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |: [url /scripts/presentation.js presentation.js]
 |: Presentation logic (button capabilities and other) [=Loaded only on pages with presentations!=]
 |: [url https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js Link]
-|: 6.0KB
-|: 197
+|: 6.1KB
+|: 204
 
 |: [url /scripts/keyboard.js keyboard.js]
 |: Implements keyboard shortcuts
@@ -61,17 +61,29 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |: 810B
 |: 40
 
+|: [url /scripts/snow.js snow.js]
+|: Adds and manages falling snowflakes. Functional only in December and January.
+|: [url https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/snow.js Link]
+|: 814B
+|: 36
+
+|: [url /scripts/snow-preload.js snow-preload.js]
+|: Initializes falling snowflake elements
+|: [url https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/snow-preload.js Link]
+|: 561B
+|: 20
+
 |:
 |: Total without presentation.js
 |:
-|: 4.0KB
-|: 153
+|: 5.3KB
+|: 209
 
 |:
 |: Total with presentation.js
 |:
-|: 9.0KB
-|: 307
+|: 11.4KB
+|: 413
 
 
 ## Data in browser storage
@@ -97,5 +109,9 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |: [`norm`] | [`hidden`]
 |: Saves whether the navbar should be expanded or shrunk
 
+|: [`snow`]
+|: [`on`] | [`off`]
+|: Saves whether snowflakes are shown (and animated). Functional only in December and January.
+
 
 .p
diff --git a/src/scripts/snow-preload.js b/src/scripts/snow-preload.js
new file mode 100644
index 0000000..de13841
--- /dev/null
+++ b/src/scripts/snow-preload.js
@@ -0,0 +1,20 @@
+const today = new Date();
+
+// Enable snowflakes only in December and January
+const enableSnow = today.getMonth() == 11 || today.getMonth() == 0;
+
+const snowBtn = document.getElementById('snowBtn');
+const snowEnabledLabel = snowBtn.childNodes[0];
+const snowCont = document.createElement('div');
+
+if (enableSnow) {
+	snowBtn.classList.remove('nodisplay');
+
+	if (localStorage.getItem('snow') === 'off') {
+		snowCont.classList.add('noSnow');
+		snowEnabledLabel.innerText = 'Add';
+	}
+
+	snowCont.classList.add('snowContainer');
+	document.body.appendChild(snowCont);
+}
diff --git a/src/scripts/snow.js b/src/scripts/snow.js
new file mode 100644
index 0000000..a7eca9a
--- /dev/null
+++ b/src/scripts/snow.js
@@ -0,0 +1,36 @@
+if (enableSnow) {
+	// Parameters
+
+	const snowflakes = 80;
+
+	// Add snowflakes
+
+	function randInt(min, max) {
+		return Math.floor(Math.random() * (max - min + 1) ) + min;
+	}
+
+	for (let snowflakeI = 0; snowflakeI < snowflakes; snowflakeI++) {
+		const snowflake = document.createElement('div');
+		snowflake.classList.add(
+			'snowflake',
+			'snow-column-' + ((snowflakeI % 20) + 1),
+			'snow-start-'  + randInt(1, 20),
+			'snow-speed-'  + randInt(1, 9));
+		snowCont.appendChild(snowflake);
+	}
+
+	// Snowflake button
+
+	snowBtn.onclick = function() {
+		snowCont.classList.toggle('noSnow');
+
+		if (localStorage.getItem('snow') !== 'on') {
+			localStorage.setItem('snow', 'on');
+			snowEnabledLabel.innerText = 'Remove';
+		}
+		else {
+			snowEnabledLabel.innerText = 'Add';
+			localStorage.setItem('snow', 'off');
+		}
+	}
+}
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; };