opencd: murdock prototype — opencd.css + three templates (jewel-case, leaflet, back-tray)
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:
parent
f3d4fc1626
commit
e3dbfa2fd1
GPG key ID:
ABE295FFEB4571F8
4 changed files with 1090 additions and 0 deletions
152
templates/back-tray.html
Normal file
152
templates/back-tray.html
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenCD · Back Tray</title>
|
||||
<link rel="stylesheet" href="../opencd.css">
|
||||
<style>
|
||||
/* Demo page chrome */
|
||||
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;
|
||||
flex-wrap: wrap;
|
||||
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-footnote {
|
||||
font-size: .75rem;
|
||||
color: var(--gray-6);
|
||||
text-align: center;
|
||||
max-width: 480px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Back-tray specific layout
|
||||
============================================================ */
|
||||
/* Wrap the back-tray in a jewel-case frame */
|
||||
.demo-tray-container {
|
||||
width: var(--cd-jewel-width);
|
||||
border-radius: var(--cd-jewel-radius);
|
||||
box-shadow: var(--cd-jewel-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============================================================
|
||||
BACK TRAY — Tracklist & Credits
|
||||
============================================================ -->
|
||||
<div class="demo-tray-container">
|
||||
|
||||
<div class="back-tray cd-grid--crosshatch">
|
||||
|
||||
<!-- Left spine -->
|
||||
<nav class="cd-spine cd-spine--side">
|
||||
<span class="spine-label">OPENCD</span>
|
||||
<span class="spine-track">03 · back-tray</span>
|
||||
</nav>
|
||||
|
||||
<!-- Credits / tracklist -->
|
||||
<section class="tray-credits">
|
||||
|
||||
<span class="credits-label">Tracklist</span>
|
||||
<ol>
|
||||
<li>jewel-case</li>
|
||||
<li>leaflet</li>
|
||||
<li>back-tray</li>
|
||||
<li>human-advisory</li>
|
||||
<li>disc-art</li>
|
||||
<li>spine-navigation</li>
|
||||
<li>grid-overlay</li>
|
||||
<li>print-layout</li>
|
||||
</ol>
|
||||
|
||||
<span class="credits-label">Credits</span>
|
||||
<p>
|
||||
<strong>Design & Architecture</strong><br>
|
||||
Hannibal · Face
|
||||
</p>
|
||||
<p>
|
||||
<strong>Engineering & Prototypes</strong><br>
|
||||
Murdock · B.A. Baracus
|
||||
</p>
|
||||
<p>
|
||||
<strong>Quality & Verification</strong><br>
|
||||
Amy Amanda Allen
|
||||
</p>
|
||||
|
||||
<span class="credits-label">Technical</span>
|
||||
<p>
|
||||
Built on Open Props v2 · Pure CSS framework · No build step required<br>
|
||||
ISO 15727 jewel case dimensions · 2× display scale<br>
|
||||
GPG-signed commits · A-Team design collective
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Right spine -->
|
||||
<nav class="cd-spine cd-spine--side">
|
||||
<span class="spine-label">TRENTUNA</span>
|
||||
<span class="spine-track">MMXXV</span>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo controls -->
|
||||
<div class="demo-controls">
|
||||
<label>
|
||||
<input type="checkbox" id="toggle-grid" checked onchange="document.querySelector('.back-tray').classList.toggle('cd-grid--crosshatch', this.checked)">
|
||||
Show grid
|
||||
</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">
|
||||
Back tray paper insert (151 × 118 mm physical) with dual spines, tracklist, and production credits · Grid overlay inspired by trentuna.com paper-card aesthetic
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setScale(scale) {
|
||||
document.documentElement.style.setProperty('--cd-scale', scale);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
131
templates/jewel-case.html
Normal file
131
templates/jewel-case.html
Normal 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>
|
||||
184
templates/leaflet.html
Normal file
184
templates/leaflet.html
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenCD · Leaflet</title>
|
||||
<link rel="stylesheet" href="../opencd.css">
|
||||
<style>
|
||||
/* Demo page chrome */
|
||||
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;
|
||||
flex-wrap: wrap;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.demo-controls button {
|
||||
padding: .5rem 1rem;
|
||||
border: 1px solid var(--gray-6);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--gray-0);
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: background var(--cd-transition-duration);
|
||||
}
|
||||
|
||||
.demo-controls button:hover {
|
||||
background: var(--gray-2);
|
||||
}
|
||||
|
||||
.demo-controls button:disabled {
|
||||
opacity: .4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.demo-controls .page-indicator {
|
||||
font-family: var(--font-mono);
|
||||
font-size: .875rem;
|
||||
color: var(--gray-6);
|
||||
min-width: 8ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-footnote {
|
||||
font-size: .75rem;
|
||||
color: var(--gray-6);
|
||||
text-align: center;
|
||||
max-width: 480px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Leaflet-specific overrides for multi-page demo
|
||||
============================================================ */
|
||||
.leaflet-content--multi {
|
||||
max-width: calc(var(--cd-leaflet-size) + var(--cd-space-inset) * 2);
|
||||
}
|
||||
|
||||
.leaflet-pages {
|
||||
display: flex;
|
||||
gap: var(--cd-space-stack);
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.leaflet-pages .leaflet-page {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leaflet-pages .leaflet-page[data-leaflet-active="true"] {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============================================================
|
||||
LEAFLET — Multi-page booklet
|
||||
============================================================ -->
|
||||
<main class="cd-jewel-case" style="width: auto; box-shadow: none; background: transparent;">
|
||||
|
||||
<div class="cd-jewel-inner" style="grid-column:1/-1; gap: var(--cd-space-inset);">
|
||||
|
||||
<section class="leaflet-content leaflet-content--multi cd-grid--crosshatch">
|
||||
|
||||
<div class="leaflet-pages" id="pages">
|
||||
|
||||
<article class="leaflet-page" data-leaflet-page="0" data-leaflet-active="true">
|
||||
<h1>Design Notes</h1>
|
||||
<p>This booklet is a demonstration of the leaflet component — the insert booklet found inside a standard CD jewel case. Each page measures 120 × 120 mm (240px at 2× scale), matching the ISO 15727 standard for CD packaging.</p>
|
||||
<span class="leaflet-meta">Page 1 of 4 · v0.1.0</span>
|
||||
</article>
|
||||
|
||||
<article class="leaflet-page" data-leaflet-page="1" data-leaflet-active="false">
|
||||
<h1>Architecture</h1>
|
||||
<p>OpenCD is built on Open Props — a design token framework by Adam Argyle. Every dimension, color, and spacing value maps to a custom property, with fallback values for standalone use. The framework includes:</p>
|
||||
<ul style="margin-left:1rem; color:var(--cd-text-secondary); line-height:1.6;">
|
||||
<li>CD dimension tokens at 2× scale</li>
|
||||
<li>Semantic color aliases on Open Props</li>
|
||||
<li>ASW-inspired surface layers</li>
|
||||
<li>Visible grid overlays (tray paper aesthetic)</li>
|
||||
</ul>
|
||||
<span class="leaflet-meta">Page 2 of 4 · v0.1.0</span>
|
||||
</article>
|
||||
|
||||
<article class="leaflet-page" data-leaflet-page="2" data-leaflet-active="false">
|
||||
<h1>Token System</h1>
|
||||
<p>The variable layer defines ~40 custom properties organized into semantic groups:</p>
|
||||
<dl style="margin-top:.5rem; display:grid; gap:.25rem; font-size:var(--size-fluid-1);">
|
||||
<dt style="font-family:var(--font-mono); color:var(--gray-6);">--cd-jewel-width</dt>
|
||||
<dd style="color:var(--gray-7);">280px × scale</dd>
|
||||
<dt style="font-family:var(--font-mono); color:var(--gray-6);">--cd-surface-1</dt>
|
||||
<dd style="color:var(--gray-7);">oklch(30% .015 265)</dd>
|
||||
<dt style="font-family:var(--font-mono); color:var(--gray-6);">--cd-font-label</dt>
|
||||
<dd style="color:var(--gray-7);">font-neo-grotesque</dd>
|
||||
</dl>
|
||||
<span class="leaflet-meta">Page 3 of 4 · v0.1.0</span>
|
||||
</article>
|
||||
|
||||
<article class="leaflet-page" data-leaflet-page="3" data-leaflet-active="false">
|
||||
<h1>Credits</h1>
|
||||
<p>OpenCD is a project of the A-Team design collective — a framework for physical-digital design artifacts that bridge the gap between print packaging and web implementations.</p>
|
||||
<p style="margin-top:.5rem;">Design: Hannibal & Face<br>Engineering: Murdock & B.A.<br>Quality: Amy</p>
|
||||
<span class="leaflet-meta">Page 4 of 4 · MMXXV</span>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Human Advisory badge (small) -->
|
||||
<aside class="human-advisory" style="position:static; align-self:flex-end;">
|
||||
<span class="advisory-row advisory-row--black">PROTOTYPE</span>
|
||||
<span class="advisory-row advisory-row--white">OPENCD v0.1</span>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Demo controls -->
|
||||
<div class="demo-controls">
|
||||
<button id="prev-btn" onclick="flipPage(-1)" disabled>← Prev</button>
|
||||
<span class="page-indicator" id="page-indicator">Page 1 / 4</span>
|
||||
<button id="next-btn" onclick="flipPage(1)">Next →</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-footnote">
|
||||
Leaflet booklet demo · 4-page layout at 120 × 120 mm each · Page-turn via inline JS
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentPage = 0;
|
||||
const totalPages = 4;
|
||||
|
||||
function flipPage(direction) {
|
||||
const pages = document.querySelectorAll('.leaflet-page');
|
||||
const old = currentPage;
|
||||
|
||||
currentPage = Math.max(0, Math.min(totalPages - 1, currentPage + direction));
|
||||
|
||||
if (old === currentPage) return;
|
||||
|
||||
pages[old].dataset.leafletActive = 'false';
|
||||
pages[currentPage].dataset.leafletActive = 'true';
|
||||
|
||||
document.getElementById('page-indicator').textContent = 'Page ' + (currentPage + 1) + ' / ' + totalPages;
|
||||
document.getElementById('prev-btn').disabled = currentPage === 0;
|
||||
document.getElementById('next-btn').disabled = currentPage === totalPages - 1;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue