Adding music shelf

This commit is contained in:
Dan 2025-12-12 09:33:00 +00:00
parent c2af88d118
commit bdd00ec9e8
18 changed files with 394 additions and 110 deletions

View file

@ -1,6 +1,6 @@
+++
title = "{{ replace .TranslationBaseName "-" " " | title }}"
date = {{ .Date }}
tags = []
description = ""
+++
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date.Format "2006-01-02" }}
tags: []
description: ""
---

View file

@ -0,0 +1,6 @@
---
title: "{{ replace .File.ContentBaseName "-" " " | title }}"
date: {{ .Date }}
tags: []
description: ""
---

View file

@ -3,15 +3,183 @@
width: 100%;
height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
color: #fff;
text-align: center;
> .page-content {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
margin: auto;
z-index: 999;
padding-top: 330px;
@include media-down(lg) {
padding-top: 400px;
}
.neon-sign {
position: absolute;
top: 0;
left: 50%;
top: 100px;
width: 100%;
pointer-events: none;
.neon-text {
@include media-down(lg) {
font-size: 5rem;
}
}
}
}
.record-shelf-container {
.shelf {
display: flex;
gap: 5rem;
position: relative;
overflow: visible;
padding-left: 2em;
padding-right: 2em;
}
.shelf::before {
content: "";
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 10px;
background: linear-gradient(
to bottom,
#6b4423 0%,
#4a2f1a 50%,
#2d1b0e 100%
);
border-radius: 0 0 6px 6px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.record-slot {
position: relative;
width: 200px;
min-width: 140px;
height: 200px;
perspective: 1000px;
}
.record-sleeve {
width: 100%;
height: 100%;
position: relative;
transition: transform 0.3s ease;
}
.sleeve-front {
width: 100%;
height: 100%;
position: absolute;
border-radius: 2px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 0 20px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
padding: 10px;
text-align: center;
background-image: var(--album-cover);
background-size: cover;
background-position: center;
transition: transform 0.3s ease;
z-index: 99;
.album-title {
font-size: 16px;
opacity: 0;
}
&:hover {
.album-title {
opacity: 1;
}
}
}
.vinyl-record {
position: absolute;
width: 95%;
height: 95%;
border-radius: 50%;
top: 2%;
right: 2%;
background:
radial-gradient(circle at center, #1a1a1a 30%, transparent 30%),
conic-gradient(
from 0deg,
#0f0f0f 0deg,
#1a1a1a 45deg,
#0f0f0f 90deg,
#1a1a1a 135deg,
#0f0f0f 180deg,
#1a1a1a 225deg,
#0f0f0f 270deg,
#1a1a1a 315deg,
#0f0f0f 360deg
);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: transform 0.3s ease;
}
.vinyl-record::before {
content: "";
position: absolute;
width: 35%;
height: 35%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(
circle,
#000 0%,
#ff4444 10%,
#cc0000 50%,
#1a1a1a 50%,
#0f0f0f 100%
);
}
.vinyl-record::after {
content: "";
position: absolute;
transform: translateX(-50%);
width: 100%;
height: 100%;
border-radius: 50%;
background: repeating-radial-gradient(
circle at center,
transparent 0px,
transparent 2px,
rgba(255, 255, 255, 0.03) 2px,
rgba(255, 255, 255, 0.03) 3px
);
}
.record-slot:hover .vinyl-record {
transform: translateX(20%);
}
.record-slot:hover .sleeve-front {
transform: translateX(-10%);
}
}
}
@ -28,6 +196,11 @@
height: 40%;
width: 50%;
z-index: 2;
@include media-down(lg) {
width: 100%;
left: 0;
}
}
}

View file

