From 3bc3981373ec41f88138f9b4d84d3ea330ea4c32 Mon Sep 17 00:00:00 2001
From: Dan <dan@unbo.lt>
Date: Thu, 11 Dec 2025 12:40:54 +0000
Subject: [PATCH] Shrinking sass nonsense

---
 assets/js/cityscape.js            |  40 ++++--
 assets/sass/pages/audio.scss      |   9 ++
 assets/sass/partials/_window.scss | 217 ++++++++----------------------
 layouts/audio/single.html         |   7 +-
 4 files changed, 106 insertions(+), 167 deletions(-)

diff --git a/assets/js/cityscape.js b/assets/js/cityscape.js
index 875f6d6..9d7fde8 100644
--- a/assets/js/cityscape.js
+++ b/assets/js/cityscape.js
@@ -14,18 +14,14 @@ function randomInt(min, max) {
 function createBuilding(minWindows, maxWindows) {
   const building = document.createElement("div");
   building.className = "building";
-
   const windowsContainer = document.createElement("div");
   windowsContainer.className = "building-windows";
-
   const numWindows = randomInt(minWindows, maxWindows);
-
   for (let i = 0; i < numWindows; i++) {
     const window = document.createElement("div");
     window.className = "window-light";
     windowsContainer.appendChild(window);
   }
-
   building.appendChild(windowsContainer);
   return building;
 }
@@ -38,10 +34,13 @@ function populateLayer(layerName, numBuildings, windowRange) {
     return;
   }
 
+  // Check for data-count attribute and use it if present
+  const dataCount = layer.dataset.count;
+  const buildingCount = dataCount ? parseInt(dataCount, 10) : numBuildings;
+
   // Clear existing buildings
   layer.innerHTML = "";
-
-  for (let i = 0; i < numBuildings; i++) {
+  for (let i = 0; i < buildingCount; i++) {
     const building = createBuilding(windowRange[0], windowRange[1]);
     layer.appendChild(building);
   }
@@ -54,18 +53,43 @@ function initializeCityscape() {
     randomInt(...config.buildingsFar.count),
     config.buildingsFar.windows,
   );
-
   populateLayer(
     "buildings-mid",
     randomInt(...config.buildingsMid.count),
     config.buildingsMid.windows,
   );
-
   populateLayer(
     "buildings-near",
     randomInt(...config.buildingsNear.count),
     config.buildingsNear.windows,
   );
+
+  document.querySelectorAll(".window-light").forEach((window) => {
+    if (Math.random() < 0.5) {
+      window.setAttribute("data-off", "");
+    } else {
+      const colorChoice = Math.random() * 100;
+      let hue, sat, light;
+
+      if (colorChoice <= 85) {
+        hue = 40 + Math.random() * 20;
+        sat = 70 + Math.random() * 30;
+        light = 50 + Math.random() * 30;
+      } else if (colorChoice <= 95) {
+        hue = 320 + Math.random() * 20;
+        sat = 60 + Math.random() * 40;
+        light = 60 + Math.random() * 20;
+      } else {
+        hue = 260 + Math.random() * 40;
+        sat = 50 + Math.random() * 50;
+        light = 50 + Math.random() * 30;
+      }
+
+      window.style.setProperty("--hue", hue);
+      window.style.setProperty("--sat", `${sat}%`);
+      window.style.setProperty("--light", `${light}%`);
+    }
+  });
 }
 
 // Run when DOM is ready
diff --git a/assets/sass/pages/audio.scss b/assets/sass/pages/audio.scss
index d06c34e..6cffb6a 100644
--- a/assets/sass/pages/audio.scss
+++ b/assets/sass/pages/audio.scss
@@ -40,3 +40,12 @@
     opacity: 1;
   }
 }
+
+.buildings-bg {
+  position: fixed;
+  bottom: 0;
+  left: 15%;
+  height: 40%;
+  width: 50%;
+  z-index: 90;
+}
diff --git a/assets/sass/partials/_window.scss b/assets/sass/partials/_window.scss
index 6c990db..8fb336a 100644
--- a/assets/sass/partials/_window.scss
+++ b/assets/sass/partials/_window.scss
@@ -4,24 +4,23 @@
   aspect-ratio: 16/9;
   background: #3a3a3a;
   border: 3px solid #2a2520;
-  border-top: 0px;
+  border-top: 0;
   box-shadow:
     inset 0 0 20px rgba(0, 0, 0, 0.8),
     0 10px 40px rgba(0, 0, 0, 0.9);
   overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: -20px;
+    border: 5px solid #1a1510;
+    border-top: 0;
+    pointer-events: none;
+    z-index: 10;
+  }
 }
 
