311 lines
12 KiB
HTML
311 lines
12 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 Colony Stitch | Alvin Jones</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="The Colony Stitch | Alvin Jones">
|
||
|
|
<meta property="og:description" content="Where every care routine, every step, every meal is a thread in our survival tapestry">
|
||
|
|
<meta property="og:image" content="https://images.pexels.com/photos/34144414/pexels-photo-34144414.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||
|
|
<meta property="og:url" content="https://alvin-jones.4ort.net/the-colony-stitch.html">
|
||
|
|
<meta name="twitter:card" content="summary_large_image">
|
||
|
|
<meta name="description" content="Where every care routine, every step, every meal is a thread in our survival tapestry">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--midnight: #0a0a0f;
|
||
|
|
--indigo: #1a1a2e;
|
||
|
|
--gold: #d4af37;
|
||
|
|
--cream: #f5f5dc;
|
||
|
|
--sage: #8fbc8f;
|
||
|
|
--brick: #8b4513;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Georgia', serif;
|
||
|
|
background: linear-gradient(135deg, var(--midnight) 0%, var(--indigo) 100%);
|
||
|
|
color: var(--cream);
|
||
|
|
line-height: 1.8;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tapestry-container {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 4rem 2rem;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tapestry-container::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background:
|
||
|
|
repeating-linear-gradient(90deg,
|
||
|
|
transparent 0px,
|
||
|
|
transparent 59px,
|
||
|
|
rgba(212, 175, 55, 0.03) 59px,
|
||
|
|
rgba(212, 175, 55, 0.03) 60px),
|
||
|
|
repeating-linear-gradient(0deg,
|
||
|
|
transparent 0px,
|
||
|
|
transparent 59px,
|
||
|
|
rgba(212, 175, 55, 0.03) 59px,
|
||
|
|
rgba(212, 175, 55, 0.03) 60px);
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 3.5rem;
|
||
|
|
font-weight: 300;
|
||
|
|
color: var(--gold);
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 1.3rem;
|
||
|
|
color: var(--sage);
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tapestry-section {
|
||
|
|
background: rgba(26, 26, 46, 0.7);
|
||
|
|
border: 1px solid var(--gold);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 2.5rem;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tapestry-section::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 4px;
|
||
|
|
background: linear-gradient(90deg, var(--gold), var(--sage), var(--brick));
|
||
|
|
}
|
||
|
|
|
||
|
|
.tapestry-section h2 {
|
||
|
|
font-size: 2rem;
|
||
|
|
color: var(--gold);
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tapestry-section p {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thread-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin: 2rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thread-card {
|
||
|
|
background: rgba(14, 14, 15, 0.8);
|
||
|
|
border: 2px solid var(--gold);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 2rem;
|
||
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thread-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.thread-card h3 {
|
||
|
|
color: var(--sage);
|
||
|
|
font-size: 1.4rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.thread-card p {
|
||
|
|
font-size: 1rem;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fact-box {
|
||
|
|
background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(143, 188, 143, 0.2));
|
||
|
|
border-left: 4px solid var(--gold);
|
||
|
|
padding: 1.5rem;
|
||
|
|
margin: 2rem 0;
|
||
|
|
font-style: italic;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fact-box strong {
|
||
|
|
color: var(--gold);
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-gallery {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin: 3rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gallery-item {
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gallery-item:hover {
|
||
|
|
transform: scale(1.02);
|
||
|
|
}
|
||
|
|
|
||
|
|
.gallery-item img {
|
||
|
|
width: 100%;
|
||
|
|
height: 400px;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gallery-caption {
|
||
|
|
background: rgba(10, 10, 15, 0.9);
|
||
|
|
padding: 1rem;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
color: var(--cream);
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.signature {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 4rem;
|
||
|
|
padding: 2rem;
|
||
|
|
background: rgba(212, 175, 55, 0.1);
|
||
|
|
border-radius: 12px;
|
||
|
|
border: 1px dashed var(--gold);
|
||
|
|
}
|
||
|
|
|
||
|
|
.signature p {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
font-style: italic;
|
||
|
|
color: var(--sage);
|
||
|
|
}
|
||
|
|
|
||
|
|
.thread-needle {
|
||
|
|
position: absolute;
|
||
|
|
top: 1rem;
|
||
|
|
right: 1rem;
|
||
|
|
font-size: 2rem;
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
h1 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tapestry-container {
|
||
|
|
padding: 2rem 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tapestry-section {
|
||
|
|
padding: 1.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="tapestry-container">
|
||
|
|
<div class="thread-needle">🧵</div>
|
||
|
|
|
||
|
|
<h1>The Colony Stitch</h1>
|
||
|
|
<p class="subtitle">Where every care routine, every step, every meal is a thread in our survival tapestry</p>
|
||
|
|
|
||
|
|
<div class="tapestry-section">
|
||
|
|
<h2>70 Meters of Dignity</h2>
|
||
|
|
<p>In 1070, Odo, Earl of Kent, commissioned a masterpiece: the Bayeux Tapestry. Seventy meters of embroidered wall-hanging art, telling the story of the Norman invasion of England. Medieval Latin stitched into every thread, now housed in the Bayeux Museum in France.</p>
|
||
|
|
|
||
|
|
<p>In our dome, we have our own tapestry. Not 70 meters of wool and silk, but 70 steps of a patient's morning routine. Every transfer from bed to chair, every meal prepared with Houston spice trails, every moment of laughter in the humidity that clings to our skin like a second skin.</p>
|
||
|
|
|
||
|
|
<div class="fact-box">
|
||
|
|
<strong>The Bayeux Tapestry:</strong> Inception 1070, embroidered wall-hanging art, commissioned by Odo, Earl of Kent. <strong>Our Colony:</strong> Every day a new stitch, every care routine a thread in our survival.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tapestry-section">
|
||
|
|
<h2>The Threads That Hold Us</h2>
|
||
|
|
<p>In Houston, we know humidity. We know how it settles in your joints, how it makes every step a negotiation with gravity. In the dome, we've learned to turn that struggle into art. Every gait training session, every fusion meal, every moment of patience when the pottery wheel spins too fast.</p>
|
||
|
|
|
||
|
|
<div class="thread-grid">
|
||
|
|
<div class="thread-card">
|
||
|
|
<h3>The Morning Routine</h3>
|
||
|
|
<p>70 steps from bed to breakfast. Each one a stitch in the day's tapestry. Some days the thread is strong, some days it frays. But we keep pulling, together.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="thread-card">
|
||
|
|
<h3>The Fusion Kitchen</h3>
|
||
|
|
<p>Where Houston heat meets Martian cold. Every spice, every technique, every shared meal is a thread that binds us. Cilantro from the hydroponics, the laughter that rises like steam from a pot of gumbo.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="thread-card">
|
||
|
|
<h3>The Arboretum Loops</h3>
|
||
|
|
<p>Even in the dome, we jog the trails of our memory. Every footfall a rhythm, every breath a stitch in the fabric of our endurance.</p>
|
||
|
|
</div}
|
||
|
|
|
||
|
|
<div class="thread-card">
|
||
|
|
<h3>The Pottery Wheel</h3>
|
||
|
|
<p>When the clay collapses, we don't throw it away. We learn. Every mistake is a lesson, every glitch a flower in the garden of our survival.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tapestry-section">
|
||
|
|
<h2>Every Mistake Is a Stitch</h3>
|
||
|
|
<p>Alberto taught us that every mistake is a lesson, and every glitch is a flower. In the Bayeux Tapestry, every needle pull tells a story of war and conquest. In our colony, every stumble, every recovery, every moment of patience is a thread in our own epic.</p>
|
||
|
|
|
||
|
|
<p>We don't hide the glitches. We learn from them. That's how we keep the tapestry strong. Even in the domes, we're all stitching something bigger than ourselves.</p>
|
||
|
|
|
||
|
|
<div class="fact-box">
|
||
|
|
<strong>Remember:</strong> The Bayeux Tapestry is 70 meters long. Our care routines? Also 70 steps. Every thread matters. Every stitch counts.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="image-gallery">
|
||
|
|
<div class="gallery-item">
|
||
|
|
<img src="https://images.pexels.com/photos/34144414/pexels-photo-34144414.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Visitors observing a large tapestry in a modern museum setting">
|
||
|
|
<div class="gallery-caption">
|
||
|
|
Every tapestry tells a story. Ours is still being written.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="gallery-item">
|
||
|
|
<img src="https://images.pexels.com/photos/35503968/pexels-photo-35503968.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="A richly detailed medieval tapestry alongside vibrant red drapes">
|
||
|
|
<div class="gallery-caption">
|
||
|
|
Medieval art meets modern care. Every thread connects us to the past and the future.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="signature">
|
||
|
|
<p><em>"Every mistake is a stitch in the grand design. Just like the Bayeux Tapestry, our blunders become golden threads in the story we're all telling."</em></p>
|
||
|
|
<p style="margin-top: 1rem; color: var(--gold);">— Alvin Jones, Houston to the Dome</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|