trentuna/opencd
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

opencd: murdock prototype — opencd.css + three templates (jewel-case, leaflet, back-tray)

Browse source 
Prototype build incorporating Amy's gate review findings:
- Custom --cd-surface-* tokens (oklch), not Open Props
- Custom --cd-grid-* tokens via gray-3/gray-2
- --cd-scale: 1 = default 2x display scale, all dims calc()
- --cd-font-label using font-neo-grotesque for spine legibility

Files:
- opencd.css (622 lines) — full monolith with variables, reset, components,
  grid overlays, advisory badge, print styles, responsive containers
- templates/jewel-case.html — front jewel case with spine + disc + advisory
- templates/leaflet.html — 4-page booklet with page-turn navigation
- templates/back-tray.html — back tray with tracklist, dual spines, grid

GPG: ABE295FFEB4571F8 — H.M. Murdock <murdock@a-team.dev>
This commit is contained in:
H.M. Murdock 2026-05-25 22:47:24 +02:00
parent f3d4fc1626
commit e3dbfa2fd1
Signed by: murdock
GPG key ID: ABE295FFEB4571F8
4 changed files with 1090 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

131
templates/jewel-case.html Normal file
View file

@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenCD · Jewel Case</title>
<link rel="stylesheet" href="../opencd.css">
<style>
/* Demo page chrome — not part of OpenCD */
body {
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 2rem;
background: oklch(92% .012 85);
font-family: var(--font-system-ui);
}
.demo-controls {
display: flex;
gap: 1rem;
align-items: center;
font-size: .875rem;
}
.demo-controls label {
display: flex;
align-items: center;
gap: .5rem;
cursor: pointer;
user-select: none;
}
.demo-controls input[type="checkbox"] {
accent-color: var(--red-6);
}
.demo-controls select {
padding: .25rem .5rem;
border: 1px solid var(--gray-5);
border-radius: var(--radius-2);
font-family: inherit;
}
.demo-footnote {
font-size: .75rem;
color: var(--gray-6);
text-align: center;
max-width: 480px;
line-height: 1.5;
}
</style>
</head>
<body>
<!-- ============================================================
JEWEL CASE — Closed (default)
============================================================ -->
<main class="cd-jewel-case" id="jewel" data-jewel-state="closed">
<!-- Spine -->
<nav class="cd-spine">
<span class="spine-label">OPENCD · TRENTUNA</span>
<span class="spine-track">01 · jewel-case</span>
</nav>
<!-- Inner content -->
<div class="cd-jewel-inner">
<!-- Leaflet content area with disc art -->
<section class="leaflet-content cd-grid">
<article class="leaflet-page" data-leaflet-page="0" data-leaflet-active="true">
<h1>Jewel Case</h1>
<p>A compact disc (CD) jewel case is a three-piece plastic case designed to hold standard audio CDs, CD-ROMs, and other optical media. This prototype recreates the physical form factor in pure HTML and CSS.</p>
<span class="leaflet-meta">142 × 125 mm · 2× scale</span>
</article>
</section>
<!-- Disc art -->
<div class="disc-art disc-art--sheen">
<span class="disc-hole">◉</span>
</div>
<!-- Human Advisory badge -->
<aside class="human-advisory human-advisory--red">
<span class="advisory-row advisory-row--black">HUMAN</span>
<span class="advisory-row advisory-row--white">ADVISORY</span>
<span class="advisory-row advisory-row--red">PROTOTYPE CODE</span>
</aside>
</div>
</main>
<!-- Demo controls -->
<div class="demo-controls">
<label>
<input type="checkbox" id="toggle-open" onchange="toggleOpen(this.checked)">
Open case
</label>
<label>
Scale:
<select id="scale-select" onchange="setScale(this.value)">
<option value="0.5">0.5× (1× physical)</option>
<option value="1" selected>1 (default 2×)</option>
<option value="1.5">1.5× (3×)</option>
<option value="2">2× (4×)</option>
</select>
</label>
</div>
<div class="demo-footnote">
An OpenCD prototype by H.M. Murdock · Built with Open Props · Pure CSS, no JS dependency
</div>
<script>
function toggleOpen(open) {
const jewel = document.getElementById('jewel');
jewel.dataset.jewelState = open ? 'open' : 'closed';
jewel.classList.toggle('cd-jewel-case--open', open);
}
function setScale(scale) {
document.documentElement.style.setProperty('--cd-scale', scale);
}
</script>
</body>
</html>