Add Videos section — hub + 3 collection pages, wire nav star
- 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:
405
Videos/renegade-storyteller.html
Normal file
405
Videos/renegade-storyteller.html
Normal file
@@ -0,0 +1,405 @@
|
||||
<!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=Bebas+Neue&family=Barlow+Condensed:wght@400;600;700&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: 'Barlow Condensed', sans-serif;
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.font-mechanical {
|
||||
font-family: 'Bebas Neue', 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: 'Bebas Neue', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: clamp(4rem, 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;
|
||||
}
|
||||
|
||||
.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: 'Barlow Condensed', 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: center;
|
||||
justify-content: center;
|
||||
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: 'Bebas Neue', sans-serif;
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--primary);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.lightbox-quote {
|
||||
font-family: 'Barlow Condensed', 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');
|
||||
localStorage.setItem('renegade_visited', 'true');
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
if (!localStorage.getItem('renegade_visited')) {
|
||||
document.getElementById('welcome-gate').classList.add('active');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user