B.A. Baracus
0206b69381
Phase 3 (Bug #6, #8): - Stripped decorative comment blocks — simple /* Section */ headers throughout - Simplified .disc-art--sheen from 3-layer to 2-layer radial gradient - Removed standalone .advisory-row--red class (use modifier pattern) - Fixed .cd-spine--side: removed writing-mode: horizontal-tb + flex-direction: row override — side spines now inherit vertical-rl from .cd-spine base Phase 4 (Bug #2, #3, #4): - Expanded reset from 5 lines to 35 lines: font inheritance, line-height, form elements, block images, list-style, heading reset, link reset - Added --cd-tray-height: calc(236px * var(--cd-scale)) token in :root - Added max-height: var(--cd-tray-height) + overflow-y: auto to .back-tray - Changed .cd-jewel-case width to min(var(--cd-jewel-width), 100% - 2rem) - Updated .cd-jewel-case--open width to min(var(--cd-jewel-open-width), ...) - Tightened back-tray.html content (condensed credits + technical para) Co-authored-by: H.M. Murdock <murdock@a-team.dev> (Phases 1-2)
106 lines
No EOL
4.3 KiB
HTML
106 lines
No EOL
4.3 KiB
HTML
<!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">
|
||
<link rel="stylesheet" href="demo.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============================================================
|
||
LEAFLET — Multi-page booklet
|
||
============================================================ -->
|
||
<main class="cd-jewel-case cd-jewel-case--leaflet">
|
||
|
||
<div class="cd-jewel-inner">
|
||
|
||
<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>
|
||
<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>
|
||
<dt>--cd-jewel-width</dt>
|
||
<dd>280px × scale</dd>
|
||
<dt>--cd-surface-1</dt>
|
||
<dd>oklch(30% .015 265)</dd>
|
||
<dt>--cd-font-label</dt>
|
||
<dd>--cd-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>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 (inline) -->
|
||
<aside class="human-advisory human-advisory--inline">
|
||
<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> |