-.window-frame::before {
-  content: "";
-  position: absolute;
-  inset: -20px;
-  border: 5px solid #1a1510;
-  border-top: 0px;
-  pointer-events: none;
-  z-index: 10;
-}
-
-/* Cityscape view */
 .cityscape {
   width: 100%;
   height: 100%;
@@ -31,116 +30,62 @@
     #1a2332 0%,
     #2a3a52 30%,
     #4a5a72 60%,
-    #6a7a92 100%
+    #6a7a92
   );
   overflow: hidden;
 }
 
-/* Sky with slight gradient */
 .starfield {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   height: 100%;
-  background: linear-gradient(180deg, #0a0f1a 0%, #1a2a3a 50%, #2a3a52 100%);
+  background: linear-gradient(180deg, #0a0f1a 0%, #1a2a3a 50%, #2a3a52);
 }
 
 .building-windows {
   width: 100%;
   display: grid;
+  gap: 10%;
+  padding: 5%;
 
   > .window-light {
     width: 100%;
-    aspect-ratio: 1/1;
+    aspect-ratio: 1;
   }
 }
 
-@mixin buildings-base {
+@mixin buildings($opacity, $bg-start, $bg-end) {
   position: absolute;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  right: 0;
+  inset: 0 0 0 0;
   display: flex;
   align-items: flex-end;
 
-  @for $i from 1 through 20 {
-    > .building:nth-child(#{$i}) {
-      @if random(4) == 1 {
-        opacity: 0;
-      }
-
-      > .building-windows {
-        @for $j from 1 through 40 {
-          > .window-light:nth-child(#{$j}) {
-            @if random(2) == 1 {
-              background: transparent;
-              box-shadow: none;
-            } @else {
-              $color-choice: random(100);
-              $light-color: null;
-
-              @if $color-choice <= 85 {
-                $hue: 40 + random(20); // 40-60
-                $sat: 70 + random(30); // 70-100%
-                $light: 50 + random(30); // 50-80%
-                $light-color: hsl($hue, $sat * 1%, $light * 1%);
-              } @else if $color-choice <= 95 {
-                $hue: 320 + random(20); // 320-340 (pink range)
-                $sat: 60 + random(40); // 60-100%
-                $light: 60 + random(20); // 60-80%
-                $light-color: hsl($hue, $sat * 1%, $light * 1%);
-              } @else {
-                $hue: 260 + random(40); // 260-300 (purple range)
-                $sat: 50 + random(50); // 50-100%
-                $light: 50 + random(30); // 50-80%
-                $light-color: hsl($hue, $sat * 1%, $light * 1%);
-              }
-
-              background: $light-color;
-              box-shadow: 0 0 10px $light-color;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.buildings-far {
-  @include buildings-base;
-
   > .building {
-    background: linear-gradient(180deg, #272629 0%, #2a3a52 100%);
+    background: linear-gradient(180deg, $bg-start, $bg-end);
     box-shadow:
       inset -2px 0 5px rgba(0, 0, 0, 0.1),
       0 0 10px rgba(42, 38, 31, 0.1);
 
     > .building-windows {
-      width: 100%;
       height: 50%;
-      opacity: 0.3;
-      padding: 5%;
+      opacity: $opacity;
     }
   }
+}
+
+.buildings-far {
+  @include buildings(0.3, #272629, #2a3a52);
 
   @for $i from 1 through 20 {
     > .building:nth-child(#{$i}) {
-      @if random(2) == 1 {
-        $width: random(10) + 5;
-        width: $width * 1%;
-      } @else {
-        $width: random(15) + 5;
-        width: $width + 15px;
+      width: if(random(2) ==1, (random(10) + 5) * 1%, random(15) + 20px);
+      height: (random(60) + 30) * 1%;
+      @if random(4) ==1 {
+        opacity: 0;
       }
 
-      $height: random(60) + 30;
-      height: $height * 1%;
-
       > .building-windows {
         grid-template-columns: repeat(#{random(3) + 3}, 1fr);
-
         > .window-light {
           aspect-ratio: #{0.5 + random(150) / 100};
         }
@@ -150,38 +95,18 @@
 }
 
 .buildings-mid {
-  @include buildings-base;
-
-  > .building {
-    background: linear-gradient(180deg, #201e22 0%, #2a3a52 100%);
-    box-shadow:
-      inset -2px 0 5px rgba(0, 0, 0, 0.1),
-      0 0 10px rgba(42, 38, 31, 0.1);
-
-    > .building-windows {
-      width: 100%;
-      height: 50%;
-      opacity: 0.7;
-      padding: 5%;
-    }
-  }
+  @include buildings(0.7, #201e22, #2a3a52);
 
   @for $i from 1 through 20 {
     > .building:nth-child(#{$i}) {
-      @if random(2) == 1 {
-        $width: random(10) + 10;
-        width: $width * 1%;
-      } @else {
-        $width: random(15) + 10;
-        width: $width + 15px;
+      width: if(random(2) ==1, (random(10) + 10) * 1%, random(15) + 25px);
+      height: (random(20) + 30) * 1%;
+      @if random(4) ==1 {
+        opacity: 0;
       }
 
-      $height: random(20) + 30;
-      height: $height * 1%;
-
       > .building-windows {
         grid-template-columns: repeat(#{random(3) + 3}, 1fr);
-
         > .window-light {
           aspect-ratio: #{0.5 + random(150) / 100};
         }
@@ -191,38 +116,18 @@
 }
 
 .buildings-near {
-  @include buildings-base;
-
-  > .building {
-    background: linear-gradient(180deg, #121113 0%, #182230 100%);
-    box-shadow:
-      inset -2px 0 5px rgba(0, 0, 0, 0.1),
-      0 0 10px rgba(42, 38, 31, 0.1);
-
-    > .building-windows {
-      width: 100%;
-      height: 50%;
-      opacity: 0.8;
-      padding: 5%;
-    }
-  }
+  @include buildings(0.8, #121113, #182230);
 
   @for $i from 1 through 20 {
     > .building:nth-child(#{$i}) {
-      @if random(2) == 1 {
-        $width: random(3) * 7;
-        width: $width * 1%;
-      } @else {
-        $width: random(10) + 50;
-        width: $width + 15px;
+      width: if(random(2) ==1, random(3) * 7 * 1%, random(10) + 65px);
+      height: random(3) * 10 * 1%;
+      @if random(4) ==1 {
+        opacity: 0;
       }
 
-      $height: random(3) * 10;
-      height: $height * 1%;
-
       > .building-windows {
         grid-template-columns: repeat(#{random(2) + 3}, 1fr);
-
         > .window-light {
           aspect-ratio: #{0.5 + random(150) / 100};
         }
@@ -231,7 +136,6 @@
   }
 }
 
-/* Buildings container */
 .buildings {
   position: absolute;
   bottom: 0;
@@ -249,34 +153,34 @@
 
 .building {
   position: relative;
-  background: linear-gradient(180deg, #1a1a2e 0%, #0a0a1e 100%);
+  background: linear-gradient(180deg, #1a1a2e, #0a0a1e);
   box-shadow:
     inset -2px 0 10px rgba(0, 0, 0, 0.5),
     0 0 20px rgba(255, 200, 100, 0.1);
 }
 
-/* Building windows */
-.building-windows {
-  gap: 10%;
-  padding: 5% 5%;
-}
-
 .window-light {
-  background: #ffd700;
-  box-shadow: 0 0 10px #ffd700;
+  --hue: 45;
+  --sat: 85%;
+  --light: 65%;
+  background: hsl(var(--hue), var(--sat), var(--light));
+  box-shadow: 0 0 10px hsl(var(--hue), var(--sat), var(--light));
   animation: windowFlicker 5s ease-in-out infinite;
-}
 
-.window-light:nth-child(odd) {
-  animation-delay: 0.5s;
-}
+  &[data-off] {
+    background: transparent;
+    box-shadow: none;
+  }
 
-.window-light:nth-child(3n) {
-  animation-delay: 3s;
-}
-
-.window-light:nth-child(4n) {
-  animation-delay: 5.5s;
+  &:nth-child(odd) {
+    animation-delay: 0.5s;
+  }
+  &:nth-child(3n) {
+    animation-delay: 3s;
+  }
+  &:nth-child(4n) {
+    animation-delay: 5.5s;
+  }
 }
 
 @keyframes windowFlicker {
@@ -303,7 +207,6 @@
   }
 }
 
-/* Dirt and grime on window */
 .window-grime {
   position: absolute;
   inset: 0;
@@ -327,7 +230,6 @@
   z-index: 6;
 }
 
-/* Glass reflection */
 .glass-reflection {
   position: absolute;
   inset: 0;
@@ -336,13 +238,12 @@
     rgba(255, 255, 255, 0.1) 0%,
     transparent 30%,
     transparent 70%,
-    rgba(255, 255, 255, 0.05) 100%
+    rgba(255, 255, 255, 0.05)
   );
   pointer-events: none;
   z-index: 7;
 }
 
-/* Ambient light from city */
 .ambient-light {
   position: absolute;
   bottom: -50px;
diff --git a/layouts/audio/single.html b/layouts/audio/single.html
index ceeae2b..a03ff30 100644
--- a/layouts/audio/single.html
+++ b/layouts/audio/single.html
@@ -1,6 +1,11 @@
 {{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
 "main" }}
 <article class="audio-page starfield" id="starfield">
-  <div class="audio-content">123 123</div>
+  <div class="buildings-bg">
+    <div class="buildings-far" data-count="40"></div>
+    <div class="buildings-mid" data-count="40"></div>
+    <div class="buildings-near" data-count="40"></div>
+    <div class="ambient-light"></div>
+  </div>
 </article>
 {{ end }}