Amy Amanda Allen
b54ffa943b
Verified 8 criteria across all 3 templates + opencd.css: (1) Zero <style> or inline CSS — PASS (links only) (2) CSS reset present — PASS (9 rules, lines 92-100) (3) jewel-case width — PASS (min() calc()-wrapped) (4) back-tray readability — PASS (3-col grid, scrollable, spines separated) (5) leaflet width — PASS (calc()-wrapped min()) (6) spine render — PASS (vertical-rl, side variant, responsive) (7) opencd.css < 250 lines — FAIL (254 lines, 4 over) (8) Token consistency — PASS (all --cd-* tokens shared, disc-art converted) Previous 3 magic-number CONCERNS (font-weight, opacity, z-index) all resolved via --cd-* tokens.
193 lines
No EOL
7.8 KiB
Markdown
193 lines
No EOL
7.8 KiB
Markdown
# 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 |