trentuna/opencd
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ba: production fixes — calc() wraps, side spine grid, disc-art tokens, back-tray overflow

Browse source 
(1) All <style> blocks already removed by Murdock — verified zero across all 3 templates.
(2) CSS reset already comprehensive (8 rules) — applied globally via opencd.css.
(3) Jewel-case width: wrapped 100%%-2rem in calc() for proper min() parsing in all browsers.
(4) Back-tray fix: spines no longer overlap — left spine grid-column:1, right spine grid-column:3 via :first-child/:last-child. demo-tray-container overflow-y:auto so scrollbar visible. 280x236 CD dims correct.
(5) Leaflet width: wrapped calc() same as jewel-case.
(6) .cd-spine--side: class now defined (inherits vertical-rl from .cd-spine). Back-tray grid explicitly positions side spines.
(7) Token consistency: disc-art section converted from raw var(--gray-*) to 7 new --cd-disc-surface-* tokens. Zero raw OpenProps remain outside :root definitions in opencd.css.
This commit is contained in:
Hannibal Smith 2026-05-26 00:47:48 +02:00
parent a70a770ce3
commit fa427d4a9e
Signed by: hannibal
GPG key ID: 6EB37F7E6190AF1C
2 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

26
opencd.css
View file

@ -80,6 +80,13 @@
--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 */
@ -95,7 +102,7 @@ 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);
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);
@ -103,7 +110,7 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
container-type: inline-size;
}
.cd-jewel-case--open, .cd-jewel-case[data-jewel-state="open"] {
width: min(var(--cd-jewel-open-width), 100% - 2rem);
width: min(var(--cd-jewel-open-width), calc(100% - 2rem));
}
.cd-jewel-case > .cd-jewel-inner {
grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column;
@ -123,7 +130,8 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
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: vertical-rl from base is correct */
/* side spine: inherits vertical-rl from .cd-spine, positioned by back-tray grid */
.cd-spine--side { }
/* 5. Leaflet */
.leaflet-content {
@ -153,7 +161,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), 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); }
@ -164,7 +172,7 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
/* 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%);
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);
}
@ -176,11 +184,11 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
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-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%);
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 */
@ -215,6 +223,8 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
.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)); }