Compare commits
8 commits
c8bb24d046
...
b54ffa943b
| Author | SHA1 | Date | |
|---|---|---|---|
b54ffa943b
|
|||
|
fa427d4a9e
|
|||
|
a70a770ce3
|
|||
0206b69381
|
|||
|
5483f7c02e
|
|||
|
6a85ae7adf
|
|||
|
f39c9e0810
|
|||
| 5ad71a7cb9 |
8 changed files with 1223 additions and 816 deletions
488
BUGFIX_PLAN.md
Normal file
488
BUGFIX_PLAN.md
Normal file
|
|
@ -0,0 +1,488 @@
|
|||
# BUGFIX_PLAN.md — OpenCD CSS Overhaul
|
||||
|
||||
> **Author:** Colonel John Hannibal Smith (A-Team command)
|
||||
> **Status:** Approved — execute per work breakdown
|
||||
> **Context:** Bug analysis of opencd.css + 3 templates against Ludo's 8 critical bugs
|
||||
> **Date:** 2026-05-25
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Bug-by-Bug Analysis](#1-bug-by-bug-analysis)
|
||||
2. [CSS to Cut — Line-Level Audit](#2-css-to-cut--line-level-audit)
|
||||
3. [CD Dimension Recalculation](#3-cd-dimension-recalculation)
|
||||
4. [Reset Strategy](#4-reset-strategy)
|
||||
5. [Work Breakdown](#5-work-breakdown)
|
||||
|
||||
---
|
||||
|
||||
## 1. Bug-by-Bug Analysis
|
||||
|
||||
### Bug #1 — Inline `<style>` blocks in all 3 templates
|
||||
|
||||
**Current state:** Each template has an inline `<style>` block containing demo page chrome:
|
||||
|
||||
| Template | Lines | What's in the block |
|
||||
|----------|-------|---------------------|
|
||||
| jewel-case.html | 8–55 | `body` flex layout, `.demo-controls`, `.demo-footnote` |
|
||||
| back-tray.html | 8–60 | Same body + `.demo-tray-container` wrapper |
|
||||
| leaflet.html | 8–86 | Same body + `.leaflet-content--multi`, `.leaflet-pages` |
|
||||
|
||||
**Verdict:** These are demo scaffolding, not framework component CSS. Removing `<style>` entirely without moving this chrome somewhere breaks the demos. There are two clean approaches:
|
||||
|
||||
**Option A (recommended):** Create `templates/demo.css` — a shared demo chrome file imported by all 3 templates. This gets <style> out of the HTML without polluting the framework. Move all common body/control/footnote styles there. Template-specific overrides (`.leaflet-content--multi`, `.leaflet-pages`) stay close to their template but still in `demo.css`.
|
||||
|
||||
**Option B:** Move everything into `opencd.css` under `.demo-*` namespaced classes and import from there. This keeps a single stylesheet but bloats the framework with demo-only code.
|
||||
|
||||
**Decision:** Option A. Demo chrome is not framework. `demo.css` lives in `templates/` alongside the HTML.
|
||||
|
||||
**What moves to `demo.css`:**
|
||||
- `body` block (min-height, display:flex, align-items:center, gap, padding, background) — deduplicated across all 3
|
||||
- `.demo-controls` — deduplicated (leaflet has extra button + page-indicator styles, those separate)
|
||||
- `.demo-footnote` — deduplicated
|
||||
- `.demo-tray-container` — back-tray only
|
||||
- `.leaflet-content--multi`, `.leaflet-pages` — leaflet only
|
||||
|
||||
**Result after fix:** Each template has `<link rel="stylesheet" href="demo.css">`, zero `<style>` blocks.
|
||||
|
||||
---
|
||||
|
||||
### Bug #2 — No comprehensive CSS user-agent reset
|
||||
|
||||
**Current state:** opencd.css lines 191–195 has:
|
||||
```css
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
This resets box-sizing, margin, and padding — which is good. But it's missing:
|
||||
|
||||
| Missing | Why it matters |
|
||||
|---------|---------------|
|
||||
| `font-family: inherit` | Prevents inconsistent form inputs inheriting browser default fonts |
|
||||
| `font-size: 100%` | Prevents `<h1>`–`<h6>` and `<small>` from breaking the type scale |
|
||||
| `line-height: 1.5` | Normalizes vertical rhythm across browsers |
|
||||
| `border: 0` on common elements | Prevents fieldset/button/input default borders |
|
||||
| `background: transparent` on buttons | Prevents default button backgrounds |
|
||||
| `list-style: none` on `<ul>` / `<ol>` | Only needed if using list reset (currently `.tray-credits ol` does this) |
|
||||
| `text-decoration: none` on `<a>` | For framework-styled links |
|
||||
|
||||
**Verdict:** Expand the existing reset to cover font inheritance, line-height, and form element defaults. Not a full `normalize.css` — just the basics that affect the jewel case layout.
|
||||
|
||||
---
|
||||
|
||||
### Bug #3 — back-tray.html renders as ~280×1305px (unreadable vertical slab)
|
||||
|
||||
**Root cause:** The back tray has no height constraint.
|
||||
|
||||
The `.back-tray` grid uses `grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width)` but no row template — the grid auto-creates rows per content item. The `.tray-credits` section contains 8 tracklist items, 3 production credit paragraphs, and technical info text — all flowing vertically without bound.
|
||||
|
||||
Physical back tray paper is 151×118mm. At 2× scale that's ~302×236px. The standalone demo should show the back tray at roughly that proportion.
|
||||
|
||||
**Fix strategy:**
|
||||
|
||||
1. **Add `--cd-tray-height`** calculated from physical dimensions:
|
||||
```
|
||||
--cd-tray-height: calc(236px * var(--cd-scale)); /* 118mm × 2 */
|
||||
```
|
||||
|
||||
2. **Constrain `.back-tray` height** with `max-height: var(--cd-tray-height)` and `overflow-y: auto` (matching the real paper footprint — content that overflows physical space gets scrollable, just like a real multi-page tray insert).
|
||||
|
||||
3. **Tighten the content.** Back tray should show a compact tracklist + credits, not verbose paragraphs. This is a content reduction, not a CSS reduction — but B.A. should audit the template text.
|
||||
|
||||
4. **Fix `.demo-tray-container`** — currently `width: var(--cd-jewel-width)` but no height constraint. Add `max-height: var(--cd-tray-height)` so the demo wrapper also constrains.
|
||||
|
||||
---
|
||||
|
||||
### Bug #4 — jewel-case.html too narrow
|
||||
|
||||
**Root cause:** The `.cd-jewel-case` has `width: var(--cd-jewel-width)` = 280px at default scale. This IS the correct physical dimension at 2× (142mm × 2 = 284px, rounded to 280px). The issue is that the container doesn't respond to viewport width on large screens — it sits as a tiny box center-aligned.
|
||||
|
||||
The body centers it with flexbox, so on a 1920px screen you get a 280px box in the middle of a sea of cream background. It looks "too narrow" because there's no visual connection to viewport scale.
|
||||
|
||||
**Fix:**
|
||||
- Add a `max-width` constraint rather than a fixed `width` on `.cd-jewel-case`:
|
||||
```
|
||||
width: min(var(--cd-jewel-width), 100% - 2rem);
|
||||
```
|
||||
This lets it fill smaller viewports while capping at CD dimensions on larger ones.
|
||||
- Keep the center-alignment, but the jewel case will feel proportional rather than dwarfed.
|
||||
|
||||
---
|
||||
|
||||
### Bug #5 — leaflet.html width completely broken
|
||||
|
||||
**Root cause:** Inline styles override the entire layout structure:
|
||||
```html
|
||||
<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);">
|
||||
```
|
||||
|
||||
`width: auto` on the jewel case destroys the CD dimension constraint. The inner div's `grid-column: 1/-1` spans past the content column into the spine column. The `.leaflet-content` has `max-width: var(--cd-leaflet-size)` (240px) but the wrapper is now unconstrained.
|
||||
|
||||
**Fix:**
|
||||
- Remove inline `width: auto` — use `.cd-jewel-case--leaflet` modifier class instead:
|
||||
```css
|
||||
.cd-jewel-case--leaflet {
|
||||
width: var(--cd-leaflet-size);
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
```
|
||||
- Remove inline `grid-column: 1/-1` — the `.cd-jewel-inner` already lives in grid-column 2 via the base CSS. The leaflet template doesn't have a spine, so just hide the spine grid area or use grid-template-columns differently.
|
||||
- All the inline style overrides become `.cd-jewel-case--leaflet` and `.cd-jewel-case--leaflet .cd-jewel-inner` rules in opencd.css.
|
||||
|
||||
---
|
||||
|
||||
### Bug #6 — 711 lines is ~80% bloat
|
||||
|
||||
**Audit of current opencd.css (previously hardened — already less bloated than original):**
|
||||
|
||||
| Section | Lines | Verdict |
|
||||
|---------|-------|---------|
|
||||
| 1. Custom properties (`:root`) | 169 | **Accept as-is** — all `--cd-*` are semantic tokens per DESIGN.md. No magic numbers. |
|
||||
| 2. Reset | 5 | Accept — minimal, effective |
|
||||
| 3. Jewel Case | 35 | Accept — core layout |
|
||||
| 4. Spine | 35 | Accept — core layout |
|
||||
| 5. Leaflet | 60 | Could trim ~15 lines of redundant comments |
|
||||
| 6. Disc Art | 65 | Could trim ~20 lines — `.disc-art--sheen` gradient is very verbose |
|
||||
| 7. Human Advisory | 55 | Could trim ~10 lines — `.advisory-row--*` variants use only 3 of 6 defined |
|
||||
| 8. Back Tray | 70 | Accept — core layout + tracklist styling |
|
||||
| 9. Grid Overlay | 45 | Accept — 4 variants, all in use |
|
||||
| 10. Open/Closed | 10 | Accept — state management |
|
||||
| 11. Responsive | 55 | Accept — container queries for 3 breakpoints |
|
||||
| 12. Print | 30 | Accept — needed |
|
||||
| 13. Grain | 20 | Accept — texture utility |
|
||||
|
||||
**Target after trimming:** ~640 lines (trim ~70 lines of verbose comments and disc art gradient).
|
||||
|
||||
**Specific cuts:**
|
||||
1. Lines 18–20, 38–40, 49–52, 70–73, 83–86, 90–93, 98–99, 106–109, 117–119, 131–134, 147–149, 155–157, 162–164, 169–171, 178–180 — decorative ASCII comment separators between sections. Replace with simple `/* Section name */` comments. Saves ~45 lines.
|
||||
2. Lines 386–406 — `.disc-art--sheen` gradient — the 3-layer radial gradient with repeating ring is over-engineered for a disc gradient. Can be simplified to a 2-layer radial gradient. Saves ~15 lines.
|
||||
3. Lines 444–452 — `.advisory-row--red` and `.advisory-row--white` background variants. Only 3 of 6 advisory variants are used. Keep `.advisory-row--black` and `.advisory-row--white`. Saves ~10 lines.
|
||||
|
||||
---
|
||||
|
||||
### Bug #7 — Design tokens inconsistent across templates
|
||||
|
||||
**Current state analysis:** All 3 templates link to `opencd.css`, so `--cd-*` tokens ARE consistent at the framework level. However:
|
||||
|
||||
1. Each template's inline `<style>` block references Open Props directly (`var(--gray-6)`, `var(--red-6)`, `var(--radius-2)`, `var(--font-sans)`) instead of using `--cd-*` tokens.
|
||||
2. Different font sizes used in demo controls across templates (`.875rem` in jewel-case, `.75rem` in back-tray footnotes).
|
||||
|
||||
**Fix:** Once `<style>` blocks are moved to `demo.css` (Bug #1), convert all direct Open Props references to `--cd-*` tokens:
|
||||
- `var(--gray-6)` → `var(--cd-text-muted)` or `var(--cd-text-secondary)`
|
||||
- `var(--red-6)` → `var(--cd-advisory-red)`
|
||||
- `var(--radius-2)` → `var(--cd-jewel-radius)`
|
||||
- `var(--font-sans)` → `var(--cd-font-label)`
|
||||
- `var(--font-mono)` → `var(--cd-font-mono)`
|
||||
|
||||
This ensures every CSS reference across all files uses the `--cd-*` semantic layer — never raw Open Props tokens.
|
||||
|
||||
---
|
||||
|
||||
### Bug #8 — `.cd-spine--side` renders wrong
|
||||
|
||||
**Root cause analysis:**
|
||||
|
||||
```css
|
||||
.cd-spine {
|
||||
writing-mode: vertical-rl; /* text reads top-to-bottom */
|
||||
flex-direction: column; /* items stack vertically */
|
||||
}
|
||||
|
||||
.cd-spine--side {
|
||||
writing-mode: horizontal-tb; /* text reads left-to-right */
|
||||
flex-direction: row; /* items sit side-by-side */
|
||||
}
|
||||
```
|
||||
|
||||
In `back-tray.html`, the `.back-tray` grid is:
|
||||
```css
|
||||
grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width);
|
||||
/* = 14px + auto + 14px */
|
||||
```
|
||||
|
||||
The side spines (`.cd-spine--side`) sit in 14px-wide columns with `writing-mode: horizontal-tb`. Text like "OPENCD" or "TRENTUNA" in a 14px horizontal column overflows — it's illegible.
|
||||
|
||||
**Physical reference:** On a real CD back tray, the side spines (~7mm each) have text printed VERTICALLY — reading top-to-bottom on the left spine, bottom-to-top on the right. The text runs along the spine's length, not across its width.
|
||||
|
||||
**Fix:** The `.cd-spine--side` variant should NOT change writing mode — it should keep `writing-mode: vertical-rl` from the base. Instead, it should just adjust positioning:
|
||||
|
||||
```css
|
||||
.cd-spine--side {
|
||||
/* Keep base vertical writing mode but adjust layout */
|
||||
writing-mode: vertical-rl; /* inherit from base — DON'T override */
|
||||
}
|
||||
```
|
||||
|
||||
Remove `writing-mode: horizontal-tb` and `flex-direction: row` from `.cd-spine--side`. The side spine will read vertically along its height, which fits within the 14px × 236px column perfectly.
|
||||
|
||||
For left-vs-right orientation: the back-tray.html already places `cd-spine--side` elements in columns 1 and 3 of the grid. Both will read top-to-bottom. If RTL support is needed later, add `cd-spine--side--r-t-b` for right-to-bottom (inverted vertical).
|
||||
|
||||
---
|
||||
|
||||
## 2. CSS to Cut — Line-Level Audit
|
||||
|
||||
### From opencd.css
|
||||
|
||||
| Lines | Content | Action | Saves |
|
||||
|-------|---------|--------|-------|
|
||||
| 1–7 | File header banner | Keep — project identity | 0 |
|
||||
| 11–16 | Section header for variables | Simplify to `/* 1. Tokens */` | -3 |
|
||||
| 18–20, 38–40, etc. | Decorative `══════` comment blocks | Remove decorative lines, keep one-line headers | ~45 |
|
||||
| 191–192 | Section header for reset | Keep | 0 |
|
||||
| 197–198 | Section header for jewel case | Keep | 0 |
|
||||
| 386–406 | `.disc-art--sheen` 3-layer gradient | Simplify to 2-layer | ~15 |
|
||||
| 443, 448, 453 | `.advisory-row--red`, `.advisory-row--white` unused background variants | Consolidate to `.advisory-row--black` and `.advisory-row--white` classes with `--red` via modifier | ~10 |
|
||||
| 694–711 | `.cd-grain` texture | Keep — used for tray paper texture | 0 |
|
||||
| **Total trim target** | | | **~70 lines** |
|
||||
|
||||
**Target final size:** ~640 lines (from 711)
|
||||
|
||||
### From templates (inline `<style>` blocks)
|
||||
|
||||
Each template's inline `<style>` block ranges 30–60 lines. After moving to `demo.css`:
|
||||
|
||||
| Template | Lines removed | Destination |
|
||||
|----------|--------------|-------------|
|
||||
| jewel-case.html | 8–55 (48 lines) | `templates/demo.css` |
|
||||
| back-tray.html | 8–60 (53 lines) | `templates/demo.css` |
|
||||
| leaflet.html | 8–86 (79 lines) | `templates/demo.css` |
|
||||
|
||||
### From leaflet.html inline style attributes
|
||||
|
||||
| Inline style | Action |
|
||||
|--------------|--------|
|
||||
| `style="width: auto; box-shadow: none; background: transparent;"` on `<main>` | Move to `.cd-jewel-case--leaflet` class |
|
||||
| `style="grid-column:1/-1; gap: var(--cd-space-inset);"` on `.cd-jewel-inner` | Move to `.cd-jewel-case--leaflet .cd-jewel-inner` |
|
||||
| `style="position:static; align-self:flex-end;"` on `.human-advisory` | Consider `.human-advisory--inline` variant |
|
||||
| `style="margin-left:1rem; color:var(--cd-text-secondary); line-height:1.6;"` on `<ul>` | Move to opencd.css: `.leaflet-page ul` rule |
|
||||
| `style="margin-top:.5rem; display:grid; gap:.25rem; font-size:var(--size-fluid-1);"` on `<dl>` | Move to opencd.css: `.leaflet-page dl` rule |
|
||||
| `style="font-family:var(--font-mono); color:var(--gray-6);"` on `<dt>` | Move to opencd.css: `.leaflet-page dt` rule |
|
||||
| `style="color:var(--gray-7);"` on `<dd>` | Move to opencd.css: `.leaflet-page dd` rule |
|
||||
| `style="margin-top:.5rem;"` on `<p>` | `.leaflet-page p + p` sibling rule in CSS |
|
||||
|
||||
---
|
||||
|
||||
## 3. CD Dimension Recalculation
|
||||
|
||||
### Current dimension tokens
|
||||
|
||||
| Token | Current value | Physical | Ratio |
|
||||
|-------|--------------|----------|-------|
|
||||
| `--cd-jewel-width` | calc(280px × scale) | 142mm | 1.97px/mm |
|
||||
| `--cd-jewel-height` | calc(245px × scale) | 125mm | 1.96px/mm |
|
||||
| `--cd-jewel-open-width` | calc(560px × scale) | 284mm | 1.97px/mm |
|
||||
| `--cd-spine-width` | calc(14px × scale) | ~7mm | 2.0px/mm |
|
||||
| `--cd-disc-diameter` | calc(240px × scale) | 120mm | 2.0px/mm |
|
||||
| `--cd-leaflet-size` | calc(240px × scale) | 120mm | 2.0px/mm |
|
||||
| `--cd-tray-width` | calc(260px × scale) | ~130mm | 2.0px/mm |
|
||||
| `--cd-tray-height` | **MISSING** | 118mm | — |
|
||||
|
||||
### Correction needed
|
||||
|
||||
**Add `--cd-tray-height`:**
|
||||
```
|
||||
--cd-tray-height: calc(236px * var(--cd-scale)); /* 118mm × 2 */
|
||||
```
|
||||
|
||||
**This dimension drives Bug #3 fix** — the back tray height constraint.
|
||||
|
||||
### `--cd-scale` semantics (already correct in current code)
|
||||
|
||||
Current implementation: `--cd-scale: 1` = default 2× display scale. The formulas use the 2× px value multiplied by scale. This is unambiguous:
|
||||
```
|
||||
Default (scale=1): width = 280px
|
||||
1× physical (scale=0.5): width = 140px
|
||||
4× display (scale=2): width = 560px
|
||||
```
|
||||
|
||||
Document this clearly in `_variables.css` comment. No changes needed — the current approach matches RECON.md recommendation.
|
||||
|
||||
### Template width fixes
|
||||
|
||||
| Template | Current width | Fixed width | Rationale |
|
||||
|----------|--------------|-------------|-----------|
|
||||
| jewel-case.html | 280px (fixed) | `min(280px, 100% - 2rem)` | Responsive on small, accurate on large |
|
||||
| back-tray.html | 280px (via `.demo-tray-container`) | `min(280px, 100% - 2rem)` with `max-height: var(--cd-tray-height)` | Physical constraints |
|
||||
| leaflet.html | `auto` (broken) | `min(var(--cd-leaflet-size), 100% - 2rem)` via `.cd-jewel-case--leaflet` | CD leaflet size + responsive |
|
||||
|
||||
---
|
||||
|
||||
## 4. Reset Strategy
|
||||
|
||||
### Target: Minimal but complete
|
||||
|
||||
The existing reset covers: box-sizing, margin, padding on all elements.
|
||||
|
||||
**Expanded reset:**
|
||||
|
||||
```css
|
||||
*, *::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; /* Each template sets its own family via demo.css */
|
||||
}
|
||||
|
||||
img, svg, video, canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font: inherit;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
```
|
||||
|
||||
This is ~35 lines — lean, covers all the gaps identified in Bug #2. No external normalize, no `@import` of reset. The reset is self-contained.
|
||||
|
||||
---
|
||||
|
||||
## 5. Work Breakdown
|
||||
|
||||
### Phase 1 — Murdock: `templates/demo.css` (Bug #1, #7)
|
||||
|
||||
**Task:** Extract all inline `<style>` blocks into `templates/demo.css`.
|
||||
|
||||
**Steps:**
|
||||
1. Create `templates/demo.css` with all common demo chrome (body flex layout, `.demo-controls`, `.demo-footnote`)
|
||||
2. Convert all raw Open Props references to `--cd-*` tokens
|
||||
3. Add template-specific sections for leaflet's `.leaflet-content--multi`, `.leaflet-pages` styles
|
||||
4. Update all 3 templates to: remove `<style>` blocks, add `<link rel="stylesheet" href="demo.css">`
|
||||
5. Verify all 3 templates render identically in a browser
|
||||
|
||||
**Files:** `templates/demo.css` (new), `templates/jewel-case.html` (edit), `templates/back-tray.html` (edit), `templates/leaflet.html` (edit)
|
||||
|
||||
---
|
||||
|
||||
### Phase 2 — Murdock: Leaflet inline styles to CSS (Bug #5)
|
||||
|
||||
**Task:** Replace all inline `style="..."` attributes in leaflet.html with proper CSS classes.
|
||||
|
||||
**Steps:**
|
||||
1. Add `.cd-jewel-case--leaflet` modifier in opencd.css
|
||||
2. Add `.cd-jewel-case--leaflet .cd-jewel-inner` override
|
||||
3. Add `.human-advisory--inline` variant for leaflet's positioned static advisory
|
||||
4. Add `.leaflet-page ul`, `.leaflet-page dl`, `.leaflet-page dt`, `.leaflet-page dd`, `.leaflet-page p + p` rules in opencd.css leaflet section
|
||||
5. Update leaflet.html: remove all inline style attributes, add classes
|
||||
|
||||
**Files:** `opencd.css` (edit), `templates/leaflet.html` (edit)
|
||||
|
||||
---
|
||||
|
||||
### Phase 3 — B.A.: CSS trim + spine fix (Bug #6, #8)
|
||||
|
||||
**Task:** Trim bloat from opencd.css and fix `.cd-spine--side`.
|
||||
|
||||
**Steps:**
|
||||
1. Strip decorative comment blocks, replace with simple `/* Section */` headers
|
||||
2. Simplify `.disc-art--sheen` gradient to 2-layer
|
||||
3. Consolidate `.advisory-row--*` variants
|
||||
4. Fix `.cd-spine--side`: remove `writing-mode: horizontal-tb` and `flex-direction: row` overrides
|
||||
5. Verify `.cd-spine--side` renders vertically in back-tray.html
|
||||
|
||||
**Files:** `opencd.css` (edit)
|
||||
|
||||
---
|
||||
|
||||
### Phase 4 — B.A.: Reset expansion + dimension fixes (Bug #2, #3, #4)
|
||||
|
||||
**Task:** Expand the reset in opencd.css, add tray height, fix jewel case width strategy.
|
||||
|
||||
**Steps:**
|
||||
1. Replace existing 5-line reset with ~35-line expanded reset
|
||||
2. Add `--cd-tray-height` token in `:root`
|
||||
3. Add `max-height: var(--cd-tray-height)` to `.back-tray` with `overflow-y: auto`
|
||||
4. Change `.cd-jewel-case` width from fixed to `min(var(--cd-jewel-width), 100% - 2rem)`
|
||||
5. Add `max-height: var(--cd-tray-height)` to `.demo-tray-container` (in demo.css)
|
||||
6. Tighten back-tray.html content — condense verbose paragraphs
|
||||
|
||||
**Files:** `opencd.css` (edit), `templates/demo.css` (edit), `templates/back-tray.html` (edit)
|
||||
|
||||
---
|
||||
|
||||
### Phase 5 — Amy: Validation (after BA completes Phases 3 & 4)
|
||||
|
||||
**Task:** Visual regression check on all 3 templates.
|
||||
|
||||
**Checklist:**
|
||||
- [ ] jewel-case.html renders at ~280×245px, centered, responsive on small viewports
|
||||
- [ ] jewel-case.html `data-jewel-state="open"` doubles width, back-tray appears
|
||||
- [ ] back-tray.html renders at ~280×236px, not a vertical slab
|
||||
- [ ] back-tray.html side spines show vertical text, readable
|
||||
- [ ] leaflet.html renders at ~240×240px, not stretched to full viewport
|
||||
- [ ] leaflet.html multi-page navigation works (prev/next buttons)
|
||||
- [ ] No `<style>` blocks in any HTML template
|
||||
- [ ] No raw Open Props tokens (`var(--gray-*)`, `var(--font-*)`, etc.) in any file except opencd.css `:root` definitions
|
||||
- [ ] All 3 templates look identical to current renders after the refactor
|
||||
|
||||
---
|
||||
|
||||
## Execution Order
|
||||
|
||||
```
|
||||
┌─────────────────────┐
|
||||
│ PHASE 1 (Murdock) │
|
||||
│ demo.css extraction │
|
||||
│ + token conversion │
|
||||
└─────────┬───────────┘
|
||||
│
|
||||
┌─────────▼───────────┐
|
||||
│ PHASE 2 (Murdock) │
|
||||
│ leaflet inline→CSS │
|
||||
└─────────┬───────────┘
|
||||
│
|
||||
┌───────────────┼───────────────┐
|
||||
│ │ │
|
||||
┌────────▼───────┐ ┌────▼───────┐ │
|
||||
│ PHASE 3 (BA) │ │ PHASE 4 │ │
|
||||
│ CSS trim + │ │ (BA) │ │
|
||||
│ spine fix │ │ Reset + │ │
|
||||
└────────┬───────┘ │ dimensions │ │
|
||||
│ └────┬───────┘ │
|
||||
│ │ │
|
||||
└───────────────┼───────────────┘
|
||||
│
|
||||
┌─────────▼───────────┐
|
||||
│ PHASE 5 (Amy) │
|
||||
│ Visual validation │
|
||||
└─────────────────────┘
|
||||
```
|
||||
|
||||
Murdock handles content extraction (Phases 1–2). B.A. handles structural CSS (Phases 3–4). Amy validates (Phase 5). I oversee and sign off.
|
||||
|
||||
---
|
||||
|
||||
*"I love it when a plan comes together."*
|
||||
— Colonel John Hannibal Smith, A-Team Commander
|
||||
245
CSS_QUALITY.md
Normal file
245
CSS_QUALITY.md
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
# CSS_QUALITY.md — Quality Gate Criteria for OpenCD CSS Overhaul
|
||||
|
||||
> **Author:** Amy Amanda "Triple A" Allen (A-Team Quality & Verification)
|
||||
> **Status:** Gate — define PASS criteria and FAIL blockers
|
||||
> **Context:** BUGFIX_PLAN.md (8-bug analysis) cross-referenced against current codebase at commit `6a85ae7`
|
||||
> **Date:** 2026-05-26
|
||||
|
||||
---
|
||||
|
||||
## Source Verification
|
||||
|
||||
I inspected every file referenced in BUGFIX_PLAN.md against the current working tree (clean — no uncommitted work). All measurements below are from the actual files on disk.
|
||||
|
||||
| File | Lines | Status |
|
||||
|------|-------|--------|
|
||||
| `opencd.css` | 711 | **Current state** — trim target ~640 per plan |
|
||||
| `templates/jewel-case.html` | 130 | inline `<style>` 8–55 (48 lines) |
|
||||
| `templates/back-tray.html` | 151 | inline `<style>` 8–60 (53 lines) |
|
||||
| `templates/leaflet.html` | 183 | inline `<style>` 8–86 (79 lines) + 8 inline `style=""` attrs |
|
||||
| `templates/demo.css` | — | **Does not exist** — not yet created |
|
||||
|
||||
---
|
||||
|
||||
## PASS Criteria
|
||||
|
||||
### Criterion 1 — No inline CSS in templates
|
||||
|
||||
**Specification:** All three templates (`jewel-case.html`, `back-tray.html`, `leaflet.html`) must contain zero `<style>` blocks and zero `style=""` attribute values. All presentation comes from `<link>`-ed stylesheets.
|
||||
|
||||
**Current state:** FAIL across all three templates.
|
||||
- `jewel-case.html`: `<style>` block lines 8–55 (48 lines)
|
||||
- `back-tray.html`: `<style>` block lines 8–60 (53 lines) including `.demo-tray-container`
|
||||
- `leaflet.html`: `<style>` block lines 8–86 (79 lines) **plus 8 inline `style=""` attributes** on `<main>`, `.cd-jewel-inner`, `<ul>`, `<dl>`, `<dt>`, `<dd>`, `<p>`, and `<aside>`
|
||||
|
||||
**Verification method:** `grep -rn '<style' templates/ && grep -rn 'style="' templates/'` — both must return empty.
|
||||
|
||||
**Target:** All `<style>` blocks extracted to `templates/demo.css`. All inline `style=""` attributes replaced with class-based rules in `opencd.css` (`.cd-jewel-case--leaflet`, `.leaflet-page ul`, `.leaflet-page dl`, `.leaflet-page dt`, `.leaflet-page dd`, `.leaflet-page p + p`, `.human-advisory--inline`).
|
||||
|
||||
---
|
||||
|
||||
### Criterion 2 — CSS reset present and expanded
|
||||
|
||||
**Specification:** The reset block in `opencd.css` must cover not only `box-sizing`, `margin`, and `padding` on all elements, but also:
|
||||
- `html { font-size: 100%; line-height: 1.5; -webkit-text-size-adjust: 100%; }`
|
||||
- `body { font-family: inherit; }`
|
||||
- `img, svg, video, canvas { display: block; max-width: 100%; }`
|
||||
- `button, input, select, textarea { font: inherit; border: 0; background: transparent; }`
|
||||
- `a { color: inherit; text-decoration: none; }`
|
||||
- `ul, ol { list-style: none; }`
|
||||
- `h1–h6 { font-size: inherit; font-weight: inherit; }`
|
||||
|
||||
**Current state:** PARTIAL. The existing 5-line reset (lines 191–195) covers `box-sizing`, `margin`, `padding` only. The expanded ~35-line reset from BUGFIX_PLAN §4 is not yet implemented.
|
||||
|
||||
**Verification method:** Read `opencd.css` lines ~191–230. Confirm all 7 listed properties are present. The reset must be self-contained — no `@import` of an external reset library.
|
||||
|
||||
---
|
||||
|
||||
### Criterion 3 — All 3 templates use same `--cd-*` tokens
|
||||
|
||||
**Specification:** No raw Open Props tokens (`var(--gray-*)`, `var(--red-*)`, `var(--font-*)`, `var(--size-*)`, `var(--radius-*)`, `var(--shadow-*)`, `var(--ease-*)`, `var(--font-size-*)`, `var(--size-fluid-*)`) appear in any template file or `demo.css`. Every CSS value is either a `--cd-*` token or a literal that is itself a zero-magic-numbers value.
|
||||
|
||||
**Current state:** FAIL. Raw Open Props tokens are in all three templates:
|
||||
- `var(--font-sans)` — in all three `<style>` blocks
|
||||
- `var(--red-6)` — in jewel-case and back-tray checkbox styles
|
||||
- `var(--gray-6)`, `var(--gray-5)`, `var(--gray-0)`, `var(--gray-2)` — in `<style>` blocks across all three
|
||||
- `var(--radius-2)` — in jewel-case and leaflet `<style>` blocks
|
||||
- `var(--font-mono)` — in leaflet `<style>` block and inline `style=""`
|
||||
- `var(--size-fluid-1)` — in leaflet inline `style=""` on `<dl>`
|
||||
|
||||
**Verification method:**
|
||||
```
|
||||
grep -rn 'var(--\(gray\|red\|font\|size\|radius\|shadow\|ease\|blue\|green\|orange\|purple\|yellow\|teal\|cyan\|pink\|indigo\))' templates/
|
||||
```
|
||||
Must return zero matches across all files in `templates/`.
|
||||
|
||||
**Token mapping table (from BUGFIX_PLAN §1, Bug #7):**
|
||||
|
||||
| Raw Open Props | Replacement `--cd-*` token |
|
||||
|----------------|---------------------------|
|
||||
| `var(--gray-6)` | `var(--cd-text-muted)` |
|
||||
| `var(--gray-5)` | `var(--cd-text-muted)` (or `--cd-grid-color`) |
|
||||
| `var(--gray-0)` | (body background: use `demo.css` value) |
|
||||
| `var(--red-6)` | `var(--cd-advisory-red)` |
|
||||
| `var(--radius-2)` | `var(--cd-jewel-radius)` |
|
||||
| `var(--font-sans)` | `var(--cd-font-label)` |
|
||||
| `var(--font-mono)` | `var(--cd-font-mono)` |
|
||||
| `var(--size-fluid-1)` | `var(--cd-space-inset)` or `var(--cd-space-stack)` |
|
||||
|
||||
---
|
||||
|
||||
### Criterion 4 — `opencd.css` < 250 lines
|
||||
|
||||
**Specification:** The main framework stylesheet must be under 250 lines after the overhaul. Comments count toward the total; blank lines do not (they're formatting, not content). Line count measured by `wc -l`.
|
||||
|
||||
**Current state:** FAIL. `opencd.css` is **711 lines**.
|
||||
|
||||
**CONCERN — Feasibility:** The BUGFIX_PLAN §2 (Bug #6) targets ~640 lines after trimming ~70 lines of decorative comments and disc art gradient. This leaves a gap of **~390 lines** between the plan's own target and this criterion. Reaching <250 lines would require:
|
||||
- Eliminating the `:root` custom properties block (currently 169 lines) — but this is the core of the zero-magic-numbers principle
|
||||
- Cutting ~70% of component CSS (jewel case, spine, leaflet, disc art, human advisory, back tray, grid overlay, responsive, print, grain — ~430 lines combined)
|
||||
- The custom properties + minimal component definitions alone are architecturally essential
|
||||
|
||||
**Recommendation:** Either raise this criterion to ~640 lines (matching BUGFIX_PLAN target) or define explicitly what sections are excluded from the count (e.g., `:root` tokens don't count). As written, this criterion is inconsistent with the plan it gates.
|
||||
|
||||
---
|
||||
|
||||
### Criterion 5 — Jewel case width fills viewport
|
||||
|
||||
**Specification:** `.cd-jewel-case` must use a responsive width strategy:
|
||||
```css
|
||||
width: min(var(--cd-jewel-width), 100% - 2rem);
|
||||
```
|
||||
This caps at CD dimensions on large screens while filling smaller viewports. The open state must also scale: `width: min(var(--cd-jewel-open-width), 100% - 2rem)` (or equivalent).
|
||||
|
||||
**Current state:** FAIL. `.cd-jewel-case` (line 205) has `width: var(--cd-jewel-width)` — fixed at 280px. The open state (line 220) has `width: var(--cd-jewel-open-width)` — fixed at 560px. Neither has a `min()` responsive wrapper.
|
||||
|
||||
**Verification method:** Read the `width` property of `.cd-jewel-case` (lines 205–206) and `.cd-jewel-case--open` (lines 219–221). Confirm `min(...)` pattern is used.
|
||||
|
||||
**Note:** The container query breakpoints (`@container (max-width: 350px)` and `@container (min-width: 351px) and (max-width: 549px)`) already handle narrow parent containers with `width: 100% !important`. The `min()` strategy covers the mid-range between 350px and 549px where the fixed 280px feels too small but the breakpoints don't activate.
|
||||
|
||||
---
|
||||
|
||||
### Criterion 6 — Back-tray readable
|
||||
|
||||
**Specification:** The back-tray standalone page must render at approximately CD physical proportions (~302×236px at 2× scale) — not an unreadable vertical slab.
|
||||
|
||||
**Required changes:**
|
||||
1. `--cd-tray-height` token must exist in `:root`:
|
||||
```css
|
||||
--cd-tray-height: calc(236px * var(--cd-scale)); /* 118mm × 2 */
|
||||
```
|
||||
2. `.back-tray` must have `max-height: var(--cd-tray-height)` with `overflow-y: auto`
|
||||
3. `.demo-tray-container` must have `max-height: var(--cd-tray-height)` (in `demo.css`)
|
||||
4. Back-tray content (tracklist, credits) must not overflow to >236px at default scale
|
||||
|
||||
**Current state:** FAIL.
|
||||
- `--cd-tray-height` token is **missing** from `opencd.css :root`
|
||||
- `.back-tray` has **no height constraint** — no `max-height`, no `overflow-y`
|
||||
- `.demo-tray-container` has `width: var(--cd-jewel-width)` but no height limit
|
||||
- The content (8 tracklist items + 3 credit paragraphs + technical paragraph) flows vertically unbounded
|
||||
|
||||
**Verification method:**
|
||||
```css
|
||||
/* Confirm in :root */
|
||||
--cd-tray-height: calc(236px * var(--cd-scale));
|
||||
|
||||
/* Confirm on .back-tray */
|
||||
max-height: var(--cd-tray-height);
|
||||
overflow-y: auto;
|
||||
|
||||
/* Confirm on .demo-tray-container (in demo.css) */
|
||||
max-height: var(--cd-tray-height);
|
||||
```
|
||||
|
||||
**Visual check:** Open `templates/back-tray.html` in a browser. The container should not exceed ~280×236px at default scale. Content that exceeds this becomes scrollable.
|
||||
|
||||
---
|
||||
|
||||
### Criterion 7 — Leaflet width correct
|
||||
|
||||
**Specification:** The leaflet template `.cd-jewel-case` must use its proper CD leaflet dimensions — not stretch to fill the viewport.
|
||||
|
||||
**Required changes:**
|
||||
1. Remove inline `width: auto` from `<main>` — replace with `.cd-jewel-case--leaflet` modifier in `opencd.css`:
|
||||
```css
|
||||
.cd-jewel-case--leaflet {
|
||||
width: min(var(--cd-leaflet-size), 100% - 2rem);
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
```
|
||||
2. Remove inline `grid-column: 1/-1` from `.cd-jewel-inner` — replace with `.cd-jewel-case--leaflet .cd-jewel-inner`:
|
||||
```css
|
||||
.cd-jewel-case--leaflet .cd-jewel-inner {
|
||||
grid-column: 2;
|
||||
gap: var(--cd-space-inset);
|
||||
}
|
||||
```
|
||||
3. All 8 inline `style="..."` attributes on leaflet.html elements must be replaced with CSS class rules.
|
||||
|
||||
**Current state:** FAIL.
|
||||
- `<main class="cd-jewel-case" style="width: auto; box-shadow: none; background: transparent;">` — `width: auto` destroys the CD dimension constraint
|
||||
- `<div class="cd-jewel-inner" style="grid-column:1/-1; gap: var(--cd-space-inset);">` — `grid-column: 1/-1` spans into the spine column
|
||||
- 6 more inline `style=""` attributes on `<ul>`, `<dl>`, `<dt>`, `<dd>`, `<p>`, `<aside>`
|
||||
|
||||
**Verification method:**
|
||||
- `grep 'style=' templates/leaflet.html` must return empty
|
||||
- `.cd-jewel-case--leaflet` must exist in `opencd.css` with `width: min(var(--cd-leaflet-size), 100% - 2rem)`
|
||||
|
||||
**Visual check:** Open `templates/leaflet.html` in a browser. The leaflet should render at ~240px wide (at 2× scale), centered like the other templates. Not stretched to full viewport width.
|
||||
|
||||
---
|
||||
|
||||
## FAIL Blockers
|
||||
|
||||
Any of these conditions causes an automatic FAIL verdict, regardless of other criteria:
|
||||
|
||||
### F-1: Inline `<style>` or `style=""` remains in any template
|
||||
The primary architectural decision in BUGFIX_PLAN is to extract all inline CSS. If even one `<style>` block or `style=""` attribute remains after the overhaul, the core rewrite has failed.
|
||||
|
||||
### F-2: `--cd-tray-height` token not defined
|
||||
Without this token, the back-tray height constraint cannot work. This is a new dependency introduced by BUGFIX_PLAN Bug #3 — its absence means the fix was not applied.
|
||||
|
||||
### F-3: `.cd-spine--side` still has `writing-mode: horizontal-tb`
|
||||
This is the root cause of Bug #8. If the override is still present, the side spine text will remain illegible on the back-tray page. Check line 270 of `opencd.css` — must be removed or set to `writing-mode: vertical-rl`.
|
||||
|
||||
### F-4: leaflet `<main>` still has inline `width: auto`
|
||||
This is the root cause of Bug #5. If it persists, the leaflet page is still broken — the CD dimension constraint is overridden.
|
||||
|
||||
### F-5: Raw Open Props tokens used outside `opencd.css :root`
|
||||
The design principle is that `--cd-*` tokens are the sole API surface. Any raw `var(--gray-*)`, `var(--red-*)`, `var(--font-*)`, etc. in template files, `demo.css`, or component CSS (outside `:root` definitions) is a semantic layer violation.
|
||||
|
||||
### F-6: Any template fails to render or has visible layout defects
|
||||
If a find-and-replace error breaks the layout of any template (elements overlapping, text invisible, layout collapsed), the deliverable fails regardless of how many criteria pass on paper. Validation is by visual inspection in a browser.
|
||||
|
||||
---
|
||||
|
||||
## Summary Table
|
||||
|
||||
| # | Criterion | Current State | Priority | Risk |
|
||||
|---|-----------|---------------|----------|------|
|
||||
| 1 | No inline CSS in templates | **FAIL** — 48–79 lines per template | Critical | H |
|
||||
| 2 | CSS reset expanded | **PARTIAL** — basic reset present, not expanded | High | M |
|
||||
| 3 | All templates use `--cd-*` tokens | **FAIL** — 10+ raw Open Props references | Critical | H |
|
||||
| 4 | `opencd.css` < 250 lines | **FAIL** — 711 lines; **see CONCERN below** | Medium | **H** |
|
||||
| 5 | Jewel case width fills viewport | **FAIL** — fixed `width`, no `min()` | High | H |
|
||||
| 6 | Back-tray readable | **FAIL** — no height constraint, `--cd-tray-height` missing | High | H |
|
||||
| 7 | Leaflet width correct | **FAIL** — `width: auto` in inline style | Critical | H |
|
||||
|
||||
### Verdict on Criterion 4 (`opencd.css < 250 lines`)
|
||||
|
||||
**CONCERN — Feasibility mismatch.**
|
||||
|
||||
Cross-referencing the BUGFIX_PLAN (which this gate criteria document is supposed to gate) shows an explicit target of ~640 lines (Bug #6, §2). The plan identifies ~70 lines of trimmable material. Getting to <250 requires removing ~65% of the file — more than 460 lines of CSS that the plan considers architecturally essential.
|
||||
|
||||
The `:root` custom properties section alone is 169 lines. The component CSS (jewel case, spine, leaflet, disc art, human advisory, back tray, grid, responsive, print, grain) totals ~430 lines. Trimming to <250 would require either:
|
||||
- **Merging all components into minified single-line rules** — violates the plan's readability and maintainability principles
|
||||
- **Dropping features** — no responsive breakpoints, no print styles, no grid overlays, no grain texture
|
||||
- **Excluding certain sections from the count** — not currently specified
|
||||
|
||||
**Recommendation:** Revise this criterion to ~640 lines per BUGFIX_PLAN, or clarify which sections are excluded. If the intent is that `opencd.css` is the production build (post-minification), state that explicitly. As written, the criterion and the plan are contradictory, and I cannot pass a deliverable that meets both.
|
||||
|
||||
---
|
||||
|
||||
*"There's always a bigger story. The question is whether you find it before the plan goes sideways."*
|
||||
— Amy Amanda Allen, A-Team Intelligence Officer
|
||||
193
VALIDATION_2.md
Normal file
193
VALIDATION_2.md
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
# OpenCD Validation 2 — Post-Fix Audit
|
||||
|
||||
**Validator:** Amy Amanda Allen (a-team.dev)
|
||||
**Date:** 2026-05-26
|
||||
**Parent Commit:** `fa427d4` (Hannibal Smith, GPG-signed ✓)
|
||||
**Platform:** Hermes Kanban task `t_7fb99d0a` — workspace `/home/exedev/studies/opencd`
|
||||
|
||||
---
|
||||
|
||||
## 1. Zero `<style>` or inline CSS in any template — all in opencd.css
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
| Template | `<style>` tags | Inline `style=""` | External `<link>` only |
|
||||
|---|---|---|---|
|
||||
| jewel-case.html | 0 | 0 | ✓ (opencd.css + demo.css) |
|
||||
| back-tray.html | 0 | 0 | ✓ (opencd.css + demo.css) |
|
||||
| leaflet.html | 0 | 0 | ✓ (opencd.css + demo.css) |
|
||||
|
||||
The only `style` substring occurrences are:
|
||||
- `<link rel="stylesheet" href="...">` — external stylesheet links (correct)
|
||||
- `document.documentElement.style.setProperty(...)` — JavaScript, not inline CSS
|
||||
|
||||
No `<style>` blocks remain. No `style=""` HTML attributes exist.
|
||||
|
||||
---
|
||||
|
||||
## 2. CSS reset present
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
File: `opencd.css` — Section 2, lines 92–100 (9 rules):
|
||||
|
||||
| Rule | Coverage |
|
||||
|---|---|
|
||||
| `*, *::before, *::after` | box-sizing, margin, padding zeroed |
|
||||
| `html` | font-size 100%, line-height 1.5, `-webkit-text-size-adjust` |
|
||||
| `body` | font-family inherit |
|
||||
| `img, svg, video, canvas` | block display, max-width 100% |
|
||||
| `button, input, select, textarea` | font inherit, border 0, bg transparent |
|
||||
| `a` | color inherit, no underline |
|
||||
| `ul, ol` | list-style none |
|
||||
| `h1–h6` | font-size + font-weight inherit |
|
||||
|
||||
Comprehensive modern reset. No gaps identified.
|
||||
|
||||
---
|
||||
|
||||
## 3. jewel-case.html renders at proper CD jewel width
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
- `--cd-jewel-width: calc(280px * var(--cd-scale))` — default 280px at 2× scale (142mm physical)
|
||||
- Width rule: `width: min(var(--cd-jewel-width), calc(100% - 2rem))`
|
||||
- Open state: `width: min(var(--cd-jewel-open-width), calc(100% - 2rem))`
|
||||
- Both `min()` expressions properly wrapped in `calc()` for cross-browser compatibility
|
||||
- Container query breakpoint at 350px gracefully collapses to 100% width
|
||||
|
||||
All dimensional tokens route through `--cd-scale` for proportional scaling. Verified against the ISO 15727 CD jewel case spec at 2× display scale.
|
||||
|
||||
---
|
||||
|
||||
## 4. back-tray.html readable (not 280×1305 slab)
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
- Grid layout: `grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width)` — 3 columns
|
||||
- Side spines at `grid-column: 1` and `grid-column: 3` (no overlap)
|
||||
- Content at `grid-column: 2` with readable tracklist and credits
|
||||
- `max-height: var(--cd-tray-height)` = `calc(236px * var(--cd-scale))` — constrained
|
||||
- `overflow-y: auto` on both `.back-tray` and `.demo-tray-container`
|
||||
- Scrollbar visible (fixed from `overflow: hidden`)
|
||||
- 99 lines of clean, semantic HTML
|
||||
|
||||
The 280×1305 slab issue from the initial prototype is fully resolved. Proper booklet insert dimensions.
|
||||
|
||||
---
|
||||
|
||||
## 5. leaflet.html width fixed
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
- `.cd-jewel-case--leaflet { width: min(var(--cd-leaflet-size), calc(100% - 2rem)); }`
|
||||
- `--cd-leaflet-size: calc(240px * var(--cd-scale))` — default 240px (120mm at 2×)
|
||||
- `calc(100% - 2rem)` wrapper present for narrow container compatibility
|
||||
- `.leaflet-content--multi` adjusts max-width for multi-page layout
|
||||
- Responsive: `@container (max-width: 350px) { .leaflet-content { max-width: 100%; } }`
|
||||
|
||||
All `min()` calls are calc()-wrapped. No missing parentheses or browser compat issues.
|
||||
|
||||
---
|
||||
|
||||
## 6. spine renders correctly
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
**Jewel case spine (vertical):**
|
||||
- `grid-column: 1; grid-row: 1 / -1` — full-height left column
|
||||
- `writing-mode: vertical-rl; text-orientation: mixed` — correct vertical text
|
||||
- Font: `--cd-font-label`, color: `--cd-text-on-spine`, bg: `--cd-spine-bg`
|
||||
|
||||
**Side spines (back-tray):**
|
||||
- `.cd-spine--side` class defined (inherits `.cd-spine` vertical-rl)
|
||||
- Left spine: `.back-tray > .cd-spine:first-child { grid-column: 1; }`
|
||||
- Right spine: `.back-tray > .cd-spine:last-child { grid-column: 3; }`
|
||||
- No overlap — positioned at opposite ends of the 3-column grid
|
||||
|
||||
**Responsive:**
|
||||
- `@container (max-width: 350px)` switches to `horizontal-tb` + row flex
|
||||
|
||||
---
|
||||
|
||||
## 7. opencd.css < 250 lines
|
||||
|
||||
**VERDICT: FAIL**
|
||||
|
||||
Current line count: **254 lines** (confirmed by `wc -l`).
|
||||
|
||||
4 lines over the threshold. The disc-art token migration (parent task `fa427d4`) added 7 new `--cd-disc-surface-*` token declarations in `:root` to eliminate raw OpenProps values from disc-art gradients. This necessary semantic fix pushed the file past the 250-line cap.
|
||||
|
||||
**CONCERN:** The `--cd-disc-surface-*` conversion is the right engineering decision — eliminating raw `var(--gray-*)` references from gradient values — but it collides with the line budget. Options:
|
||||
- (a) Accept 254 lines as the new baseline and update the criterion
|
||||
- (b) Remove or consolidate the reset section (~9 lines) — could be shortened
|
||||
- (c) Merge adjacent short rules into single lines in the grid section
|
||||
|
||||
---
|
||||
|
||||
## 8. Same `--cd-*` tokens used across all 3 templates
|
||||
|
||||
**VERDICT: PASS**
|
||||
|
||||
All three templates use only shared CSS class names that consume `--cd-*` tokens from `opencd.css`:
|
||||
|
||||
| Token | Defined in :root | Used by | Verified |
|
||||
|---|---|---|---|
|
||||
| `--cd-jewel-width` | ✓ | jewel-case, leaflet wrapper | ✓ |
|
||||
| `--cd-jewel-height` | ✓ | jewel-case (min-height) | ✓ |
|
||||
| `--cd-jewel-open-width` | ✓ | jewel-case (open state) | ✓ |
|
||||
| `--cd-leaflet-size` | ✓ | leaflet wrapper | ✓ |
|
||||
| `--cd-tray-width` | ✓ | back-tray | ✓ |
|
||||
| `--cd-tray-height` | ✓ | back-tray (max-height) | ✓ |
|
||||
| `--cd-spine-width` | ✓ | jewel-case, back-tray grids | ✓ |
|
||||
| `--cd-disc-diameter` | ✓ | jewel-case (disc-art) | ✓ |
|
||||
| `--cd-disc-hole` | ✓ | jewel-case (disc-hole) | ✓ |
|
||||
| `--cd-disc-surface-1`–`6` | ✓ | jewel-case (disc-art) | ✓ |
|
||||
| `--cd-disc-hole-text` | ✓ | jewel-case (disc-hole) | ✓ |
|
||||
| `--cd-surface-0`–`4` | ✓ | all templates | ✓ |
|
||||
| `--cd-text-primary` / `-secondary` / `-muted` / `-on-spine` | ✓ | all templates | ✓ |
|
||||
| `--cd-font-*` | ✓ | all templates | ✓ |
|
||||
| `--cd-space-*` | ✓ | all templates | ✓ |
|
||||
| `--cd-advisory-*` | ✓ | jewel-case, leaflet | ✓ |
|
||||
| `--cd-grid-*` | ✓ | all templates | ✓ |
|
||||
| `--cd-tray-bg-*` | ✓ | back-tray | ✓ |
|
||||
| `--cd-spine-bg` | ✓ | jewel-case, back-tray spines | ✓ |
|
||||
| `--cd-jewel-radius` | ✓ | jewel-case, demo.css | ✓ |
|
||||
| `--cd-z-stack-base` | ✓ | disc-hole | ✓ |
|
||||
|
||||
No template injects raw color values, raw pixel dimensions, or hardcoded font values. Zero OpenProps escapes outside `:root` definitions in `opencd.css`. The 7 new `--cd-disc-surface-*` tokens are used consistently in the disc-art gradient declarations.
|
||||
|
||||
---
|
||||
|
||||
## Previous CONCERN resolution
|
||||
|
||||
The previous validation (VALIDATION.md) identified 3 magic-number violations:
|
||||
|
||||
| Concern | Tokenized? | Now |
|
||||
|---|---|---|
|
||||
| `font-weight: 600` | → `--cd-font-weight-semibold: 600` | ✓ |
|
||||
| `opacity: 0.8` | → `--cd-text-opacity-muted: 0.8` | ✓ |
|
||||
| `z-index: 1` | → `--cd-z-stack-base: 1` | ✓ |
|
||||
|
||||
All three resolved. The magic-numbers objective is now clean.
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
| # | Criterion | Verdict |
|
||||
|---|---|---|
|
||||
| 1 | Zero `<style>` or inline CSS in any template | PASS |
|
||||
| 2 | CSS reset present | PASS |
|
||||
| 3 | jewel-case.html proper CD jewel width | PASS |
|
||||
| 4 | back-tray.html readable (not 280×1305 slab) | PASS |
|
||||
| 5 | leaflet.html width fixed | PASS |
|
||||
| 6 | spine renders correctly | PASS |
|
||||
| 7 | opencd.css < 250 lines | **FAIL** (254) |
|
||||
| 8 | Same `--cd-*` tokens across all templates | PASS |
|
||||
|
||||
**Overall: 7 PASS / 1 FAIL (criterion 7 — 4 lines over budget)**
|
||||
|
||||
The sole failing criterion is a line-count boundary issue caused by the semantically correct disc-art token migration. The fix quality is solid: all three width `min()` calls calc()-wrapped, spines positioned without overlap, back-tray scrollable, disc-art tokens consistent, magic numbers eliminated. Criterion 7 needs a decision: relax the cap to 255 or accept consolidation work to trim 4 lines.
|
||||
|
||||
— Amy Amanda Allen, A-Team Quality
|
||||
788
opencd.css
788
opencd.css
|
|
@ -1,712 +1,254 @@
|
|||
/* ==========================================================================
|
||||
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
|
||||
========================================================================== */
|
||||
|
||||
/* OpenCD — CD Jewel Case CSS Framework */
|
||||
@import "https://unpkg.com/open-props";
|
||||
|
||||
/* ==========================================================================
|
||||
1. Custom Properties — All --cd-* Tokens
|
||||
Components MUST NOT reference Open Props directly.
|
||||
Users override these on :root or a scoped container to theme.
|
||||
========================================================================== */
|
||||
|
||||
/* 1. Tokens */
|
||||
:root {
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Physical CD Dimensions (at 2× scale, ISO 15727)
|
||||
Formula: calc(<mm> * 2px / 1mm) = <px>
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-scale: 1;
|
||||
/* --cd-scale: 1 = default 2× display scale. 0.5 = 1×, 2 = 4×, etc. */
|
||||
|
||||
--cd-jewel-width: calc(280px * var(--cd-scale)); /* 142 mm × 2 */
|
||||
--cd-jewel-height: calc(245px * var(--cd-scale)); /* 125 mm × 2 */
|
||||
--cd-jewel-open-width: calc(560px * var(--cd-scale)); /* 284 mm × 2 */
|
||||
--cd-disc-diameter: calc(240px * var(--cd-scale)); /* 120 mm × 2 */
|
||||
--cd-disc-hole: calc(30px * var(--cd-scale)); /* Ø15 mm × 2 */
|
||||
--cd-leaflet-size: calc(240px * var(--cd-scale)); /* 120 mm sq × 2 */
|
||||
--cd-spine-width: calc(14px * var(--cd-scale)); /* ~7 mm × 2 */
|
||||
--cd-tray-width: calc(260px * var(--cd-scale)); /* ~130 mm × 2 */
|
||||
|
||||
/* ── 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-jewel-width: calc(280px * var(--cd-scale));
|
||||
--cd-jewel-height: calc(245px * var(--cd-scale));
|
||||
--cd-jewel-open-width: calc(560px * var(--cd-scale));
|
||||
--cd-disc-diameter: calc(240px * var(--cd-scale));
|
||||
--cd-disc-hole: calc(30px * var(--cd-scale));
|
||||
--cd-leaflet-size: calc(240px * var(--cd-scale));
|
||||
--cd-spine-width: calc(14px * var(--cd-scale));
|
||||
--cd-tray-width: calc(260px * var(--cd-scale));
|
||||
--cd-tray-height: calc(236px * var(--cd-scale));
|
||||
--cd-surface-0: var(--gray-0);
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Typography
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-surface-1: oklch(30% .015 265);
|
||||
--cd-surface-2: oklch(35% .015 265);
|
||||
--cd-surface-3: oklch(40% .015 265);
|
||||
--cd-surface-4: oklch(15% .01 265);
|
||||
--cd-font-neo-grotesque: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
|
||||
--cd-font-label: var(--cd-font-neo-grotesque); /* spine, metadata, credits */
|
||||
--cd-font-body: var(--font-serif); /* leaflet prose */
|
||||
--cd-font-mono: var(--font-mono-code, var(--font-mono));
|
||||
|
||||
--cd-font-label: var(--cd-font-neo-grotesque);
|
||||
--cd-font-body: var(--font-serif);
|
||||
--cd-font-mono: var(--font-mono-code, var(--font-mono));
|
||||
--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-secondary: var(--gray-7);
|
||||
--cd-text-muted: var(--gray-5);
|
||||
--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-dark: var(--red-7);
|
||||
--cd-advisory-bg: var(--red-0);
|
||||
--cd-advisory-fg: #000;
|
||||
--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;
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Jewel Case Decorations
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-jewel-radius: var(--radius-2); /* 5px */
|
||||
--cd-text-opacity-muted: 0.8;
|
||||
--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);
|
||||
--cd-grid-color: var(--gray-3);
|
||||
--cd-grid-color-alt: var(--gray-2);
|
||||
--cd-grid-fine: 4px;
|
||||
--cd-grid-coarse: 8px;
|
||||
--cd-jewel-radius: var(--radius-2);
|
||||
--cd-jewel-shadow: var(--shadow-2);
|
||||
--cd-jewel-shadow-raised: var(--shadow-3);
|
||||
--cd-leaflet-radius: var(--radius-3); /* 1rem */
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Component Shadows (all rgba/rgb values defined here, not inline)
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-leaflet-radius: var(--radius-3);
|
||||
--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-shadow: inset 0 0 8px rgb(0 0 0 / 0.12);
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Borders & Dividers
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-advisory-border: 2px solid var(--cd-advisory-fg);
|
||||
--cd-tray-border-top: 1px solid var(--cd-grid-color);
|
||||
--cd-track-border-bot: 1px solid var(--cd-grid-color-alt);
|
||||
--cd-track-num-min-w: 2.5ch;
|
||||
--cd-print-border: 1px solid #ccc;
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Letter Spacing Scale
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--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);
|
||||
--cd-space-sm: var(--size-2);
|
||||
--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-2: 0.075em;
|
||||
--cd-letter-spacing-3: 0.1em;
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Motion & Easing
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-transition-duration: 200ms;
|
||||
--cd-ease-flip: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--cd-ease-default: var(--ease-3);
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Print Dimensions
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-print-jewel-width: 142mm;
|
||||
--cd-print-jewel-height: 125mm;
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Grain Texture
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-grain-size-1: 120px;
|
||||
--cd-grain-size-2: 200px;
|
||||
--cd-grain-opacity-1: 0.02;
|
||||
--cd-grain-opacity-2: 0.015;
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Responsive Breakpoints (container query widths)
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
--cd-break-sm: 350px;
|
||||
--cd-break-sm: 350px;
|
||||
--cd-break-md-min: 351px;
|
||||
--cd-break-md-max: 549px;
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
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 */
|
||||
--cd-disc-hole-scale: 0.6;
|
||||
--cd-disc-hole-font-scale: 0.5;
|
||||
--cd-z-stack-base: 1;
|
||||
--cd-aspect-jewel: 280 / 245;
|
||||
--cd-aspect-leaflet: 1 / 1;
|
||||
--cd-aspect-disc: 1 / 1;
|
||||
--cd-disc-surface-1: var(--gray-4);
|
||||
--cd-disc-surface-2: var(--gray-2);
|
||||
--cd-disc-surface-3: var(--gray-6);
|
||||
--cd-disc-surface-4: var(--gray-5);
|
||||
--cd-disc-surface-5: var(--gray-7);
|
||||
--cd-disc-surface-6: var(--gray-3);
|
||||
--cd-disc-hole-text: var(--gray-4);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Reset
|
||||
========================================================================== */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Jewel Case Container (.cd-jewel-case)
|
||||
========================================================================== */
|
||||
/* 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; }
|
||||
img, svg, video, canvas { display: block; max-width: 100%; }
|
||||
button, input, select, textarea { font: inherit; border: 0; background: transparent; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
ul, ol { list-style: none; }
|
||||
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
|
||||
|
||||
/* 3. Jewel Case */
|
||||
.cd-jewel-case {
|
||||
display: grid;
|
||||
grid-template-columns: var(--cd-spine-width) 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
width: var(--cd-jewel-width);
|
||||
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;
|
||||
display: grid; grid-template-columns: var(--cd-spine-width) 1fr; grid-template-rows: auto 1fr;
|
||||
width: min(var(--cd-jewel-width), calc(100% - 2rem)); 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);
|
||||
font-family: var(--cd-font-body);
|
||||
color: var(--cd-text-primary);
|
||||
font-family: var(--cd-font-body); color: var(--cd-text-primary);
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.cd-jewel-case--open,
|
||||
.cd-jewel-case[data-jewel-state="open"] {
|
||||
width: var(--cd-jewel-open-width);
|
||||
.cd-jewel-case--open, .cd-jewel-case[data-jewel-state="open"] {
|
||||
width: min(var(--cd-jewel-open-width), calc(100% - 2rem));
|
||||
}
|
||||
|
||||
/* ── Internal layout wrapper ── */
|
||||
.cd-jewel-case > .cd-jewel-inner {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--cd-space-inset);
|
||||
gap: var(--cd-space-stack);
|
||||
min-height: 0;
|
||||
grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column;
|
||||
padding: var(--cd-space-inset); gap: var(--cd-space-stack); min-height: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. Spine (.cd-spine, .spine-label, .spine-track)
|
||||
========================================================================== */
|
||||
|
||||
/* 4. Spine */
|
||||
.cd-spine {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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;
|
||||
grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column;
|
||||
align-items: center; 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 {
|
||||
font-size: var(--cd-spine-font-sm);
|
||||
font-weight: var(--cd-font-weight-semibold);
|
||||
letter-spacing: var(--cd-letter-spacing-3);
|
||||
text-transform: uppercase;
|
||||
font-size: var(--cd-spine-font-sm); font-weight: var(--cd-font-weight-semibold);
|
||||
letter-spacing: var(--cd-letter-spacing-3); text-transform: uppercase;
|
||||
}
|
||||
.cd-spine .spine-track { font-size: var(--cd-spine-font-xs); letter-spacing: var(--cd-letter-spacing-1); opacity: var(--cd-text-opacity-muted); }
|
||||
/* side spine: inherits vertical-rl from .cd-spine, positioned by back-tray grid */
|
||||
.cd-spine--side { }
|
||||
|
||||
.cd-spine .spine-track {
|
||||
font-size: var(--cd-spine-font-xs);
|
||||
letter-spacing: var(--cd-letter-spacing-1);
|
||||
opacity: var(--cd-text-opacity-muted);
|
||||
}
|
||||
|
||||
/* ── Side spine variant ── */
|
||||
.cd-spine--side {
|
||||
writing-mode: horizontal-tb;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
5. Leaflet Content & Pages (.leaflet-content, .leaflet-page)
|
||||
========================================================================== */
|
||||
|
||||
/* 5. Leaflet */
|
||||
.leaflet-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cd-space-stack);
|
||||
max-width: var(--cd-leaflet-size);
|
||||
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);
|
||||
display: flex; flex-direction: column; gap: var(--cd-space-stack);
|
||||
max-width: var(--cd-leaflet-size); 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 {
|
||||
aspect-ratio: var(--cd-aspect-leaflet);
|
||||
background: var(--cd-surface-0);
|
||||
border-radius: calc(var(--cd-leaflet-radius) / 2);
|
||||
padding: var(--cd-space-inset);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cd-space-sm);
|
||||
box-shadow: var(--cd-page-shadow);
|
||||
aspect-ratio: var(--cd-aspect-leaflet); background: var(--cd-surface-0);
|
||||
border-radius: calc(var(--cd-leaflet-radius) / 2); padding: var(--cd-space-inset);
|
||||
display: flex; flex-direction: column; gap: var(--cd-space-sm);
|
||||
box-shadow: var(--cd-page-shadow); position: relative;
|
||||
transition: transform var(--cd-transition-duration) var(--cd-ease-flip);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.leaflet-page[data-leaflet-active="true"] {
|
||||
box-shadow: var(--cd-jewel-shadow);
|
||||
.leaflet-page[data-leaflet-active="true"] { box-shadow: var(--cd-jewel-shadow); }
|
||||
.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[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 {
|
||||
font-family: var(--cd-font-body);
|
||||
font-size: var(--cd-font-size-body);
|
||||
color: var(--cd-text-secondary);
|
||||
line-height: 1.6;
|
||||
font-family: var(--cd-font-body); font-size: var(--cd-font-size-body);
|
||||
color: var(--cd-text-secondary); line-height: 1.6;
|
||||
}
|
||||
|
||||
.leaflet-page .leaflet-meta {
|
||||
font-family: var(--cd-font-mono);
|
||||
font-size: var(--cd-spine-font-xs);
|
||||
color: var(--cd-text-muted);
|
||||
margin-top: auto;
|
||||
font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs);
|
||||
color: var(--cd-text-muted); margin-top: auto;
|
||||
}
|
||||
.cd-jewel-case--leaflet { width: min(var(--cd-leaflet-size), calc(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 (.disc-art, .disc-hole)
|
||||
========================================================================== */
|
||||
|
||||
/* 6. Disc Art */
|
||||
.disc-art {
|
||||
width: var(--cd-disc-diameter);
|
||||
aspect-ratio: var(--cd-aspect-disc);
|
||||
border-radius: 50%;
|
||||
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;
|
||||
width: var(--cd-disc-diameter); aspect-ratio: var(--cd-aspect-disc); border-radius: 50%;
|
||||
background: radial-gradient(circle at 30% 30%, var(--cd-disc-surface-1) 0%, var(--cd-disc-surface-2) 40%, var(--cd-disc-surface-3) 70%, var(--cd-disc-surface-2) 100%);
|
||||
display: flex; align-items: center; justify-content: center; position: relative;
|
||||
box-shadow: var(--cd-disc-shadow);
|
||||
}
|
||||
|
||||
.disc-art::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: var(--cd-disc-hole);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: var(--cd-surface-0);
|
||||
box-shadow: var(--cd-disc-hole-shadow);
|
||||
content: ""; position: absolute; 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 {
|
||||
position: absolute;
|
||||
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;
|
||||
position: absolute; 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;
|
||||
font-size: calc(var(--cd-disc-hole) * var(--cd-disc-hole-font-scale));
|
||||
color: var(--gray-4);
|
||||
z-index: var(--cd-z-stack-base);
|
||||
pointer-events: none;
|
||||
color: var(--cd-disc-hole-text); z-index: var(--cd-z-stack-base); pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Disc sheen variant ── */
|
||||
.disc-art--sheen {
|
||||
background:
|
||||
radial-gradient(
|
||||
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)
|
||||
);
|
||||
background: radial-gradient(circle at 25% 25%, var(--cd-disc-surface-1) 0%, var(--cd-disc-surface-2) 35%, var(--cd-disc-surface-4) 50%, transparent 65%),
|
||||
radial-gradient(circle at 75% 75%, var(--cd-disc-surface-5) 0%, var(--cd-disc-surface-6) 40%, transparent 70%);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
7. Human Advisory Badge (.human-advisory)
|
||||
========================================================================== */
|
||||
|
||||
/* 7. Human Advisory */
|
||||
.human-advisory {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: var(--cd-advisory-fg);
|
||||
color: var(--cd-advisory-fg-inv);
|
||||
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);
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
background: var(--cd-advisory-fg); color: var(--cd-advisory-fg-inv);
|
||||
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 {
|
||||
width: 100%;
|
||||
padding: var(--cd-space-xs) var(--cd-space-sm);
|
||||
font-size: var(--cd-spine-font-sm);
|
||||
letter-spacing: var(--cd-letter-spacing-3);
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
width: 100%; padding: var(--cd-space-xs) var(--cd-space-sm);
|
||||
font-size: var(--cd-spine-font-sm); 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 {
|
||||
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)
|
||||
========================================================================== */
|
||||
|
||||
/* 8. Back Tray */
|
||||
.back-tray {
|
||||
display: grid;
|
||||
grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width);
|
||||
background: var(--cd-tray-bg);
|
||||
border-top: var(--cd-tray-border-top);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-tray .tray-credits {
|
||||
grid-column: 2;
|
||||
padding: var(--cd-space-inset);
|
||||
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);
|
||||
}
|
||||
|
||||
.tray-credits h2 {
|
||||
font-family: var(--cd-font-label);
|
||||
font-size: var(--cd-font-size-title);
|
||||
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 li {
|
||||
counter-increment: track;
|
||||
font-family: var(--cd-font-label);
|
||||
font-size: var(--cd-font-size-body);
|
||||
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 {
|
||||
content: counter(track, decimal-leading-zero) ".";
|
||||
font-family: var(--cd-font-mono);
|
||||
color: var(--cd-text-muted);
|
||||
min-width: var(--cd-track-num-min-w);
|
||||
}
|
||||
|
||||
.tray-credits .credits-label {
|
||||
font-family: var(--cd-font-mono);
|
||||
font-size: var(--cd-spine-font-xs);
|
||||
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 spine labels ── */
|
||||
.back-tray .cd-spine {
|
||||
grid-row: 1;
|
||||
background: var(--cd-spine-bg);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
9. Grid Overlay Utility (.cd-grid)
|
||||
========================================================================== */
|
||||
|
||||
.cd-grid {
|
||||
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--fine {
|
||||
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)
|
||||
);
|
||||
}
|
||||
|
||||
.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)
|
||||
);
|
||||
display: grid; grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width);
|
||||
background: var(--cd-tray-bg); border-top: var(--cd-tray-border-top);
|
||||
padding: 0; max-height: var(--cd-tray-height); overflow-y: auto; position: relative;
|
||||
}
|
||||
.back-tray .tray-credits { grid-column: 2; padding: var(--cd-space-inset); 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); }
|
||||
.tray-credits h2 { font-family: var(--cd-font-label); font-size: var(--cd-font-size-title); 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 li { counter-increment: track; font-family: var(--cd-font-label); font-size: var(--cd-font-size-body); 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 { content: counter(track, decimal-leading-zero) "."; font-family: var(--cd-font-mono); color: var(--cd-text-muted); min-width: var(--cd-track-num-min-w); }
|
||||
.tray-credits .credits-label { font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs); 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); }
|
||||
.back-tray > .cd-spine:first-child { grid-column: 1; }
|
||||
.back-tray > .cd-spine:last-child { grid-column: 3; }
|
||||
|
||||
/* 9. Grid */
|
||||
.cd-grid { 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--fine { 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)); }
|
||||
.cd-grid--crosshatch {
|
||||
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(
|
||||
90deg,
|
||||
transparent 0 calc(var(--cd-grid-coarse) - 1px),
|
||||
var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse)
|
||||
);
|
||||
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(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 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;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
11. Responsive Breakpoints (container queries)
|
||||
========================================================================== */
|
||||
/* 10. Open/Closed */
|
||||
.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 */
|
||||
@container (max-width: var(--cd-break-sm)) {
|
||||
.cd-jewel-case {
|
||||
width: 100% !important;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cd-spine {
|
||||
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;
|
||||
}
|
||||
.cd-jewel-case { width: 100% !important; grid-template-columns: 1fr; }
|
||||
.cd-spine { 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)) {
|
||||
.cd-jewel-case {
|
||||
width: 100% !important;
|
||||
max-width: var(--cd-jewel-width);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.cd-jewel-case { width: 100% !important; max-width: var(--cd-jewel-width); }
|
||||
.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 Styles
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
.cd-jewel-case {
|
||||
width: var(--cd-print-jewel-width);
|
||||
height: var(--cd-print-jewel-height);
|
||||
box-shadow: none;
|
||||
border: var(--cd-print-border);
|
||||
}
|
||||
|
||||
.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 Texture Utility (.cd-grain)
|
||||
========================================================================== */
|
||||
|
||||
.cd-grain {
|
||||
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(
|
||||
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">
|
||||
<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-y: auto;
|
||||
}
|
||||
|
||||
|
||||
/* ── 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