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

Mostly audio stuff

Browse source
This commit is contained in:
Dan 2025-12-13 15:17:46 +00:00
parent bdd00ec9e8
commit 2f5f4dbea4
28 changed files with 811 additions and 710 deletions
Download patch file Download diff file Expand all files Collapse all files

75
layouts/audio/list.html
View file

@ -1,75 +0,0 @@
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
"main" }}
<article class="audio-page">
<div class="starfield-full" id="starfield">
<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>
</div>
<div class="page-content">
<div class="neon-sign">
<div class="neon-text purple">music <span>&</span> audio gear</div>
</div>
<div class="record-shelf-container">
<div class="shelf">
<!-- prettier-ignore -->
{{ $posts := where site.RegularPages "Type" "media" }}
{{ $posts = where $posts "Params.tags" "intersect" (slice "album") }}
{{ range first 5 $posts }}
<a class="record-slot" href="{{ .RelPermalink }}">
<div class="record-sleeve">
<!-- prettier-ignore -->
{{ with .Resources.GetMatch "cover.*" }}
{{ $image := .Resize "500x webp q85" }}
<div
class="sleeve-front"
style="--album-cover: url({{ $image.RelPermalink }})"
>
{{ end }}
<!-- prettier-ignore -->
<div class="album-title">
{{ .Title }}
</div>
</div>
<div class="vinyl-record"></div>
</div>
</a>
{{ end }}
<!-- prettier-ignore -->
{{ if gt (len $posts) 5 }}
<a href="/tags/tutorial/" class="view-all">
View all {{ len $posts }} posts →
</a>
{{ end }}
</div>
</div>
<!-- prettier-ignore -->
{{ partial "elements/ipod.html" . }}
{{ $posts := where site.RegularPages "Type" "gear" }}
{{ $posts = where $posts "Params.tags" "intersect" (slice "audio") }}
{{ range first 5 $posts }}
<h2>{{ .Title }}</h2>
{{ with .Params.icon }}
<p>{{ . }}</p>
{{ end }}
<a href="{{ .RelPermalink }}">Read more</a>
{{ end }}
<!-- prettier-ignore -->
{{ if gt (len $posts) 5 }}
<a href="/tags/tutorial/" class="view-all">
View all {{ len $posts }} posts →
</a>
{{ end }}
</div>
</article>
{{ end }}

190
layouts/audio/single.html
View file

@ -1,5 +1,8 @@
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
"main" }}
"main" }} {{ $intro := .Resources.GetMatch "intro.md" }} {{ $intro :=
.Resources.GetMatch "intro.md" }} {{ $currently := .Resources.GetMatch
"currently.md" }}
<article class="audio-page">
<div class="starfield-full" id="starfield">
<div class="buildings-bg">
@ -11,96 +14,101 @@
</div>
<div class="page-content">
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<h1>Music &amp; Audio Gear</h1>
<div class="neon-sign">
<div class="neon-text purple">music <span>&</span> audio gear</div>
</div>
<div class="audio-intro">
<div>
<div class="intro-ipod">{{ partial "elements/ipod.html" . }}</div>
{{ with $intro }} {{ .Content }} {{ end }}
</div>
<div>♫</div>
<div>
<div class="neon-sign">
<div class="neon-text purple">current rotation <span>-></span></div>
</div>
{{ with $currently }} {{ .Content }} {{end}}
</div>
</div>
<div class="record-shelf-container">
<div class="shelf">
<!-- prettier-ignore -->
{{ $posts := where site.RegularPages "Type" "media" }}
{{ $posts = where $posts "Params.tags" "intersect" (slice "album") }}
{{ range $index, $post := first 5 $posts }}
<a
class="record-slot"
href="{{ .RelPermalink }}"
data-album-index="{{ $index }}"
>
<div class="record-sleeve">
<!-- prettier-ignore -->
{{ with .Resources.GetMatch "cover.*" }}
{{ $image := .Resize "500x webp q85" }}
<div
class="sleeve-front"
style="--album-cover: url({{ $image.RelPermalink }})"
>
{{ end }}
<!-- prettier-ignore -->
<div class="album-title">
{{ .Title }}
</div>
</div>
<div class="vinyl-record"></div>
</div>
</a>
{{ end }}
<!-- prettier-ignore -->
{{ if gt (len $posts) 5 }}
<a href="/tags/album/" class="view-all">
View all {{ len $posts }} posts →
</a>
{{ end }}
</div>
<div class="audio-shelf-text">
{{ range $index, $post := first 5 $posts }}
<div
class="album-content"
data-content-index="{{ $index }}"
style="{{ if ne $index 0 }}display: none;{{ end }}"
>
{{ .Content }}
</div>
{{ end }}
</div>
</div>
<div class="audio-gear">
<div class="neon-sign">
<div class="neon-text purple">gear <span>-></span></div>
</div>
<div class="gear-grid">
{{ $posts := where site.RegularPages "Type" "gear" }} {{ $posts = where
$posts "Params.tags" "intersect" (slice "audio") }} {{ range first 5
$posts }}
<div class="gear-item">
{{ with .Params.icon }}
<div class="gear-icon">{{ . }}</div>
{{ end }}
<div class="gear-content">
<h3 class="gear-title">{{ .Title }}</h3>
{{ with .Params.category }}
<span class="gear-category">{{ . }}</span>
{{ end }} {{ with .Summary }}
<p class="gear-summary">{{ . }}</p>
{{ end }} {{/*
<a href="{{ .RelPermalink }}" class="gear-link">View details →</a>
*/}}
</div>
</div>
{{ end }}
</div>
</div>
</div>
</article>
{{ end }}

