JL Kruger
2f5c06fee8
Fonts (display/heading only — body untouched): - Cringe Pit: Bebas Neue → Protest Revolution - Renegade: Bebas Neue → Ribeye Marrow, Barlow Condensed → Faculty Glyphic (headings), Rambla (body) - Nomad Soul: Bebas Neue → Trade Winds, Rye → Babylonica - Hub: Bebas Neue → Workbench Lightbox fixes (3 collection pages): - window.onload → DOMContentLoaded (fires before iframes load, fixes slow mobile) - lightbox-content: max-height 90vh + overflow-y auto (fixes off-screen on small viewports) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
203 lines
6.7 KiB
HTML
203 lines
6.7 KiB
HTML
<!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=Workbench&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: 'Workbench', 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: 'Workbench', 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>
|