From c32a5659a53fa89c863be34b7fcf3f206740b7c4 Mon Sep 17 00:00:00 2001
From: Agahnim <naguiagahnim@proton.me>
Date: Wed, 13 May 2026 14:24:54 +0200
Subject: [PATCH] music: resize wall of text on size changed

---
 templates/partials/music.html | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/templates/partials/music.html b/templates/partials/music.html
index f239e50..76de1fe 100644
--- a/templates/partials/music.html
+++ b/templates/partials/music.html
@@ -7,22 +7,33 @@
 <script>
   (function () {
     const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    const container = document.getElementById("bg-text");
-    if (!container) return;
     const colWidth = 20;
     const rowHeight = 24;
-    const cols = Math.ceil(window.innerWidth / colWidth);
-    const rows = Math.ceil(window.innerHeight / rowHeight);
+    const container = document.getElementById("bg-text");
+    if (!container) return;
 
-    for (let c = 0; c < cols; c++) {
-      const col = document.createElement("vertical-marquee-inner");
-      col.style.left = c * colWidth + "px";
-      for (let r = 0; r < rows; r++) {
-        const span = document.createElement("text");
-        span.textContent = chars[Math.floor(Math.random() * chars.length)];
-        col.appendChild(span);
+    function build() {
+      container.innerHTML = "";
+      const cols = Math.ceil(window.innerWidth / colWidth);
+      const rows = Math.ceil(window.innerHeight / rowHeight);
+      for (let c = 0; c < cols; c++) {
+        const col = document.createElement("vertical-marquee-inner");
+        col.style.left = c * colWidth + "px";
+        for (let r = 0; r < rows; r++) {
+          const span = document.createElement("text");
+          span.textContent = chars[Math.floor(Math.random() * chars.length)];
+          col.appendChild(span);
+        }
+        container.appendChild(col);
       }
-      container.appendChild(col);
     }
+
+    let resizeTimer;
+    window.addEventListener("resize", function () {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(build, 150);
+    });
+
+    build();
   })();
 </script>