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:
353
Videos/cringe-pit.html
Normal file
353
Videos/cringe-pit.html
Normal file
@@ -0,0 +1,353 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>THE CRINGE PIT // Singular Particular</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--background: #04060b;
|
||||
--surface: #04060b;
|
||||
--surface-container: #0a0714;
|
||||
--surface-container-high: #130f1f;
|
||||
--surface-container-highest: #1c1529;
|
||||
--surface-container-lowest: #000000;
|
||||
|
||||
--primary: #ff1ae0;
|
||||
--primary-dim: #cc00b0;
|
||||
--on-primary: #3d0036;
|
||||
|
||||
--secondary: #00f1fd;
|
||||
--on-secondary: #004145;
|
||||
|
||||
--tertiary: #ffcf40;
|
||||
|
||||
--outline: #6b3fa0;
|
||||
--outline-variant: #3a1a5e;
|
||||
|
||||
--on-surface: #ede0ff;
|
||||
--on-surface-variant: #9b87b8;
|
||||
|
||||
--space-2: 0.5rem;
|
||||
--space-4: 1rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-12: 3rem;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--on-surface);
|
||||
font-family: 'Space Mono', monospace;
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.label-sm {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 300;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-12) var(--space-6);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: var(--space-12);
|
||||
border-left: 4px solid var(--secondary);
|
||||
padding-left: var(--space-6);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: clamp(4.5rem, 16vw, 8rem);
|
||||
line-height: 0.85;
|
||||
color: var(--primary);
|
||||
text-shadow: 0 0 40px rgba(255, 26, 224, 0.55), 0 0 90px rgba(255, 26, 224, 0.2);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-12);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.video-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.video-card:nth-child(even) {
|
||||
margin-top: var(--space-12);
|
||||
}
|
||||
}
|
||||
|
||||
.video-card {
|
||||
background-color: var(--surface-container);
|
||||
position: relative;
|
||||
transition: background-color 100ms ease;
|
||||
}
|
||||
|
||||
.video-card:hover {
|
||||
background-color: var(--surface-container-high);
|
||||
}
|
||||
|
||||
.video-card .aspect-ratio {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
background-color: var(--surface-container-lowest);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-card iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.video-content {
|
||||
padding: var(--space-4);
|
||||
border-bottom: 2px solid var(--primary-dim);
|
||||
}
|
||||
|
||||
.video-title {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 1.7rem;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: var(--space-2);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
/* Welcome Gate */
|
||||
#welcome-gate {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(4, 6, 11, 0.97);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-6);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 200ms ease, visibility 200ms ease;
|
||||
}
|
||||
|
||||
#welcome-gate.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.lightbox-content {
|
||||
max-width: 600px;
|
||||
background-color: var(--surface-container-high);
|
||||
padding: var(--space-8);
|
||||
position: relative;
|
||||
border-left: 3px solid var(--primary);
|
||||
box-shadow: 0 0 60px rgba(255, 26, 224, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.lightbox-content::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 4px;
|
||||
border: 1px solid var(--outline-variant);
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.lightbox-quote {
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
margin-bottom: var(--space-6);
|
||||
color: var(--on-surface);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
border: none;
|
||||
padding: var(--space-2) var(--space-6);
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: background-color 100ms ease, box-shadow 100ms ease;
|
||||
}
|
||||
|
||||
.lightbox-close:hover {
|
||||
background: var(--primary-dim);
|
||||
box-shadow: 0 0 24px rgba(255, 26, 224, 0.6);
|
||||
}
|
||||
|
||||
/* Glow Effects */
|
||||
.glow-primary {
|
||||
position: fixed;
|
||||
top: -5%;
|
||||
right: -5%;
|
||||
width: 55vw;
|
||||
height: 55vw;
|
||||
background: radial-gradient(circle, rgba(255, 26, 224, 0.18) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.glow-secondary {
|
||||
position: fixed;
|
||||
bottom: -5%;
|
||||
left: -5%;
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
background: radial-gradient(circle, rgba(0, 241, 253, 0.1) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: var(--surface); }
|
||||
::-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="label-sm" style="margin-bottom: var(--space-4); color: var(--secondary);">Transmitting Origin...</p>
|
||||
<p class="lightbox-quote">
|
||||
"We all start somewhere. The videos I made in high school are thankfully lost to time, but my stumbling and humbling journey of learning the hard lessons of craft were accompanied by a tangentially documented series of either beautiful, or interesting, failures. I have learned much. The me that made these is not the me that I am, but we would recognize each other. Here is my Cringe Pit, for those who might find hope in my obvious humanity."
|
||||
</p>
|
||||
<p class="label-sm" style="margin-bottom: var(--space-6); text-align: right; color: var(--tertiary);">— JL</p>
|
||||
<button class="lightbox-close" onclick="closeGate()">Enter the Pit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="container">
|
||||
<header>
|
||||
<p class="label-sm" style="color: var(--secondary);">Archive Segment // #CRINGE</p>
|
||||
<h1>THE CRINGE PIT</h1>
|
||||
</header>
|
||||
|
||||
<div class="video-grid">
|
||||
<!-- Video 1 -->
|
||||
<div class="video-card">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/phI39jYJcQ8" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<p class="label-sm">Data Segment: 2011-2014</p>
|
||||
<h2 class="video-title">Julian L Kruger - Showreel</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video 2 -->
|
||||
<div class="video-card">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/nrHaB5SRGec" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<p class="label-sm">Data Segment: REFA 2nd Year</p>
|
||||
<h2 class="video-title">Dial Direct - LEMON (Test Commercial)</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video 3 -->
|
||||
<div class="video-card">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/o2xFvSDrSZc" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<p class="label-sm">Data Segment: REFA 2011</p>
|
||||
<h2 class="video-title">Danger Close</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video 4 -->
|
||||
<div class="video-card">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/qR6RcrLn5vs" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<p class="label-sm">Data Segment: REFA Archive</p>
|
||||
<h2 class="video-title">Inner Voice</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video 5 -->
|
||||
<div class="video-card">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/DI64iXE4yTA" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<p class="label-sm">Data Segment: REFA 2011</p>
|
||||
<h2 class="video-title">Inkunzi Short Film</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video 6 -->
|
||||
<div class="video-card">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/impSCU-LL5Q" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<p class="label-sm">Data Segment: REFA 2012</p>
|
||||
<h2 class="video-title">Searching for Something</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video 7 -->
|
||||
<div class="video-card">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/P0oHi8_tzRk" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="video-content">
|
||||
<p class="label-sm">Data Segment: REFA 2012</p>
|
||||
<h2 class="video-title">Savage Post</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function closeGate() {
|
||||
const gate = document.getElementById('welcome-gate');
|
||||
gate.classList.remove('active');
|
||||
localStorage.setItem('cringe_pit_visited', 'true');
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
if (!localStorage.getItem('cringe_pit_visited')) {
|
||||
document.getElementById('welcome-gate').classList.add('active');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
202
Videos/index.html
Normal file
202
Videos/index.html
Normal 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>
|
||||
415
Videos/nomad-soul.html
Normal file
415
Videos/nomad-soul.html
Normal file
@@ -0,0 +1,415 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>YOUR NOMAD SOUL // Singular Particular</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rye&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--background: #0a0704;
|
||||
--surface: #140e08;
|
||||
--surface-container: #1e1610;
|
||||
--surface-container-high: #2a1f17;
|
||||
--surface-container-lowest: #000000;
|
||||
|
||||
--primary: #ff6b1a;
|
||||
--primary-dim: #d44f0a;
|
||||
--secondary: #ffd700;
|
||||
--tertiary: #c93030;
|
||||
--accent: #ff2b2b;
|
||||
|
||||
--on-surface: #f5ece4;
|
||||
--on-surface-variant: #c4a882;
|
||||
|
||||
--space-4: 1rem;
|
||||
--space-8: 2rem;
|
||||
--space-12: 3rem;
|
||||
--space-20: 5rem;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--on-surface);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
line-height: 1.4;
|
||||
overflow-x: hidden;
|
||||
background-image:
|
||||
repeating-linear-gradient(0deg, rgba(255,107,26,0.025) 0px, rgba(255,107,26,0.025) 1px, transparent 1px, transparent 2px),
|
||||
radial-gradient(circle at 50% 50%, rgba(255, 107, 26, 0.06) 0%, transparent 80%);
|
||||
}
|
||||
|
||||
.font-utility {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.font-log {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.72rem;
|
||||
color: var(--on-surface-variant);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: clamp(5rem, 20vw, 11rem);
|
||||
color: var(--primary);
|
||||
text-transform: uppercase;
|
||||
line-height: 0.8;
|
||||
letter-spacing: 0.03em;
|
||||
margin-bottom: var(--space-12);
|
||||
text-shadow:
|
||||
12px 12px 0px rgba(201, 48, 48, 0.3),
|
||||
0 0 60px rgba(255, 107, 26, 0.4),
|
||||
0 0 120px rgba(255, 107, 26, 0.15);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-20) var(--space-8);
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
margin-bottom: var(--space-20);
|
||||
position: relative;
|
||||
padding-top: var(--space-12);
|
||||
border-top: 1px solid rgba(255, 107, 26, 0.15);
|
||||
}
|
||||
|
||||
.log-entry::before {
|
||||
content: 'ENTRY_LOG';
|
||||
position: absolute;
|
||||
top: var(--space-4);
|
||||
left: 0;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
color: var(--primary);
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-family: 'Rye', serif;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: var(--space-8);
|
||||
color: var(--secondary);
|
||||
line-height: 1.1;
|
||||
text-shadow: 2px 2px 0px rgba(201, 48, 48, 0.3);
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
background-color: var(--surface-container-lowest);
|
||||
padding: 2px;
|
||||
border: 1px solid var(--surface-container-high);
|
||||
margin-bottom: var(--space-8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* HUD corner elements */
|
||||
.video-wrapper::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
border: 1px solid var(--primary);
|
||||
clip-path: polygon(0 0, 10% 0, 10% 2px, 2px 2px, 2px 10%, 0 10%,
|
||||
90% 0, 100% 0, 100% 10%, 98% 10%, 98% 2px, 90% 2px,
|
||||
90% 100%, 100% 100%, 100% 90%, 98% 90%, 98% 98%, 90% 98%,
|
||||
0 100%, 10% 100%, 10% 98%, 2px 98%, 2px 90%, 0 90%);
|
||||
pointer-events: none;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.aspect-ratio {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aspect-ratio iframe {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
border: none;
|
||||
filter: sepia(0.15) contrast(1.05);
|
||||
transition: filter 300ms ease;
|
||||
}
|
||||
|
||||
.video-wrapper:hover iframe {
|
||||
filter: sepia(0) contrast(1.0);
|
||||
}
|
||||
|
||||
/* Linked card — for channel/playlist entries that can't be embedded */
|
||||
.linked-card {
|
||||
position: relative;
|
||||
background-color: var(--surface-container);
|
||||
border: 1px solid rgba(255, 107, 26, 0.25);
|
||||
padding: var(--space-8) var(--space-8);
|
||||
margin-bottom: var(--space-8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.linked-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
border: 1px solid var(--primary);
|
||||
clip-path: polygon(0 0, 10% 0, 10% 2px, 2px 2px, 2px 10%, 0 10%,
|
||||
90% 0, 100% 0, 100% 10%, 98% 10%, 98% 2px, 90% 2px,
|
||||
90% 100%, 100% 100%, 100% 90%, 98% 90%, 98% 98%, 90% 98%,
|
||||
0 100%, 10% 100%, 10% 98%, 2px 98%, 2px 90%, 0 90%);
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.channel-link {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
transition: color 150ms ease, text-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.channel-link:hover {
|
||||
color: var(--secondary);
|
||||
text-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Welcome Gate */
|
||||
#welcome-gate {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: #0a0704;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-8);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 500ms ease;
|
||||
}
|
||||
|
||||
#welcome-gate.active { opacity: 1; visibility: visible; }
|
||||
|
||||
.lightbox-content {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lightbox-quote {
|
||||
font-family: 'Rye', serif;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.35;
|
||||
margin-bottom: var(--space-12);
|
||||
color: var(--on-surface);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.btn-drop-mask {
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
cursor: pointer;
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.btn-drop-mask:hover {
|
||||
background: var(--primary);
|
||||
color: var(--background);
|
||||
box-shadow: 0 0 30px rgba(255, 107, 26, 0.5);
|
||||
}
|
||||
|
||||
/* Atmospheric glow */
|
||||
.heat-glow {
|
||||
position: fixed;
|
||||
top: 0; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100vw;
|
||||
height: 25vh;
|
||||
background: linear-gradient(to bottom, rgba(255, 107, 26, 0.14), transparent);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.floor-glow {
|
||||
position: fixed;
|
||||
bottom: 0; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80vw;
|
||||
height: 30vh;
|
||||
background: radial-gradient(ellipse, rgba(201, 48, 48, 0.12) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar { width: 3px; }
|
||||
::-webkit-scrollbar-track { background: var(--background); }
|
||||
::-webkit-scrollbar-thumb { background: var(--primary); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="heat-glow"></div>
|
||||
<div class="floor-glow"></div>
|
||||
|
||||
<div id="welcome-gate">
|
||||
<div class="lightbox-content">
|
||||
<p class="font-utility" style="margin-bottom: var(--space-8); color: var(--tertiary);">IDENTITY_ENCRYPTED // THE_NOMAD</p>
|
||||
<p class="lightbox-quote">
|
||||
"2016-2019 was a real dark time... one of the ways I coped, was by posting online under the mask of a character called the Nomad. I was working through some shit, and I think it shows."
|
||||
</p>
|
||||
<button class="btn-drop-mask" onclick="closeGate()">Lower Mask</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="container">
|
||||
<header>
|
||||
<p class="font-utility" style="color: var(--primary); margin-bottom: var(--space-4);">Project: Nomad_Soul</p>
|
||||
<h1>NOMAD</h1>
|
||||
</header>
|
||||
|
||||
<!-- Entry 1 — channel archive, cannot embed -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">STAMP: 2016_2021 // SOURCE: YOUTUBE_ANOMADSOUL</p>
|
||||
<h2 class="entry-title">A Nomad Soul</h2>
|
||||
<div class="linked-card">
|
||||
<a href="https://www.youtube.com/@anomadsoul3791/videos" target="_blank" rel="noopener noreferrer" class="channel-link">→ View Channel Archive</a>
|
||||
</div>
|
||||
<p class="font-log" style="text-align: right;">[ CHANNEL_ARCHIVE // EXTERNAL_LINK ]</p>
|
||||
</div>
|
||||
|
||||
<!-- Entry 2 -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">ID: 034 // COORD: CURIOUS_CREATURES</p>
|
||||
<h2 class="entry-title">On the Curious Creatures Called People</h2>
|
||||
<div class="video-wrapper">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 3 -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">ID: 033 // COORD: ODE_TO_TRUTH</p>
|
||||
<h2 class="entry-title">Ode to Truth Kind of</h2>
|
||||
<div class="video-wrapper">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 4 -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">MUSIC_VIDEO // SOURCE: MELANIE_KERR</p>
|
||||
<h2 class="entry-title">Sixteen</h2>
|
||||
<div class="video-wrapper">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/zmwv8NXMO6E" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 5 -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">ID: 044 // COORD: JOHN_JACOB_JAMES</p>
|
||||
<h2 class="entry-title">John Jacob James</h2>
|
||||
<div class="video-wrapper">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/jVQDympDpaM" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 6 -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">ID: 018 // COORD: DISAGREEABLE_MAN</p>
|
||||
<h2 class="entry-title">Disagreeable Man</h2>
|
||||
<div class="video-wrapper">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/gW6EaOG2zxA" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 7 -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">ID: 029 // COORD: ZEUS_RANT</p>
|
||||
<h2 class="entry-title">Zeus's Rant</h2>
|
||||
<div class="video-wrapper">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/9v-WyDg5y5M" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 8 -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">ID: 016 // COORD: THE_PROFESSION</p>
|
||||
<h2 class="entry-title">The Profession</h2>
|
||||
<div class="video-wrapper">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/o5M26E9NQtA?start=149" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 9 -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">ID: 011 // COORD: DINWIDDY_DECEIT</p>
|
||||
<h2 class="entry-title">Dinwiddy's Deceit</h2>
|
||||
<div class="video-wrapper">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/EvH9oHAKOrM" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entry 10 -->
|
||||
<div class="log-entry">
|
||||
<p class="font-log">COORD: TROUBLE_DONE_BORE_ME</p>
|
||||
<h2 class="entry-title">Trouble Done Bore Me Down</h2>
|
||||
<div class="video-wrapper">
|
||||
<div class="aspect-ratio">
|
||||
<iframe src="https://www.youtube.com/embed/BWJrOOYqRuM" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function closeGate() {
|
||||
const gate = document.getElementById('welcome-gate');
|
||||
gate.classList.remove('active');
|
||||
localStorage.setItem('nomad_visited', 'true');
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
if (!localStorage.getItem('nomad_visited')) {
|
||||
document.getElementById('welcome-gate').classList.add('active');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
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>
|
||||
@@ -690,7 +690,7 @@ body::after {
|
||||
|
||||
var STARS = [
|
||||
{ id: 'writings', label: 'Writings', sign: '文', x: 25, y: 22, href: '' },
|
||||
{ id: 'videos', label: 'Videos', sign: '映', x: 68, y: 18, href: '' },
|
||||
{ id: 'videos', label: 'Videos', sign: '映', x: 68, y: 18, href: 'Videos/index.html' },
|
||||
{ id: 'music', label: 'Music', sign: '♬', x: 12, y: 44, href: '' },
|
||||
{ id: 'images', label: 'Images', sign: '絵', x: 55, y: 35, href: '' },
|
||||
{ id: 'playlists', label: 'Playlists', sign: '≡', x: 78, y: 50, href: '' },
|
||||
|
||||
Reference in New Issue
Block a user