@ -5,24 +5,34 @@
left: 60%;
transform: translateX(-50%) rotate(-10deg);
z-index: 1;
text-align: center;
line-height: 5rem;
> .neon-text {
font-family: "Neonderthaw", cursive;
font-size: 7rem;
color: #fff;
text-shadow:
/* White core */
0 0 5px #fff,
0 0 5px #fff,
/* Bright green inner glow */ 0 0 21px #0f0,
0 0 42px #0f0,
0 0 82px #0f0,
/* Outer green glow */ 0 0 92px #0f0,
0 0 142px #0f0,
0 0 181px #0f0;
text-shadow: neon-glow(#0f0);
animation:
neon-flicker 10s infinite alternate,
neon-pulse 3s ease-in-out infinite;
&.purple {
text-shadow: neon-glow(#f0f);
animation:
neon-flicker 10s infinite alternate,
neon-pulse-purple 3s ease-in-out infinite;
animation-delay: 1.2s;
> span {
color: #fff;
text-shadow: neon-glow(#0ff);
animation:
neon-flicker 10s infinite alternate,
neon-pulse-cyan 3s ease-in-out infinite;
animation-delay: 0.5s;
}
}
}
[role="navigation"] & {
@ -32,48 +42,62 @@
left: 10px;
transform: translateX(0) rotate(-10deg);
z-index: 9999;
> .neon-text {
font-size: 2rem;
text-shadow:
/* White core */
0 0 5px #fff,
0 0 5px #fff,
/* Bright green inner glow */ 0 0 11px #0f0,
0 0 11px #0f0,
0 0 22px #0f0,
0 0 42px #0f0,
/* Outer green glow */ 0 0 22px #0f0,
0 0 22px #0f0,
0 0 42px #0f0,
0 0 81px #0f0;
}
}
}
@keyframes neon-pulse {
0%,
100% {
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #0f0,
0 0 42px #0f0,
0 0 82px #0f0,
0 0 92px #0f0,
0 0 102px #0f0,
0 0 151px #0f0;
}
50% {
text-shadow:
0 0 4px #fff,
0 0 7px #fff,
0 0 15px #0f0,
0 0 30px #0f0,
0 0 60px #0f0,
0 0 70px #0f0,
0 0 80px #0f0,
0 0 120px #0f0;
// Function for standard neon glow effect
@function neon-glow($color) {
@return 0 0 5px #fff, 0 0 5px #fff, 0 0 21px $color, 0 0 42px $color,
0 0 82px $color, 0 0 92px $color, 0 0 142px $color, 0 0 181px $color;
}
// Mixin for pulse animation - generates keyframes for any color
@mixin neon-pulse-animation($name, $color) {
@keyframes #{$name} {
0%,
100% {
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px $color,
0 0 42px $color,
0 0 82px $color,
0 0 92px $color,
0 0 102px $color,
0 0 151px $color;
}
50% {
text-shadow:
0 0 4px #fff,
0 0 7px #fff,
0 0 15px $color,
0 0 30px $color,
0 0 60px $color,
0 0 70px $color,
0 0 80px $color,
0 0 120px $color;
}
}
}
// Generate all three pulse animations
@include neon-pulse-animation(neon-pulse, #0f0);
@include neon-pulse-animation(neon-pulse-purple, #f0f);
@include neon-pulse-animation(neon-pulse-cyan, #0ff);
@keyframes neon-flicker {
0%,
19%,

View file

@ -1633,7 +1633,7 @@ body {
position: relative;
}
> .time-display {
.time-display {
width: 150px;
z-index: 30;
padding: 0.5em;

View file

@ -6,7 +6,6 @@ buildFuture: false
buildExpired: false
enableEmoji: true
# Fixed: Changed from 'paginate: 5' to pagination block
pagination:
pagerSize: 5
@ -14,6 +13,8 @@ minify:
disableXML: true
minifyOutput: true
enableGitInfo: true
frontmatter:
lastmod:
- lastmod
@ -21,6 +22,9 @@ frontmatter:
- date
- publishDate
disableKinds: ["taxonomy", "term"]
taxonomies: {}
params:
env: production
@ -30,35 +34,6 @@ params:
iconImageHeight: 35
iconHeight: 70
profileMode:
enabled: false
title: ExampleSite
subtitle: "This is subtitle"
imageUrl: "<img location>"
imageWidth: 120
imageHeight: 120
imageTitle: my image
buttons:
- name: Posts
url: posts
- name: Tags
url: tags
socialIcons:
- name: instagram
url: "https://www.instagram.com/ritualphotos"
- name: mastodon
url: "https://dice.camp/@ritual"
- name: github
url: "https://github.com/unbolt"
- name: lastfm
url: "https://www.last.fm/user/ritualplays"
cover:
hidden: false
hiddenInList: true
hiddenInSingle: false
fuseOpts:
isCaseSensitive: false
shouldSort: true
@ -88,8 +63,6 @@ menu:
url: /tags/
weight: 20
pygmentsUseClasses: true
markup:
highlight:
noClasses: false
@ -97,7 +70,3 @@ markup:
goldmark:
renderer:
unsafe: true
module:
imports:
- path: github.com/hugo-mods/lazyimg

View file

@ -5,4 +5,4 @@ date: 2025-12-10
comments: false
---
This page is coming soon. 11
This page is coming soon.

View file

@ -1,9 +0,0 @@
---
title: Fiio FT-1
author: Dan
date: 2025-12-11
comments: false
draft: true
---
Hello, this is a post!

View file

@ -0,0 +1,7 @@
---
title: "Fiio FT-1"
date: 2025-12-08
tags: ["audio", "headphones"]
description: ""
icon: 🎧
---

View file

@ -0,0 +1,7 @@
---
title: "Hiby R4 EVA"
date: 2025-12-10
tags: ["audio", "dap"]
description: ""
icon: 🎵
---

View file

@ -0,0 +1,7 @@
---
title: "iPod Video 5th Generation - Upgraded"
date: 2025-12-11
tags: ["audio", "dap"]
description: ""
icon: 🎵
---

Binary file not shown.

After

Width:  |  Height:  |  Size: 325 KiB

View file

@ -0,0 +1,7 @@
---
title: "Neon Odin - Allfather"
date: 2025-12-12
tags: ["album"]
description: ""
cover: "cover.jpg"
---

Binary file not shown.

After

Width:  |  Height:  |  Size: 608 KiB

View file

@ -0,0 +1,7 @@
---
title: "Ninajirachi - I Love My Computer"
date: 2025-12-12
tags: ["album"]
description: ""
cover: "cover.jpg"
---

View file

@ -11,22 +11,65 @@
</div>
<div class="page-content">
<h1>LIST</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="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 }}

View file

@ -122,7 +122,7 @@
<div class="secondary-screen wall-monitor-1 hidden-xl-down">
<div class="screen-display crt">
> updates -lah<br />
{{ range first 5 (sort .Site.Pages "Lastmod" "desc") }} [<time
{{ range first 10 (sort .Site.Pages "Lastmod" "desc") }} [<time
>{{ .Lastmod.Format "2006-01-02" }}</time
>] - <a href="{{ .Permalink }}">{{ .Title }}</a><br />
{{ end }}
@ -265,10 +265,15 @@
</div>
</a>
</div>
<div class="time-display">
{{ partial "elements/lcd-screen.html" (dict "text" "12:03:31" "placeholder"
"00:00:00") }}
<div>
<a href="/now/">
<div class="time-display">
{{ partial "elements/lcd-screen.html" (dict "text" "12:03:31"
"placeholder" "00:00:00") }}
</div>
</a>
</div>
<div class="hidden-xl-down">
<div class="coffee-mug"></div>
</div>

38
new.sh Executable file
View file

@ -0,0 +1,38 @@
#!/bin/bash
# Script to create new Hugo content w/ filename sanitization
# Usage: ./new.sh <type> <title>
set -e
# Check if required arguments are provided
if [ $# -lt 2 ]; then
echo "Usage: $0 <type> <title>"
echo "Example: $0 blog 'My Awesome Post'"
exit 1
fi
TYPE="$1"
shift
TITLE="$*"
SAFE_TITLE=$(echo "$TITLE" | \
tr '[:upper:]' '[:lower:]' | \
sed 's/ /-/g' | \
sed 's/\//-/g' | \
sed 's/[^a-z0-9_-]//g' | \
sed 's/-\+/-/g' | \
sed 's/^-//;s/-$//')
# Construct the filename with date
FILENAME="${SAFE_TITLE}/"
# Construct the full path
CONTENT_PATH="${TYPE}/${FILENAME}"
# Create the content using hugo
echo "Creating new content: content/${CONTENT_PATH}"
hugo new "${CONTENT_PATH}"
echo "Content created successfully!"
echo "File: ${CONTENT_PATH}"