From 11e3469e9015c27c5b4067a3d4e05ffdf7cfa838 Mon Sep 17 00:00:00 2001
From: residualentropy <161914158+residualentropy@users.noreply.github.com>
Date: Sun, 28 Jul 2024 12:19:20 +0200
Subject: [PATCH] neofox rain more like neofox reign

---
 docs/index.html    | 14 +++++++++++---
 docs/neofoxrain.js | 16 ++++++++++++++++
 docs/style.css     | 12 ++++++++----
 3 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 docs/neofoxrain.js

diff --git a/docs/index.html b/docs/index.html
index 0742aef..5fc023a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,7 +23,8 @@
 			<span class="lighter plimalgranda"><a href="enhavo.html">Ĉi tiu paĝo estas disponebla ankaŭ en
 					Esperanto.</a></span>
 			<h1>Kyla</h1>
-			<span class="lighter">shi/hir, creamsicle <span id="plush" title="Lexi used her witchcraft to turn my genetics into a living plushie...">plush</span> foxgirl</span><br>
+			<span class="lighter">shi/hir, creamsicle <span id="plush"
+					title="Lexi used her witchcraft to turn my genetics into a living plushie...">plush</span> foxgirl</span><br>
 			noun, god of :3<br>
 			sweet, kind<br>
 			<br>
@@ -84,9 +85,16 @@
 
 	<script src="code.js"></script>
 
-	<img src="neofox.png" class="falling">
+	<script src="neofoxrain.js"></script>
+	<img src="neofox.png" class="falling tiny">
+	<img src="neofox.png" class="falling tiny">
+	<img src="neofox.png" class="falling tiny">
+	<img src="neofox.png" class="falling tiny">
+	<img src="neofox.png" class="falling tiny">
+	<img src="neofox.png" class="falling tiny">
+	<img src="neofox.png" class="falling tiny">
 
 	</div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/docs/neofoxrain.js b/docs/neofoxrain.js
new file mode 100644
index 0000000..86d610d
--- /dev/null
+++ b/docs/neofoxrain.js
@@ -0,0 +1,16 @@
+'use strict';
+
+alert('oh no! not another alert!');
+
+function rain() {
+  let falling = document.getElementsByClassName('falling');
+  console.log('[info] there are ' + falling.length + ' things falling');
+  for (const el of falling) {
+    el.style.left = `${Math.random() * 100}%`;
+    el.style.top = `${Math.random() * 50}%`;
+    el.style.setProperty('--offset-angle', `${Math.random() * 360}deg`);
+  }
+}
+
+window.addEventListener('DOMContentLoaded', rain);
+
diff --git a/docs/style.css b/docs/style.css
index 5eeaad6..9b9f40f 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -160,17 +160,21 @@ a img {
 
 .falling {
   position: absolute;
-  left: 50%;
-  top: 0;
   animation: fall 3s linear forwards infinite;
+  --offset-angle: 0;
 }
 
 @keyframes fall {
   0% {
-    transform: translateY(-50vh) rotate(0);
+    transform: translateY(-50vh) rotate(var(--offset-angle));
   }
 
   100% {
-    transform: translateY(150vh) rotate(180deg);
+    transform: translateY(150vh) rotate(calc(180deg + var(--offset-angle)));
   }
 }
+
+
+.tiny {
+  width: 100px;
+}
\ No newline at end of file