callouts: add reject type, soften fill and nub, tweak danger icon
commit 2d31984be614e406f66bb5f7e9835dcf7a5afdc9 · parent 3ea36d82a8
· browse this tree
Ximianth, 2026-08-09 11:32:12 UTC
Add a reject type: red like danger but carrying a cross mark, for a distinct "not accepted" flavor. Dial the tinted fill back to a midpoint (12%) and halve the nub to 3px. Swap danger's icon to the no-entry sign, and brighten tip's gold so it reads less brown.
diff --git a/README.md b/README.md index b3fa230..c0317c0 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`, `success`, `todo`, `warning`, and `danger`, +The styled types are `info`, `note`, `tip`, `success`, `todo`, `warning`, `danger`, and `reject`, 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 968c988..852d7bb 100644 --- a/style.css +++ b/style.css @@ -122,9 +122,9 @@ article .callout { margin-bottom: 1.25rem; padding: .7rem 1rem; border: 1px solid color-mix(in srgb, var(--callout) 45%, var(--well-edge)); - border-left: 5px solid var(--callout); + border-left: 3px solid var(--callout); border-radius: .5rem; - background: color-mix(in srgb, var(--callout) 15%, var(--paper)); + background: color-mix(in srgb, var(--callout) 12%, var(--paper)); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } /* The children are already inset by "article > *"; inside the box they @@ -152,9 +152,10 @@ article .callout-title::before { 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: #a16207; --callout-icon: "\1F4A1"; } /* light bulb, warm gold */ +article .callout-tip { --callout: #b8860b; --callout-icon: "\1F4A1"; } /* light bulb, 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: "\2622\FE0F"; } /* radioactive sign, red */ +article .callout-danger { --callout: #cf222e; --callout-icon: "\26D4"; } /* no-entry sign, red */ +article .callout-reject { --callout: #cf222e; --callout-icon: "\274C"; } /* cross mark, red */