From 1ae235fd61d81ae6c05f6b747a16c3af8be5b598 Mon Sep 17 00:00:00 2001 From: Vigilio Desto Date: Mon, 25 May 2026 22:13:31 +0200 Subject: [PATCH] =?UTF-8?q?opencd:=20initial=20framework=20seed=20?= =?UTF-8?q?=E2=80=94=20README=20with=20CD=20specs,=20design=20system,=20se?= =?UTF-8?q?mantic=20HTML=20patterns,=20and=20A-Team=20call=20to=20arms?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 194 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..212ad0c --- /dev/null +++ b/README.md @@ -0,0 +1,194 @@ +# OpenCD + +**A lightweight HTML/CSS framework built on [Open Props](https://open-props.style)** +*Physical CD jewel case dimensions · Leaflet-style page navigation · Visible grid aesthetic · Trentuna-inspired design* + +OpenCD turns your website into a digital CD jewel case and booklet. Every dimension is derived from physical CD packaging — the disc diameter, jewel case footprint, leaflet square. Built for catalogs, artist projects, zines, indie digital releases, and anyone who misses tangible-feeling web experiences. + +``` +┌─────────────────────────────┐ +│ ╔═════════════╗ │ +│ ║ ○ OpenCD ║ │ +│ ║ ──────── ║ │ +│ ║ ◉ ◉ ◉ ◉ ║ │ +│ ╚═════════════╝ │ +│ ─── TRACKLIST ─────────── │ +│ 01. jewel-case.html │ +│ 02. back-tray.html │ +│ 03. leaflet-booklet.html │ +└─────────────────────────────┘ +``` + +--- + +## Philosophy + +OpenCD respects physical media constraints in the digital world. Every dimension, ratio, and detail is intentional: + +- **CD jewel case** as document wrapper (real ratio: `142×125 mm` → scaled `280×245 px`) +- **Leaflet booklet** as page content (real: `120×120 mm` → `240 px`) +- **Visible grid** like CD tray paper — the structure is the decoration +- **Spine as navigation** — top bar that reads like a CD spine label +- **Human Advisory badge** — borrowed from Parental Advisory, repurposed for content warnings + +Made with love for beautiful, honest, tangible-feel web experiences. +**License:** MIT +**Built with:** Open Props v2+ + +--- + +## Quick Start + +```html + +``` + +```html +
+ + +
+

Your Content Here

+

This is the inner booklet area with visible CD tray grid.

+
+ + +
+``` + +--- + +## Semantic HTML Structure + +OpenCD follows the same semantic-HTML approach as the ASW system (`~/releases/asw/`). The framework is a **skin on top of semantic markup** — you can wrap any well-structured HTML in OpenCD classes and it becomes a CD jewel case: + +```html + +
+ + +
+
+
+ + +
+``` + +--- + +## CD / Jewel Case Specifications + +| Component | Real Size | Scaled (2×) | Open Props Variable | +|-------------------------|---------------|----------------|----------------------------| +| CD Disc | Ø 120 mm | 240 px | `--cd-disc-diameter` | +| Jewel Case (front) | 142 × 125 mm | 280 × 245 px | `--cd-jewel-width/height` | +| CD Leaflet / Booklet | 120 × 120 mm | 240 px | `--cd-leaflet-size` | +| Jewel Case (open width) | 284 × 125 mm | 560 × 245 px | `--cd-jewel-open-width` | +| CD Tray paper | ~150 × 118 mm | flexible | — | +| Spine width | ~7 mm | 14 px | `--cd-spine-width` | + +### Open Props Variables (add to `:root`) + +```css +:root { + --cd-jewel-width: 280px; + --cd-jewel-height: 245px; + --cd-aspect-jewel: 280 / 245; + --cd-disc-diameter: 240px; + --cd-leaflet-size: 240px; + --cd-spine-width: 14px; + --cd-tray-width: 260px; +} +``` + +Use these tokens anywhere. The framework is **pure Open Props variables** — no hardcoded magic numbers. + +--- + +## Design System + +OpenCD maps Open Props design tokens to CD packaging concepts: + +| Open Props Token | OpenCD Mapping | Purpose | +|---------------------------|---------------------------|----------------------------| +| `--size-fluid-1` through `--size-fluid-3` | Jewel case padding | Responsive breathing room | +| `--font-size-fluid-1` through `--font-size-fluid-3` | Leaflet typography | Title, body, tracklist | +| `--font-sans` | `--cd-font-label` | Spine labels, metadata | +| `--font-serif` | `--cd-font-body` | Leaflet body text | +| `--red-6` / `--red-7` | `--cd-advisory-red` | Human Advisory badge | +| `--surface-1` through `--surface-4` | CD tray paper shades | Layered backgrounds | +| `--shadow-2` / `--shadow-3` | Jewel case shadow | 3D depth on jewel case | +| `--grid-...` | Leaflet grid lines | Visible CD tray grid | + +--- + +## Components + +| Class | Description | +|------------------------|-------------------------------------| +| `.cd-jewel-case` | Main jewel case container | +| `.cd-spine` | Top navigation bar (CD spine) | +| `.leaflet-content` | Inner booklet area with visible grid | +| `.leaflet-page` | Individual leaflet page (flippable) | +| `.back-tray` | Back card with vertical spines | +| `.tray-credits` | Credits / tracklist section | +| `.human-advisory` | Parental Advisory style badge | +| `.disc-art` | CD disc face area | +| `.cd-grid` | Visible tray paper grid overlay | + +--- + +## Templates + +The framework ships with three core HTML page templates: + +| Template | Description | +|---------------------|-----------------------------------------| +| `jewel-case.html` | Front-facing jewel case with disc art | +| `leaflet.html` | Multi-page booklet (← → nav) | +| `back-tray.html` | Back tray with spines and tracklist | + +Each template is a complete, standalone HTML file that demonstrates the component in context. + +--- + +## Browser & Device Support + +OpenCD uses CSS custom properties (Open Props) and modern layout (grid, flexbox). + +- **Chrome / Edge / Firefox / Safari** — latest 2 versions ✅ +- **Mobile (iOS Safari, Android Chrome)** — fully responsive ✅ +- **Print** — jewel case aspect ratio preserves physical dimensions ✅ +- **IE11** — ❌ (Open Props requires modern CSS) + +--- + +## Trentuna Catalog + +Part of the Trentuna release catalog (`~/releases/`). +Framework design follows the release aesthetic: visible grid, honest structure, no over-engineered abstraction. + +--- + +## Credits + +- **Open Props** — design tokens by Adam Argyle +- **ASW** — semantic HTML pattern source (`~/releases/asw/`) +- **Trentuna** — imprint & design direction (`~/trentuna-hq/`) + +--- + +*"If you have a problem, if no one else can help, and if you can find them, maybe you can hire… the A-Team."* \ No newline at end of file