CoreRasurae
367 lines
11 KiB
CSS
367 lines
11 KiB
CSS
/* --- Wider layout --------------------------------------------------------
|
|
*
|
|
* Expands the MkDocs Material page grid and sidebars so the content area
|
|
* has more breathing room on large monitors.
|
|
* ----------------------------------------------------------------------- */
|
|
|
|
@media screen and (min-width: 76.25em) {
|
|
.md-grid {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
.md-sidebar {
|
|
width: 18.1rem;
|
|
}
|
|
|
|
.md-sidebar--primary {
|
|
width: 18.1rem;
|
|
}
|
|
|
|
.md-sidebar__inner {
|
|
padding-right: calc(100% - 17.5rem) !important;
|
|
}
|
|
|
|
[dir=rtl] .md-sidebar__inner {
|
|
padding-left: calc(100% - 17.5rem) !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 60em) and (max-width: 76.1875em) {
|
|
.md-grid {
|
|
max-width: 72rem;
|
|
}
|
|
}
|
|
|
|
/* --- Section heading hierarchy -------------------------------------------
|
|
*
|
|
* Establishes a clear, progressive visual hierarchy across all six heading
|
|
* levels. Base body text in .md-typeset is 0.8 rem (~12.8 px).
|
|
* ----------------------------------------------------------------------- */
|
|
|
|
.md-typeset h1 {
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.25;
|
|
margin: 0 0 0.75em;
|
|
color: var(--md-default-fg-color);
|
|
}
|
|
|
|
.md-typeset h2 {
|
|
font-size: 1.7em;
|
|
font-weight: 600;
|
|
letter-spacing: -0.015em;
|
|
line-height: 1.3;
|
|
margin: 1.4em 0 0.6em;
|
|
border-bottom: 1px solid var(--md-default-fg-color--lightest);
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
.md-typeset h3 {
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.35;
|
|
margin: 1.4em 0 0.6em;
|
|
border-bottom: 1px solid var(--md-default-fg-color--lightest);
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
.md-typeset h4 {
|
|
font-size: 1.2em;
|
|
font-weight: 700;
|
|
line-height: 1.4;
|
|
margin: 1.2em 0 0.5em;
|
|
border-bottom: 1px solid var(--md-default-fg-color--lightest);
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
.md-typeset h5 {
|
|
font-size: 1.15em;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
line-height: 1.4;
|
|
margin: 1.2em 0 0.4em;
|
|
}
|
|
|
|
.md-typeset h6 {
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.4;
|
|
margin: 1.1em 0 0.4em;
|
|
color: var(--md-default-fg-color);
|
|
}
|
|
|
|
/* --- Compact table cells --------------------------------------------------
|
|
*
|
|
* Tighten table padding so wide tables render without forcing column headers
|
|
* to word-wrap on typical screen sizes.
|
|
* ----------------------------------------------------------------------- */
|
|
|
|
.md-typeset table:not([class]) th:first-child,
|
|
.md-typeset table:not([class]) td:first-child {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.md-typeset table:not([class]) th {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* --- Math display ---------------------------------------------------------
|
|
*
|
|
* Math is pre-rendered at build time by hooks/math_prerender.py (KaTeX +
|
|
* Node). Each equation arrives in the page already styled by katex.min.css;
|
|
* the rules below only add the interaction layer around the pre-rendered
|
|
* markup:
|
|
*
|
|
* (a) Horizontal scrolling on narrow screens.
|
|
* (b) A small, always-faintly-visible "copy LaTeX" button at the
|
|
* top-right corner of every display equation. Driven by
|
|
* docs/javascripts/math_copy.js.
|
|
* (c) A CSS-only hover tooltip on inline math that reveals the LaTeX
|
|
* source from the `data-latex` attribute immediately (no native-
|
|
* title delay).
|
|
* (d) A faint dotted underline on inline math to advertise that
|
|
* hovering reveals something — very low contrast so it does not
|
|
* disturb reading at normal distance.
|
|
* (e) Styling for the rare KaTeX-failure fallback rendering.
|
|
*
|
|
* The original LaTeX source remains recoverable in three independent
|
|
* channels: the MathML `<annotation encoding="application/x-tex">` (set
|
|
* by KaTeX), the `data-latex="…"` attribute on the wrapping element, and
|
|
* the on-demand click-to-clipboard / hover-tooltip mechanisms below.
|
|
* ----------------------------------------------------------------------- */
|
|
|
|
.md-typeset .katex-display {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding: 0.25em 0;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.md-typeset .math-display {
|
|
position: relative;
|
|
/* The bottom margin is split into two parts: a `padding-bottom` strip
|
|
that lives *inside* the .math-display box and is reserved
|
|
exclusively for the copy button (so the button can never overlap the
|
|
equation content or the right-aligned `\tag{N}` number that KaTeX
|
|
places at the right edge of the equation row), plus a small residual
|
|
margin so adjacent equations still feel visually separated. Total
|
|
visual spacing below an equation is comparable to the previous
|
|
1.25em, but now the button has its own dedicated zone clear of any
|
|
equation content. */
|
|
margin: 0.75em 0 0.4em;
|
|
padding-bottom: 1.5em;
|
|
}
|
|
|
|
.md-typeset .math-inline {
|
|
/* Keep the inline math glued to surrounding prose, and provide the
|
|
positioning context needed by the ::after hover tooltip below. */
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
/* A barely-visible dotted underline advertises that hovering reveals
|
|
the LaTeX source. Almost invisible at normal reading distance, just
|
|
barely discoverable on close inspection. */
|
|
border-bottom: 1px dotted var(--md-default-fg-color--lightest);
|
|
}
|
|
|
|
/* Click-to-copy button on every display equation.
|
|
*
|
|
* Positioning: bottom-right of the .math-display container, inside the
|
|
* dedicated `padding-bottom` strip declared above. Critically NOT
|
|
* top-right — that location collides with the right-aligned `\tag{N}`
|
|
* equation-number that KaTeX places at the right edge of the equation
|
|
* row, which made the button hard to see and obscured the tag.
|
|
*
|
|
* Visual states:
|
|
* • Default: faint, matches surrounding text colour, just visible.
|
|
* • Hover/focus: full opacity, accent colour, small background tint,
|
|
* "Copy LaTeX" tooltip pops up above the button.
|
|
* • Copied: morphs to a check mark, "Copied!" tooltip stays for ~1.2s.
|
|
*/
|
|
.md-typeset .math-display > .math-copy {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0.25em;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.6em;
|
|
height: 1.6em;
|
|
padding: 0.2em;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 0.25em;
|
|
background: transparent;
|
|
color: currentColor;
|
|
opacity: 0.28;
|
|
cursor: pointer;
|
|
transition:
|
|
opacity 0.15s ease,
|
|
color 0.15s ease,
|
|
background-color 0.15s ease,
|
|
transform 0.15s ease;
|
|
}
|
|
|
|
.md-typeset .math-display > .math-copy:hover,
|
|
.md-typeset .math-display > .math-copy:focus-visible {
|
|
opacity: 1;
|
|
color: var(--md-accent-fg-color);
|
|
background-color: var(--md-default-fg-color--lightest);
|
|
outline: none;
|
|
}
|
|
|
|
.md-typeset .math-display > .math-copy:active {
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
/* The clipboard glyph is the resting icon; the check glyph is the
|
|
confirmation icon shown only after a successful copy. */
|
|
.md-typeset .math-copy .math-copy__icon { display: inline-block; }
|
|
.md-typeset .math-copy .math-copy__check { display: none; }
|
|
.md-typeset .math-copy.is-copied .math-copy__icon { display: none; }
|
|
.md-typeset .math-copy.is-copied .math-copy__check { display: inline-block; }
|
|
|
|
.md-typeset .math-display > .math-copy.is-copied {
|
|
opacity: 1;
|
|
color: var(--md-accent-fg-color);
|
|
}
|
|
|
|
/* Tooltip above the copy button: "Copy LaTeX" by default, switches to
|
|
"Copied!" when the .is-copied class is present. The data-tooltip
|
|
attribute supplies the resting label so we can override it in CSS. */
|
|
.md-typeset .math-display > .math-copy::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
bottom: calc(100% + 6px);
|
|
right: 0;
|
|
padding: 0.3em 0.55em;
|
|
background-color: var(--md-default-fg-color);
|
|
color: var(--md-default-bg-color);
|
|
font-family: var(--md-text-font-family, sans-serif);
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
white-space: nowrap;
|
|
border-radius: 0.25em;
|
|
opacity: 0;
|
|
transform: translateY(2px);
|
|
transition:
|
|
opacity 0.15s ease,
|
|
transform 0.15s ease;
|
|
pointer-events: none;
|
|
z-index: 20;
|
|
}
|
|
|
|
.md-typeset .math-display > .math-copy:hover::after,
|
|
.md-typeset .math-display > .math-copy:focus-visible::after {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.md-typeset .math-display > .math-copy.is-copied::after {
|
|
content: "Copied!";
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
background-color: var(--md-accent-fg-color);
|
|
}
|
|
|
|
/* CSS-only hover tooltip for inline math. Reads from the `data-latex`
|
|
attribute set by hooks/math_prerender.py and shows it immediately on
|
|
hover (no 1-1.5s browser delay that the native title= attribute
|
|
imposes). Truncates with an ellipsis only as a last resort; long
|
|
inline equations are rare and the user can still read the source from
|
|
the MathML annotation. */
|
|
.md-typeset .math-inline[data-latex]:hover::after {
|
|
content: attr(data-latex);
|
|
position: absolute;
|
|
bottom: calc(100% + 4px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 0.3em 0.55em;
|
|
background-color: var(--md-default-fg-color);
|
|
color: var(--md-default-bg-color);
|
|
font-family: var(--md-code-font-family, monospace);
|
|
font-size: 0.78em;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
border-radius: 0.25em;
|
|
max-width: 80vw;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
pointer-events: none;
|
|
z-index: 20;
|
|
}
|
|
|
|
/* Small downward-pointing arrow on the inline tooltip. */
|
|
.md-typeset .math-inline[data-latex]:hover::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: calc(100% - 2px);
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
margin-left: -4px;
|
|
border-left: 4px solid transparent;
|
|
border-right: 4px solid transparent;
|
|
border-top: 4px solid var(--md-default-fg-color);
|
|
pointer-events: none;
|
|
z-index: 20;
|
|
}
|
|
|
|
/* Fallback rendering: shown when KaTeX failed to parse an equation. Keeps
|
|
the original LaTeX visible so the reader can at least see what was
|
|
intended, and the tooltip reveals the KaTeX error message. */
|
|
.md-typeset .math-fallback {
|
|
border-left: 3px solid var(--md-warning-fg-color, #ff9100);
|
|
background-color: rgba(255, 145, 0, 0.05);
|
|
padding: 0.3em 0.6em;
|
|
border-radius: 0.2em;
|
|
}
|
|
|
|
.md-typeset code.math-fallback.math-inline {
|
|
display: inline;
|
|
padding: 0 0.3em;
|
|
}
|
|
|
|
/* --- Layperson admonition -------------------------------------------------
|
|
*
|
|
* Plain-language explanatory boxes intended for non-specialist readers.
|
|
* Stripped out of the technical edition by hooks/layperson_filter.py and
|
|
* styled here for the layperson edition so they read as friendly,
|
|
* pedagogical sidebars rather than authoritative scientific claims.
|
|
* ----------------------------------------------------------------------- */
|
|
|
|
.md-typeset .admonition.layperson,
|
|
.md-typeset details.layperson {
|
|
border-color: #6f42c1;
|
|
background-color: rgba(111, 66, 193, 0.06);
|
|
}
|
|
|
|
.md-typeset .layperson > .admonition-title,
|
|
.md-typeset .layperson > summary {
|
|
background-color: rgba(111, 66, 193, 0.12);
|
|
border-color: #6f42c1;
|
|
}
|
|
|
|
.md-typeset .layperson > .admonition-title::before,
|
|
.md-typeset .layperson > summary::before {
|
|
background-color: #6f42c1;
|
|
-webkit-mask-image: var(--md-admonition-icon--abstract);
|
|
mask-image: var(--md-admonition-icon--abstract);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .admonition.layperson,
|
|
[data-md-color-scheme="slate"] .md-typeset details.layperson {
|
|
background-color: rgba(149, 117, 205, 0.12);
|
|
}
|
|
|
|
[data-md-color-scheme="slate"] .md-typeset .layperson > .admonition-title,
|
|
[data-md-color-scheme="slate"] .md-typeset .layperson > summary {
|
|
background-color: rgba(149, 117, 205, 0.22);
|
|
}
|