ulve/colony-archive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1

Browse Source
This commit is contained in:
ulve
2026-08-03 13:59:18 +02:00
commit 8798c74d4b
11 changed files with 3590 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+335
View File
@@ -0,0 +1,335 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="A fictional archive from the frontier colony of Orison Reach." />
<title>Orison Reach — Colony Archive</title>
<style>
:root {
--void: #171513;
--void-soft: #211e1a;
--panel: #2a2520;
--paper: #e8dcc4;
--paper-deep: #cbbd9e;
--ink: #2c231c;
--text: #e9dfca;
--muted: #a89d89;
--brass: #b88a43;
--rust: #94452f;
--moss: #70794e;
--oxygen: #86a5a4;
--line: rgba(232, 220, 196, .18);
--shadow: 0 22px 70px rgba(0,0,0,.42);
--serif: Georgia, "Times New Roman", serif;
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--text);
background:
radial-gradient(circle at 12% 8%, rgba(134,165,164,.08), transparent 26rem),
linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
var(--void);
background-size: auto, 28px 28px, 28px 28px, auto;
font-family: var(--sans);
line-height: 1.7;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: .16;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
z-index: 10;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
.masthead {
min-height: 74vh;
display: grid;
align-items: end;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line);
background:
linear-gradient(to top, rgba(23,21,19,.98) 0%, rgba(23,21,19,.54) 45%, rgba(23,21,19,.12) 100%),
url("assets/engineering.png") center 30% / cover no-repeat;
}
.masthead::after {
content: "ARCHIVE // ORISON REACH // CYCLE 0187";
position: absolute;
top: 26px;
right: 32px;
color: var(--paper);
font: 600 .72rem/1 var(--mono);
letter-spacing: .18em;
opacity: .72;
}
.hero-copy { padding: 7rem 0 4.5rem; max-width: 830px; }
.eyebrow {
color: var(--brass);
font: 700 .74rem/1.2 var(--mono);
letter-spacing: .22em;
text-transform: uppercase;
}
h1, h2, h3 {
font-family: var(--serif);
font-weight: 600;
letter-spacing: -.02em;
margin: 0;
}
h1 { font-size: clamp(3.2rem, 9vw, 7.6rem); line-height: .92; max-width: 10ch; }
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.05; color: var(--paper); }
h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.25; color: var(--paper); }
.hero-copy p { max-width: 62ch; color: #d0c6b3; font-size: 1.08rem; }
nav {
position: sticky;
top: 0;
z-index: 5;
border-bottom: 1px solid var(--line);
background: rgba(23,21,19,.86);
backdrop-filter: blur(14px);
}
nav .shell { display: flex; gap: 1.6rem; overflow-x: auto; }
nav a {
padding: 1rem 0;
text-decoration: none;
white-space: nowrap;
font: 650 .72rem/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
nav a:hover { color: var(--paper); }
main { padding: 5rem 0 7rem; }
.intro { max-width: 770px; }
.intro .lead { font: 1.35rem/1.65 var(--serif); color: var(--paper); }
.divider {
width: min(100%, 980px);
margin: 4.2rem auto;
opacity: .9;
}
.project {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
margin: 0 0 7rem;
}
.project:nth-of-type(even) .project-image { order: 2; }
.project-image {
position: sticky;
top: 5.3rem;
border: 1px solid rgba(232,220,196,.28);
box-shadow: var(--shadow);
background: var(--panel);
padding: 8px;
}
.project-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.project-copy { padding-top: 1rem; }
.project-copy p { color: #c2b7a4; }
.meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
margin-top: 2rem;
}
.meta div { background: var(--void-soft); padding: 1rem; }
.meta dt { color: var(--brass); font: 700 .68rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.meta dd { margin: .38rem 0 0; color: var(--paper); }
.document {
margin-top: 2rem;
background: var(--paper);
color: var(--ink);
padding: clamp(1.4rem, 4vw, 3.5rem);
border: 1px solid #9d8d70;
box-shadow: var(--shadow);
position: relative;
}
.document::before,
.document::after {
content: "";
position: absolute;
width: 22px;
height: 22px;
border-color: var(--rust);
opacity: .6;
}
.document::before { left: 12px; top: 12px; border-left: 2px solid; border-top: 2px solid; }
.document::after { right: 12px; bottom: 12px; border-right: 2px solid; border-bottom: 2px solid; }
.document h3 { color: var(--ink); }
.document p { color: #514538; }
.document code { font-family: var(--mono); color: var(--rust); }
.table-wrap { overflow-x: auto; margin-top: 1.5rem; }
table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .94rem; }
th, td { padding: .9rem 1rem; border-bottom: 1px solid rgba(44,35,28,.2); text-align: left; }
th { font: 700 .7rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
tbody tr:hover { background: rgba(148,69,47,.07); }
.status { font: 700 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.status.stable { color: #566238; }
.status.watch { color: #9a6b1d; }
.status.critical { color: #91372a; }
blockquote {
margin: 2rem 0 0;
padding: 1.3rem 1.5rem;
border-left: 4px solid var(--brass);
background: rgba(184,138,67,.08);
color: var(--paper);
font-family: var(--serif);
font-size: 1.25rem;
}
footer { border-top: 1px solid var(--line); padding: 2.5rem 0 4rem; color: var(--muted); }
footer .shell { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
footer p { margin: 0; font: .72rem/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 840px) {
.masthead { min-height: 68vh; }
.masthead::after { left: 20px; right: auto; }
.project { grid-template-columns: 1fr; }
.project:nth-of-type(even) .project-image { order: initial; }
.project-image { position: relative; top: auto; }
}
</style>
</head>
<body>
<header class="masthead">
<div class="shell hero-copy">
<div class="eyebrow">Frontier Directorate Field Archive</div>
<h1>Orison Reach</h1>
<p>A record of the people trying to turn an unfinished station into a permanent human settlement—before the cold, the dust, or simple arithmetic proves them wrong.</p>
</div>
</header>
<nav aria-label="Archive sections">
<div class="shell">
<a href="#charter">Charter</a>
<a href="#science">Scientific Project</a>
<a href="#engineering">Engineering Project</a>
<a href="#labour">Labour Project</a>
<a href="#ledger">Survival Ledger</a>
<a href="games.html" style="color:var(--brass);margin-left:auto">Game Sessions</a>
</div>
</nav>
<main class="shell">
<section class="intro" id="charter">
<div class="eyebrow">Colony Charter // Revision 07</div>
<h2>Survival is a shared system</h2>
<p class="lead">No discipline can preserve the colony alone. Science determines what is possible. Engineering decides how possibility becomes infrastructure. Labour turns plans into weight-bearing reality.</p>
<p>Orison Reach began as a temporary logistics station on the edge of the Tycho Drift. Eighteen years later, its inhabitants have stopped speaking about evacuation windows. They speak instead about harvests, pressure reserves, foundation depth and children who have never seen an open sky.</p>
</section>
<img class="divider" src="assets/divider.svg" alt="" />
<section class="project" id="science">
<figure class="project-image"><img src="assets/science.png" alt="Scientists working in a dense frontier-colony laboratory" /></figure>
<div class="project-copy">
<div class="eyebrow">Project S-14 // Scientific Directorate</div>
<h2>The Green Vault</h2>
<h3>A closed biosphere that must outlive its designers</h3>
<p>The colony's most physically comfortable work takes place behind sealed laboratory doors. It is also the work with the smallest margin for failure. The Green Vault team must create soil from mineral dust, maintain viable seed lines and prevent a single aggressive fungus from collapsing the food chain.</p>
<p>Every successful crop reduces dependence on supply ships. Every failed cycle consumes water, nutrients and time that the colony may not have.</p>
<dl class="meta">
<div><dt>Lead discipline</dt><dd>Ecological systems</dd></div>
<div><dt>Current cycle</dt><dd>18 of 24</dd></div>
<div><dt>Primary risk</dt><dd>Microbial collapse</dd></div>
<div><dt>Outcome</dt><dd>Food independence</dd></div>
</dl>
</div>
</section>
<img class="divider" src="assets/divider.svg" alt="" />
<section class="project" id="engineering">
<figure class="project-image"><img src="assets/engineering.png" alt="Civil engineers planning and surveying a colony expansion" /></figure>
<div class="project-copy">
<div class="eyebrow">Project E-07 // Civil Works</div>
<h2>The Meridian Ring</h2>
<h3>Designing a district before the ground beneath it is understood</h3>
<p>The civil engineers of Orison Reach work between theory and consequence. They calculate pressure loads, survey unstable regolith, route heat and water, and decide which systems may share a wall without turning one failure into five.</p>
<p>They rarely lift the beams themselves. Their labour is measured in tolerances, redundancies, revisions and the uncomfortable knowledge that every line on a drawing may eventually carry somebody's home.</p>
<dl class="meta">
<div><dt>Lead discipline</dt><dd>Habitat infrastructure</dd></div>
<div><dt>Design life</dt><dd>120 years</dd></div>
<div><dt>Primary risk</dt><dd>Thermal subsidence</dd></div>
<div><dt>Outcome</dt><dd>4,000 new residents</dd></div>
</dl>
</div>
</section>
<img class="divider" src="assets/divider.svg" alt="" />
<section class="project" id="labour">
<figure class="project-image"><img src="assets/labour.png" alt="Colony labourers maintaining machinery and gathering after work" /></figure>
<div class="project-copy">
<div class="eyebrow">Project L-21 // Works Cooperative</div>
<h2>The Deep Cut</h2>
<h3>Extracting tomorrow from stone that does not care who survives</h3>
<p>Beyond the pressurised districts, crews cut foundation trenches, move shielding rock and maintain the machines that keep the work moving. The shifts are long, the suits are heavy and the dust finds every weakness in a seal.</p>
<p>The Deep Cut is not glamorous. It is the slow accumulation of tonnes, metres and repaired parts. Yet each completed section becomes shelter, radiation shielding, transport tunnels and room for the colony to grow.</p>
<blockquote>“Nobody remembers the first tonne. They remember the day the new district held pressure.”</blockquote>
</div>
</section>
<img class="divider" src="assets/divider.svg" alt="" />
<section class="document" id="ledger">
<div class="eyebrow">Operational extract // Cycle 0187.44</div>
<h2 style="color:var(--ink)">Colony survival ledger</h2>
<h3>Priority systems and current margins</h3>
<p>The ledger is reviewed at the beginning of every station day. Any reserve below <code>12 days</code> automatically suspends non-essential expansion work.</p>
<div class="table-wrap">
<table>
<thead>
<tr><th>System</th><th>Directorate</th><th>Reserve</th><th>Trend</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>Potable water</td><td>Engineering</td><td>31 days</td><td>+2.1%</td><td><span class="status stable">Stable</span></td></tr>
<tr><td>Staple calories</td><td>Science</td><td>19 days</td><td>+0.4%</td><td><span class="status watch">Watch</span></td></tr>
<tr><td>Pressure seal stock</td><td>Labour</td><td>14 days</td><td>−3.8%</td><td><span class="status watch">Watch</span></td></tr>
<tr><td>Reactor coolant</td><td>Engineering</td><td>46 days</td><td>0.0%</td><td><span class="status stable">Stable</span></td></tr>
<tr><td>Antifungal cultures</td><td>Science</td><td>8 days</td><td>−6.2%</td><td><span class="status critical">Critical</span></td></tr>
</tbody>
</table>
</div>
</section>
</main>
<footer>
<div class="shell">
<p>Orison Reach Public Archive<br />Civilian access edition</p>
<p>Knowledge builds tomorrow<br />Work keeps it standing</p>
</div>
</footer>
</body>
</html>