vitrine

style: inset and scale diagram SVG, flag render failures

commit 0d2c580698f60d6b9731a21d611edf316a41bc4b · parent 66ff02c7fb · browse this tree
Ximianth, 2026-08-09 14:08:12 UTC

Diagrams sit inset and centered like code blocks; a wide diagram scales down
to the content width via max-width while a small one keeps its natural size.
A failed diagram's source-echo box is flagged in the danger hue so the failure
reads at a glance.

diff --git a/style.css b/style.css
index 42fcaf2..bcfafa7 100644
--- a/style.css
+++ b/style.css
@@ -160,3 +160,32 @@ article .callout-warning { --callout: #ef7c00; --callout-fill: 18%; --callout-ic
 article .callout-danger { --callout: #cf222e; --callout-icon: "\1F9E8"; }   /* firecracker, red */
 article .callout-reject { --callout: #cf222e; --callout-icon: "\274C"; }    /* cross mark, red */
 
+
+/* Diagrams: server-rendered inline SVG from ```dot fenced blocks.
+   Inset like a code block and centered; a wide diagram scales down to the
+   content width rather than overflowing, while a small one keeps its size. */
+article .diagram {
+	margin: 1.25rem 0 1.25rem 3rem;
+	text-align: center;
+}
+article .diagram svg {
+	max-width: 100%;
+	height: auto;
+}
+
+/* A diagram that failed to render echoes its source in a bordered well,
+   flagged in the danger hue so the failure is visible at a glance. */
+article .diagram-error {
+	text-align: left;
+	border: 1px solid #cf222e;
+	border-left: 3px solid #cf222e;
+	border-radius: .25rem;
+	background: color-mix(in srgb, #cf222e 8%, var(--paper));
+	padding: .4rem .8rem;
+}
+article .diagram-error-note {
+	margin: .2rem 0;
+	font-weight: bold;
+	color: #cf222e;
+}
+article .diagram-error pre { margin-left: 0; }