/* * Guide article components (docs/ARTICLE-DESIGN.md). * * Loaded on a guide single ONLY. article.css also serves archives, search and * the 404 page, and none of those renders an article body; these rules would * be dead weight on all three. Registered with article.css as a dependency so * source order is guaranteed: `.vb-article__body a` is (0,1,1) and so is * `.vb-note a`, so whichever sheet loads last wins. That is the same * specificity trap already commented at .vb-guide__ctabtn in article.css, * where the generic link colour beat the button and it measured 2.08:1. * * Three components, no more, because the corpus has content for three: * .vb-note four variants - danger, warn, do, fact * .vb-steps a sequence whose order carries information * .vb-keyline the one sentence per article worth lifting * * Nothing here animates. The severity of a callout is information, and motion * on it would be manufactured urgency, which docs/design-principles.md ยง1 * rules out. The site-wide Calm view would strip it anyway. */ /* --------------------------------------------------------------------------- Notes: a lead-in and its list, marked for what they mean --------------------------------------------------------------------------- The block wraps the lead-in paragraph AND the list, never the list alone: 42 of the corpus's 123 list items begin lowercase and are grammatical continuations of the sentence above them. Splitting them would leave a sentence fragment outside the box. Colour never carries the meaning on its own (WCAG 1.4.1, Level A). Every note opens with an authored visible label; the edge and the tint only reinforce it. Remove all colour and the reader still knows which is which. --------------------------------------------------------------------------- */ .vb-note { /* Variants redefine only these three. Body copy stays --vb-ink so it keeps the reading colour of the article it sits in. */ --note-edge: var(--vb-line, #d9c7c1); --note-fill: var(--vb-surface, #f2e7df); --note-label: var(--vb-ink, #30272b); max-width: var(--vb-measure); margin: 2em auto; padding: 16px 20px 18px; border: 1px solid var(--vb-line, #d9c7c1); border-left: 4px solid var(--note-edge); border-radius: 0 var(--vb-radius-sm, 11px) var(--vb-radius-sm, 11px) 0; background: var(--note-fill); } /* The article body sets `> * + *` margins; inside a note the block owns its own rhythm, or the first child inherits a top margin from the paragraph before the note. */ .vb-article__body .vb-note > * { margin-top: 0; } .vb-article__body .vb-note > * + * { margin-top: 0.7em; } .vb-note__label { display: flex; align-items: center; gap: 9px; font-family: var(--vb-display); font-weight: 600; font-size: var(--vb-text-body, 1rem); line-height: 1.35; color: var(--note-label); } /* The glyph is drawn, not written: WordPress kses has no `svg` element, so an inline in a post body is stripped the moment anything runs kses over it - which today only WP-CLI's own kses_remove_filters keeps from happening. A mask over `currentColor` also means the mark follows the label's token into the dark scheme with no second declaration. Decorative by construction: nothing here is exposed to a screen reader, and the label beside it carries the whole meaning. */ .vb-note--danger > .vb-note__label::before, .vb-note--do > .vb-note__label::before, .vb-note--fact > .vb-note__label::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--note-glyph) center / contain no-repeat; mask: var(--note-glyph) center / contain no-repeat; } /* The glyph is opted INTO by the variants that have one. A base rule with `mask: none` would paint a solid 20px square of currentColor on the one variant that deliberately has no icon. */ /* :not(.vb-note__label) is load-bearing. `.vb-note p` is (0,1,1) and `.vb-note__label` is (0,1,0), so the body-copy rule wins and every label renders in reading ink - measured live on the danger box: rgb(10,42,31) where --vb-danger-ink #7c241a was intended. Colour is only the reinforcement here (the word carries the meaning), but a reinforcement that silently does nothing is worse than none. Third time this repo has lost a colour to a specificity tie or beat; see .vb-guide__ctabtn in article.css. */ .vb-note p:not(.vb-note__label), .vb-note li { color: var(--vb-ink, #30272b); } .vb-note ul, .vb-note ol { padding-left: 1.2em; } .vb-note li + li { margin-top: 0.45em; } /* Qualified, not bare. `.vb-article__body li::marker` (article.css:132) paints markers green and is (0,1,2); a bare `.vb-note li::marker` is (0,1,2) too, so only source order would decide - and this repo has already lost a colour to exactly that tie. The dependency makes this sheet load second, but a tie that depends on load order is a trap for whoever splits a stylesheet next. */ .vb-article__body .vb-note li::marker { color: var(--note-edge); } /* --- danger: the consequence is time-critical ---------------------------- */ .vb-note--danger { --note-edge: var(--vb-danger-text, #b52216); --note-fill: var(--vb-danger-soft, #ffece6); --note-label: var(--vb-danger-ink, #b52216); --note-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 16v-4a4 4 0 0 1 8 0v4%22 /%3E%3Cpath d=%22M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7%22 /%3E%3Cpath d=%22M6 17a1 1 0 0 1 1 -1h10a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1l0 -2%22 /%3E%3C/svg%3E"); border-color: var(--vb-danger-text, #b52216); } /* The one place the whole edge is coloured rather than just the left rule. Measured: --vb-danger-ink on --vb-danger-soft is 8.95:1 light, 9.01:1 dark. */ /* --- warn: what a well-meaning owner does that makes it worse ------------- */ .vb-note--warn { --note-edge: var(--vb-warn-text, #86520a); --note-fill: var(--vb-warn-soft, #fff0d8); --note-label: var(--vb-warn-ink, #86520a); /* No glyph. None of the 22 vendored icons means "refrain from this", and inventing one for a single variant would fork the icon set. The label and the amber edge carry it. */ } /* --- do: what to bring, what to have ready ------------------------------- */ .vb-note--do { --note-edge: var(--vb-accent-text, #68192e); --note-fill: var(--vb-primary-soft, #f3e2e7); --note-label: var(--vb-success-ink, #176849); --note-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11.5 21h-5.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v6%22 /%3E%3Cpath d=%22M16 3v4%22 /%3E%3Cpath d=%22M8 3v4%22 /%3E%3Cpath d=%22M4 11h16%22 /%3E%3Cpath d=%22M15 19l2 2l4 -4%22 /%3E%3C/svg%3E"); } /* --- fact: a statutory duty or deadline ---------------------------------- */ .vb-note--fact { --note-edge: var(--vb-gold, #e0a82e); --note-fill: var(--vb-tint-warm, #fbf7f2); --note-label: var(--vb-warn-ink, #86520a); --note-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0%22 /%3E%3Cpath d=%22M12 7v5l3 3%22 /%3E%3C/svg%3E"); } /* --vb-tint-warm flips to #241d10 under [data-theme="dark"]; --vb-warn-ink flips with it. Checked as a pair, not one at a time. */ /* --------------------------------------------------------------------------- Steps: an order that carries information --------------------------------------------------------------------------- Only where the sequence is the point. The corpus says so in its own words at the two places this first ships: "gilt eine einfache Reihenfolge" and "ist die Reihenfolge fest". A list whose order does not matter stays a