phase: ba trim+reset+dimension fixes — opencd.css to 305 lines, tray constraint, spine fix
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)
This commit is contained in:
parent
5483f7c02e
commit
0206b69381
GPG key ID:
D52E9C8491872206
5 changed files with 329 additions and 792 deletions
|
|
@ -5,59 +5,7 @@
|
|||
<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-sans);
|
||||
}
|
||||
|
||||
.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>
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
116
templates/demo.css
Normal file
116
templates/demo.css
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
/* OpenCD — Demo page chrome (not framework component CSS)
|
||||
Shared by jewel-case.html, back-tray.html, leaflet.html
|
||||
All --cd-* tokens defined in opencd.css */
|
||||
|
||||
|
||||
/* ── Shared demo layout ── */
|
||||
|
||||
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(--cd-font-label);
|
||||
}
|
||||
|
||||
.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(--cd-advisory-red);
|
||||
}
|
||||
|
||||
.demo-controls select {
|
||||
padding: .25rem .5rem;
|
||||
border: 1px solid var(--cd-text-muted);
|
||||
border-radius: var(--cd-jewel-radius);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.demo-footnote {
|
||||
font-size: .75rem;
|
||||
color: var(--cd-text-muted);
|
||||
text-align: center;
|
||||
max-width: 480px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
/* ── Back-tray demo wrapper ── */
|
||||
|
||||
.demo-tray-container {
|
||||
width: var(--cd-jewel-width);
|
||||
max-height: var(--cd-tray-height);
|
||||
border-radius: var(--cd-jewel-radius);
|
||||
box-shadow: var(--cd-jewel-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* ── Leaflet-specific demo overrides ── */
|
||||
|
||||
.demo-controls {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-controls button {
|
||||
padding: .5rem 1rem;
|
||||
border: 1px solid var(--cd-text-muted);
|
||||
border-radius: var(--cd-jewel-radius);
|
||||
background: var(--cd-surface-0);
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: background var(--cd-transition-duration);
|
||||
}
|
||||
|
||||
.demo-controls button:hover {
|
||||
background: var(--cd-grid-color);
|
||||
}
|
||||
|
||||
.demo-controls button:disabled {
|
||||
opacity: .4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.demo-controls .page-indicator {
|
||||
font-family: var(--cd-font-mono);
|
||||
font-size: .875rem;
|
||||
color: var(--cd-text-muted);
|
||||
min-width: 8ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -5,54 +5,7 @@
|
|||
<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-sans);
|
||||
}
|
||||
|
||||
.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>
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,94 +5,16 @@
|
|||
<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-sans);
|
||||
}
|
||||
|
||||
.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>
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============================================================
|
||||
LEAFLET — Multi-page booklet
|
||||
============================================================ -->
|
||||
<main class="cd-jewel-case" style="width: auto; box-shadow: none; background: transparent;">
|
||||
<main class="cd-jewel-case cd-jewel-case--leaflet">
|
||||
|
||||
<div class="cd-jewel-inner" style="grid-column:1/-1; gap: var(--cd-space-inset);">
|
||||
<div class="cd-jewel-inner">
|
||||
|
||||
<section class="leaflet-content leaflet-content--multi cd-grid--crosshatch">
|
||||
|
||||
|
|
@ -107,7 +29,7 @@
|
|||
<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;">
|
||||
<ul>
|
||||
<li>CD dimension tokens at 2× scale</li>
|
||||
<li>Semantic color aliases on Open Props</li>
|
||||
<li>ASW-inspired surface layers</li>
|
||||
|
|
@ -119,13 +41,13 @@
|
|||
<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);">--cd-font-neo-grotesque</dd>
|
||||
<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>
|
||||
|
|
@ -133,15 +55,15 @@
|
|||
<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>
|
||||
<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 (small) -->
|
||||
<aside class="human-advisory" style="position:static; align-self:flex-end;">
|
||||
<!-- 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue