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
796
opencd.css
796
opencd.css
|
|
@ -1,712 +1,310 @@
|
||||||
/* ==========================================================================
|
/* OpenCD — CD Jewel Case CSS Framework */
|
||||||
OpenCD — CD Jewel Case CSS Framework (Production)
|
|
||||||
Author: B.A. Baracus <ba@a-team.dev>
|
|
||||||
Base: Open Props v2 via unpkg
|
|
||||||
Principle: Zero magic numbers — every value is a --cd-* custom property
|
|
||||||
ASW Semantic: surface layers, grid overlays, data-attribute API
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@import "https://unpkg.com/open-props";
|
@import "https://unpkg.com/open-props";
|
||||||
|
|
||||||
/* ==========================================================================
|
/* 1. Tokens — all --cd-* custom properties */
|
||||||
1. Custom Properties — All --cd-* Tokens
|
|
||||||
Components MUST NOT reference Open Props directly.
|
|
||||||
Users override these on :root or a scoped container to theme.
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
/* Physical dimensions (ISO 15727, 2× scale): scale=1 = 2×, 0.5 = 1×, 2 = 4× */
|
||||||
Physical CD Dimensions (at 2× scale, ISO 15727)
|
|
||||||
Formula: calc(<mm> * 2px / 1mm) = <px>
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-scale: 1;
|
--cd-scale: 1;
|
||||||
/* --cd-scale: 1 = default 2× display scale. 0.5 = 1×, 2 = 4×, etc. */
|
--cd-jewel-width: calc(280px * var(--cd-scale));
|
||||||
|
--cd-jewel-height: calc(245px * var(--cd-scale));
|
||||||
--cd-jewel-width: calc(280px * var(--cd-scale)); /* 142 mm × 2 */
|
--cd-jewel-open-width: calc(560px * var(--cd-scale));
|
||||||
--cd-jewel-height: calc(245px * var(--cd-scale)); /* 125 mm × 2 */
|
--cd-disc-diameter: calc(240px * var(--cd-scale));
|
||||||
--cd-jewel-open-width: calc(560px * var(--cd-scale)); /* 284 mm × 2 */
|
--cd-disc-hole: calc(30px * var(--cd-scale));
|
||||||
--cd-disc-diameter: calc(240px * var(--cd-scale)); /* 120 mm × 2 */
|
--cd-leaflet-size: calc(240px * var(--cd-scale));
|
||||||
--cd-disc-hole: calc(30px * var(--cd-scale)); /* Ø15 mm × 2 */
|
--cd-spine-width: calc(14px * var(--cd-scale));
|
||||||
--cd-leaflet-size: calc(240px * var(--cd-scale)); /* 120 mm sq × 2 */
|
--cd-tray-width: calc(260px * var(--cd-scale));
|
||||||
--cd-spine-width: calc(14px * var(--cd-scale)); /* ~7 mm × 2 */
|
--cd-tray-height: calc(236px * var(--cd-scale));
|
||||||
--cd-tray-width: calc(260px * var(--cd-scale)); /* ~130 mm × 2 */
|
/* Surface layers (custom oklch) */
|
||||||
|
|
||||||
/* ── Derived aspect ratios ── */
|
|
||||||
--cd-aspect-jewel: 280 / 245;
|
|
||||||
--cd-aspect-leaflet: 1 / 1;
|
|
||||||
--cd-aspect-disc: 1 / 1;
|
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Surface Colors (ASW-style, oklch — NOT from Open Props)
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-surface-1: oklch(30% .015 265); /* tray paper base */
|
|
||||||
--cd-surface-2: oklch(35% .015 265); /* tray raised panel */
|
|
||||||
--cd-surface-3: oklch(40% .015 265); /* leaflet inner area */
|
|
||||||
--cd-surface-4: oklch(15% .01 265); /* spine background — darkest */
|
|
||||||
|
|
||||||
/* ── Surface 0 — lightest, used for jewel case body & leaflet pages ── */
|
|
||||||
--cd-surface-0: var(--gray-0);
|
--cd-surface-0: var(--gray-0);
|
||||||
|
--cd-surface-1: oklch(30% .015 265);
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
--cd-surface-2: oklch(35% .015 265);
|
||||||
Typography
|
--cd-surface-3: oklch(40% .015 265);
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
--cd-surface-4: oklch(15% .01 265);
|
||||||
|
/* Typography */
|
||||||
--cd-font-neo-grotesque: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
|
--cd-font-neo-grotesque: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
|
||||||
--cd-font-label: var(--cd-font-neo-grotesque); /* spine, metadata, credits */
|
--cd-font-label: var(--cd-font-neo-grotesque);
|
||||||
--cd-font-body: var(--font-serif); /* leaflet prose */
|
--cd-font-body: var(--font-serif);
|
||||||
--cd-font-mono: var(--font-mono-code, var(--font-mono));
|
--cd-font-mono: var(--font-mono-code, var(--font-mono));
|
||||||
|
/* Semantic colors */
|
||||||
--cd-font-size-body: var(--font-size-fluid-1);
|
|
||||||
--cd-font-size-title: var(--font-size-fluid-2);
|
|
||||||
--cd-font-size-display: var(--font-size-fluid-3);
|
|
||||||
|
|
||||||
/* ── Font weights ── */
|
|
||||||
--cd-font-weight-semibold: 600;
|
|
||||||
|
|
||||||
/* ── Spine font sizes ── */
|
|
||||||
--cd-spine-font-xs: var(--font-size-0);
|
|
||||||
--cd-spine-font-sm: var(--font-size-1);
|
|
||||||
--cd-spine-font-md: var(--font-size-2);
|
|
||||||
--cd-spine-font-lg: var(--font-size-3);
|
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Spacing
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-space-inset: var(--size-fluid-1);
|
|
||||||
--cd-space-stack: var(--size-fluid-2);
|
|
||||||
--cd-space-gutter: var(--size-fluid-3);
|
|
||||||
|
|
||||||
--cd-space-xs: var(--size-1); /* 4–5px */
|
|
||||||
--cd-space-sm: var(--size-2); /* 8–10px */
|
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Semantic Text Colors
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-text-primary: var(--gray-9);
|
--cd-text-primary: var(--gray-9);
|
||||||
--cd-text-secondary: var(--gray-7);
|
--cd-text-secondary: var(--gray-7);
|
||||||
--cd-text-muted: var(--gray-5);
|
--cd-text-muted: var(--gray-5);
|
||||||
--cd-text-on-spine: var(--gray-1);
|
--cd-text-on-spine: var(--gray-1);
|
||||||
--cd-text-opacity-muted: 0.8;
|
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Surface / Tray Mappings
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-tray-bg: var(--cd-surface-1);
|
|
||||||
--cd-tray-bg-raised: var(--cd-surface-2);
|
|
||||||
--cd-tray-bg-sunken: var(--cd-surface-3);
|
|
||||||
--cd-spine-bg: var(--cd-surface-4);
|
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Grid Colors (custom — NOT Open Props tokens)
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-grid-color: var(--gray-3);
|
|
||||||
--cd-grid-color-alt: var(--gray-2);
|
|
||||||
--cd-grid-fine: 4px;
|
|
||||||
--cd-grid-coarse: 8px;
|
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Advisory Badge
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-advisory-red: var(--red-6);
|
--cd-advisory-red: var(--red-6);
|
||||||
--cd-advisory-red-dark: var(--red-7);
|
--cd-advisory-red-dark: var(--red-7);
|
||||||
--cd-advisory-bg: var(--red-0);
|
--cd-advisory-bg: var(--red-0);
|
||||||
--cd-advisory-fg: #000;
|
--cd-advisory-fg: #000;
|
||||||
--cd-advisory-fg-inv: #fff;
|
--cd-advisory-fg-inv: #fff;
|
||||||
--cd-advisory-border: 2px solid var(--cd-advisory-fg);
|
|
||||||
--cd-advisory-font: 'Impact', 'Arial Black', var(--cd-font-label), sans-serif;
|
--cd-advisory-font: 'Impact', 'Arial Black', var(--cd-font-label), sans-serif;
|
||||||
|
--cd-text-opacity-muted: 0.8;
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
/* Surface/tray */
|
||||||
Jewel Case Decorations
|
--cd-tray-bg: var(--cd-surface-1);
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
--cd-tray-bg-raised: var(--cd-surface-2);
|
||||||
--cd-jewel-radius: var(--radius-2); /* 5px */
|
--cd-tray-bg-sunken: var(--cd-surface-3);
|
||||||
|
--cd-spine-bg: var(--cd-surface-4);
|
||||||
|
/* Grid */
|
||||||
|
--cd-grid-color: var(--gray-3);
|
||||||
|
--cd-grid-color-alt: var(--gray-2);
|
||||||
|
--cd-grid-fine: 4px;
|
||||||
|
--cd-grid-coarse: 8px;
|
||||||
|
/* Decorations */
|
||||||
|
--cd-jewel-radius: var(--radius-2);
|
||||||
--cd-jewel-shadow: var(--shadow-2);
|
--cd-jewel-shadow: var(--shadow-2);
|
||||||
--cd-jewel-shadow-raised: var(--shadow-3);
|
--cd-jewel-shadow-raised: var(--shadow-3);
|
||||||
--cd-leaflet-radius: var(--radius-3); /* 1rem */
|
--cd-leaflet-radius: var(--radius-3);
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Component Shadows (all rgba/rgb values defined here, not inline)
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-page-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
|
--cd-page-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
|
||||||
--cd-disc-hole-shadow: inset 0 0 3px rgb(0 0 0 / 0.15);
|
--cd-disc-hole-shadow: inset 0 0 3px rgb(0 0 0 / 0.15);
|
||||||
--cd-disc-shadow: inset 0 0 8px rgb(0 0 0 / 0.12);
|
--cd-disc-shadow: inset 0 0 8px rgb(0 0 0 / 0.12);
|
||||||
|
--cd-advisory-border: 2px solid var(--cd-advisory-fg);
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
/* Borders */
|
||||||
Borders & Dividers
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-tray-border-top: 1px solid var(--cd-grid-color);
|
--cd-tray-border-top: 1px solid var(--cd-grid-color);
|
||||||
--cd-track-border-bot: 1px solid var(--cd-grid-color-alt);
|
--cd-track-border-bot: 1px solid var(--cd-grid-color-alt);
|
||||||
--cd-track-num-min-w: 2.5ch;
|
--cd-track-num-min-w: 2.5ch;
|
||||||
--cd-print-border: 1px solid #ccc;
|
/* Spacing */
|
||||||
|
--cd-space-inset: var(--size-fluid-1);
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
--cd-space-stack: var(--size-fluid-2);
|
||||||
Letter Spacing Scale
|
--cd-space-gutter: var(--size-fluid-3);
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
--cd-space-xs: var(--size-1);
|
||||||
|
--cd-space-sm: var(--size-2);
|
||||||
|
/* Font sizes */
|
||||||
|
--cd-font-size-body: var(--font-size-fluid-1);
|
||||||
|
--cd-font-size-title: var(--font-size-fluid-2);
|
||||||
|
--cd-font-size-display: var(--font-size-fluid-3);
|
||||||
|
/* Spine */
|
||||||
|
--cd-spine-font-xs: var(--font-size-0);
|
||||||
|
--cd-spine-font-sm: var(--font-size-1);
|
||||||
|
--cd-spine-font-md: var(--font-size-2);
|
||||||
|
--cd-spine-font-lg: var(--font-size-3);
|
||||||
|
--cd-font-weight-semibold: 600;
|
||||||
--cd-letter-spacing-1: 0.05em;
|
--cd-letter-spacing-1: 0.05em;
|
||||||
--cd-letter-spacing-2: 0.075em;
|
--cd-letter-spacing-2: 0.075em;
|
||||||
--cd-letter-spacing-3: 0.1em;
|
--cd-letter-spacing-3: 0.1em;
|
||||||
|
/* Motion */
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Motion & Easing
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-transition-duration: 200ms;
|
--cd-transition-duration: 200ms;
|
||||||
--cd-ease-flip: cubic-bezier(0.34, 1.56, 0.64, 1);
|
--cd-ease-flip: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
--cd-ease-default: var(--ease-3);
|
--cd-ease-default: var(--ease-3);
|
||||||
|
/* Breakpoints */
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
--cd-break-sm: 350px;
|
||||||
Print Dimensions
|
--cd-break-md-min: 351px;
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
--cd-break-md-max: 549px;
|
||||||
--cd-print-jewel-width: 142mm;
|
/* Disc */
|
||||||
--cd-print-jewel-height: 125mm;
|
--cd-disc-hole-scale: 0.6;
|
||||||
|
--cd-disc-hole-font-scale: 0.5;
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
/* Grain */
|
||||||
Grain Texture
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-grain-size-1: 120px;
|
--cd-grain-size-1: 120px;
|
||||||
--cd-grain-size-2: 200px;
|
--cd-grain-size-2: 200px;
|
||||||
--cd-grain-opacity-1: 0.02;
|
--cd-grain-opacity-1: 0.02;
|
||||||
--cd-grain-opacity-2: 0.015;
|
--cd-grain-opacity-2: 0.015;
|
||||||
|
/* Misc */
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
--cd-z-stack-base: 1;
|
||||||
Responsive Breakpoints (container query widths)
|
--cd-print-jewel-width: 142mm;
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
--cd-print-jewel-height: 125mm;
|
||||||
--cd-break-sm: 350px;
|
--cd-aspect-jewel: 280 / 245;
|
||||||
--cd-break-md-min: 351px;
|
--cd-aspect-leaflet: 1 / 1;
|
||||||
--cd-break-md-max: 549px;
|
--cd-aspect-disc: 1 / 1;
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Disc Decoration Ratios
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-disc-hole-scale: 0.6; /* decorative ring inside the hole */
|
|
||||||
--cd-disc-hole-font-scale: 0.5; /* icon character in the hole */
|
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════════════════════
|
|
||||||
Z-Index Stacking
|
|
||||||
═══════════════════════════════════════════════════════════════════════ */
|
|
||||||
--cd-z-stack-base: 1; /* disc hole above disc art */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* 2. Reset */
|
||||||
2. Reset
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
========================================================================== */
|
html { font-size: 100%; line-height: 1.5; -webkit-text-size-adjust: 100%; }
|
||||||
|
body { font-family: inherit; }
|
||||||
*, *::before, *::after {
|
img, svg, video, canvas { display: block; max-width: 100%; }
|
||||||
box-sizing: border-box;
|
button, input, select, textarea { font: inherit; border: 0; background: transparent; }
|
||||||
margin: 0;
|
a { color: inherit; text-decoration: none; }
|
||||||
padding: 0;
|
ul, ol { list-style: none; }
|
||||||
}
|
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
3. Jewel Case Container (.cd-jewel-case)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
|
/* 3. Jewel Case */
|
||||||
.cd-jewel-case {
|
.cd-jewel-case {
|
||||||
display: grid;
|
display: grid; grid-template-columns: var(--cd-spine-width) 1fr; grid-template-rows: auto 1fr;
|
||||||
grid-template-columns: var(--cd-spine-width) 1fr;
|
width: min(var(--cd-jewel-width), 100% - 2rem); min-height: var(--cd-jewel-height);
|
||||||
grid-template-rows: auto 1fr;
|
background: var(--cd-surface-0); border-radius: var(--cd-jewel-radius);
|
||||||
width: var(--cd-jewel-width);
|
box-shadow: var(--cd-jewel-shadow); overflow: hidden; position: relative;
|
||||||
min-height: var(--cd-jewel-height);
|
|
||||||
background: var(--cd-surface-0);
|
|
||||||
border-radius: var(--cd-jewel-radius);
|
|
||||||
box-shadow: var(--cd-jewel-shadow);
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
transition: width var(--cd-transition-duration) var(--cd-ease-default);
|
transition: width var(--cd-transition-duration) var(--cd-ease-default);
|
||||||
font-family: var(--cd-font-body);
|
font-family: var(--cd-font-body); color: var(--cd-text-primary);
|
||||||
color: var(--cd-text-primary);
|
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
}
|
}
|
||||||
|
.cd-jewel-case--open, .cd-jewel-case[data-jewel-state="open"] {
|
||||||
.cd-jewel-case--open,
|
width: min(var(--cd-jewel-open-width), 100% - 2rem);
|
||||||
.cd-jewel-case[data-jewel-state="open"] {
|
|
||||||
width: var(--cd-jewel-open-width);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Internal layout wrapper ── */
|
|
||||||
.cd-jewel-case > .cd-jewel-inner {
|
.cd-jewel-case > .cd-jewel-inner {
|
||||||
grid-column: 2;
|
grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column;
|
||||||
grid-row: 1 / -1;
|
padding: var(--cd-space-inset); gap: var(--cd-space-stack); min-height: 0;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: var(--cd-space-inset);
|
|
||||||
gap: var(--cd-space-stack);
|
|
||||||
min-height: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* 4. Spine */
|
||||||
4. Spine (.cd-spine, .spine-label, .spine-track)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.cd-spine {
|
.cd-spine {
|
||||||
grid-column: 1;
|
grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column;
|
||||||
grid-row: 1 / -1;
|
align-items: center; justify-content: center; background: var(--cd-spine-bg);
|
||||||
display: flex;
|
color: var(--cd-text-on-spine); font-family: var(--cd-font-label);
|
||||||
flex-direction: column;
|
padding: var(--cd-space-sm) var(--cd-space-xs); gap: var(--cd-space-sm);
|
||||||
align-items: center;
|
writing-mode: vertical-rl; text-orientation: mixed; user-select: none;
|
||||||
justify-content: center;
|
|
||||||
background: var(--cd-spine-bg);
|
|
||||||
color: var(--cd-text-on-spine);
|
|
||||||
font-family: var(--cd-font-label);
|
|
||||||
padding: var(--cd-space-sm) var(--cd-space-xs);
|
|
||||||
gap: var(--cd-space-sm);
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
text-orientation: mixed;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cd-spine .spine-label {
|
.cd-spine .spine-label {
|
||||||
font-size: var(--cd-spine-font-sm);
|
font-size: var(--cd-spine-font-sm); font-weight: var(--cd-font-weight-semibold);
|
||||||
font-weight: var(--cd-font-weight-semibold);
|
letter-spacing: var(--cd-letter-spacing-3); text-transform: uppercase;
|
||||||
letter-spacing: var(--cd-letter-spacing-3);
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cd-spine .spine-track {
|
.cd-spine .spine-track {
|
||||||
font-size: var(--cd-spine-font-xs);
|
font-size: var(--cd-spine-font-xs); letter-spacing: var(--cd-letter-spacing-1);
|
||||||
letter-spacing: var(--cd-letter-spacing-1);
|
|
||||||
opacity: var(--cd-text-opacity-muted);
|
opacity: var(--cd-text-opacity-muted);
|
||||||
}
|
}
|
||||||
|
.cd-spine--side { /* keep vertical-rl from base */ }
|
||||||
|
|
||||||
/* ── Side spine variant ── */
|
/* 5. Leaflet */
|
||||||
.cd-spine--side {
|
|
||||||
writing-mode: horizontal-tb;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
5. Leaflet Content & Pages (.leaflet-content, .leaflet-page)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.leaflet-content {
|
.leaflet-content {
|
||||||
display: flex;
|
display: flex; flex-direction: column; gap: var(--cd-space-stack);
|
||||||
flex-direction: column;
|
max-width: var(--cd-leaflet-size); position: relative;
|
||||||
gap: var(--cd-space-stack);
|
background: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-coarse)*3 - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse)*3 - 1px) calc(var(--cd-grid-coarse)*3)), var(--cd-tray-bg);
|
||||||
max-width: var(--cd-leaflet-size);
|
border-radius: var(--cd-leaflet-radius); padding: var(--cd-space-inset);
|
||||||
position: relative;
|
|
||||||
background:
|
|
||||||
repeating-linear-gradient(
|
|
||||||
0deg,
|
|
||||||
transparent 0 calc(var(--cd-grid-coarse) * 3 - 1px),
|
|
||||||
var(--cd-grid-color) calc(var(--cd-grid-coarse) * 3 - 1px) calc(var(--cd-grid-coarse) * 3)
|
|
||||||
),
|
|
||||||
var(--cd-tray-bg);
|
|
||||||
border-radius: var(--cd-leaflet-radius);
|
|
||||||
padding: var(--cd-space-inset);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-page {
|
.leaflet-page {
|
||||||
aspect-ratio: var(--cd-aspect-leaflet);
|
aspect-ratio: var(--cd-aspect-leaflet); background: var(--cd-surface-0);
|
||||||
background: var(--cd-surface-0);
|
border-radius: calc(var(--cd-leaflet-radius) / 2); padding: var(--cd-space-inset);
|
||||||
border-radius: calc(var(--cd-leaflet-radius) / 2);
|
display: flex; flex-direction: column; gap: var(--cd-space-sm);
|
||||||
padding: var(--cd-space-inset);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--cd-space-sm);
|
|
||||||
box-shadow: var(--cd-page-shadow);
|
box-shadow: var(--cd-page-shadow);
|
||||||
transition: transform var(--cd-transition-duration) var(--cd-ease-flip);
|
transition: transform var(--cd-transition-duration) var(--cd-ease-flip); position: relative;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
.leaflet-page[data-leaflet-active="true"] { box-shadow: var(--cd-jewel-shadow); }
|
||||||
.leaflet-page[data-leaflet-active="true"] {
|
.leaflet-page[data-leaflet-direction="rtl"] { direction: rtl; }
|
||||||
box-shadow: var(--cd-jewel-shadow);
|
.leaflet-page h1, .leaflet-page h2 {
|
||||||
|
font-family: var(--cd-font-label); font-size: var(--cd-font-size-title);
|
||||||
|
color: var(--cd-text-primary); line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-page[data-leaflet-direction="rtl"] {
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-page h1,
|
|
||||||
.leaflet-page h2 {
|
|
||||||
font-family: var(--cd-font-label);
|
|
||||||
font-size: var(--cd-font-size-title);
|
|
||||||
color: var(--cd-text-primary);
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-page p {
|
.leaflet-page p {
|
||||||
font-family: var(--cd-font-body);
|
font-family: var(--cd-font-body); font-size: var(--cd-font-size-body);
|
||||||
font-size: var(--cd-font-size-body);
|
color: var(--cd-text-secondary); line-height: 1.6;
|
||||||
color: var(--cd-text-secondary);
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-page .leaflet-meta {
|
.leaflet-page .leaflet-meta {
|
||||||
font-family: var(--cd-font-mono);
|
font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs);
|
||||||
font-size: var(--cd-spine-font-xs);
|
color: var(--cd-text-muted); margin-top: auto;
|
||||||
color: var(--cd-text-muted);
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
}
|
||||||
|
.cd-jewel-case--leaflet {
|
||||||
|
width: min(var(--cd-leaflet-size), 100% - 2rem); box-shadow: none; background: transparent;
|
||||||
|
}
|
||||||
|
.cd-jewel-case--leaflet .cd-jewel-inner { grid-column: 2; gap: var(--cd-space-inset); }
|
||||||
|
.leaflet-page ul { margin-left: 1rem; color: var(--cd-text-secondary); line-height: 1.6; }
|
||||||
|
.leaflet-page dl { margin-top: .5rem; display: grid; gap: .25rem; font-size: var(--cd-font-size-body); }
|
||||||
|
.leaflet-page dt { font-family: var(--cd-font-mono); color: var(--cd-text-muted); }
|
||||||
|
.leaflet-page dd { color: var(--cd-text-secondary); }
|
||||||
|
.leaflet-page p + p { margin-top: .5rem; }
|
||||||
|
|
||||||
/* ==========================================================================
|
/* 6. Disc Art */
|
||||||
6. Disc Art (.disc-art, .disc-hole)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.disc-art {
|
.disc-art {
|
||||||
width: var(--cd-disc-diameter);
|
width: var(--cd-disc-diameter); aspect-ratio: var(--cd-aspect-disc); border-radius: 50%;
|
||||||
aspect-ratio: var(--cd-aspect-disc);
|
background: radial-gradient(circle at 30% 30%, var(--gray-4) 0%, var(--gray-2) 40%, var(--gray-6) 70%, var(--gray-2) 100%);
|
||||||
border-radius: 50%;
|
display: flex; align-items: center; justify-content: center; position: relative;
|
||||||
background:
|
|
||||||
radial-gradient(
|
|
||||||
circle at 30% 30%,
|
|
||||||
var(--gray-4) 0%,
|
|
||||||
var(--gray-2) 40%,
|
|
||||||
var(--gray-6) 70%,
|
|
||||||
var(--gray-2) 100%
|
|
||||||
);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: var(--cd-disc-shadow);
|
box-shadow: var(--cd-disc-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disc-art::before {
|
.disc-art::before {
|
||||||
content: "";
|
content: ""; position: absolute; width: var(--cd-disc-hole); aspect-ratio: 1;
|
||||||
position: absolute;
|
border-radius: 50%; background: var(--cd-surface-0); box-shadow: var(--cd-disc-hole-shadow);
|
||||||
width: var(--cd-disc-hole);
|
|
||||||
aspect-ratio: 1;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--cd-surface-0);
|
|
||||||
box-shadow: var(--cd-disc-hole-shadow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.disc-hole {
|
.disc-hole {
|
||||||
position: absolute;
|
position: absolute; width: calc(var(--cd-disc-hole) * var(--cd-disc-hole-scale));
|
||||||
width: calc(var(--cd-disc-hole) * var(--cd-disc-hole-scale));
|
aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||||||
aspect-ratio: 1;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: calc(var(--cd-disc-hole) * var(--cd-disc-hole-font-scale));
|
font-size: calc(var(--cd-disc-hole) * var(--cd-disc-hole-font-scale));
|
||||||
color: var(--gray-4);
|
color: var(--gray-4); z-index: var(--cd-z-stack-base); pointer-events: none;
|
||||||
z-index: var(--cd-z-stack-base);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Disc sheen variant ── */
|
|
||||||
.disc-art--sheen {
|
.disc-art--sheen {
|
||||||
background:
|
background: radial-gradient(circle at 25% 25%, var(--gray-4) 0%, var(--gray-2) 35%, var(--gray-5) 50%, transparent 65%),
|
||||||
radial-gradient(
|
radial-gradient(circle at 75% 75%, var(--gray-7) 0%, var(--gray-3) 40%, transparent 70%);
|
||||||
circle at 25% 25%,
|
|
||||||
var(--gray-4) 0%,
|
|
||||||
var(--gray-2) 35%,
|
|
||||||
var(--gray-5) 50%,
|
|
||||||
transparent 65%
|
|
||||||
),
|
|
||||||
radial-gradient(
|
|
||||||
circle at 75% 75%,
|
|
||||||
var(--gray-7) 0%,
|
|
||||||
var(--gray-3) 40%,
|
|
||||||
transparent 70%
|
|
||||||
),
|
|
||||||
repeating-radial-gradient(
|
|
||||||
circle at 50%,
|
|
||||||
transparent 0 calc(var(--cd-disc-hole) * 0.5),
|
|
||||||
var(--gray-3) calc(var(--cd-disc-hole) * 0.5) calc(var(--cd-disc-hole) * 0.5 + 1px)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* 7. Human Advisory */
|
||||||
7. Human Advisory Badge (.human-advisory)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.human-advisory {
|
.human-advisory {
|
||||||
display: flex;
|
display: flex; flex-direction: column; align-items: center;
|
||||||
flex-direction: column;
|
background: var(--cd-advisory-fg); color: var(--cd-advisory-fg-inv);
|
||||||
align-items: center;
|
border: var(--cd-advisory-border); font-family: var(--cd-advisory-font);
|
||||||
background: var(--cd-advisory-fg);
|
text-transform: uppercase; text-align: center; padding: 0; width: fit-content;
|
||||||
color: var(--cd-advisory-fg-inv);
|
max-width: 100%; position: absolute; bottom: var(--cd-space-inset); right: var(--cd-space-inset);
|
||||||
border: var(--cd-advisory-border);
|
|
||||||
font-family: var(--cd-advisory-font);
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0;
|
|
||||||
width: fit-content;
|
|
||||||
max-width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
bottom: var(--cd-space-inset);
|
|
||||||
right: var(--cd-space-inset);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.human-advisory .advisory-row {
|
.human-advisory .advisory-row {
|
||||||
width: 100%;
|
width: 100%; padding: var(--cd-space-xs) var(--cd-space-sm);
|
||||||
padding: var(--cd-space-xs) var(--cd-space-sm);
|
font-size: var(--cd-spine-font-sm); letter-spacing: var(--cd-letter-spacing-3);
|
||||||
font-size: var(--cd-spine-font-sm);
|
line-height: 1.2; white-space: nowrap;
|
||||||
letter-spacing: var(--cd-letter-spacing-3);
|
|
||||||
line-height: 1.2;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
.human-advisory .advisory-row--black { background: var(--cd-advisory-fg); color: var(--cd-advisory-fg-inv); }
|
||||||
|
.human-advisory .advisory-row--white { background: var(--cd-advisory-fg-inv); color: var(--cd-advisory-fg); }
|
||||||
|
.human-advisory--red .advisory-row--black { background: var(--cd-advisory-red-dark); color: var(--cd-advisory-fg-inv); }
|
||||||
|
.human-advisory--red .advisory-row--white { background: var(--cd-advisory-red); color: var(--cd-advisory-fg-inv); }
|
||||||
|
.human-advisory--inline { position: static; align-self: flex-end; }
|
||||||
|
|
||||||
.human-advisory .advisory-row--black {
|
/* 8. Back Tray */
|
||||||
background: var(--cd-advisory-fg);
|
|
||||||
color: var(--cd-advisory-fg-inv);
|
|
||||||
}
|
|
||||||
|
|
||||||
.human-advisory .advisory-row--white {
|
|
||||||
background: var(--cd-advisory-fg-inv);
|
|
||||||
color: var(--cd-advisory-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.human-advisory .advisory-row--red {
|
|
||||||
background: var(--cd-advisory-red);
|
|
||||||
color: var(--cd-advisory-fg-inv);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Advisory badge red variant ── */
|
|
||||||
.human-advisory--red .advisory-row--black {
|
|
||||||
background: var(--cd-advisory-red-dark);
|
|
||||||
color: var(--cd-advisory-fg-inv);
|
|
||||||
}
|
|
||||||
|
|
||||||
.human-advisory--red .advisory-row--white {
|
|
||||||
background: var(--cd-advisory-red);
|
|
||||||
color: var(--cd-advisory-fg-inv);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
8. Back Tray (.back-tray, .tray-credits)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.back-tray {
|
.back-tray {
|
||||||
display: grid;
|
display: grid; grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width);
|
||||||
grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width);
|
background: var(--cd-tray-bg); border-top: var(--cd-tray-border-top);
|
||||||
background: var(--cd-tray-bg);
|
padding: 0; max-height: var(--cd-tray-height); overflow-y: auto; position: relative;
|
||||||
border-top: var(--cd-tray-border-top);
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-tray .tray-credits {
|
.back-tray .tray-credits {
|
||||||
grid-column: 2;
|
grid-column: 2; padding: var(--cd-space-inset); display: flex; flex-direction: column;
|
||||||
padding: var(--cd-space-inset);
|
gap: var(--cd-space-stack); background: var(--cd-tray-bg-raised);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--cd-space-stack);
|
|
||||||
background: var(--cd-tray-bg-raised);
|
|
||||||
border-radius: 0 0 var(--cd-leaflet-radius) var(--cd-leaflet-radius);
|
border-radius: 0 0 var(--cd-leaflet-radius) var(--cd-leaflet-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tray-credits h2 {
|
.tray-credits h2 {
|
||||||
font-family: var(--cd-font-label);
|
font-family: var(--cd-font-label); font-size: var(--cd-font-size-title);
|
||||||
font-size: var(--cd-font-size-title);
|
color: var(--cd-text-primary); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-2);
|
||||||
color: var(--cd-text-primary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: var(--cd-letter-spacing-2);
|
|
||||||
}
|
}
|
||||||
|
.tray-credits ol { list-style: none; counter-reset: track; display: flex; flex-direction: column; gap: var(--cd-space-xs); }
|
||||||
.tray-credits ol {
|
|
||||||
list-style: none;
|
|
||||||
counter-reset: track;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--cd-space-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tray-credits ol li {
|
.tray-credits ol li {
|
||||||
counter-increment: track;
|
counter-increment: track; font-family: var(--cd-font-label); font-size: var(--cd-font-size-body);
|
||||||
font-family: var(--cd-font-label);
|
color: var(--cd-text-secondary); padding: var(--cd-space-xs) 0;
|
||||||
font-size: var(--cd-font-size-body);
|
border-bottom: var(--cd-track-border-bot); display: flex; gap: var(--cd-space-sm);
|
||||||
color: var(--cd-text-secondary);
|
|
||||||
padding: var(--cd-space-xs) 0;
|
|
||||||
border-bottom: var(--cd-track-border-bot);
|
|
||||||
display: flex;
|
|
||||||
gap: var(--cd-space-sm);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tray-credits ol li::before {
|
.tray-credits ol li::before {
|
||||||
content: counter(track, decimal-leading-zero) ".";
|
content: counter(track, decimal-leading-zero) ".";
|
||||||
font-family: var(--cd-font-mono);
|
font-family: var(--cd-font-mono); color: var(--cd-text-muted); min-width: var(--cd-track-num-min-w);
|
||||||
color: var(--cd-text-muted);
|
|
||||||
min-width: var(--cd-track-num-min-w);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tray-credits .credits-label {
|
.tray-credits .credits-label {
|
||||||
font-family: var(--cd-font-mono);
|
font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs);
|
||||||
font-size: var(--cd-spine-font-xs);
|
color: var(--cd-text-muted); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-1);
|
||||||
color: var(--cd-text-muted);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: var(--cd-letter-spacing-1);
|
|
||||||
}
|
}
|
||||||
|
.tray-credits p { font-family: var(--cd-font-body); font-size: var(--cd-font-size-body); color: var(--cd-text-secondary); line-height: 1.5; }
|
||||||
|
.back-tray .cd-spine { grid-row: 1; background: var(--cd-spine-bg); }
|
||||||
|
|
||||||
.tray-credits p {
|
/* 9. Grid Overlay */
|
||||||
font-family: var(--cd-font-body);
|
|
||||||
font-size: var(--cd-font-size-body);
|
|
||||||
color: var(--cd-text-secondary);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Back tray spine labels ── */
|
|
||||||
.back-tray .cd-spine {
|
|
||||||
grid-row: 1;
|
|
||||||
background: var(--cd-spine-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
9. Grid Overlay Utility (.cd-grid)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.cd-grid {
|
.cd-grid {
|
||||||
background-image:
|
background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse));
|
||||||
repeating-linear-gradient(
|
|
||||||
0deg,
|
|
||||||
transparent 0 calc(var(--cd-grid-coarse) - 1px),
|
|
||||||
var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cd-grid--fine {
|
.cd-grid--fine {
|
||||||
background-image:
|
background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-fine) - 1px), var(--cd-grid-color) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine));
|
||||||
repeating-linear-gradient(
|
|
||||||
0deg,
|
|
||||||
transparent 0 calc(var(--cd-grid-fine) - 1px),
|
|
||||||
var(--cd-grid-color) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cd-grid--coarse {
|
|
||||||
background-image:
|
|
||||||
repeating-linear-gradient(
|
|
||||||
0deg,
|
|
||||||
transparent 0 calc(var(--cd-grid-coarse) - 1px),
|
|
||||||
var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-grid--crosshatch {
|
.cd-grid--crosshatch {
|
||||||
background-image:
|
background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-fine) - 1px), var(--cd-grid-color-alt) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine)),
|
||||||
repeating-linear-gradient(
|
repeating-linear-gradient(90deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse));
|
||||||
0deg,
|
|
||||||
transparent 0 calc(var(--cd-grid-fine) - 1px),
|
|
||||||
var(--cd-grid-color-alt) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine)
|
|
||||||
),
|
|
||||||
repeating-linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent 0 calc(var(--cd-grid-coarse) - 1px),
|
|
||||||
var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* 10. Open / Closed */
|
||||||
10. Open / Closed State Transitions
|
.cd-jewel-case .back-tray { display: none; }
|
||||||
========================================================================== */
|
.cd-jewel-case--open .back-tray, .cd-jewel-case[data-jewel-state="open"] .back-tray { display: grid; }
|
||||||
|
|
||||||
.cd-jewel-case .back-tray {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-jewel-case--open .back-tray,
|
|
||||||
.cd-jewel-case[data-jewel-state="open"] .back-tray {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
11. Responsive Breakpoints (container queries)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
|
/* 11. Responsive */
|
||||||
@container (max-width: var(--cd-break-sm)) {
|
@container (max-width: var(--cd-break-sm)) {
|
||||||
.cd-jewel-case {
|
.cd-jewel-case { width: 100% !important; grid-template-columns: 1fr; }
|
||||||
width: 100% !important;
|
.cd-spine { writing-mode: horizontal-tb; flex-direction: row; padding: var(--cd-space-xs) var(--cd-space-sm); grid-column: 1; grid-row: 1; }
|
||||||
grid-template-columns: 1fr;
|
.cd-jewel-inner { grid-column: 1; grid-row: 2; }
|
||||||
}
|
.disc-art { width: 100% !important; max-width: var(--cd-disc-diameter); margin: 0 auto; }
|
||||||
|
.leaflet-content { max-width: 100%; }
|
||||||
.cd-spine {
|
.human-advisory { position: static; margin-top: var(--cd-space-stack); align-self: center; }
|
||||||
writing-mode: horizontal-tb;
|
|
||||||
flex-direction: row;
|
|
||||||
padding: var(--cd-space-xs) var(--cd-space-sm);
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-jewel-inner {
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disc-art {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: var(--cd-disc-diameter);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-content {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.human-advisory {
|
|
||||||
position: static;
|
|
||||||
margin-top: var(--cd-space-stack);
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@container (min-width: var(--cd-break-md-min)) and (max-width: var(--cd-break-md-max)) {
|
@container (min-width: var(--cd-break-md-min)) and (max-width: var(--cd-break-md-max)) {
|
||||||
.cd-jewel-case {
|
.cd-jewel-case { width: 100% !important; max-width: var(--cd-jewel-width); }
|
||||||
width: 100% !important;
|
.leaflet-content { gap: var(--cd-space-sm); }
|
||||||
max-width: var(--cd-jewel-width);
|
.human-advisory .advisory-row { font-size: var(--cd-spine-font-xs); padding: var(--cd-space-xs) var(--cd-space-sm); }
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-content {
|
|
||||||
gap: var(--cd-space-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.human-advisory .advisory-row {
|
|
||||||
font-size: var(--cd-spine-font-xs);
|
|
||||||
padding: var(--cd-space-xs) var(--cd-space-sm);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* 12. Print */
|
||||||
12. Print Styles
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
.cd-jewel-case {
|
.cd-jewel-case { width: var(--cd-print-jewel-width); height: var(--cd-print-jewel-height); box-shadow: none; border: 1px solid #ccc; }
|
||||||
width: var(--cd-print-jewel-width);
|
.cd-jewel-case--open { width: calc(var(--cd-print-jewel-width) * 2); }
|
||||||
height: var(--cd-print-jewel-height);
|
.back-tray { display: grid !important; }
|
||||||
box-shadow: none;
|
.human-advisory { position: absolute; }
|
||||||
border: var(--cd-print-border);
|
.disc-art { box-shadow: none; }
|
||||||
}
|
.cd-jewel-case, .leaflet-page, .back-tray { border-radius: 0; }
|
||||||
|
|
||||||
.cd-jewel-case--open {
|
|
||||||
width: calc(var(--cd-print-jewel-width) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-tray {
|
|
||||||
display: grid !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.human-advisory {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disc-art {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-jewel-case,
|
|
||||||
.leaflet-page,
|
|
||||||
.back-tray {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* 13. Grain */
|
||||||
13. Grain Texture Utility (.cd-grain)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.cd-grain {
|
.cd-grain {
|
||||||
background-image:
|
background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 1px, rgb(0 0 0 / var(--cd-grain-opacity-1)) 1px 2px, transparent 2px 4px),
|
||||||
repeating-radial-gradient(
|
repeating-radial-gradient(circle at 100% 100%, transparent 0 3px, rgb(0 0 0 / var(--cd-grain-opacity-2)) 3px 4px, transparent 4px 8px);
|
||||||
circle at 50% 50%,
|
background-size: var(--cd-grain-size-1) var(--cd-grain-size-1), var(--cd-grain-size-2) var(--cd-grain-size-2);
|
||||||
transparent 0 1px,
|
|
||||||
rgb(0 0 0 / var(--cd-grain-opacity-1)) 1px 2px,
|
|
||||||
transparent 2px 4px
|
|
||||||
),
|
|
||||||
repeating-radial-gradient(
|
|
||||||
circle at 100% 100%,
|
|
||||||
transparent 0 3px,
|
|
||||||
rgb(0 0 0 / var(--cd-grain-opacity-2)) 3px 4px,
|
|
||||||
transparent 4px 8px
|
|
||||||
);
|
|
||||||
background-size: var(--cd-grain-size-1) var(--cd-grain-size-1),
|
|
||||||
var(--cd-grain-size-2) var(--cd-grain-size-2);
|
|
||||||
}
|
}
|
||||||
|
|
@ -5,59 +5,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>OpenCD · Back Tray</title>
|
<title>OpenCD · Back Tray</title>
|
||||||
<link rel="stylesheet" href="../opencd.css">
|
<link rel="stylesheet" href="../opencd.css">
|
||||||
<style>
|
<link rel="stylesheet" href="demo.css">
|
||||||
/* 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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>OpenCD · Jewel Case</title>
|
<title>OpenCD · Jewel Case</title>
|
||||||
<link rel="stylesheet" href="../opencd.css">
|
<link rel="stylesheet" href="../opencd.css">
|
||||||
<style>
|
<link rel="stylesheet" href="demo.css">
|
||||||
/* 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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,94 +5,16 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>OpenCD · Leaflet</title>
|
<title>OpenCD · Leaflet</title>
|
||||||
<link rel="stylesheet" href="../opencd.css">
|
<link rel="stylesheet" href="../opencd.css">
|
||||||
<style>
|
<link rel="stylesheet" href="demo.css">
|
||||||
/* 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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- ============================================================
|
<!-- ============================================================
|
||||||
LEAFLET — Multi-page booklet
|
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">
|
<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">
|
<article class="leaflet-page" data-leaflet-page="1" data-leaflet-active="false">
|
||||||
<h1>Architecture</h1>
|
<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>
|
<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>CD dimension tokens at 2× scale</li>
|
||||||
<li>Semantic color aliases on Open Props</li>
|
<li>Semantic color aliases on Open Props</li>
|
||||||
<li>ASW-inspired surface layers</li>
|
<li>ASW-inspired surface layers</li>
|
||||||
|
|
@ -119,13 +41,13 @@
|
||||||
<article class="leaflet-page" data-leaflet-page="2" data-leaflet-active="false">
|
<article class="leaflet-page" data-leaflet-page="2" data-leaflet-active="false">
|
||||||
<h1>Token System</h1>
|
<h1>Token System</h1>
|
||||||
<p>The variable layer defines ~40 custom properties organized into semantic groups:</p>
|
<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);">
|
<dl>
|
||||||
<dt style="font-family:var(--font-mono); color:var(--gray-6);">--cd-jewel-width</dt>
|
<dt>--cd-jewel-width</dt>
|
||||||
<dd style="color:var(--gray-7);">280px × scale</dd>
|
<dd>280px × scale</dd>
|
||||||
<dt style="font-family:var(--font-mono); color:var(--gray-6);">--cd-surface-1</dt>
|
<dt>--cd-surface-1</dt>
|
||||||
<dd style="color:var(--gray-7);">oklch(30% .015 265)</dd>
|
<dd>oklch(30% .015 265)</dd>
|
||||||
<dt style="font-family:var(--font-mono); color:var(--gray-6);">--cd-font-label</dt>
|
<dt>--cd-font-label</dt>
|
||||||
<dd style="color:var(--gray-7);">--cd-font-neo-grotesque</dd>
|
<dd>--cd-font-neo-grotesque</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<span class="leaflet-meta">Page 3 of 4 · v0.1.0</span>
|
<span class="leaflet-meta">Page 3 of 4 · v0.1.0</span>
|
||||||
</article>
|
</article>
|
||||||
|
|
@ -133,15 +55,15 @@
|
||||||
<article class="leaflet-page" data-leaflet-page="3" data-leaflet-active="false">
|
<article class="leaflet-page" data-leaflet-page="3" data-leaflet-active="false">
|
||||||
<h1>Credits</h1>
|
<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>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>
|
<span class="leaflet-meta">Page 4 of 4 · MMXXV</span>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Human Advisory badge (small) -->
|
<!-- Human Advisory badge (inline) -->
|
||||||
<aside class="human-advisory" style="position:static; align-self:flex-end;">
|
<aside class="human-advisory human-advisory--inline">
|
||||||
<span class="advisory-row advisory-row--black">PROTOTYPE</span>
|
<span class="advisory-row advisory-row--black">PROTOTYPE</span>
|
||||||
<span class="advisory-row advisory-row--white">OPENCD v0.1</span>
|
<span class="advisory-row advisory-row--white">OPENCD v0.1</span>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue