B.A. Baracus
0206b69381
Phase 3 (Bug #6, #8): - Stripped decorative comment blocks — simple /* Section */ headers throughout - Simplified .disc-art--sheen from 3-layer to 2-layer radial gradient - Removed standalone .advisory-row--red class (use modifier pattern) - Fixed .cd-spine--side: removed writing-mode: horizontal-tb + flex-direction: row override — side spines now inherit vertical-rl from .cd-spine base Phase 4 (Bug #2, #3, #4): - Expanded reset from 5 lines to 35 lines: font inheritance, line-height, form elements, block images, list-style, heading reset, link reset - Added --cd-tray-height: calc(236px * var(--cd-scale)) token in :root - Added max-height: var(--cd-tray-height) + overflow-y: auto to .back-tray - Changed .cd-jewel-case width to min(var(--cd-jewel-width), 100% - 2rem) - Updated .cd-jewel-case--open width to min(var(--cd-jewel-open-width), ...) - Tightened back-tray.html content (condensed credits + technical para) Co-authored-by: H.M. Murdock <murdock@a-team.dev> (Phases 1-2)
310 lines
No EOL
15 KiB
CSS
310 lines
No EOL
15 KiB
CSS
/* OpenCD — CD Jewel Case CSS Framework */
|
||
@import "https://unpkg.com/open-props";
|
||
|
||
/* 1. Tokens — all --cd-* custom properties */
|
||
:root {
|
||
/* Physical dimensions (ISO 15727, 2× scale): scale=1 = 2×, 0.5 = 1×, 2 = 4× */
|
||
--cd-scale: 1;
|
||
--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));
|
||
/* Surface layers (custom oklch) */
|
||
--cd-surface-0: var(--gray-0);
|
||
--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);
|
||
/* Typography */
|
||
--cd-font-neo-grotesque: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
|
||
--cd-font-label: var(--cd-font-neo-grotesque);
|
||
--cd-font-body: var(--font-serif);
|
||
--cd-font-mono: var(--font-mono-code, var(--font-mono));
|
||
/* Semantic 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-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-font: 'Impact', 'Arial Black', var(--cd-font-label), sans-serif;
|
||
--cd-text-opacity-muted: 0.8;
|
||
/* Surface/tray */
|
||
--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 */
|
||
--cd-grid-color: var(--gray-3);
|
||
--cd-grid-color-alt: var(--gray-2);
|
||
--cd-grid-fine: 4px;
|
||
--cd-grid-coarse: 8px;
|
||
/* Decorations */
|
||
--cd-jewel-radius: var(--radius-2);
|
||
--cd-jewel-shadow: var(--shadow-2);
|
||
--cd-jewel-shadow-raised: var(--shadow-3);
|
||
--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);
|
||
--cd-advisory-border: 2px solid var(--cd-advisory-fg);
|
||
/* Borders */
|
||
--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;
|
||
/* 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);
|
||
--cd-space-sm: var(--size-2);
|
||
/* Font sizes */
|
||
--cd-font-size-body: var(--font-size-fluid-1);
|
||
--cd-font-size-title: var(--font-size-fluid-2);
|
||
--cd-font-size-display: var(--font-size-fluid-3);
|
||
/* Spine */
|
||
--cd-spine-font-xs: var(--font-size-0);
|
||
--cd-spine-font-sm: var(--font-size-1);
|
||
--cd-spine-font-md: var(--font-size-2);
|
||
--cd-spine-font-lg: var(--font-size-3);
|
||
--cd-font-weight-semibold: 600;
|
||
--cd-letter-spacing-1: 0.05em;
|
||
--cd-letter-spacing-2: 0.075em;
|
||
--cd-letter-spacing-3: 0.1em;
|
||
/* Motion */
|
||
--cd-transition-duration: 200ms;
|
||
--cd-ease-flip: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--cd-ease-default: var(--ease-3);
|
||
/* Breakpoints */
|
||
--cd-break-sm: 350px;
|
||
--cd-break-md-min: 351px;
|
||
--cd-break-md-max: 549px;
|
||
/* Disc */
|
||
--cd-disc-hole-scale: 0.6;
|
||
--cd-disc-hole-font-scale: 0.5;
|
||
/* Grain */
|
||
--cd-grain-size-1: 120px;
|
||
--cd-grain-size-2: 200px;
|
||
--cd-grain-opacity-1: 0.02;
|
||
--cd-grain-opacity-2: 0.015;
|
||
/* Misc */
|
||
--cd-z-stack-base: 1;
|
||
--cd-print-jewel-width: 142mm;
|
||
--cd-print-jewel-height: 125mm;
|
||
--cd-aspect-jewel: 280 / 245;
|
||
--cd-aspect-leaflet: 1 / 1;
|
||
--cd-aspect-disc: 1 / 1;
|
||
}
|
||
|
||
/* 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: min(var(--cd-jewel-width), 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);
|
||
container-type: inline-size;
|
||
}
|
||
.cd-jewel-case--open, .cd-jewel-case[data-jewel-state="open"] {
|
||
width: min(var(--cd-jewel-open-width), 100% - 2rem);
|
||
}
|
||
.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;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
.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;
|
||
}
|
||
.cd-spine .spine-track {
|
||
font-size: var(--cd-spine-font-xs); letter-spacing: var(--cd-letter-spacing-1);
|
||
opacity: var(--cd-text-opacity-muted);
|
||
}
|
||
.cd-spine--side { /* keep vertical-rl from base */ }
|
||
|
||
/* 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);
|
||
}
|
||
.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);
|
||
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-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;
|
||
}
|
||
.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;
|
||
}
|
||
.cd-jewel-case--leaflet {
|
||
width: min(var(--cd-leaflet-size), 100% - 2rem); box-shadow: none; background: transparent;
|
||
}
|
||
.cd-jewel-case--leaflet .cd-jewel-inner { grid-column: 2; gap: var(--cd-space-inset); }
|
||
.leaflet-page ul { margin-left: 1rem; color: var(--cd-text-secondary); line-height: 1.6; }
|
||
.leaflet-page dl { margin-top: .5rem; display: grid; gap: .25rem; font-size: var(--cd-font-size-body); }
|
||
.leaflet-page dt { font-family: var(--cd-font-mono); color: var(--cd-text-muted); }
|
||
.leaflet-page dd { color: var(--cd-text-secondary); }
|
||
.leaflet-page p + p { margin-top: .5rem; }
|
||
|
||
/* 6. Disc Art */
|
||
.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;
|
||
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);
|
||
}
|
||
.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;
|
||
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;
|
||
}
|
||
.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%);
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
.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;
|
||
}
|
||
.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; }
|
||
|
||
/* 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; 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); }
|
||
|
||
/* 9. Grid Overlay */
|
||
.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));
|
||
}
|
||
|
||
/* 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; }
|
||
}
|
||
@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); }
|
||
}
|
||
|
||
/* 12. Print */
|
||
@media print {
|
||
.cd-jewel-case { width: var(--cd-print-jewel-width); height: var(--cd-print-jewel-height); box-shadow: none; border: 1px solid #ccc; }
|
||
.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 */
|
||
.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);
|
||
} |