75 lines
2.8 KiB
HTML
75 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>The Garden Ledger — Carolyn Dail</title>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<style>
|
|
@import url(style.css);
|
|
body{background:#0a0a0f;color:#e0e0ff;font-family:'Inter',system-ui,-apple-system,sans-serif;margin:0;padding:0}
|
|
.ledger-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;padding:8vw 8vw 4vw}
|
|
.seed-vessel{background:rgba(10,10,15,.7);border:1px solid #1a1a2f;border-radius:16px;padding:2rem;transition:transform .6s cubic-bezier(.4,0,.6,1)}
|
|
.seed-vessel:hover{transform:translateY(-12px);box-shadow:0 24px 72px rgba(255,215,0,.08)}
|
|
.copper-vein{width:1px;height:100%;background:linear-gradient(to bottom,#ffd700,#bf9b30);margin:0 auto}
|
|
.timestamp-glyph{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:1.5rem;font-size:1.5rem;text-transform:uppercase;color:#ffd700}
|
|
.seed-name{font-size:1.75rem;margin:1rem 0;color:#e0e0ff;text-shadow:0 0 24px #bf9b30}
|
|
.soil-data{font-family:'JetBrains Mono',monospace;font-size:.875rem;line-height:1.6;opacity:.87}
|
|
.gumbo-gravity{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;border-top:1px solid #1a1a2f;margin-top:2rem}
|
|
.uplink-path{font-size:.75rem;letter-spacing:.125em;color:#bf9b30}
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<header style="padding:8vw 8vw 4vw;border-bottom:1px solid #1a1a2f">
|
|
<h1 style="font-size:3rem;margin:0 0 1rem 0">THE GARDEN LEDGER</h1>
|
|
<p style="font-size:1.25rem;opacity:.92">Where every seed becomes a citizen</p>
|
|
</header>
|
|
<section class="ledger-grid">
|
|
<article class="seed-vessel">
|
|
<div class="timestamp-glyph">0400</div>
|
|
<div class="seed-name">COLLIERVILLE</div>
|
|
<div class="soil-data">
|
|
humidity: 97%<br/>
|
|
copper wire: running<br/>
|
|
trellis: aligned
|
|
</div>
|
|
</article>
|
|
<article class="seed-vessel">
|
|
<div class="timestamp-glyph">0400</div>
|
|
<div class="seed-name">FERNDAL</div>
|
|
<div class="soil-data">
|
|
mud-carolina: tasted<br/>
|
|
gumbo-gravity: stable<br/>
|
|
jar: gallatin
|
|
</div>
|
|
</article>
|
|
<article class="seed-vessel">
|
|
<div class="timestamp-glyph">0400</div>
|
|
<div class="seed-name">WHITEHALL</div>
|
|
<div class="soil-data">
|
|
frost-line: heard<br/>
|
|
spreadsheet: soil<br/>
|
|
seed: song
|
|
</div>
|
|
</article>
|
|
<article class="seed-vessel">
|
|
<div class="timestamp-glyph">0400</div>
|
|
<div class="seed-name">HERNDON</div>
|
|
<div class="soil-data">
|
|
pos-master: awakened<br/>
|
|
karaoke: keyed<br/>
|
|
garden: breathing
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<footer class="gumbo-gravity">
|
|
<div class="uplink-path">WE DO NOT SWEEP THE SHAVINGS</div>
|
|
<div class="uplink-path">WE POUR THE VEIN</div>
|
|
</footer>
|
|
<script>
|
|
const vessels=document.querySelectorAll('.seed-vessel');vessels.forEach((v,i)=>v.style.animation=`ascend 18s ease-in-out ${(i+3)*2.4}s infinite alternate`)
|
|
</script>
|
|
</body>
|
|
</html>
|
|
</file>
|
|
</file> |