Graham McIntire
c1f07190f3
Filter future-dated posts out of blog/homepage listings and add a daily 05:05 UTC rebuild so posts go live on their date automatically. New interactive post on BJT amplification with five canvas scenes (valve, load line, transfer curve, amplifier in action, gain). Shared scene.css for future interactive posts. Post is dated 2026-04-23 and will appear in listings once the date arrives. Also drop IDEAS.md with candidate topics for future posts.
94 lines
1.9 KiB
CSS
94 lines
1.9 KiB
CSS
/* Generic interactive-scene styles. Scoped to posts that opt in by
|
|
wrapping content in `.scene-host` and by linking this stylesheet
|
|
from the post's markdown. */
|
|
|
|
.scene-host {
|
|
--s-bg: #1f232b;
|
|
--s-panel: #242932;
|
|
--s-fg: #d4d8df;
|
|
--s-dim: #7d8594;
|
|
--s-grid: #323844;
|
|
--s-blue: #61afef;
|
|
--s-cyan: #56b6c2;
|
|
--s-green: #98c379;
|
|
--s-orange: #d19a66;
|
|
--s-red: #e06c75;
|
|
--s-yellow: #e5c07b;
|
|
--s-magenta: #c678dd;
|
|
}
|
|
|
|
.scene-box {
|
|
margin: 2.5rem 0;
|
|
background: var(--s-bg);
|
|
border: 1px solid var(--s-grid);
|
|
border-radius: 6px;
|
|
padding: 0.75rem 0.75rem 1rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.scene-box canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
touch-action: none;
|
|
cursor: grab;
|
|
background: transparent;
|
|
}
|
|
|
|
.scene-box canvas:active { cursor: grabbing; }
|
|
|
|
.scene-controls {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.5rem;
|
|
margin-top: 0.75rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.scene-controls { grid-template-columns: repeat(2, 1fr); }
|
|
.scene-controls.scene-controls--three { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
|
|
.scene-control { display: flex; flex-direction: column; gap: 0.2rem; }
|
|
|
|
.scene-control label {
|
|
color: var(--s-dim);
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.scene-control label .scene-value {
|
|
color: var(--s-fg);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.scene-control input[type="range"] {
|
|
width: 100%;
|
|
accent-color: var(--s-cyan);
|
|
}
|
|
|
|
.scene-box .scene-caption {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.85rem;
|
|
color: var(--s-dim);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.scene-box .scene-readout {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem 1.5rem;
|
|
padding: 0.5rem 0;
|
|
margin-top: 0.25rem;
|
|
color: var(--s-fg);
|
|
font-size: 0.85rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.scene-box .scene-readout .scene-readout-item span:first-child {
|
|
color: var(--s-dim);
|
|
margin-right: 0.35rem;
|
|
}
|