jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Videos section — hub + 3 collection pages, wire nav star

Browse Source 
- Videos/index.html: hub page with 3 collection cards (Cringe Pit, Renegade, Nomad Soul)
- cringe-pit, renegade-storyteller, nomad-soul: new fonts (Bebas Neue, Space Mono, Barlow Condensed, Rye), vibrant palette aligned with homepage, full iframe allow attributes
- Nomad Soul entry 1 placeholder converted to linked card → anomadsoul3791 channel
- index.html: Videos star href wired to Videos/index.html

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
JL Kruger
2026-03-27 15:26:19 +02:00
parent 09e47ccf81
commit 608077131a
5 changed files with 1376 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
Videos/index.html Normal file
View File

@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Videos // Singular Particular</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #04060b;
--surface: #080b14;
--on-surface: #e8d5b8;
--muted: #4a5a6a;
--cringe: #ff1ae0;
--renegade: #00e8ff;
--nomad: #ff6b1a;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg);
color: var(--on-surface);
font-family: 'JetBrains Mono', monospace;
min-height: 100vh;
padding: var(--space-12) var(--space-8);
overflow-x: hidden;
}
header {
margin-bottom: var(--space-16);
}
.eyebrow {
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: var(--space-4);
}
h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.5rem, 12vw, 6rem);
line-height: 0.85;
color: var(--on-surface);
letter-spacing: 0.04em;
}
.collections {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.collection-card {
display: block;
text-decoration: none;
background: var(--surface);
padding: var(--space-8) var(--space-8);
position: relative;
border-left: 3px solid transparent;
transition: border-color 150ms ease, background 150ms ease;
overflow: hidden;
}
.collection-card::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 150ms ease;
}
.collection-card:hover { background: #0d1020; }
.collection-card[data-col="cringe"] { border-left-color: var(--cringe); }
.collection-card[data-col="cringe"] .card-glow { background: radial-gradient(ellipse at 0% 50%, rgba(255,26,224,0.12) 0%, transparent 70%); }
.collection-card[data-col="cringe"] .card-num { color: var(--cringe); }
.collection-card[data-col="cringe"]:hover .card-arrow { color: var(--cringe); }
.collection-card[data-col="renegade"] { border-left-color: var(--renegade); }
.collection-card[data-col="renegade"] .card-glow { background: radial-gradient(ellipse at 0% 50%, rgba(0,232,255,0.1) 0%, transparent 70%); }
.collection-card[data-col="renegade"] .card-num { color: var(--renegade); }
.collection-card[data-col="renegade"]:hover .card-arrow { color: var(--renegade); }
.collection-card[data-col="nomad"] { border-left-color: var(--nomad); }
.collection-card[data-col="nomad"] .card-glow { background: radial-gradient(ellipse at 0% 50%, rgba(255,107,26,0.12) 0%, transparent 70%); }
.collection-card[data-col="nomad"] .card-num { color: var(--nomad); }
.collection-card[data-col="nomad"]:hover .card-arrow { color: var(--nomad); }
.card-glow {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease;
}
.collection-card:hover .card-glow { opacity: 1; }
.card-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.card-meta {
flex: 1;
}
.card-num {
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: var(--space-4);
display: block;
}
.card-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(1.8rem, 5vw, 2.8rem);
letter-spacing: 0.05em;
color: var(--on-surface);
line-height: 1;
margin-bottom: var(--space-4);
}
.card-desc {
font-size: 0.65rem;
letter-spacing: 0.08em;
color: var(--muted);
text-transform: uppercase;
line-height: 1.6;
}
.card-arrow {
font-size: 1.5rem;
color: var(--muted);
transition: color 150ms ease, transform 150ms ease;
flex-shrink: 0;
}
.collection-card:hover .card-arrow {
transform: translateX(4px);
}
</style>
</head>
<body>
<header>
<p class="eyebrow">Archive // Moving Image</p>
<h1>Videos</h1>
</header>
<nav class="collections">
<a href="cringe-pit.html" class="collection-card" data-col="cringe">
<div class="card-glow"></div>
<div class="card-inner">
<div class="card-meta">
<span class="card-num">Vol. 01 // 7 entries</span>
<div class="card-title">The Cringe Pit</div>
<p class="card-desc">Student work & early failures // 2011–2014</p>
</div>
<span class="card-arrow">→</span>
</div>
</a>
<a href="renegade-storyteller.html" class="collection-card" data-col="renegade">
<div class="card-glow"></div>
<div class="card-inner">
<div class="card-meta">
<span class="card-num">Vol. 02 // 14 entries</span>
<div class="card-title">The Renegade Storyteller</div>
<p class="card-desc">First cross-platform multimedia project // legacy archive</p>
</div>
<span class="card-arrow">→</span>
</div>
</a>
<a href="nomad-soul.html" class="collection-card" data-col="nomad">
<div class="card-glow"></div>
<div class="card-inner">
<div class="card-meta">
<span class="card-num">Vol. 03 // 10 entries</span>
<div class="card-title">Your Nomad Soul</div>
<p class="card-desc">The Nomad persona // 2016–2021</p>
</div>
<span class="card-arrow">→</span>
</div>
</a>
</nav>
</body>
</html>