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>
416 lines
15 KiB
HTML
416 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>YOUR NOMAD SOUL // Singular Particular</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Trade+Winds&family=Babylonica&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: 'Trade Winds', 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: 'Babylonica', 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: 'Babylonica', 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');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (!localStorage.getItem('nomad_visited')) {
|
|
document.getElementById('welcome-gate').classList.add('active');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|