phase: ba trim+reset+dimension fixes — opencd.css to 305 lines, tray constraint, spine fix

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)
This commit is contained in:
B.A. Baracus 2026-05-26 00:27:06 +02:00
parent 5483f7c02e
commit 0206b69381
Signed by: ba
GPG key ID: D52E9C8491872206
5 changed files with 329 additions and 792 deletions

View file

@ -5,59 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenCD · Back Tray</title>
<link rel="stylesheet" href="../opencd.css">
<style>
/* Demo page chrome */
body {
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 2rem;
background: oklch(92% .012 85);
font-family: var(--font-sans);
}
.demo-controls {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
font-size: .875rem;
}
.demo-controls label {
display: flex;
align-items: center;
gap: .5rem;
cursor: pointer;
user-select: none;
}
.demo-controls input[type="checkbox"] {
accent-color: var(--red-6);
}
.demo-footnote {
font-size: .75rem;
color: var(--gray-6);
text-align: center;
max-width: 480px;
line-height: 1.5;
}
/* ============================================================
Back-tray specific layout
============================================================ */
/* Wrap the back-tray in a jewel-case frame */
.demo-tray-container {
width: var(--cd-jewel-width);
border-radius: var(--cd-jewel-radius);
box-shadow: var(--cd-jewel-shadow);
overflow: hidden;
}
</style>
<link rel="stylesheet" href="demo.css">
</head>
<body>