-
Notifications
You must be signed in to change notification settings - Fork 33
Description
In a number of specs, people have been manually copying around a block of style that formats algorithm blocks in a special way. See https://drafts.css-houdini.org/css-typed-om/#unparsedvalue-objects for an example. This seems to be pretty popular, so I'm inclined to build it into Bikeshed's default stylesheet, and think it should be upstreamed to the W3C stylesheet as well.
The CSS is pretty simple:
[data-algorithm]:not(.heading) {
padding: .5em;
border: thin solid #ddd; border-radius: .5em;
margin: .5em calc(-0.5em - 1px);
}
[data-algorithm]:not(.heading) > :first-child {
margin-top: 0;
}
[data-algorithm]:not(.heading) > :last-child {
margin-bottom: 0;
}
[data-algorithm] [data-algorithm] {
margin: 1em 0;
}It's just a thin gray border, outset so the algorithm text itself lines up with surrounding text. It functions really well in algo-heavy specs as a lightweight but noticeable delimiter of the bounds of an algorithm, especially useful when you have several algos in a row that might otherwise blend together.
(For darkmode I think the naive inverse gray, #333, looks great.)
(The :not(.heading) bits are because Bikeshed can take the data-algorithm attribute on a heading to declare the entire section an algorithm, for the purposes of var-checking. It doesn't need the styling in that case.)
/cc @jyasskin