ritual/ritual.sh
ritual/ritual.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Shrinking sass nonsense

Browse source
This commit is contained in:
Dan 2025-12-11 12:40:54 +00:00
parent c51942e5c0
commit 3bc3981373
4 changed files with 106 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

40
assets/js/cityscape.js
View file

@ -14,18 +14,14 @@ function randomInt(min, max) {
function createBuilding(minWindows, maxWindows) { function createBuilding(minWindows, maxWindows) {
const building = document.createElement("div"); const building = document.createElement("div");
building.className = "building"; building.className = "building";
const windowsContainer = document.createElement("div"); const windowsContainer = document.createElement("div");
windowsContainer.className = "building-windows"; windowsContainer.className = "building-windows";
const numWindows = randomInt(minWindows, maxWindows); const numWindows = randomInt(minWindows, maxWindows);
for (let i = 0; i < numWindows; i++) { for (let i = 0; i < numWindows; i++) {
const window = document.createElement("div"); const window = document.createElement("div");
window.className = "window-light"; window.className = "window-light";
windowsContainer.appendChild(window); windowsContainer.appendChild(window);
} }
building.appendChild(windowsContainer); building.appendChild(windowsContainer);
return building; return building;
} }
@ -38,10 +34,13 @@ function populateLayer(layerName, numBuildings, windowRange) {
return; 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 // Clear existing buildings
layer.innerHTML = ""; layer.innerHTML = "";
for (let i = 0; i < buildingCount; i++) {
for (let i = 0; i < numBuildings; i++) {
const building = createBuilding(windowRange[0], windowRange[1]); const building = createBuilding(windowRange[0], windowRange[1]);
layer.appendChild(building); layer.appendChild(building);
} }
@ -54,18 +53,43 @@ function initializeCityscape() {
randomInt(...config.buildingsFar.count), randomInt(...config.buildingsFar.count),
config.buildingsFar.windows, config.buildingsFar.windows,
); );
populateLayer( populateLayer(
"buildings-mid", "buildings-mid",
randomInt(...config.buildingsMid.count), randomInt(...config.buildingsMid.count),
config.buildingsMid.windows, config.buildingsMid.windows,
); );
populateLayer( populateLayer(
"buildings-near", "buildings-near",
randomInt(...config.buildingsNear.count), randomInt(...config.buildingsNear.count),
config.buildingsNear.windows, 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 // Run when DOM is ready

9
assets/sass/pages/audio.scss
View file

@ -40,3 +40,12 @@
opacity: 1; opacity: 1;
} }
} }
.buildings-bg {
position: fixed;
bottom: 0;
left: 15%;
height: 40%;
width: 50%;
z-index: 90;
}

199
assets/sass/partials/_window.scss
View file

