JL Kruger
c1a7098ebe
- Add target="_top" to all ← SPACE / back-to-root links so navigating back to index.html breaks out of the content iframe instead of loading it recursively inside itself (Images, Music, Watchlists hubs) - Remove all localStorage usage: visited-star tracking in index.html (resets each visit, no persistence without storage), and lightbox "show once" guards in all section pages (lightboxes now show on every load — Videos, Watchlists, Music). build.py templates updated so future generated pages stay clean. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
408 lines
15 KiB
HTML
408 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>THE RENEGADE STORYTELLER // Singular Particular</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Amarante&family=Faculty+Glyphic&family=Rambla:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--background: #04060b;
|
|
--surface: #04060b;
|
|
--surface-container: #080b16;
|
|
--surface-container-high: #0e1220;
|
|
--surface-container-highest: #14192c;
|
|
--surface-container-lowest: #000000;
|
|
|
|
--primary: #00e8ff;
|
|
--primary-dim: #00b8cc;
|
|
--secondary: #c558d9;
|
|
--secondary-dim: #9a3fb0;
|
|
--tertiary: #ffcf40;
|
|
--accent: #ff3df0;
|
|
|
|
--on-surface: #e0f4ff;
|
|
--on-surface-variant: #7a9eb8;
|
|
|
|
--space-2: 0.5rem;
|
|
--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-color: var(--background);
|
|
color: var(--on-surface);
|
|
font-family: 'Rambla', sans-serif;
|
|
line-height: 1.5;
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.font-mechanical {
|
|
font-family: 'Amarante', sans-serif;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.font-data {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-size: 0.7rem;
|
|
color: var(--on-surface-variant);
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Amarante', sans-serif;
|
|
font-weight: 400;
|
|
font-size: clamp(3rem, 16vw, 8rem);
|
|
line-height: 0.8;
|
|
color: var(--primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: var(--space-8);
|
|
position: relative;
|
|
text-shadow: 0 0 40px rgba(0, 232, 255, 0.45), 0 0 80px rgba(0, 232, 255, 0.15);
|
|
}
|
|
|
|
h1::before {
|
|
content: 'THE RENEGADE';
|
|
position: absolute;
|
|
top: -0.5em;
|
|
left: 0.05em;
|
|
font-size: 0.22em;
|
|
color: var(--accent);
|
|
letter-spacing: 0.5em;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
h1::before { letter-spacing: 0.12em; }
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: var(--space-12) var(--space-6);
|
|
}
|
|
|
|
/* Grid — Asymmetric */
|
|
.story-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-16);
|
|
margin-top: var(--space-12);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.story-grid {
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
.video-card { grid-column: span 6; }
|
|
.video-card:nth-child(3n+1) { grid-column: 2 / span 5; }
|
|
.video-card:nth-child(3n+2) { grid-column: 8 / span 4; margin-top: var(--space-12); }
|
|
.video-card:nth-child(3n) { grid-column: 4 / span 6; }
|
|
}
|
|
|
|
/* Video Card */
|
|
.video-card {
|
|
background-color: var(--surface-container);
|
|
position: relative;
|
|
padding: var(--space-4);
|
|
border-left: 1px solid rgba(0, 232, 255, 0.25);
|
|
transition: transform 200ms ease, border-color 200ms ease;
|
|
}
|
|
|
|
.video-card:hover {
|
|
border-left-color: rgba(0, 232, 255, 0.7);
|
|
}
|
|
|
|
.video-card .aspect-ratio {
|
|
position: relative;
|
|
padding-bottom: 56.25%;
|
|
background-color: var(--surface-container-lowest);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.video-card iframe {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.video-card h2 {
|
|
font-family: 'Faculty Glyphic', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
color: var(--tertiary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
/* Lightbox */
|
|
#welcome-gate {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(4, 6, 11, 0.98);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
overflow-y: auto;
|
|
padding: var(--space-6);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 300ms ease;
|
|
}
|
|
|
|
#welcome-gate.active { opacity: 1; visibility: visible; }
|
|
|
|
.lightbox-content {
|
|
max-width: 700px;
|
|
padding: var(--space-12);
|
|
background: linear-gradient(135deg, var(--surface-container) 0%, var(--surface) 100%);
|
|
position: relative;
|
|
box-shadow: 0 0 60px rgba(0, 232, 255, 0.15), 0 0 120px rgba(197, 88, 217, 0.08);
|
|
border-top: 2px solid var(--primary);
|
|
}
|
|
|
|
.lightbox-content h3 {
|
|
font-family: 'Amarante', sans-serif;
|
|
font-size: 1.8rem;
|
|
letter-spacing: 0.1em;
|
|
color: var(--primary);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.lightbox-quote {
|
|
font-family: 'Rambla', sans-serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
font-style: italic;
|
|
color: var(--on-surface);
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
.btn-enter {
|
|
background: transparent;
|
|
border: 1px solid var(--primary);
|
|
color: var(--primary);
|
|
padding: var(--space-4) var(--space-8);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
transition: all 150ms;
|
|
}
|
|
|
|
.btn-enter:hover {
|
|
background: var(--primary);
|
|
color: var(--background);
|
|
box-shadow: 0 0 30px rgba(0, 232, 255, 0.5);
|
|
}
|
|
|
|
/* Background Glows */
|
|
.glow-primary {
|
|
position: fixed;
|
|
bottom: -10%;
|
|
left: -10%;
|
|
width: 60vw;
|
|
height: 60vw;
|
|
background: radial-gradient(circle, rgba(197, 88, 217, 0.15) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.glow-secondary {
|
|
position: fixed;
|
|
top: 10%;
|
|
right: -5%;
|
|
width: 35vw;
|
|
height: 35vw;
|
|
background: radial-gradient(circle, rgba(0, 232, 255, 0.12) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar { width: 4px; }
|
|
::-webkit-scrollbar-track { background: var(--background); }
|
|
::-webkit-scrollbar-thumb { background: var(--primary-dim); }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="glow-primary"></div>
|
|
<div class="glow-secondary"></div>
|
|
|
|
<div id="welcome-gate">
|
|
<div class="lightbox-content">
|
|
<p class="font-data" style="margin-bottom: var(--space-4); color: var(--tertiary);">PROJECT_STATUS: LEGACY_ARCHIVE</p>
|
|
<h3 class="font-mechanical">THE RENEGADE STORYTELLER</h3>
|
|
<p class="lightbox-quote">
|
|
"My first cross-platform multimedia project. The Renegade Storyteller was meant to be a website for writers to find an audience... our lives took us in wildly different directions and we left the sites up and as they were. We all grew up and moved on in our own ways."
|
|
</p>
|
|
<button class="btn-enter" onclick="closeGate()">Initialize Descent</button>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="container">
|
|
<header>
|
|
<p class="font-data" style="margin-bottom: var(--space-2); color: var(--accent);">Volume_02 // The_Lens</p>
|
|
<h1>STORYTELLER</h1>
|
|
</header>
|
|
|
|
<div class="story-grid">
|
|
<!-- Video 1 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/wGeLoHr_02Y" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: 045</p>
|
|
<h2>But for a Dream</h2>
|
|
</div>
|
|
|
|
<!-- Video 2 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/oIO_rRWAZdQ" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: 013</p>
|
|
<h2>I Was Here</h2>
|
|
</div>
|
|
|
|
<!-- Video 3 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/cVLvx66bmmg" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: 019</p>
|
|
<h2>The Gladstone Gig</h2>
|
|
</div>
|
|
|
|
<!-- Video 4 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/EBZhO98Vg3w" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: 040</p>
|
|
<h2>The Watch Maker</h2>
|
|
</div>
|
|
|
|
<!-- Video 5 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/JJtnygYcs5o" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: 034</p>
|
|
<h2>On the Curious Creatures Called People</h2>
|
|
</div>
|
|
|
|
<!-- Video 6 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/QVQl2uyUBGg" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: 033</p>
|
|
<h2>Ode to Truth Kind of</h2>
|
|
</div>
|
|
|
|
<!-- Video 7 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/0EOoCUcpC9U?start=7" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: 025</p>
|
|
<h2>Johnny and Clive</h2>
|
|
</div>
|
|
|
|
<!-- Video 8 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/JHwCULemEbU" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: 014</p>
|
|
<h2>My Himitsu</h2>
|
|
</div>
|
|
|
|
<!-- Video 9 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/oZ-7GstC84g?start=2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: Theatre of the Mind</p>
|
|
<h2>The Night You Died</h2>
|
|
</div>
|
|
|
|
<!-- Video 10 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/sQdl7SksxQ4" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: FUGUE / First</p>
|
|
<h2>Hunter | Prey</h2>
|
|
</div>
|
|
|
|
<!-- Video 11 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/gYRbgIf9RrY" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: FUGUE / Second</p>
|
|
<h2>Real | Imagined</h2>
|
|
</div>
|
|
|
|
<!-- Video 12 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/y7MMGH8iMZ8" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: FUGUE / Third</p>
|
|
<h2>Fight | Flight</h2>
|
|
</div>
|
|
|
|
<!-- Video 13 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/To0SnqzzmII?start=38" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: Vignette</p>
|
|
<h2>Hornby's Welcome</h2>
|
|
</div>
|
|
|
|
<!-- Video 14 -->
|
|
<div class="video-card">
|
|
<div class="aspect-ratio">
|
|
<iframe src="https://www.youtube.com/embed/pIGIW3h9LpU" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
</div>
|
|
<p class="font-data">Segment: Music Video</p>
|
|
<h2>Cold Shoulder</h2>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
function closeGate() {
|
|
const gate = document.getElementById('welcome-gate');
|
|
gate.classList.remove('active');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.getElementById('welcome-gate').classList.add('active');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|