diff --git a/docs_assets/extra.css b/docs_assets/extra.css index a3d053d6..fed41bb5 100644 --- a/docs_assets/extra.css +++ b/docs_assets/extra.css @@ -200,11 +200,12 @@ background: #fff; } -/* Headline figures, read as one line of numbers */ +/* Headline figures, read as one line of numbers: four fit on one row of + the text column. */ .rb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); - gap: 0.6rem 1.5rem; + gap: 0.6rem 1rem; margin: 1rem 0 1.5rem; padding: 0.8rem 1rem; border: 1px solid var(--rb-border); @@ -277,6 +278,18 @@ margin: 1rem 0; } +/* A table lines up with the text around it. Material indents the table + by 0.8rem and offsets that with a negative margin on the wrapper, which + the margin above removes, and the table's own margin doubled the space + above it. */ +.md-typeset .md-typeset__table { + padding: 0; +} + +.md-typeset .md-typeset__table > table { + margin: 0; +} + .rb-timestamp { font-size: 0.8rem; color: var(--rb-text-secondary); @@ -343,10 +356,6 @@ /* Key and value cards: the header row is empty, so it is not drawn and not announced. */ -.rb-meta-card table { - margin: 1rem 0 !important; -} - .rb-meta-card thead, .md-typeset table thead:not(:has(th:not(:empty))) { display: none; @@ -410,6 +419,24 @@ min-height: 44px; } +/* Buttons that wrap onto a second line keep a gap between the rows. */ +.md-typeset .md-button { + margin-block: 0.25rem; +} + +/* The copy button stays inside a one-line code block: at 44 px it hung + below the block and covered the end of the line. 24 px is the minimum + target size of WCAG 2.2. */ +.md-typeset .md-code__button { + min-height: 0; + width: 24px; + height: 24px; +} + +.md-typeset pre > code { + padding-right: 2.6rem; +} + .rb-visually-hidden { position: absolute !important; width: 1px !important; @@ -760,13 +787,21 @@ } } -/* The sidebar title stays legible over the list scrolling under it. */ +/* The sidebar title stays legible over the list scrolling under it. With + tabs the title shown is the active section's label, held at the top of + the sidebar: a rule under it ends the list cleanly instead of a half + line of text touching the label. */ @media (min-width: 76.25em) { .md-nav--primary > .md-nav__title, - .md-nav--secondary > .md-nav__title { + .md-nav--secondary > .md-nav__title, + .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link { background: var(--md-default-bg-color); border-bottom: 1px solid var(--rb-border); } + + .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link { + padding-bottom: 0.4rem; + } } /* Material's compact footer defaults sit just below WCAG AA on the dark bar. */ @@ -853,8 +888,15 @@ .md-typeset table:not([class]):not([data-rb-stack]) :is(td, th):first-child { position: sticky; left: 0; + min-width: min(6rem, 30vw); max-width: 40vw; background: var(--md-default-bg-color); + overflow-wrap: break-word; + } + + /* A long link or path breaks anywhere, so it never squeezes the first + column down to one letter per line. */ + .md-typeset table:not([class]):not([data-rb-stack]) td:not(:first-child) :is(a, code) { overflow-wrap: anywhere; } @@ -868,7 +910,6 @@ .md-typeset pre > code { white-space: pre-wrap; overflow-wrap: anywhere; - padding-right: 2.6rem; } .md-typeset :is(.rb-terminal, .language-text) pre > code {