24
layouts/index.html
View file

@ -121,13 +121,18 @@
<!-- Wall-mounted monitors -->
<div class="secondary-screen wall-monitor-1 hidden-xl-down">
<div class="screen-display crt">
> updates -lah<br />
{{ range first 10 (sort .Site.Pages "Lastmod" "desc") }} [<time
>{{ .Lastmod.Format "2006-01-02" }}</time
>] - <a href="{{ .Permalink }}">{{ .Title }}</a><br />
{{ end }}
<div class="scroll">
> updates -lah<br />
{{ range first 10 (where .Site.RegularPages "Type"
"updates").ByLastmod.Reverse }} [<time
>{{ .Lastmod.Format "2006-01-02" }}</time
>]<br />
{{ .Plain }}<br />
---<br />
{{ end }}
<span class="cursor-blink">_</span>
<span class="cursor-blink">_</span>
</div>
</div>
</div>
@ -279,12 +284,11 @@
</div>
</div>
{{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 1 (sort
$pages "Lastmod" "desc") }}
{{ range first 1 (where .Site.RegularPages "Type" "updates").ByLastmod.Reverse
}}
<div id="latest-post">
<div id="latest-post-link">{{ .Permalink }}</div>
<div id="latest-post-title">{{ .Title }}</div>
<div id="latest-post-title">{{ .Plain }}</div>
<div id="latest-post-date">{{ .Lastmod.Format "Jan 2, 2006" }}</div>
</div>
{{ end }} {{ end }}

301
layouts/now/single.html
View file

