diff --git a/docs/src/components/OscilloscopeDisplay.astro b/docs/src/components/OscilloscopeDisplay.astro index 34c8cb5..ebd4e18 100644 --- a/docs/src/components/OscilloscopeDisplay.astro +++ b/docs/src/components/OscilloscopeDisplay.astro @@ -13,10 +13,13 @@ ---
- +
Tektronix - mcltspice +
+ + +
@@ -76,11 +79,88 @@ · rsp2k
+ + + diff --git a/docs/src/styles/oscilloscope.css b/docs/src/styles/oscilloscope.css index bc443b9..bf2cdd5 100644 --- a/docs/src/styles/oscilloscope.css +++ b/docs/src/styles/oscilloscope.css @@ -341,3 +341,132 @@ height: 5px; } } + +/* ── Skin picker (model name → clickable) ──────────────── */ +.scope-brand-right { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 1px; +} + +button.scope-brand-model { + appearance: none; + background: none; + border: none; + padding: 0; + cursor: pointer; + line-height: inherit; + transition: opacity 0.15s; +} + +button.scope-brand-model:hover { + opacity: 0.85; +} + +button.scope-brand-model:focus-visible { + outline: 2px solid var(--scope-teal); + outline-offset: 2px; + border-radius: 2px; +} + +.scope-brand-sub { + font-family: var(--sl-font-mono, ui-monospace, monospace); + font-size: 0.4rem; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--scope-label); + opacity: 0.4; +} + +/* ── Tektronix Type 545A skin (1959) ─────────────────────── */ +/* Vacuum-tube era: blue-green hammertone, cream silk-screen, + Bakelite knobs, deeper CRT recess, ventilation holes */ + +.scope-skin-545a { + --scope-panel: #4a6e64; + --scope-panel-light: #5a7e72; + --scope-panel-dark: #3a5a50; + --scope-label: #e0d8c8; + --scope-knob: #1c1814; + --scope-knob-ring: #141210; + --scope-section-line: rgba(224, 216, 200, 0.15); +} + +/* Hammertone texture — larger dimpled dots, irregular placement */ +.scope-skin-545a { + background: + url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='rgba(0,0,0,0.06)'/%3E%3Ccircle cx='6' cy='5' r='0.8' fill='rgba(255,255,255,0.04)'/%3E%3Ccircle cx='4' cy='7' r='1' fill='rgba(0,0,0,0.04)'/%3E%3Ccircle cx='7' cy='1' r='0.6' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E"), + linear-gradient(175deg, var(--scope-panel-light), var(--scope-panel), var(--scope-panel-dark)); +} + +/* Deeper CRT bay recess — tube-era instruments had heavier bezels */ +.scope-skin-545a .scope-crt-bay { + box-shadow: + inset 0 3px 8px rgba(0, 0, 0, 0.6), + inset 0 0 0 1px rgba(0, 0, 0, 0.3); +} + +/* Larger Bakelite-era knobs */ +.scope-skin-545a .scope-knob { + width: 32px; + height: 32px; + background: radial-gradient(circle at 40% 35%, #2e2218, var(--scope-knob)); +} + +.scope-skin-545a .scope-knob::after { + height: 8px; + background: #c8b890; +} + +/* Cream-on-green attribution */ +.scope-skin-545a .scope-attribution { + color: var(--scope-label); + opacity: 0.6; +} + +.scope-skin-545a .scope-attribution a { + color: var(--scope-label); +} + +.scope-skin-545a .scope-attribution a:hover { + color: #fff; +} + +/* ── Ventilation holes (545A only) ──────────────────────── */ +.scope-vent-holes { + display: none; + justify-content: center; + gap: 8px; + padding: 6px 14px 8px; +} + +.scope-vent-hole { + width: 6px; + height: 6px; + border-radius: 50%; + background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.15) 100%); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.scope-skin-545a .scope-vent-holes { + display: flex; +} + +/* ── 545A responsive overrides ──────────────────────────── */ +@media (max-width: 50rem) { + .scope-skin-545a .scope-knob { + width: 26px; + height: 26px; + } + + .scope-skin-545a .scope-knob::after { + height: 6px; + } + + .scope-vent-hole { + width: 5px; + height: 5px; + } +}