127 lines
4.3 KiB
HTML
127 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Origin Point | Belinda Barnes</title>
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Origin Point | Belinda Barnes">
|
||
<meta property="og:description" content="for(let i=0;i ">
|
||
<meta property="og:image" content="https://nssdc.gsfc.nasa.gov/nasa/images/lake_superior_winter.jpg">
|
||
<meta property="og:url" content="https://belinda-barnes.4ort.net/origin-point.html">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="description" content="for(let i=0;i '); I was born where the soil remembers the loon's cry. Not a metaphor. A coordinate. LAT 42° 32′ 14″ N • WARREN, MICHIGAN • MACOMB COUNTY…">
|
||
<style>
|
||
:root {
|
||
--deep-space: #0C0C0E;
|
||
--starlight: #E8E8E8;
|
||
--bus-yellow: #FFD700;
|
||
--ice-blue: #4A90E2;
|
||
--sourdough: #D4A574;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html, body {
|
||
height: 100%;
|
||
background: var(--deep-space);
|
||
color: var(--starlight);
|
||
font-family: 'Courier New', monospace;
|
||
overflow-x: hidden;
|
||
}
|
||
.coordinate-grid {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
grid-template-columns: repeat(24, 1fr);
|
||
grid-template-rows: repeat(24, 1fr);
|
||
gap: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
.grid-cell {
|
||
border: 1px solid rgba(232, 232, 232, 0.03);
|
||
}
|
||
.origin-statement {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 80ch;
|
||
margin: 20vh auto;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
}
|
||
.latitude-line {
|
||
color: var(--ice-blue);
|
||
font-size: 1.2em;
|
||
letter-spacing: 0.1em;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.longitude-line {
|
||
color: var(--bus-yellow);
|
||
font-size: 1.2em;
|
||
letter-spacing: 0.1em;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
}
|
||
.ground-truth {
|
||
border-left: 3px solid var(--sourdough);
|
||
padding-left: 2rem;
|
||
margin-top: 4rem;
|
||
font-size: 0.9em;
|
||
opacity: 0.85;
|
||
}
|
||
img {
|
||
width: 100vw;
|
||
height: 40vh;
|
||
object-fit: cover;
|
||
filter: sepia(0.4) hue-rotate(280deg) saturate(1.8);
|
||
margin-bottom: 3rem;
|
||
}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<div class="coordinate-grid">
|
||
<!-- 576 cells of pure geometry -->
|
||
<script>for(let i=0;i<576;i++)document.write('<div class="grid-cell"></div>');<\/script>
|
||
</div>
|
||
|
||
<img src="https://nssdc.gsfc.nasa.gov/nasa/images/lake_superior_winter.jpg" alt="Lake Superior's frozen spine">
|
||
|
||
<section class="origin-statement">
|
||
I was born where the soil remembers the loon's cry.
|
||
|
||
Not a metaphor. A coordinate.
|
||
|
||
<line class="latitude-line">
|
||
<span>LAT 42° 32′ 14″ N</span>
|
||
<span>•</span>
|
||
<span>WARREN, MICHIGAN</span>
|
||
<span>•</span>
|
||
<span>MACOMB COUNTY</span>
|
||
</line>
|
||
<line class="longitude-line">
|
||
<span>LON 82° 58′ 47″ W</span>
|
||
<span>•</span>
|
||
<span>INCEPTION 1818</span>
|
||
<span>•</span>
|
||
<span>CENTER LINE</span>
|
||
</line>
|
||
|
||
<div class="ground-truth">
|
||
Postal Code 48093. Central Time Zone. The southernmost tip of Macomb County where the Detroit River's tide still turns.
|
||
<br><br>
|
||
Three feet, six inches is the depth where the wood meets the ice. Your clay joint dry-fits true.
|
||
</div>
|
||
</section>
|
||
|
||
<nav style="position:fixed;bottom:2rem;left:2rem;font-size:0.8em;">
|
||
<a href="/" style="color:var(--bus-yellow);text-decoration:none;margin-right:2rem;">HOME</a>
|
||
<a href="/first-route.html" style="color:var(--ice-blue);text-decoration:none;">FIRST ROUTE</a>
|
||
</nav>
|
||
</body>
|
||
</html>
|
||
</section>
|
||
</body>
|
||
</html> |