@ -25,308 +25,13 @@
width: 100%;
max-width: 800px;
padding: 20px;
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
position: relative;
}
.window-frame {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #3a3a3a;
border: 20px solid #2a2520;
box-shadow:
inset 0 0 20px rgba(0, 0, 0, 0.8),
0 10px 40px rgba(0, 0, 0, 0.9);
overflow: hidden;
}
.window-frame::before {
content: "";
position: absolute;
inset: -20px;
border: 5px solid #1a1510;
pointer-events: none;
z-index: 10;
}
/* Cityscape view */
.cityscape {
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(
180deg,
#1a2332 0%,
#2a3a52 30%,
#4a5a72 60%,
#6a7a92 100%
);
overflow: hidden;
}
/* Sky with slight gradient */
.sky {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(
180deg,
#0a0f1a 0%,
#1a2a3a 50%,
#2a3a52 100%
);
}
/* Buildings container */
.buildings {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60%;
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 20px;
padding: 0 40px;
}
.building {
position: relative;
background: linear-gradient(180deg, #1a1a2e 0%, #0a0a1e 100%);
box-shadow:
inset -2px 0 10px rgba(0, 0, 0, 0.5),
0 0 20px rgba(255, 200, 100, 0.1);
animation: buildingGlow 4s ease-in-out infinite;
}
.building:nth-child(1) {
width: 80px;
height: 280px;
animation-delay: 0s;
}
.building:nth-child(2) {
width: 60px;
height: 200px;
animation-delay: 0.5s;
}
.building:nth-child(3) {
width: 90px;
height: 320px;
animation-delay: 1s;
}
.building:nth-child(4) {
width: 70px;
height: 240px;
animation-delay: 1.5s;
}
.building:nth-child(5) {
width: 85px;
height: 300px;
animation-delay: 2s;
}
/* Building windows */
.building-windows {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 15px 10px;
height: 100%;
}
.window-light {
background: #ffd700;
opacity: 0;
box-shadow: 0 0 10px #ffd700;
animation: windowFlicker 3s ease-in-out infinite;
}
.window-light:nth-child(odd) {
animation-delay: 0.5s;
}
.window-light:nth-child(3n) {
animation-delay: 1s;
}
.window-light:nth-child(4n) {
animation-delay: 1.5s;
}
@keyframes windowFlicker {
0%,
100% {
opacity: 0.3;
}
50% {
opacity: 0.9;
}
}
@keyframes buildingGlow {
0%,
100% {
box-shadow:
inset -2px 0 10px rgba(0, 0, 0, 0.5),
0 0 20px rgba(255, 200, 100, 0.1);
}
50% {
box-shadow:
inset -2px 0 10px rgba(0, 0, 0, 0.5),
0 0 30px rgba(255, 200, 100, 0.2);
}
}
/* Dirt and grime on window */
.window-grime {
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 20% 30%,
rgba(50, 40, 30, 0.2) 0%,
transparent 40%
),
radial-gradient(
circle at 80% 60%,
rgba(40, 35, 25, 0.15) 0%,
transparent 50%
),
radial-gradient(
circle at 50% 80%,
rgba(45, 38, 28, 0.18) 0%,
transparent 45%
);
pointer-events: none;
z-index: 6;
}
/* Glass reflection */
.glass-reflection {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
transparent 30%,
transparent 70%,
rgba(255, 255, 255, 0.05) 100%
);
pointer-events: none;
z-index: 7;
}
/* Ambient light from city */
.ambient-light {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 200%;
height: 200px;
background: radial-gradient(
ellipse at center,
rgba(255, 200, 100, 0.2) 0%,
transparent 70%
);
filter: blur(40px);
animation: ambientPulse 3s ease-in-out infinite;
}
@keyframes ambientPulse {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="basement-wall">
<div class="window-frame">
<!-- Cityscape -->
<div class="cityscape">
<div class="sky"></div>
<div class="buildings">
<div class="building">
<div class="building-windows">
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
</div>
</div>
<div class="building">
<div class="building-windows">
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
</div>
</div>
<div class="building">
<div class="building-windows">
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
</div>
</div>
<div class="building">
<div class="building-windows">
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
</div>
</div>
<div class="building">
<div class="building-windows">
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
<div class="window-light"></div>
</div>
</div>
</div>
<div class="ambient-light"></div>
</div>
<!-- Window effects -->
<div class="window-grime"></div>
<div class="glass-reflection"></div>
</div>
</div>
<div class="basement-wall">Coming soon...</div>
</body>
</html>

2
layouts/partials/elements/lavalamp.html
View file

@ -2,7 +2,7 @@
<svg style="position: absolute; width: 0; height: 0">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
<feColorMatrix
in="blur"
mode="matrix"

4
layouts/partials/site-footer.html
View file

@ -7,10 +7,6 @@
<a href="https://neocities.org/site/ritualsh" target="_blank"
>Follow on Neocities</a
>
&nbsp;&bull;&nbsp;
<a href="{{ .Site.BaseURL }}">
&copy; {{ now.Format "2006" }} {{ .Site.Title }}
</a>
<div>{{ partial "social-follow.html" . }}</div>
</div>
</footer>