vitrine

style: callout box styling riding the per-host accent

commit 5c3673b783ffa5a25d4035e9fd3218128352ad89 · parent 23326fe6d3 · browse this tree
Ximianth, 2026-08-09 10:47:42 UTC

Callouts get a well background and a bold left border, visually
consistent with the existing pre and blockquote treatments.  Each type
carries its accent hue through a single --callout variable, so the base
.callout rule stays the one place that positions and paints the box.

note and info stay in the blue --accent family (so they wear the
per-host accent color); tip is green, warning/caution amber, danger
red, important purple.  An unknown type matches no per-type rule and
falls back to the neutral base box, still readable rather than broken.

diff --git a/style.css b/style.css
index 3c8e604..76b305f 100644
--- a/style.css
+++ b/style.css
@@ -108,3 +108,36 @@ article th, article td {
 	padding: .2rem .5rem;
 }
 article th { background: var(--well); }
+
+/* Callouts: :::type admonition boxes.  Inset like other article content,
+   in a well with a bold left border, consistent with pre and blockquote.
+   The per-type accent hue rides a single --callout variable so the base box
+   below stays the one place that positions and paints the container. */
+article .callout {
+	--callout: var(--accent);
+	background: var(--well);
+	border: 1px solid var(--well-edge);
+	border-left: 4px solid var(--callout);
+	border-radius: .25rem;
+	padding: .6rem .8rem;
+}
+/* The children are already inset by "article > *"; inside the box they
+   should sit flush to its padding instead. */
+article .callout > * { margin-left: 0; }
+article .callout-title {
+	margin-top: 0;
+	font-weight: bold;
+	text-transform: uppercase;
+	letter-spacing: .03em;
+	color: var(--callout);
+}
+
+/* Per-type accent hues.  note/info stay in the blue --accent family;
+   the rest pick one hue each.  An unknown type matches none of these and
+   falls back to the neutral base box above, still readable. */
+article .callout-tip { --callout: #1a7f37; }
+article .callout-warning,
+article .callout-caution { --callout: #bf8700; }
+article .callout-danger { --callout: #cf222e; }
+article .callout-important { --callout: #8250df; }
+