Add Images section — hub + 4 collection galleries, wire nav star
- Images/images.html: hub page linking all 4 collections - Images/wayback.html, nomad-soul.html, myster-wizzard.html, exopraxist.html: collection galleries - 429 thumbnails (360px) committed across 4 collections - Gallery renders from baked filename arrays (no on-load fetch) - Lightbox lazy-fetches FileBrowser for full-res on click, falls back to thumbnail - .gitignore: allow Images/*/thumbnails/, anchor /GEMINI.md to root only, add .venv/ - index.html: wire Images star node to Images/images.html Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
267
Images/images.html
Normal file
267
Images/images.html
Normal file
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Images | Singular Particular Space</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Protest+Revolution&family=Lora:ital,wght@0,400..700;1,400..700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-void: #04060b;
|
||||
--bg-deep: #050810;
|
||||
--bg-warm: #0d1320;
|
||||
--fire-amber: #e8943a;
|
||||
--fire-coral: #d4654a;
|
||||
--neon-green: #32dc8c;
|
||||
--neon-teal: #2ac4b3;
|
||||
--deep-red: #8b2020;
|
||||
--blue-magenta: #6b3fa0;
|
||||
--orchid: #c558d9;
|
||||
--paradise: #ff7f3f;
|
||||
--toucan: #ffcf40;
|
||||
--fairy-pink: #f472b6;
|
||||
--waterfall: #3fbfaf;
|
||||
--phosphor: #00ff41;
|
||||
--text-warm: #e8d5b8;
|
||||
--text-muted: #6a7a8a;
|
||||
--accent: var(--fire-amber);
|
||||
--accent-glow: rgba(232, 148, 58, 0.25);
|
||||
--transition: 100ms ease;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-void);
|
||||
color: var(--text-warm);
|
||||
font-family: 'Lora', serif;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 4rem 2rem 2rem;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid var(--accent);
|
||||
box-shadow: 0 4px 15px var(--accent-glow);
|
||||
margin-bottom: 3rem;
|
||||
background: linear-gradient(to bottom, var(--bg-deep), var(--bg-void));
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Protest Revolution', system-ui;
|
||||
font-size: 5rem;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
text-shadow: 4px 4px 0px var(--bg-void), 0 0 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
display: inline-block;
|
||||
margin-top: 1.5rem;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--text-muted);
|
||||
padding: 0.5rem 1.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-back:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-glow);
|
||||
box-shadow: 0 0 10px var(--accent-glow);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem 4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 2px solid var(--text-muted);
|
||||
background: var(--bg-deep);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 20px var(--accent-glow);
|
||||
background: var(--bg-warm);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
aspect-ratio: 16/9;
|
||||
background: var(--bg-warm);
|
||||
border-bottom: 2px solid var(--text-muted);
|
||||
transition: var(--transition);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: grayscale(0.5) contrast(1.1);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.card:hover .card-image {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.card:hover .card-image img {
|
||||
filter: grayscale(0) contrast(1);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.card-years {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 1rem;
|
||||
color: var(--accent);
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-family: 'Protest Revolution', system-ui;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-warm);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--bg-warm);
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
.accent-coral { --accent: var(--fire-coral); --accent-glow: rgba(212, 101, 74, 0.3); }
|
||||
.accent-waterfall { --accent: var(--waterfall); --accent-glow: rgba(63, 191, 175, 0.3); }
|
||||
.accent-orchid { --accent: var(--orchid); --accent-glow: rgba(197, 88, 217, 0.3); }
|
||||
.accent-phosphor { --accent: var(--phosphor); --accent-glow: rgba(0, 255, 65, 0.3); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Images</h1>
|
||||
<a href="../index.html" class="nav-back">← Back to Space</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="grid">
|
||||
<a href="wayback.html" class="card accent-coral">
|
||||
<div class="card-image">
|
||||
<img src="WayBack/thumbnails/BreakermanAvatar1.jpg" alt="WayBack Preview">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span class="card-years">2010–2014</span>
|
||||
<h2 class="card-title">WayBack</h2>
|
||||
<p class="card-subtitle">From way back in the way back</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="nomad-soul.html" class="card accent-waterfall">
|
||||
<div class="card-image">
|
||||
<img src="YourNomadSoul/thumbnails/13F18846-DE0A-4241-9871-918FEE42E99C.jpg" alt="YourNomadSoul Preview">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span class="card-years">2015–2021</span>
|
||||
<h2 class="card-title">YourNomadSoul</h2>
|
||||
<p class="card-subtitle">Scattered about the social internets</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="myster-wizzard.html" class="card accent-orchid">
|
||||
<div class="card-image">
|
||||
<img src="MysterWizzard/thumbnails/20241127_195824.jpg" alt="MysterWizzard Preview">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span class="card-years">2022–2025</span>
|
||||
<h2 class="card-title">MysterWizzard</h2>
|
||||
<p class="card-subtitle">Time spent in the real world, learning about community</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="exopraxist.html" class="card accent-phosphor">
|
||||
<div class="card-image">
|
||||
<img src="Exopraxist/thumbnails/jl_wallpaper_desktop_F.jpg" alt="Exopraxist Preview">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span class="card-years">2026–present</span>
|
||||
<h2 class="card-title">Exopraxist</h2>
|
||||
<p class="card-subtitle">Stepping up, stepping forth. Step by step we dance and we do</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>SINGULAR PARTICULAR SPACE // IMAGES HUB</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('Images Hub initialized');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user