120 lines
3.6 KiB
HTML
120 lines
3.6 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>
|
|||
|
|
<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>
|