callouts: richer fills, restore the colored nub, tune per-type looks
commit 3ea36d82a859a474387088719a86632c060c7b85 · parent 04acf71067
· browse this tree
Ximianth, 2026-08-09 11:27:11 UTC
Bump the tinted-fill saturation and give the left border a full-strength nub again while keeping the colored border all the way around. Rework the type looks: tip moves to a warm gold (matching the light bulb, warm rather than alert); success returns as its own green type with a check mark; todo gets a construction sign; danger swaps the stop sign for the radioactive sign.
diff --git a/README.md b/README.md index ea82de0..b3fa230 100644 --- a/README.md +++ b/README.md @@ -84,7 +84,7 @@ body content, which is **full markdown** The rendered box is `<div class="callout callout-{type}">` (matching the markdown-it-container / VuePress convention, so docs authored for those tools render as intended). -The styled types are `info`, `note`, `tip`, `todo`, `warning`, and `danger`, +The styled types are `info`, `note`, `tip`, `success`, `todo`, `warning`, and `danger`, each with its own accent color and icon; `info` and `note` ride the per-host accent. `warn` is accepted as an alias for `warning`. An unknown type still renders as a plain neutral box. diff --git a/style.css b/style.css index aaa65ab..968c988 100644 --- a/style.css +++ b/style.css @@ -121,9 +121,10 @@ article .callout { margin-top: 1.25rem; margin-bottom: 1.25rem; padding: .7rem 1rem; - border: 1px solid color-mix(in srgb, var(--callout) 40%, var(--well-edge)); + border: 1px solid color-mix(in srgb, var(--callout) 45%, var(--well-edge)); + border-left: 5px solid var(--callout); border-radius: .5rem; - background: color-mix(in srgb, var(--callout) 9%, var(--paper)); + background: color-mix(in srgb, var(--callout) 15%, var(--paper)); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } /* The children are already inset by "article > *"; inside the box they @@ -146,15 +147,14 @@ article .callout-title::before { } /* Per-type accent hues and icons, for the canonical type set only; - alternate spellings (warn, success, caution, important) are folded onto - these by the normalizer before they reach the class, so the styling stays - to one row per look. info and note keep the per-host --accent. - An unknown type matches none of these and falls back to the neutral base - box above, still readable. */ + warn is folded onto warning by the normalizer before it reaches the class. + info and note keep the per-host --accent. An unknown type matches none of + these and falls back to the neutral base box above, still readable. */ article .callout-info, -article .callout-note { --callout-icon: "\2139\FE0F"; } /* information source, theme color */ -article .callout-tip { --callout: #1a7f37; --callout-icon: "\1F4A1"; } /* light bulb, green */ -article .callout-todo { --callout: #8250df; --callout-icon: "\1F4DD"; } /* memo, purple */ +article .callout-note { --callout-icon: "\2139\FE0F"; } /* information source, theme color */ +article .callout-tip { --callout: #a16207; --callout-icon: "\1F4A1"; } /* light bulb, warm gold */ +article .callout-success { --callout: #1a7f37; --callout-icon: "\2705"; } /* check mark, green */ +article .callout-todo { --callout: #8250df; --callout-icon: "\1F6A7"; } /* construction sign, purple */ article .callout-warning { --callout: #e8590c; --callout-icon: "\26A0\FE0F"; } /* warning sign, orange */ -article .callout-danger { --callout: #cf222e; --callout-icon: "\1F6D1"; } /* stop sign, red */ +article .callout-danger { --callout: #cf222e; --callout-icon: "\2622\FE0F"; } /* radioactive sign, red */