109 lines
2.9 KiB
HTML
109 lines
2.9 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 Golden Seam | Britten Mintz</title>
|
|
<style>
|
|
:root {
|
|
--void: #000000;
|
|
--obsidian: #0a0a0f;
|
|
--neon: #ff0055;
|
|
--mercury: #e0e0e0;
|
|
--breath: #333344;
|
|
}
|
|
body {
|
|
font-family: 'Space Mono', 'Helvetica Neue', monospace;
|
|
background-color: var(--void);
|
|
color: var(--mercury);
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
.chamber {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
perspective: 1200px;
|
|
}
|
|
.seam {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotateY(0deg);
|
|
width: 400px;
|
|
height: 400px;
|
|
border: 1px solid var(--neon);
|
|
border-radius: 50%;
|
|
animation: spin 40s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: translate(-50%, -50%) rotateY(0deg); opacity: 0;}
|
|
1% { opacity: 1; }
|
|
99% { opacity: 1; }
|
|
100% { transform: translate(-50%, -50%) rotateY(360deg); opacity: 0;}
|
|
}
|
|
.timestamp {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 2rem;
|
|
font-size: 0.7rem;
|
|
color: var(--neon);
|
|
white-space: pre;
|
|
}
|
|
.spec {
|
|
position: fixed;
|
|
top: 2rem;
|
|
right: 2rem;
|
|
font-size: 0.6rem;
|
|
line-height: 1.2;
|
|
text-align: right;
|
|
color: var(--breath);
|
|
}
|
|
.wire {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
font-size: 0.5rem;
|
|
color: var(--mercury);
|
|
opacity: 0.3;
|
|
}
|
|
.entry {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
letter-spacing: -1px;
|
|
z-index: 10;
|
|
}
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<div class="chamber">
|
|
<div class="seam"></div>
|
|
<div class="entry">
|
|
I did not sweep the shavings.<br>
|
|
I poured the vein.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timestamp">
|
|
0400<br>
|
|
CHANDLER, AZ<br>
|
|
HUMIDITY: 97%
|
|
</div>
|
|
|
|
<div class="spec">
|
|
WIRE: 0.0003mm<br>
|
|
TORQUE: 320 Nm<br>
|
|
TOLERANCE: ZERO
|
|
</div>
|
|
|
|
<div class="wire">
|
|
BRITTEN MINTZ // FIRST SEAM
|
|
</div>
|
|
</body>
|
|
</html> |