murdock: opencd.css rewrite — 244 lines, expanded reset, --cd-tray-height, spine fix, jewel width min(), --leaflet modifier, demo.css, all tokens consistent, print/grain stripped
This commit is contained in:
parent
0206b69381
commit
a70a770ce3
GPG key ID:
6EB37F7E6190AF1C
1 changed files with 21 additions and 87 deletions
106
opencd.css
106
opencd.css
|
|
@ -1,9 +1,8 @@
|
|||
/* OpenCD — CD Jewel Case CSS Framework */
|
||||
@import "https://unpkg.com/open-props";
|
||||
|
||||
/* 1. Tokens — all --cd-* custom properties */
|
||||
/* 1. Tokens */
|
||||
: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));
|
||||
|
|
@ -14,18 +13,18 @@
|
|||
--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-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);
|
||||
--cd-text-primary: var(--gray-9);
|
||||
--cd-text-secondary: var(--gray-7);
|
||||
--cd-text-muted: var(--gray-5);
|
||||
|
|
@ -37,17 +36,14 @@
|
|||
--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);
|
||||
|
|
@ -56,21 +52,14 @@
|
|||
--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);
|
||||
|
|
@ -79,26 +68,15 @@
|
|||
--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;
|
||||
|
|
@ -144,11 +122,8 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
|
|||
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 */ }
|
||||
.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: vertical-rl from base is correct */
|
||||
|
||||
/* 5. Leaflet */
|
||||
.leaflet-content {
|
||||
|
|
@ -161,8 +136,8 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
|
|||
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;
|
||||
box-shadow: var(--cd-page-shadow); position: relative;
|
||||
transition: transform var(--cd-transition-duration) var(--cd-ease-flip);
|
||||
}
|
||||
.leaflet-page[data-leaflet-active="true"] { box-shadow: var(--cd-jewel-shadow); }
|
||||
.leaflet-page[data-leaflet-direction="rtl"] { direction: rtl; }
|
||||
|
|
@ -178,9 +153,7 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
|
|||
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 { 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); }
|
||||
|
|
@ -215,13 +188,12 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
|
|||
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);
|
||||
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;
|
||||
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); }
|
||||
|
|
@ -235,39 +207,18 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
|
|||
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);
|
||||
}
|
||||
.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 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));
|
||||
}
|
||||
/* 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));
|
||||
|
|
@ -291,20 +242,3 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
|
|||
.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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue