levineuwirth.org/static/css/viz.css

67 lines
1.6 KiB
CSS

/* viz.css — Styles for inline data visualizations (.viz-figure, .viz-interactive) */
/* ============================================================
Static figures (Matplotlib SVG)
============================================================ */
.viz-figure {
margin: 2rem 0;
break-inside: avoid;
}
.viz-figure svg {
width: 100%;
height: auto;
display: block;
}
/* ============================================================
Interactive figures (Vega-Lite via vega-embed)
============================================================ */
.viz-interactive {
margin: 2rem 0;
break-inside: avoid;
}
.vega-container {
width: 100%;
overflow: hidden;
}
/* vega-embed injects a <div> containing a <canvas> or <svg> */
.vega-container > div {
width: 100% !important;
}
.vega-container canvas,
.vega-container svg {
max-width: 100%;
display: block;
}
/* ============================================================
Captions (shared)
============================================================ */
.viz-caption {
font-size: var(--text-size-small);
color: var(--text-muted);
text-align: center;
margin-top: 0.5rem;
font-style: italic;
}
/* ============================================================
Error display (build-time script failures)
============================================================ */
.viz-error {
padding: 0.75rem 1rem;
border: 1px solid var(--border);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: var(--text-size-small);
margin: 1.5rem 0;
}