in this at render time. */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.5rem 0;
}
.table-scroll > table {
margin: 0 !important;
min-width: 34rem;
}
@media (max-width: 640px) {
#content th,
#content td {
padding: 0.45rem 0.6rem;
}
}
/* Prism's stylesheet only makes `pre[class*="language-"]` scrollable. A fenced
block with no language tag — ASCII diagrams, plain program output, the
financial statements in the valuation deep dive — produces a bare
``, matches nothing, and pushes the whole page sideways on a
phone. Give every code block its own scroller. */
#content pre,
main pre {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Monospace at 14px runs wide on a 360px screen; a notch smaller fits more of
an ASCII table before the reader has to scroll it. */
@media (max-width: 640px) {
#content pre {
font-size: 0.8125rem;
}
}
/* Mermaid: scroll a wide diagram rather than shrinking it to illegibility.
`margin: 0 auto` on a block child centres it when it fits and collapses to
zero when it overflows, so the diagram starts flush left and scrolls. */
.mermaid {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mermaid > svg {
display: block;
margin: 0 auto;
}
/* Mermaid 10 bakes `max-width` onto the SVG (useMaxWidth), which on a phone
scales a complex diagram down until the labels are unreadable. Below lg,
let it render at natural size inside the scroller instead. */
@media (max-width: 1023.98px) {
.mermaid > svg {
max-width: none !important;
}
}
/* Reserve space for tutorial slide images so they do not shift the page as
they lazy-load. A lazy image has no intrinsic size until it arrives, so
`width` has to be explicit — with `width: auto` the box computes to zero and
the aspect-ratio reserves nothing. Every image in tutorials/ today is a
full-bleed 1376x768 slide, so 100% is the right width for all of them; the
cost is that a small inline image would be upscaled.
tutorial.html clears the placeholder ratio once each image loads (see
adaptForSmallScreens), after which the file's own ratio governs and nothing
can be distorted. */
#content img {
width: 100%;
height: auto;
aspect-ratio: 1376 / 768;
}
/* ---------------------------------------------------------------------------
In-page anchors must clear the sticky mobile top bar (h-14 = 3.5rem),
otherwise a jump-nav link parks its heading underneath it. Only below lg,
where that bar exists.
--------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
:target,
section[id],
main [id] {
scroll-margin-top: 4.5rem;
}
html {
scroll-behavior: smooth;
}
}
/* ---------------------------------------------------------------------------
Hub: fade the right edge of the sticky category pills so it reads as
scrollable when the row is wider than the screen.
--------------------------------------------------------------------------- */
.scroll-fade {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
}
@media (min-width: 1024px) {
.scroll-fade {
-webkit-mask-image: none;
mask-image: none;
}
}