@ -4,24 +4,23 @@
aspect-ratio: 16/9; aspect-ratio: 16/9;
background: #3a3a3a; background: #3a3a3a;
border: 3px solid #2a2520; border: 3px solid #2a2520;
border-top: 0px; border-top: 0;
box-shadow: box-shadow:
inset 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.8),
0 10px 40px rgba(0, 0, 0, 0.9); 0 10px 40px rgba(0, 0, 0, 0.9);
overflow: hidden; overflow: hidden;
}
.window-frame::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: -20px; inset: -20px;
border: 5px solid #1a1510; border: 5px solid #1a1510;
border-top: 0px; border-top: 0;
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
}
} }
/* Cityscape view */
.cityscape { .cityscape {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -31,116 +30,62 @@
#1a2332 0%, #1a2332 0%,
#2a3a52 30%, #2a3a52 30%,
#4a5a72 60%, #4a5a72 60%,
#6a7a92 100% #6a7a92
); );
overflow: hidden; overflow: hidden;
} }
/* Sky with slight gradient */
.starfield { .starfield {
position: absolute; position: absolute;
top: 0; inset: 0;
left: 0;
right: 0;
height: 100%; height: 100%;
background: linear-gradient(180deg, #0a0f1a 0%, #1a2a3a 50%, #2a3a52 100%); background: linear-gradient(180deg, #0a0f1a 0%, #1a2a3a 50%, #2a3a52);
} }
.building-windows { .building-windows {
width: 100%; width: 100%;
display: grid; display: grid;
gap: 10%;
padding: 5%;
> .window-light { > .window-light {
width: 100%; width: 100%;
aspect-ratio: 1/1; aspect-ratio: 1;
} }
} }
@mixin buildings-base { @mixin buildings($opacity, $bg-start, $bg-end) {
position: absolute; position: absolute;
bottom: 0; inset: 0 0 0 0;
top: 0;
left: 0;
right: 0;
display: flex; display: flex;
align-items: flex-end; 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 { > .building {
background: linear-gradient(180deg, #272629 0%, #2a3a52 100%); background: linear-gradient(180deg, $bg-start, $bg-end);
box-shadow: box-shadow:
inset -2px 0 5px rgba(0, 0, 0, 0.1), inset -2px 0 5px rgba(0, 0, 0, 0.1),
0 0 10px rgba(42, 38, 31, 0.1); 0 0 10px rgba(42, 38, 31, 0.1);
> .building-windows { > .building-windows {
width: 100%;
height: 50%; height: 50%;
opacity: 0.3; opacity: $opacity;
padding: 5%;
} }
} }
}
.buildings-far {
@include buildings(0.3, #272629, #2a3a52);
@for $i from 1 through 20 { @for $i from 1 through 20 {
> .building:nth-child(#{$i}) { > .building:nth-child(#{$i}) {
@if random(2) == 1 { width: if(random(2) ==1, (random(10) + 5) * 1%, random(15) + 20px);
$width: random(10) + 5; height: (random(60) + 30) * 1%;
width: $width * 1%; @if random(4) ==1 {
} @else { opacity: 0;
$width: random(15) + 5;
width: $width + 15px;
} }
$height: random(60) + 30;
height: $height * 1%;
> .building-windows { > .building-windows {
grid-template-columns: repeat(#{random(3) + 3}, 1fr); grid-template-columns: repeat(#{random(3) + 3}, 1fr);
> .window-light { > .window-light {
aspect-ratio: #{0.5 + random(150) / 100}; aspect-ratio: #{0.5 + random(150) / 100};
} }
@ -150,38 +95,18 @@
} }
.buildings-mid { .buildings-mid {
@include buildings-base; @include buildings(0.7, #201e22, #2a3a52);
> .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%;
}
}
@for $i from 1 through 20 { @for $i from 1 through 20 {
> .building:nth-child(#{$i}) { > .building:nth-child(#{$i}) {
@if random(2) == 1 { width: if(random(2) ==1, (random(10) + 10) * 1%, random(15) + 25px);
$width: random(10) + 10; height: (random(20) + 30) * 1%;
width: $width * 1%; @if random(4) ==1 {
} @else { opacity: 0;
$width: random(15) + 10;
width: $width + 15px;
} }
$height: random(20) + 30;
height: $height * 1%;
> .building-windows { > .building-windows {
grid-template-columns: repeat(#{random(3) + 3}, 1fr); grid-template-columns: repeat(#{random(3) + 3}, 1fr);
> .window-light { > .window-light {
aspect-ratio: #{0.5 + random(150) / 100}; aspect-ratio: #{0.5 + random(150) / 100};
} }
@ -191,38 +116,18 @@
} }
.buildings-near { .buildings-near {
@include buildings-base; @include buildings(0.8, #121113, #182230);
> .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%;
}
}
@for $i from 1 through 20 { @for $i from 1 through 20 {
> .building:nth-child(#{$i}) { > .building:nth-child(#{$i}) {
@if random(2) == 1 { width: if(random(2) ==1, random(3) * 7 * 1%, random(10) + 65px);
$width: random(3) * 7; height: random(3) * 10 * 1%;
width: $width * 1%; @if random(4) ==1 {
} @else { opacity: 0;
$width: random(10) + 50;
width: $width + 15px;
} }
$height: random(3) * 10;
height: $height * 1%;
> .building-windows { > .building-windows {
grid-template-columns: repeat(#{random(2) + 3}, 1fr); grid-template-columns: repeat(#{random(2) + 3}, 1fr);
> .window-light { > .window-light {
aspect-ratio: #{0.5 + random(150) / 100}; aspect-ratio: #{0.5 + random(150) / 100};
} }
@ -231,7 +136,6 @@
} }
} }
/* Buildings container */
.buildings { .buildings {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -249,34 +153,34 @@
.building { .building {
position: relative; position: relative;
background: linear-gradient(180deg, #1a1a2e 0%, #0a0a1e 100%); background: linear-gradient(180deg, #1a1a2e, #0a0a1e);
box-shadow: box-shadow:
inset -2px 0 10px rgba(0, 0, 0, 0.5), inset -2px 0 10px rgba(0, 0, 0, 0.5),
0 0 20px rgba(255, 200, 100, 0.1); 0 0 20px rgba(255, 200, 100, 0.1);
} }
/* Building windows */
.building-windows {
gap: 10%;
padding: 5% 5%;
}
.window-light { .window-light {
background: #ffd700; --hue: 45;
box-shadow: 0 0 10px #ffd700; --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; animation: windowFlicker 5s ease-in-out infinite;
}
.window-light:nth-child(odd) { &[data-off] {
background: transparent;
box-shadow: none;
}
&:nth-child(odd) {
animation-delay: 0.5s; animation-delay: 0.5s;
} }
&:nth-child(3n) {
.window-light:nth-child(3n) {
animation-delay: 3s; animation-delay: 3s;
} }
&:nth-child(4n) {
.window-light:nth-child(4n) {
animation-delay: 5.5s; animation-delay: 5.5s;
}
} }
@keyframes windowFlicker { @keyframes windowFlicker {
@ -303,7 +207,6 @@
} }
} }
/* Dirt and grime on window */
.window-grime { .window-grime {
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -327,7 +230,6 @@
z-index: 6; z-index: 6;
} }
/* Glass reflection */
.glass-reflection { .glass-reflection {
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -336,13 +238,12 @@
rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 0%,
transparent 30%, transparent 30%,
transparent 70%, transparent 70%,
rgba(255, 255, 255, 0.05) 100% rgba(255, 255, 255, 0.05)
); );
pointer-events: none; pointer-events: none;
z-index: 7; z-index: 7;
} }
/* Ambient light from city */
.ambient-light { .ambient-light {
position: absolute; position: absolute;
bottom: -50px; bottom: -50px;

7
layouts/audio/single.html
View file

@ -1,6 +1,11 @@
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define {{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
"main" }} "main" }}
<article class="audio-page starfield" id="starfield"> <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> </article>
{{ end }} {{ end }}