A bunch of stuff

_includes/weather.njk

@@ -0,0 +1,172 @@
+<!-- weather -->
+		<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
+		{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}
+
+		<style>
+			.fallingObject {
+        color: #fff;
+        font-size: 1em;
+        font-family: Arial;
+        text-shadow: 0 0 1px #000;
+      }
+      @keyframes fallingObjects-fall {
+        0% {
+          top: -10%;
+        }
+        100% {
+          top: 100%;
+        }
+      }
+      @keyframes fallingObjects-shake {
+        0% {
+          transform: translateX(0px);
+        }
+        50% {
+          transform: translateX(80px);
+        }
+        100% {
+          transform: translateX(0px);
+        }
+      }
+      .fallingObject {
+        position: fixed;
+        top: -10%;
+        z-index: 9999;
+        user-select: none;
+        cursor: default;
+        animation-name: fallingObjects-fall, fallingObjects-shake;
+        animation-duration: 10s, 3s;
+        animation-timing-function: linear, ease-in-out;
+        animation-iteration-count: infinite, infinite;
+        animation-play-state: running, running;
+      }
+      .fallingObject:nth-of-type(0) {
+        left: 1%;
+        animation-delay: 0s, 0s;
+        & > div {
+					transform: rotate(45deg);
+        }
+      }
+      .fallingObject:nth-of-type(1) {
+        left: 10%;
+        animation-delay: 1s, 1s;
+        & > div {
+					transform: rotate(10deg);
+        }
+      }
+      .fallingObject:nth-of-type(2) {
+        left: 20%;
+        animation-delay: 6s, 0.5s;
+        & > div {
+					transform: rotate(60deg);
+        }
+      }
+      .fallingObject:nth-of-type(3) {
+        left: 30%;
+        animation-delay: 4s, 2s;
+        & > div {
+					transform: rotate(84deg);
+        }
+      }
+      .fallingObject:nth-of-type(4) {
+        left: 40%;
+        animation-delay: 2s, 2s;
+        & > div {
+					transform: rotate(267deg);
+        }
+      }
+      .fallingObject:nth-of-type(5) {
+        left: 50%;
+        animation-delay: 8s, 3s;
+        & > div {
+					transform: rotate(200deg);
+        }
+      }
+      .fallingObject:nth-of-type(6) {
+        left: 60%;
+        animation-delay: 6s, 2s;
+        & > div {
+					transform: rotate(20deg);
+        }
+      }
+      .fallingObject:nth-of-type(7) {
+        left: 70%;
+        animation-delay: 2.5s, 1s;
+        & > div {
+					transform: rotate(78deg);
+        }
+      }
+      .fallingObject:nth-of-type(8) {
+        left: 80%;
+        animation-delay: 1s, 0s;
+        & > div {
+					transform: rotate(3120deg);
+        }
+      }
+      .fallingObject:nth-of-type(9) {
+        left: 90%;
+        animation-delay: 3s, 1.5s;
+        & > div {
+					transform: rotate(123deg);
+        }
+      }
+		</style>
+		<div class="fallingObjects" id="weather" aria-hidden="true">
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+			<div class="fallingObject">
+				<div>{{ metadata.weatherSymbol }}</div>
+			</div>
+		</div>
+
+		<script>
+			const weather = document.getElementById("weather");
+			const weatherToggle = document.getElementById("weatherToggle");
+			const weatherPreference = localStorage.getItem("weather");
+
+			// Initial weather preference check on page load
+			if (weatherPreference == 0) {
+				weather.classList.add("hidden");
+				weatherToggle.checked = false;
+			} else {
+				weather.classList.remove("hidden");
+				weatherToggle.checked = true;
+			};
+
+			// Handle weather setting toggle
+			weatherToggle.addEventListener('change', function() {
+				if (this.checked) {
+					localStorage.setItem("weather", 1);
+					weather.classList.remove("hidden");
+				} else {
+					localStorage.setItem("weather", 0);
+					weather.classList.add("hidden");
+				};
+			});
+		</script>
+<!-- /weather -->