/* The site's stylesheets for the screen, joined in the order its pages linked them, so a page asks for one (#443). Written by `cargo xtask site` (xtask/src/site/bundle.rs) from: css/variables.css, css/general.css, css/chrome.css, css/print.css, fonts/fonts.css, highlight.css, theme/fusionspace-mdbook.css, theme/hpr.css. */ /* css/variables.css */ /* Globals */ :root { --sidebar-target-width: 300px; --sidebar-width: min(var(--sidebar-target-width), 80vw); --sidebar-resize-indicator-width: 8px; --sidebar-resize-indicator-space: 2px; --page-padding: 15px; --content-max-width: 750px; --menu-bar-height: 50px; --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */ --searchbar-margin-block-start: 5px; } /* Themes */ .ayu { --bg: hsl(210, 25%, 8%); --fg: #c5c5c5; --sidebar-bg: #14191f; --sidebar-fg: #c8c9db; --sidebar-non-existant: #5c6773; --sidebar-active: #ffb454; --sidebar-spacer: #2d334f; --scrollbar: var(--sidebar-fg); --icons: #737480; --icons-hover: #b7b9cc; --links: #0096cf; --inline-code-color: #ffb454; --theme-popup-bg: #14191f; --theme-popup-border: #5c6773; --theme-hover: #191f26; --quote-bg: hsl(226, 15%, 17%); --quote-border: hsl(226, 15%, 22%); --warning-border: #ff8e00; --table-border-color: hsl(210, 25%, 13%); --table-header-bg: hsl(210, 25%, 28%); --table-alternate-bg: hsl(210, 25%, 11%); --searchbar-border-color: #848484; --searchbar-bg: #424242; --searchbar-fg: #fff; --searchbar-shadow-color: #d4c89f; --searchresults-header-fg: #666; --searchresults-border-color: #888; --searchresults-li-bg: #252932; --search-mark-bg: #e3b171; --color-scheme: dark; /* Same as `--icons` */ --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg) brightness(99%) contrast(85%); /* Same as `--sidebar-active` */ --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(341deg) brightness(104%) contrast(101%); --footnote-highlight: #2668a6; --overlay-bg: rgba(33, 40, 48, 0.4); --blockquote-note-color: #74b9ff; --blockquote-tip-color: #09ca09; --blockquote-important-color: #d3abff; --blockquote-warning-color: #f0b72f; --blockquote-caution-color: #f21424; --sidebar-header-border-color: #c18639; } .coal { --bg: hsl(200, 7%, 8%); --fg: #98a3ad; --sidebar-bg: #292c2f; --sidebar-fg: #a1adb8; --sidebar-non-existant: #505254; --sidebar-active: #3473ad; --sidebar-spacer: #393939; --scrollbar: var(--sidebar-fg); --icons: #43484d; --icons-hover: #b3c0cc; --links: #2b79a2; --inline-code-color: #c5c8c6; --theme-popup-bg: #141617; --theme-popup-border: #43484d; --theme-hover: #1f2124; --quote-bg: hsl(234, 21%, 18%); --quote-border: hsl(234, 21%, 23%); --warning-border: #ff8e00; --table-border-color: hsl(200, 7%, 13%); --table-header-bg: hsl(200, 7%, 28%); --table-alternate-bg: hsl(200, 7%, 11%); --searchbar-border-color: #aaa; --searchbar-bg: #b7b7b7; --searchbar-fg: #000; --searchbar-shadow-color: #aaa; --searchresults-header-fg: #666; --searchresults-border-color: #98a3ad; --searchresults-li-bg: #2b2b2f; --search-mark-bg: #355c7d; --color-scheme: dark; /* Same as `--icons` */ --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); /* Same as `--sidebar-active` */ --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); --footnote-highlight: #4079ae; --overlay-bg: rgba(33, 40, 48, 0.4); --blockquote-note-color: #4493f8; --blockquote-tip-color: #08ae08; --blockquote-important-color: #ab7df8; --blockquote-warning-color: #d29922; --blockquote-caution-color: #d91b29; --sidebar-header-border-color: #3473ad; } .light, html:not(.js) { --bg: hsl(0, 0%, 100%); --fg: hsl(0, 0%, 0%); --sidebar-bg: #fafafa; --sidebar-fg: hsl(0, 0%, 0%); --sidebar-non-existant: #aaaaaa; --sidebar-active: #1f1fff; --sidebar-spacer: #f4f4f4; --scrollbar: #8F8F8F; --icons: #747474; --icons-hover: #000000; --links: #20609f; --inline-code-color: #301900; --theme-popup-bg: #fafafa; --theme-popup-border: #cccccc; --theme-hover: #e6e6e6; --quote-bg: hsl(197, 37%, 96%); --quote-border: hsl(197, 37%, 91%); --warning-border: #ff8e00; --table-border-color: hsl(0, 0%, 95%); --table-header-bg: hsl(0, 0%, 80%); --table-alternate-bg: hsl(0, 0%, 97%); --searchbar-border-color: #aaa; --searchbar-bg: #fafafa; --searchbar-fg: #000; --searchbar-shadow-color: #aaa; --searchresults-header-fg: #666; --searchresults-border-color: #888; --searchresults-li-bg: #e4f2fe; --search-mark-bg: #a2cff5; --color-scheme: light; /* Same as `--icons` */ --copy-button-filter: invert(45.49%); /* Same as `--sidebar-active` */ --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%); --footnote-highlight: #7e7eff; --overlay-bg: rgba(200, 200, 205, 0.4); --blockquote-note-color: #0969da; --blockquote-tip-color: #008000; --blockquote-important-color: #8250df; --blockquote-warning-color: #9a6700; --blockquote-caution-color: #b52731; --sidebar-header-border-color: #6e6edb; } .navy { --bg: hsl(226, 23%, 11%); --fg: #bcbdd0; --sidebar-bg: #282d3f; --sidebar-fg: #c8c9db; --sidebar-non-existant: #505274; --sidebar-active: #2b79a2; --sidebar-spacer: #2d334f; --scrollbar: var(--sidebar-fg); --icons: #737480; --icons-hover: #b7b9cc; --links: #2b79a2; --inline-code-color: #c5c8c6; --theme-popup-bg: #161923; --theme-popup-border: #737480; --theme-hover: #282e40; --quote-bg: hsl(226, 15%, 17%); --quote-border: hsl(226, 15%, 22%); --warning-border: #ff8e00; --table-border-color: hsl(226, 23%, 16%); --table-header-bg: hsl(226, 23%, 31%); --table-alternate-bg: hsl(226, 23%, 14%); --searchbar-border-color: #aaa; --searchbar-bg: #aeaec6; --searchbar-fg: #000; --searchbar-shadow-color: #aaa; --searchresults-header-fg: #5f5f71; --searchresults-border-color: #5c5c68; --searchresults-li-bg: #242430; --search-mark-bg: #a2cff5; --color-scheme: dark; /* Same as `--icons` */ --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%); /* Same as `--sidebar-active` */ --copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%) hue-rotate(156deg) brightness(85%) contrast(90%); --footnote-highlight: #4079ae; --overlay-bg: rgba(33, 40, 48, 0.4); --blockquote-note-color: #4493f8; --blockquote-tip-color: #09ca09; --blockquote-important-color: #ab7df8; --blockquote-warning-color: #d29922; --blockquote-caution-color: #f21424; --sidebar-header-border-color: #2f6ab5; } .rust { --bg: hsl(60, 9%, 87%); --fg: #262625; --sidebar-bg: #3b2e2a; --sidebar-fg: #c8c9db; --sidebar-non-existant: #505254; --sidebar-active: #e69f67; --sidebar-spacer: #45373a; --scrollbar: var(--sidebar-fg); --icons: #737480; --icons-hover: #262625; --links: #2b79a2; --inline-code-color: #6e6b5e; --theme-popup-bg: #e1e1db; --theme-popup-border: #b38f6b; --theme-hover: #99908a; --quote-bg: hsl(60, 5%, 75%); --quote-border: hsl(60, 5%, 70%); --warning-border: #ff8e00; --table-border-color: hsl(60, 9%, 82%); --table-header-bg: #b3a497; --table-alternate-bg: hsl(60, 9%, 84%); --searchbar-border-color: #aaa; --searchbar-bg: #fafafa; --searchbar-fg: #000; --searchbar-shadow-color: #aaa; --searchresults-header-fg: #666; --searchresults-border-color: #888; --searchresults-li-bg: #dec2a2; --search-mark-bg: #e69f67; /* Same as `--icons` */ --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%); /* Same as `--sidebar-active` */ --copy-button-filter-hover: invert(77%) sepia(16%) saturate(1798%) hue-rotate(328deg) brightness(98%) contrast(83%); --footnote-highlight: #d3a17a; --overlay-bg: rgba(150, 150, 150, 0.25); --blockquote-note-color: #023b95; --blockquote-tip-color: #007700; --blockquote-important-color: #8250df; --blockquote-warning-color: #603700; --blockquote-caution-color: #aa1721; --sidebar-header-border-color: #8c391f; } @media (prefers-color-scheme: dark) { html:not(.js) { --bg: hsl(200, 7%, 8%); --fg: #98a3ad; --sidebar-bg: #292c2f; --sidebar-fg: #a1adb8; --sidebar-non-existant: #505254; --sidebar-active: #3473ad; --sidebar-spacer: #393939; --scrollbar: var(--sidebar-fg); --icons: #43484d; --icons-hover: #b3c0cc; --links: #2b79a2; --inline-code-color: #c5c8c6; --theme-popup-bg: #141617; --theme-popup-border: #43484d; --theme-hover: #1f2124; --quote-bg: hsl(234, 21%, 18%); --quote-border: hsl(234, 21%, 23%); --warning-border: #ff8e00; --table-border-color: hsl(200, 7%, 13%); --table-header-bg: hsl(200, 7%, 28%); --table-alternate-bg: hsl(200, 7%, 11%); --searchbar-border-color: #aaa; --searchbar-bg: #b7b7b7; --searchbar-fg: #000; --searchbar-shadow-color: #aaa; --searchresults-header-fg: #666; --searchresults-border-color: #98a3ad; --searchresults-li-bg: #2b2b2f; --search-mark-bg: #355c7d; --color-scheme: dark; /* Same as `--icons` */ --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); /* Same as `--sidebar-active` */ --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); --footnote-highlight: #4079ae; --overlay-bg: rgba(33, 40, 48, 0.4); --blockquote-note-color: #4493f8; --blockquote-tip-color: #08ae08; --blockquote-important-color: #ab7df8; --blockquote-warning-color: #d29922; --blockquote-caution-color: #d91b29; --sidebar-header-border-color: #3473ad; } } /* css/general.css */ /* Base styles and content styles */ :root { /* Browser default font-size is 16px, this way 1 rem = 10px */ font-size: 62.5%; color-scheme: var(--color-scheme); } html { font-family: "Open Sans", sans-serif; color: var(--fg); background-color: var(--bg); text-size-adjust: none; -webkit-text-size-adjust: none; } body { margin: 0; font-size: 1.6rem; overflow-x: hidden; } code { font-family: var(--mono-font) !important; font-size: var(--code-font-size); direction: ltr !important; } /* make long words/inline code not x overflow */ main { overflow-wrap: break-word; } /* make wide tables scroll if they overflow */ .table-wrapper { overflow-x: auto; } /* Don't change font size in headers. */ h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { font-size: unset; } .left { float: left; } .right { float: right; } .boring { opacity: 0.6; } .hide-boring .boring { display: none; } .hidden { display: none !important; } h2, h3 { margin-block-start: 2.5em; } h4, h5 { margin-block-start: 2em; } .header + .header h3, .header + .header h4, .header + .header h5 { margin-block-start: 1em; } h1:target::before, h2:target::before, h3:target::before, h4:target::before, h5:target::before, h6:target::before, dt:target::before { display: inline-block; content: "»"; margin-inline-start: -30px; width: 30px; } /* This is broken on Safari as of version 14, but is fixed in Safari Technology Preview 117 which I think will be Safari 14.2. https://bugs.webkit.org/show_bug.cgi?id=218076 */ :target { /* Safari does not support logical properties */ scroll-margin-top: calc(var(--menu-bar-height) + 0.5em); } .page { outline: 0; padding: 0 var(--page-padding); margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #mdbook-menu-bar-hover-placeholder */ } .page-wrapper { box-sizing: border-box; background-color: var(--bg); } html:not(.js) .page-wrapper, .js:not(.sidebar-resizing) .page-wrapper { transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ } [dir=rtl]:not(.js) .page-wrapper, [dir=rtl].js:not(.sidebar-resizing) .page-wrapper { transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */ } .content { overflow-y: auto; padding: 0 5px 50px 5px; } .content main { margin-inline-start: auto; margin-inline-end: auto; max-width: var(--content-max-width); } .content p { line-height: 1.45em; } .content ol { line-height: 1.45em; } .content ul { line-height: 1.45em; } .content a { text-decoration: none; } .content a:hover { text-decoration: underline; } .content img, .content video { max-width: 100%; } /* When an image is inside an anchor, ensure the focus ring covers the entire image instead of the anchor's line box. */ .content a:has(img) { display: inline-block; } .content .header:link, .content .header:visited { color: var(--fg); } .content .header:link, .content .header:visited:hover { text-decoration: none; } table { margin: 0 auto; border-collapse: collapse; } table td { padding: 3px 20px; border: 1px var(--table-border-color) solid; } table thead { background: var(--table-header-bg); } table thead td { font-weight: 700; border: none; } table thead th { padding: 3px 20px; } table thead tr { border: 1px var(--table-header-bg) solid; } /* Alternate background colors for rows */ table tbody tr:nth-child(2n) { background: var(--table-alternate-bg); } blockquote { margin: 20px 0; padding: 0 20px; color: var(--fg); background-color: var(--quote-bg); border-block-start: .1em solid var(--quote-border); border-block-end: .1em solid var(--quote-border); } /* TODO: Remove .warning in a future version of mdbook, it is replaced by blockquote tags. */ .warning { margin: 20px; padding: 0 20px; border-inline-start: 2px solid var(--warning-border); } .warning:before { position: absolute; width: 3rem; height: 3rem; margin-inline-start: calc(-1.5rem - 21px); content: "ⓘ"; text-align: center; background-color: var(--bg); color: var(--warning-border); font-weight: bold; font-size: 2rem; } blockquote .warning:before { background-color: var(--quote-bg); } kbd { background-color: var(--table-border-color); border-radius: 4px; border: solid 1px var(--theme-popup-border); box-shadow: inset 0 -1px 0 var(--theme-hover); display: inline-block; font-size: var(--code-font-size); font-family: var(--mono-font); line-height: 10px; padding: 4px 5px; vertical-align: middle; } sup { /* Set the line-height for superscript and footnote references so that there isn't an awkward space appearing above lines that contain the footnote. See https://github.com/rust-lang/mdBook/pull/2443#discussion_r1813773583 for an explanation. */ line-height: 0; } .footnote-definition { font-size: 0.9em; } /* The default spacing for a list is a little too large. */ .footnote-definition ul, .footnote-definition ol { padding-left: 20px; } .footnote-definition > li { /* Required to position the ::before target */ position: relative; } .footnote-definition > li:target { scroll-margin-top: 50vh; } .footnote-reference:target { scroll-margin-top: 50vh; } /* Draws a border around the footnote (including the marker) when it is selected. TODO: If there are multiple linkbacks, highlight which one you just came from so you know which one to click. */ .footnote-definition > li:target::before { border: 2px solid var(--footnote-highlight); border-radius: 6px; position: absolute; top: -8px; right: -8px; bottom: -8px; left: -32px; pointer-events: none; content: ""; } /* Pulses the footnote reference so you can quickly see where you left off reading. This could use some improvement. */ @media not (prefers-reduced-motion) { .footnote-reference:target { animation: fn-highlight 0.8s; border-radius: 2px; } @keyframes fn-highlight { from { background-color: var(--footnote-highlight); } } } .tooltiptext { position: absolute; visibility: hidden; color: #fff; background-color: #333; transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ left: -8px; /* Half of the width of the icon */ top: -35px; font-size: 0.8em; text-align: center; border-radius: 6px; padding: 5px 8px; margin: 5px; z-index: 1000; } .tooltipped .tooltiptext { visibility: visible; } .chapter li.part-title { color: var(--sidebar-fg); margin: 5px 0px; font-weight: bold; } .result-no-output { font-style: italic; } .fa-svg svg { width: 1em; height: 1em; fill: currentColor; margin-bottom: -0.1em; } dt { font-weight: bold; margin-top: 0.5em; margin-bottom: 0.1em; } /* This uses a CSS counter to add numbers to definitions, but only if there is more than one definition. */ dl, dt { counter-reset: dd-counter; } /* When there is more than one definition, increment the counter. The first selector selects the first definition, and the second one selects definitions 2 and beyond.*/ dd:has(+ dd), dd + dd { counter-increment: dd-counter; /* Use flex display to help with positioning the numbers when there is a p tag inside the definition. */ display: flex; align-items: flex-start; } /* Shows the counter for definitions. The first selector selects the first definition, and the second one selections definitions 2 and beyond.*/ dd:has(+ dd)::before, dd + dd::before { content: counter(dd-counter) ". "; font-weight: 600; display: inline-block; margin-right: 0.5em; } dd > p { /* For loose definitions that have a p tag inside, don't add a bunch of space before the definition. */ margin-top: 0; } /* Remove some excess space from the bottom. */ .blockquote-tag p:last-child { margin-bottom: 2px; } .blockquote-tag { /* Add some padding to make the vertical bar a little taller than the text.*/ padding: 2px 0px 2px 20px; /* Add a solid color bar on the left side. */ border-inline-start-style: solid; border-inline-start-width: 4px; /* Disable the background color from normal blockquotes . */ background-color: inherit; /* Disable border blocks from blockquotes. */ border-block-start: none; border-block-end: none; } .blockquote-tag-title svg { fill: currentColor; /* Add space between the icon and the title. */ margin-right: 8px; } .blockquote-tag-note { border-inline-start-color: var(--blockquote-note-color); } .blockquote-tag-tip { border-inline-start-color: var(--blockquote-tip-color); } .blockquote-tag-important { border-inline-start-color: var(--blockquote-important-color); } .blockquote-tag-warning { border-inline-start-color: var(--blockquote-warning-color); } .blockquote-tag-caution { border-inline-start-color: var(--blockquote-caution-color); } .blockquote-tag-note > .blockquote-tag-title { color: var(--blockquote-note-color); } .blockquote-tag-tip > .blockquote-tag-title { color: var(--blockquote-tip-color); } .blockquote-tag-important > .blockquote-tag-title { color: var(--blockquote-important-color); } .blockquote-tag-warning > .blockquote-tag-title { color: var(--blockquote-warning-color); } .blockquote-tag-caution > .blockquote-tag-title { color: var(--blockquote-caution-color); } .blockquote-tag-title { /* Slightly increase the weight for more emphasis. */ font-weight: 600; /* Vertically center the icon with the text. */ display: flex; align-items: center; /* Remove default large margins for a more compact display. */ margin: 2px 0 8px 0; } .blockquote-tag-title .fa-svg { fill: currentColor; /* Add some space between the icon and the text. */ margin-right: 8px; } /* All this code is to handle the "zoomable" images feature. */ /* This one makes the checkbox invisible while keeping it selectable with the keyboard (with the "tab" key). */ .content .checkbox-img { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* When the input is focused, we make it appear to the user by adding an outline to the img instead */ .content .checkbox-img:focus + img { outline: auto; } /* The "zoomed-in" image is not displayed until the checkbox is "ticked". */ .content .checkbox-img:not(:checked) ~ .img-wrapper { display: none; } .content .checkbox-label { display: block; max-width: 100%; } .content .checkbox-label img { cursor: zoom-in; } .content .checkbox-img:checked ~ .img-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); z-index: 1001; display: flex; align-items: center; justify-content: center; cursor: zoom-out; } .content .checkbox-img:checked ~ .img-wrapper > img { --img-padding: 5px; padding: var(--img-padding); background: #999; cursor: zoom-out; max-width: calc(100% - (var(--img-padding) * 2)); max-height: calc(100% - (var(--img-padding) * 2)); } /* css/chrome.css */ /* CSS for UI elements (a.k.a. chrome) */ html { scrollbar-color: var(--scrollbar) transparent; } #mdbook-searchresults a, .content a:link, a:visited, a > .hljs { color: var(--links); } /* mdbook-body-container is necessary because mobile browsers don't seem to like overflow-x on the body tag when there is a tag. */ #mdbook-body-container { /* This is used when the sidebar pushes the body content off the side of the screen on small screens. Without it, dragging on mobile Safari will want to reposition the viewport in a weird way. */ overflow-x: clip; } /* Menu Bar */ #mdbook-menu-bar, #mdbook-menu-bar-hover-placeholder { z-index: 101; margin: auto calc(0px - var(--page-padding)); } #mdbook-menu-bar { position: relative; display: flex; flex-wrap: wrap; background-color: var(--bg); border-block-end-color: var(--bg); border-block-end-width: 1px; border-block-end-style: solid; } #mdbook-menu-bar.sticky, #mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar, #mdbook-menu-bar:hover, html.sidebar-visible #mdbook-menu-bar { position: -webkit-sticky; position: sticky; top: 0 !important; } #mdbook-menu-bar-hover-placeholder { position: sticky; position: -webkit-sticky; top: 0; height: var(--menu-bar-height); } #mdbook-menu-bar.bordered { border-block-end-color: var(--table-border-color); } #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button { position: relative; padding: 0 8px; z-index: 10; line-height: var(--menu-bar-height); cursor: pointer; transition: color 0.5s; } @media only screen and (max-width: 420px) { #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button { padding: 0 5px; } } .icon-button { border: none; background: none; padding: 0; color: inherit; } .icon-button .fa-svg { margin: 0; } .right-buttons { margin: 0 15px; } .right-buttons a { text-decoration: none; } .left-buttons { display: flex; margin: 0 5px; } html:not(.js) .left-buttons button { display: none; } .menu-title { display: inline-block; font-weight: 200; font-size: 2.4rem; line-height: var(--menu-bar-height); text-align: center; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-title { cursor: pointer; } .menu-bar, .menu-bar:visited, .nav-chapters, .nav-chapters:visited, .mobile-nav-chapters, .mobile-nav-chapters:visited, .menu-bar .icon-button, .menu-bar a .fa-svg { color: var(--icons); } .menu-bar .fa-svg:hover, .menu-bar .icon-button:hover, .nav-chapters:hover, .mobile-nav-chapters .fa-svg:hover { color: var(--icons-hover); } /* Nav Icons */ .nav-chapters { font-size: 2.5em; text-align: center; text-decoration: none; position: fixed; top: 0; bottom: 0; margin: 0; max-width: 150px; min-width: 90px; display: flex; justify-content: center; align-content: center; flex-direction: column; transition: color 0.5s, background-color 0.5s; } .nav-chapters:hover { text-decoration: none; background-color: var(--theme-hover); transition: background-color 0.15s, color 0.15s; } .nav-chapters.previous { /* Ensure that the previous arrow does not overlap the resize indicator. */ margin-inline-start: var(--sidebar-resize-indicator-width); } .nav-wrapper { margin-block-start: 50px; display: none; } .mobile-nav-chapters { font-size: 2.5em; text-align: center; text-decoration: none; width: 90px; border-radius: 5px; background-color: var(--sidebar-bg); } /* Only Firefox supports flow-relative values */ .previous { float: left; } [dir=rtl] .previous { float: right; } /* Only Firefox supports flow-relative values */ .next { float: right; right: var(--page-padding); } [dir=rtl] .next { float: left; right: unset; left: var(--page-padding); } @media only screen and (max-width: 1080px) { .nav-wide-wrapper { display: none; } .nav-wrapper { display: block; } } /* sidebar-visible */ @media only screen and (max-width: 1380px) { #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; } #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; } } /* Inline code */ :not(pre) > .hljs { display: inline; padding: 0.1em 0.3em; border-radius: 3px; } :not(pre):not(a) > .hljs { color: var(--inline-code-color); overflow-x: initial; } a:hover > .hljs { text-decoration: underline; } pre { position: relative; } pre > .buttons { position: absolute; z-index: 100; right: 0px; top: 2px; margin: 0px; padding: 2px 0px; color: var(--sidebar-fg); cursor: pointer; visibility: hidden; opacity: 0; transition: visibility 0.1s linear, opacity 0.1s linear; } pre:hover > .buttons { visibility: visible; opacity: 1 } pre > .buttons :hover { color: var(--sidebar-active); border-color: var(--icons-hover); background-color: var(--theme-hover); } pre > .buttons button { cursor: inherit; margin: 0px 5px; padding: 2px 3px 0px 4px; font-size: 23px; border-style: solid; border-width: 1px; border-radius: 4px; border-color: var(--icons); background-color: var(--theme-popup-bg); transition: 100ms; transition-property: color,border-color,background-color; color: var(--icons); } pre > .buttons button.clip-button { padding: 2px 4px 0px 6px; } pre > .buttons button.clip-button::before { /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license */ content: url('data:image/svg+xml,\ \ \ '); filter: var(--copy-button-filter); } pre > .buttons button.clip-button:hover::before { filter: var(--copy-button-filter-hover); } @media (pointer: coarse) { pre > .buttons button { /* On mobile, make it easier to tap buttons. */ padding: 0.3rem 1rem; } .sidebar-resize-indicator { /* Hide resize indicator on devices with limited accuracy */ display: none; } } pre > code { display: block; padding: 1rem; } /* FIXME: ACE editors overlap their buttons because ACE does absolute positioning within the code block which breaks padding. The only solution I can think of is to move the padding to the outer pre tag (or insert a div wrapper), but that would require fixing a whole bunch of CSS rules. */ .hljs.ace_editor { padding: 0rem 0rem; } pre > .result { margin-block-start: 10px; } /* Search */ #mdbook-searchresults a { text-decoration: none; } mark { border-radius: 2px; padding-block-start: 0; padding-block-end: 1px; padding-inline-start: 3px; padding-inline-end: 3px; margin-block-start: 0; margin-block-end: -1px; margin-inline-start: -3px; margin-inline-end: -3px; background-color: var(--search-mark-bg); transition: background-color 300ms linear; cursor: pointer; } mark.fade-out { background-color: rgba(0,0,0,0) !important; cursor: auto; } .searchbar-outer { margin-inline-start: auto; margin-inline-end: auto; max-width: var(--content-max-width); } #mdbook-searchbar-outer.searching #mdbook-searchbar { padding-right: 30px; } #mdbook-searchbar-outer .spinner-wrapper { display: none; } #mdbook-searchbar-outer.searching .spinner-wrapper { display: block; } .search-wrapper { position: relative; } .spinner-wrapper { --spinner-margin: 2px; position: absolute; margin-block-start: calc(var(--searchbar-margin-block-start) + var(--spinner-margin)); right: var(--spinner-margin); top: 0; bottom: var(--spinner-margin); padding: 6px; background-color: var(--bg); } #fa-spin { animation: rotating 2s linear infinite; display: inline-block; } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #mdbook-searchbar { width: 100%; margin-block-start: var(--searchbar-margin-block-start); margin-block-end: 0; margin-inline-start: auto; margin-inline-end: auto; padding: 10px 16px; transition: box-shadow 300ms ease-in-out; border: 1px solid var(--searchbar-border-color); border-radius: 3px; background-color: var(--searchbar-bg); color: var(--searchbar-fg); } #mdbook-searchbar:focus, #mdbook-searchbar.active { box-shadow: 0 0 3px var(--searchbar-shadow-color); } .searchresults-header { font-weight: bold; font-size: 1em; padding-block-start: 18px; padding-block-end: 0; padding-inline-start: 5px; padding-inline-end: 0; color: var(--searchresults-header-fg); } .searchresults-outer { margin-inline-start: auto; margin-inline-end: auto; max-width: var(--content-max-width); border-block-end: 1px dashed var(--searchresults-border-color); } ul#mdbook-searchresults { list-style: none; padding-inline-start: 20px; } ul#mdbook-searchresults li { margin: 10px 0px; padding: 2px; border-radius: 2px; } ul#mdbook-searchresults li.focus { background-color: var(--searchresults-li-bg); } ul#mdbook-searchresults span.teaser { display: block; clear: both; margin-block-start: 5px; margin-block-end: 0; margin-inline-start: 20px; margin-inline-end: 0; font-size: 0.8em; } ul#mdbook-searchresults span.teaser em { font-weight: bold; font-style: normal; } /* Sidebar */ .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); font-size: 0.875em; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; background-color: var(--sidebar-bg); color: var(--sidebar-fg); } .sidebar-iframe-inner { --padding: 10px; background-color: var(--sidebar-bg); padding: var(--padding); margin: 0; font-size: 1.4rem; color: var(--sidebar-fg); min-height: calc(100vh - var(--padding) * 2); } .sidebar-iframe-outer { border: none; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } [dir=rtl] .sidebar { left: unset; right: 0; } .sidebar-resizing { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } html:not(.sidebar-resizing) .sidebar { transition: transform 0.3s; /* Animation: slide away */ } .sidebar code { line-height: 2em; } .sidebar .sidebar-scrollbox { overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 10px 10px; } .sidebar .sidebar-resize-handle { position: absolute; cursor: col-resize; width: 0; right: calc(var(--sidebar-resize-indicator-width) * -1); top: 0; bottom: 0; display: flex; align-items: center; } .sidebar-resize-handle .sidebar-resize-indicator { width: 100%; height: 16px; color: var(--icons); margin-inline-start: var(--sidebar-resize-indicator-space); display: flex; align-items: center; justify-content: flex-start; } .sidebar-resize-handle .sidebar-resize-indicator::before { content: ""; width: 2px; height: 12px; border-left: dotted 2px currentColor; } .sidebar-resize-handle .sidebar-resize-indicator::after { content: ""; width: 2px; height: 16px; border-left: dotted 2px currentColor; } [dir=rtl] .sidebar .sidebar-resize-handle { left: calc(var(--sidebar-resize-indicator-width) * -1); right: unset; } .js .sidebar .sidebar-resize-handle { cursor: col-resize; width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space)); } html:not(.js) .sidebar-resize-handle { display: none; } /* sidebar-hidden */ #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar { transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); } [dir=rtl] #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar { transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); } .sidebar::-webkit-scrollbar { background: var(--sidebar-bg); } .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar); } /* sidebar-visible */ #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))); } [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))); } @media only screen and (min-width: 620px) { #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { transform: none; margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)); } [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { transform: none; } } .chapter { list-style: none outside none; padding-inline-start: 0; line-height: 2.2em; } .chapter li { color: var(--sidebar-non-existant); } /* This is a span wrapping the chapter link and the fold chevron. */ .chapter-link-wrapper { /* Used to position the chevron to the right, allowing the text to wrap before it. */ display: flex; } .chapter li a { /* Remove underlines. */ text-decoration: none; color: var(--sidebar-fg); } .chapter li a:hover { color: var(--sidebar-active); } .chapter li a.active { color: var(--sidebar-active); } /* This is the toggle chevron. */ .chapter-fold-toggle { cursor: pointer; /* Positions the chevron to the side. */ margin-inline-start: auto; padding: 0 10px; user-select: none; opacity: 0.68; } .chapter-fold-toggle div { transition: transform 0.5s; } /* collapse the section */ .chapter li:not(.expanded) > ol { display: none; } .chapter li.chapter-item { line-height: 1.5em; margin-block-start: 0.6em; } .chapter li.header-item { /* Make sure there is plenty of spacing between sections so they don't blend in with each other. */ margin-block-end: 0.5em; /* Avoid too much spacing between lines when section heading word wraps so that it can be distinguished between successive headings. */ line-height: 1.5em; } /* When expanded, rotate the chevron to point down. */ .chapter li.expanded > span > .chapter-fold-toggle div { transform: rotate(90deg); } .chapter a.current-header { color: var(--sidebar-active); } .on-this-page { margin-left: 22px; border-inline-start: 4px solid var(--sidebar-header-border-color); padding-left: 8px; } .on-this-page > ol { padding-left: 0; } /* Horizontal line in chapter list. */ .spacer { width: 100%; height: 3px; margin: 5px 0px; } .chapter .spacer { background-color: var(--sidebar-spacer); } /* On touch devices, add more vertical spacing to make it easier to tap links. */ @media (-moz-touch-enabled: 1), (pointer: coarse) { .chapter li a { padding: 5px 0; } .spacer { margin: 10px 0; } } .section { list-style: none outside none; padding-inline-start: 20px; line-height: 1.9em; } /* Theme Menu Popup */ .theme-popup { position: absolute; left: 10px; top: var(--menu-bar-height); z-index: 1000; border-radius: 4px; font-size: 0.7em; color: var(--fg); background: var(--theme-popup-bg); border: 1px solid var(--theme-popup-border); margin: 0; padding: 0; list-style: none; display: none; /* Don't let the children's background extend past the rounded corners. */ overflow: hidden; } [dir=rtl] .theme-popup { left: unset; right: 10px; } .theme-popup .default { color: var(--icons); } .theme-popup .theme { width: 100%; border: 0; margin: 0; padding: 2px 20px; line-height: 25px; white-space: nowrap; text-align: start; cursor: pointer; color: inherit; background: inherit; font-size: inherit; } .theme-popup .theme:hover { background-color: var(--theme-hover); } .theme-selected::before { display: inline-block; content: "✓"; margin-inline-start: -14px; width: 14px; } /* The container for the help popup that covers the whole window. */ #mdbook-help-container { /* Position and size for the whole window. */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* This uses flex layout (which is set in book.js), and centers the popup in the window.*/ display: none; align-items: center; justify-content: center; z-index: 1000; /* Dim out the book while the popup is visible. */ background: var(--overlay-bg); } /* The popup help box. */ #mdbook-help-popup { box-shadow: 0 4px 24px rgba(0,0,0,0.15); min-width: 300px; max-width: 500px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background-color: var(--bg); color: var(--fg); border-width: 1px; border-color: var(--theme-popup-border); border-style: solid; border-radius: 8px; padding: 10px; } .mdbook-help-title { text-align: center; /* mdbook's margin for h2 is way too large. */ margin: 10px; } /* css/print.css */ @media print { #mdbook-sidebar, #mdbook-menu-bar, .nav-chapters, .mobile-nav-chapters { display: none; } #mdbook-page-wrapper.page-wrapper { transform: none !important; margin-inline-start: 0px; overflow-y: initial; } #mdbook-content { max-width: none; margin: 0; padding: 0; } .page { overflow-y: initial; } code { direction: ltr !important; } pre > .buttons { z-index: 2; } a, a:visited, a:active, a:hover { color: #4183c4; text-decoration: none; } h1, h2, h3, h4, h5, h6 { page-break-inside: avoid; page-break-after: avoid; } pre, code { page-break-inside: avoid; white-space: pre-wrap; } .fa { display: none !important; } } /* fonts/fonts.css */ /* SPDX-License-Identifier: Apache-2.0 · Copyright 2026 Neer Patel */ /* The documentation site's fonts, served from the site itself so no page asks another server for anything (ADR-164). mdBook links this file from every page in place of its own fonts. Its `@font-face` rules are the product system's `product/web/fonts.css` at d372afa (unchanged since f45454f), each with the `fonts/` folder dropped from its address, as mdBook serves this file beside the fonts: the WOFF2 subsets with their `unicode-range`, and the metric-matched fallback faces. `cargo xtask site` checks the rules against the pinned file. The fonts are under the SIL Open Font License 1.1 (OFL-Archivo.txt and OFL-CascadiaMono.txt, beside them). */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Archivo-Regular.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070-209F,U+20AC,U+2100-214F,U+2190-21FF,U+2200-22FF,U+2500-257F,U+25A0-25FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Archivo-SemiBold.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070-209F,U+20AC,U+2100-214F,U+2190-21FF,U+2200-22FF,U+2500-257F,U+25A0-25FF; } @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/Archivo-Italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070-209F,U+20AC,U+2100-214F,U+2190-21FF,U+2200-22FF,U+2500-257F,U+25A0-25FF; } @font-face { font-family: 'Cascadia Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/CascadiaMono-Regular.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070-209F,U+20AC,U+2100-214F,U+2190-21FF,U+2200-22FF,U+2500-257F,U+25A0-25FF; } @font-face { font-family: 'Cascadia Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/CascadiaMono-SemiBold.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070-209F,U+20AC,U+2100-214F,U+2190-21FF,U+2200-22FF,U+2500-257F,U+25A0-25FF; } @font-face { font-family: 'Archivo Fallback'; src: local('Arial'); size-adjust: 101%; } @font-face { font-family: 'Cascadia Mono Fallback'; src: local('Menlo'), local('Consolas'); size-adjust: 100%; } /* highlight.css */ /* * An increased contrast highlighting scheme loosely based on the * "Base16 Atelier Dune Light" theme by Bram de Haan * (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) * Original Base16 color scheme by Chris Kempson * (https://github.com/chriskempson/base16) */ /* Comment */ .hljs-comment, .hljs-quote { color: #575757; } /* Red */ .hljs-variable, .hljs-template-variable, .hljs-attribute, .hljs-attr, .hljs-tag, .hljs-name, .hljs-regexp, .hljs-link, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: #d70025; } /* Orange */ .hljs-number, .hljs-meta, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params { color: #b21e00; } /* Green */ .hljs-string, .hljs-symbol, .hljs-bullet { color: #008200; } /* Blue */ .hljs-title, .hljs-section { color: #0030f2; } /* Purple */ .hljs-keyword, .hljs-selector-tag { color: #9d00ec; } .hljs { display: block; overflow-x: auto; background: #f6f7f6; color: #000; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } .hljs-addition { color: #22863a; background-color: #f0fff4; } .hljs-deletion { color: #b31d28; background-color: #ffeef0; } /* theme/fusionspace-mdbook.css */ /* SPDX-License-Identifier: Apache-2.0 · Copyright 2026 Neer Patel */ /* FusionSpace theme for mdBook. Generated by tools/build/kit_product.py. book.toml: [output.html] additional-css = ["theme/fusionspace-mdbook.css", "theme/fonts.css"] default-theme = "light" preferred-dark-theme = "navy" Copy this file, product/web/fonts.css and product/web/fonts/ into the book's theme/ folder. */ .light, .rust { --bg: #F3F4F7; --fg: #0B0F1C; --sidebar-bg: #FFFFFF; --sidebar-fg: #0B0F1C; --sidebar-non-existant: #98A1B8; --sidebar-active: #3350D6; --sidebar-spacer: #D6DAE4; --scrollbar: #566079; --icons: #566079; --icons-hover: #0B0F1C; --links: #3350D6; --inline-code-color: #0B0F1C; --theme-popup-bg: #FFFFFF; --theme-popup-border: #566079; --theme-hover: #D6DAE4; --quote-bg: #FFFFFF; --quote-border: #566079; --table-border-color: #D6DAE4; --table-header-bg: #FFFFFF; --table-alternate-bg: #F3F4F7; --searchbar-border-color: #566079; --searchbar-bg: #FFFFFF; --searchbar-fg: #0B0F1C; --searchbar-shadow-color: transparent; --searchresults-header-fg: #566079; --searchresults-border-color: #D6DAE4; --searchresults-li-bg: #FFFFFF; --search-mark-bg: #3350D6; --code-bg: #FFFFFF; --sidebar-header-border-color: #D6DAE4; --footnote-highlight: #3350D6; --fs-ink: #0B0F1C; --fs-ink-muted: #566079; --fs-canvas: #F3F4F7; --fs-surface: #FFFFFF; --fs-rule: #D6DAE4; --fs-rule-strong: #566079; --fs-action: #3350D6; --fs-on-action: #FFFFFF; --fs-danger: #AC001E; --fs-ok: #0A6355; --fs-selection: rgb(51 80 214 / 0.22); } .navy, .coal, .ayu { --bg: #0B0F1C; --fg: #F3F4F7; --sidebar-bg: #141A2B; --sidebar-fg: #F3F4F7; --sidebar-non-existant: #566079; --sidebar-active: #768DF5; --sidebar-spacer: #2A3248; --scrollbar: #6D7790; --icons: #98A1B8; --icons-hover: #F3F4F7; --links: #768DF5; --inline-code-color: #F3F4F7; --theme-popup-bg: #141A2B; --theme-popup-border: #6D7790; --theme-hover: #2A3248; --quote-bg: #141A2B; --quote-border: #6D7790; --table-border-color: #2A3248; --table-header-bg: #141A2B; --table-alternate-bg: #0B0F1C; --searchbar-border-color: #6D7790; --searchbar-bg: #141A2B; --searchbar-fg: #F3F4F7; --searchbar-shadow-color: transparent; --searchresults-header-fg: #98A1B8; --searchresults-border-color: #2A3248; --searchresults-li-bg: #141A2B; --search-mark-bg: #768DF5; --code-bg: #141A2B; --sidebar-header-border-color: #2A3248; --footnote-highlight: #768DF5; --fs-ink: #F3F4F7; --fs-ink-muted: #98A1B8; --fs-canvas: #0B0F1C; --fs-surface: #141A2B; --fs-rule: #2A3248; --fs-rule-strong: #6D7790; --fs-action: #768DF5; --fs-on-action: #0B0F1C; --fs-danger: #FB8083; --fs-ok: #6AD5B6; --fs-selection: rgb(118 141 245 / 0.22); } /* With scripts off, mdBook gives its own colors to `html:not(.js)`, which outranks a theme's class: the light values here, and the dark ones for a reader whose system is dark. */ html:not(.js) { --bg: #F3F4F7; --fg: #0B0F1C; --sidebar-bg: #FFFFFF; --sidebar-fg: #0B0F1C; --sidebar-non-existant: #98A1B8; --sidebar-active: #3350D6; --sidebar-spacer: #D6DAE4; --scrollbar: #566079; --icons: #566079; --icons-hover: #0B0F1C; --links: #3350D6; --inline-code-color: #0B0F1C; --theme-popup-bg: #FFFFFF; --theme-popup-border: #566079; --theme-hover: #D6DAE4; --quote-bg: #FFFFFF; --quote-border: #566079; --table-border-color: #D6DAE4; --table-header-bg: #FFFFFF; --table-alternate-bg: #F3F4F7; --searchbar-border-color: #566079; --searchbar-bg: #FFFFFF; --searchbar-fg: #0B0F1C; --searchbar-shadow-color: transparent; --searchresults-header-fg: #566079; --searchresults-border-color: #D6DAE4; --searchresults-li-bg: #FFFFFF; --search-mark-bg: #3350D6; --code-bg: #FFFFFF; --sidebar-header-border-color: #D6DAE4; --footnote-highlight: #3350D6; --fs-ink: #0B0F1C; --fs-ink-muted: #566079; --fs-canvas: #F3F4F7; --fs-surface: #FFFFFF; --fs-rule: #D6DAE4; --fs-rule-strong: #566079; --fs-action: #3350D6; --fs-on-action: #FFFFFF; --fs-danger: #AC001E; --fs-ok: #0A6355; --fs-selection: rgb(51 80 214 / 0.22); } @media (prefers-color-scheme: dark) { html:not(.js) { --bg: #0B0F1C; --fg: #F3F4F7; --sidebar-bg: #141A2B; --sidebar-fg: #F3F4F7; --sidebar-non-existant: #566079; --sidebar-active: #768DF5; --sidebar-spacer: #2A3248; --scrollbar: #6D7790; --icons: #98A1B8; --icons-hover: #F3F4F7; --links: #768DF5; --inline-code-color: #F3F4F7; --theme-popup-bg: #141A2B; --theme-popup-border: #6D7790; --theme-hover: #2A3248; --quote-bg: #141A2B; --quote-border: #6D7790; --table-border-color: #2A3248; --table-header-bg: #141A2B; --table-alternate-bg: #0B0F1C; --searchbar-border-color: #6D7790; --searchbar-bg: #141A2B; --searchbar-fg: #F3F4F7; --searchbar-shadow-color: transparent; --searchresults-header-fg: #98A1B8; --searchresults-border-color: #2A3248; --searchresults-li-bg: #141A2B; --search-mark-bg: #768DF5; --code-bg: #141A2B; --sidebar-header-border-color: #2A3248; --footnote-highlight: #768DF5; --fs-ink: #F3F4F7; --fs-ink-muted: #98A1B8; --fs-canvas: #0B0F1C; --fs-surface: #141A2B; --fs-rule: #2A3248; --fs-rule-strong: #6D7790; --fs-action: #768DF5; --fs-on-action: #0B0F1C; --fs-danger: #FB8083; --fs-ok: #6AD5B6; --fs-selection: rgb(118 141 245 / 0.22); } } html { font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; } body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg,#DA7C30 0%,#D07D7A 35%,#A188CB 65%,#768DF5 100%); z-index: 1000; } code, pre, kbd, .hljs { font-family: 'Cascadia Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; font-variant-numeric: tabular-nums slashed-zero; } h1, h2, h3, .menu-title { font-family: 'Cascadia Mono', ui-monospace, Menlo, monospace; font-weight: 600; letter-spacing: 0; } h2 { border-top: 2px solid var(--fg); padding-top: 0.6em; } table { border-collapse: collapse; } table thead th { font-family: 'Cascadia Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--fg); } table td, table th { border-left: 0; border-right: 0; } blockquote { border-left: 0; border: 1px solid var(--quote-border); padding: 0.6em 1em; } /* The page's frame (foundations.md, Type and Space and layout; web.md, Documentation sites). mdBook's root is 62.5%, so 1 rem is 10 px here. The book's text is a reading page: inside `.content` the type scale grows with the window, x1 up to 1024 px and x1.125 from 1600 px; the sidebar and the menu bar keep the scale's sizes. --fs-12 to --fs-44 are the scale's sizes at the factor that applies. */ :root { --fs-text: 1.6rem; --content-max-width: 1120px; } .content { --fs-text: clamp(1.6rem, 1.24444rem + 0.347222vw, 1.8rem); } :root, .content { --fs-12: calc(var(--fs-text) * 0.75); --fs-14: calc(var(--fs-text) * 0.875); --fs-16: var(--fs-text); --fs-20: calc(var(--fs-text) * 1.25); --fs-24: calc(var(--fs-text) * 1.5); --fs-28: calc(var(--fs-text) * 1.75); --fs-32: calc(var(--fs-text) * 2); --fs-40: calc(var(--fs-text) * 2.5); --fs-44: calc(var(--fs-text) * 2.75); --fs-56: calc(var(--fs-text) * 3.5); --fs-60: calc(var(--fs-text) * 3.75); } body { font-size: var(--fs-16); line-height: var(--fs-24); font-variant-numeric: tabular-nums; } .content { font-size: var(--fs-16); line-height: var(--fs-24); } .content p, .content ol, .content ul, .content td, .content tbody th { line-height: var(--fs-24); } /* title 28/32 for the page, subtitle 20/24 for a sheet's name, heading 14/20 in capitals for a section head inside one; below that, a run-in head in body type, semibold. */ h1 { font-size: var(--fs-28); line-height: var(--fs-32); } h2 { font-size: var(--fs-20); line-height: var(--fs-24); } h3 { font-size: var(--fs-14); line-height: var(--fs-20); text-transform: uppercase; letter-spacing: 0.06em; } h4, h5, h6 { font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: var(--fs-16); line-height: var(--fs-24); font-weight: 600; } /* code 14/20; in a Cascadia Mono heading or column head, the head's own size, as written (a command or a symbol means something else in capitals). Inline code has its padding from the first paint, not only once mdBook's script marks it. */ code, pre, kbd { font-size: var(--fs-14); line-height: var(--fs-20); } :not(pre) > code { padding: 0.1em 0.3em; } h1 code, h2 code, h3 code, thead th code { font-size: inherit; line-height: inherit; } h3 code, thead th code { text-transform: none; letter-spacing: 0; } h4 code, h5 code, h6 code { font-size: var(--fs-14); line-height: var(--fs-20); } /* Column heads in label, 12/16 in capitals; footnotes and the copy tooltip in small, 14/20. */ .content thead th { font-size: var(--fs-12); line-height: var(--fs-16); } .content .footnote-definition, .content .footnote-definition :is(li, p), .tooltiptext { font-size: var(--fs-14); line-height: var(--fs-20); } /* Navigation in Cascadia Mono 14 (web.md, Page anatomy), a part's title as a section head; the menu bar's title in subtitle; the search field and buttons in body type. */ .sidebar, .chapter { font-family: 'Cascadia Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--fs-14); line-height: var(--fs-20); } .chapter li, .chapter a, .chapter code { font-size: var(--fs-14); line-height: var(--fs-20); } .chapter li a strong { font-weight: 400; } .chapter li.part-title { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } button { font: inherit; } .menu-title { font-size: var(--fs-20); line-height: var(--fs-24); font-weight: 600; align-self: center; } #mdbook-searchbar { font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: var(--fs-16); line-height: var(--fs-24); font-variant-numeric: tabular-nums; } /* The column: centered in the space beside the sidebar, up to 1120 px, gutters 16 px on a phone and 32 px from 720 px (mdBook pads the page with its own --page-padding). Prose takes the column's whole width, as tables, code and figures do, so nothing leaves a strip of text in a wide window; the column's 1120 px is the longest line. Text and tables sit flush left inside it. mdBook's page arrows beside the column would sit over it, so the arrows go under the page at every width. */ .content { padding-inline: calc(16px - var(--page-padding)); } @media only screen and (min-width: 720px) { .content { padding-inline: calc(32px - var(--page-padding)); } } .content main { margin-inline: auto; } .content table { margin-inline: 0; } .page-wrapper .nav-wide-wrapper { display: none; } /* mdBook's own defaults, where the colors and fonts above don't reach (foundations.md, Color, Lines and shape, Motion; web.md, Accessibility). Found by the first site built on the system, hpr-sim's documentation, whose page check reads every element's computed style in the light theme and the navy one, with scripts off and with reduced motion, and fails a color off the system's roles, a rounded corner, a shadow, or motion off its durations. --fs-ink and the other roles are set for each of mdBook's themes above. */ /* Nothing cut off on a phone. The menu bar's title: between the buttons, mdBook cuts it short with an ellipsis on a window narrower than about 500 px; there it takes a row of its own under the buttons, which mdBook's menu bar already wraps to, and a heading jumped to clears the taller bar. */ @media only screen and (max-width: 519px) { #mdbook-menu-bar .menu-title { order: 1; flex: 1 0 100%; white-space: normal; overflow: visible; line-height: var(--fs-24); padding-block-end: 0.3em; } #mdbook-menu-bar .right-buttons { margin-inline-start: auto; } :target { scroll-margin-top: calc(var(--menu-bar-height) + 45px); } } /* The sidebar's frame for readers without scripts: a frame is 300 px wide unless told otherwise, so in mdBook's sidebar, 80% of a narrow window, part of it stayed over the page with the sidebar put away. */ .sidebar-iframe-outer { width: 100%; } /* A search result's long identifier wraps instead of running past a narrow window. */ #mdbook-searchresults li, #mdbook-searchresults .teaser { overflow-wrap: anywhere; } /* Figures at their size. A figure's text is drawn at its size, so a figure shown smaller reads smaller. A figure takes the column, flush left with the prose, so it is shown at its size wherever the window holds it; on a narrower page it shrinks to fit, and mdBook's zoom (click it) shows it at its size. */ .content .checkbox-label { display: flex; justify-content: flex-start; max-width: none; margin-inline: 0; } /* The page arrows (web.md, Page anatomy): under the text, inside the column, the previous at its left edge and the next at its right, each a bordered button at least 44 px tall, in place of mdBook's arrows at the window's sides, which a reader on a wide window doesn't see. mdBook's arrows hold only an icon; a site that names the pages in them (as hpr-sim's does) styles the names. */ .page-wrapper .nav-wrapper { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; box-sizing: border-box; max-width: var(--content-max-width); margin: 48px auto 0; } .page-wrapper .nav-wrapper > :not(a) { display: none; } .page-wrapper .nav-wrapper .mobile-nav-chapters { float: none; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: auto; min-width: 0; max-width: calc(50% - 8px); min-height: 44px; margin: 0; padding: 8px 12px; font-size: var(--fs-16); line-height: var(--fs-24); text-align: start; text-decoration: none; color: var(--links); background: transparent; border: 1px solid var(--fs-rule-strong); } .page-wrapper .nav-wrapper .mobile-nav-chapters:hover { border-color: var(--links); } .page-wrapper .nav-wrapper .mobile-nav-chapters.next { margin-inline-start: auto; flex-direction: row-reverse; text-align: end; } @media print { .page-wrapper .nav-wrapper { display: none; } } /* Code in ink on the surface: mdBook's highlighters color each kind of token with colors of their own and never read the theme's --code-bg. Comments are secondary text; a diff's deletions are in danger and its additions in ok. */ .hljs { color: var(--fs-ink); background: var(--code-bg); } .hljs [class^="hljs-"], .hljs [class*=" hljs-"] { color: inherit; background: transparent; } .hljs .hljs-comment, .hljs .hljs-quote, .hljs .hljs-meta { color: var(--fs-ink-muted); } .hljs .hljs-keyword, .hljs .hljs-title, .hljs .hljs-section, .hljs .hljs-strong { font-weight: 600; } .hljs .hljs-deletion { color: var(--fs-danger); } .hljs .hljs-addition { color: var(--fs-ok); } /* The copy tooltip: canvas on ink, not white on mdBook's #333. A search hit: the action fill, as a selection, not the caution fill, which means a state. */ .tooltiptext { color: var(--fs-canvas); background-color: var(--fs-ink); } mark { color: var(--fs-on-action); } /* mdBook's hidden sidebar switch, a checkbox, keeps the browser's own text color otherwise. */ input[type="checkbox"] { color: inherit; } /* The menu bar's links hold only their icons, which take the icons' color; the links take it too. */ .menu-bar a { color: var(--icons); } /* Selection: the action role at 22 %, as fusionspace.css sets it. */ ::selection { background-color: var(--fs-selection); } /* Lines and shape: square corners, no shadows. Layers are separated by rules: the help popup has the system's 2 px ink border, a key a 1 px rule. The current chapter is underlined 2 px, as web.md's site nav marks the current page; the headings of the page listed under it hang from a 1 px rule, not mdBook's 4 px colored bar. */ *, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; } kbd { background-color: var(--fs-surface); border-color: var(--fs-rule-strong); } /* The help popup: a dialog, with a 2 px ink border over the canvas dimmed by Void at 40%, kept 16 px from the window's edges on a phone, and scrolling in a window too short for it. */ #mdbook-help-container { background-color: rgba(11, 15, 28, 0.4); } #mdbook-help-popup { border: 2px solid var(--fs-ink); min-width: 0; max-width: min(500px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; } .sidebar .chapter li.chapter-item a.active { text-decoration: underline 2px; text-underline-offset: 4px; } .on-this-page { border-inline-start-width: 1px; } /* Motion: quick 100 ms, base 160 ms, slow 240 ms, with the standard easing. The sidebar slides at the slow step; colors change at the quick one. No spinner: the search's busy sign stands still. With reduced motion set, everything snaps. */ .js:not(.sidebar-resizing) .page-wrapper, [dir=rtl].js:not(.sidebar-resizing) .page-wrapper, html:not(.js) .page-wrapper, [dir=rtl]:not(.js) .page-wrapper, html:not(.sidebar-resizing) .sidebar { transition-duration: 240ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } /* On a phone the page moves over at once when the menu opens, and only the sidebar slides in: mdBook also slides the page (transform), and Chrome redraws all of a sliding page each frame, so a tap on the menu button of a long page took 0.3 s on a slowed phone (INP). Its margin is still animated. */ .js:not(.sidebar-resizing) .page-wrapper, [dir=rtl].js:not(.sidebar-resizing) .page-wrapper, html:not(.js) .page-wrapper, [dir=rtl]:not(.js) .page-wrapper { transition-property: margin-left, margin-right; } /* And the page is drawn on a layer of its own there, so moving it over is the compositor's work and Chrome doesn't draw the page again (on the long pages, a tap took 96 to 352 ms at a 16 times slowdown without it, 64 to 72 ms with it). Something fixed to the window inside the page would move with the layer, so a page in this theme fixes nothing inside .page-wrapper. */ @media only screen and (max-width: 619px) { .page-wrapper { will-change: transform; } } #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button, .nav-chapters, .nav-chapters:hover, pre > .buttons, pre > .buttons button, mark, #mdbook-searchbar { transition-duration: 100ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .chapter-fold-toggle div { transition-duration: 160ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } #fa-spin { animation: none; } .footnote-reference:target { animation: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } } /* What a keyboard, forced colors and a sticky bar need. The focus ring: a 2 px outline in the action role, 2 px off, on everything, for the keyboard only; the zoom's hidden checkbox draws it on its picture, where mdBook draws the browser's own ring on any focus. */ :focus-visible { outline: 2px solid var(--fs-action) !important; outline-offset: 2px !important; } .content .checkbox-img:focus + img { outline: none; } .content .checkbox-img:focus-visible + img { outline: 2px solid var(--fs-action); outline-offset: 2px; } /* The menu bar sticks to the window's top: what is scrolled to or focused stops below it and its 1 px rule (WCAG 2.4.11), on a phone below its second row too. */ html { scroll-padding-top: calc(var(--menu-bar-height) + 1px); } @media only screen and (max-width: 519px) { html { scroll-padding-top: calc(var(--menu-bar-height) + 45px); } } /* Forced colors (Windows' high-contrast mode) paint every color in the reader's own few and drop backgrounds' tints: a box set apart only by its fill (the sidebar, a code block, the copy tooltip, a phone's chapter buttons) gets a border, and a search hit keeps the system's highlight. */ @media (forced-colors: active) { .sidebar { border-inline-end: 1px solid CanvasText; } pre > code, .tooltiptext, .mobile-nav-chapters { border: 1px solid CanvasText; } mark { forced-color-adjust: none; color: MarkText; background-color: Mark; } } /* The fonts' metric-matched fallbacks (fonts.css), second in every stack, so text drawn before a face arrives takes the same room. fonts.css matches Archivo with Arial, which Linux and ChromeOS lack; they carry Liberation Sans and Arimo, metric-compatible with Arial (the same advance widths, the Liberation and Croscore fonts' stated aim), so the same 101% matches them. Without them a page whose italic arrived after the first paint measured CLS 0.179 on Linux. */ @font-face { font-family: 'Archivo Clone Fallback'; src: local('Liberation Sans'), local('LiberationSans'), local('Arimo'); size-adjust: 101%; } html, h4, h5, h6, #mdbook-searchbar { font-family: 'Archivo', 'Archivo Fallback', 'Archivo Clone Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; } code, pre, kbd, .hljs { font-family: 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; } h1, h2, h3, .menu-title, table thead th, .sidebar, .chapter { font-family: 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; } /* Print: the light values whatever theme the page is read in; links keep the action role and show their addresses; a table row stays on one sheet; the strip, fixed to the window, stands once at the top of the first sheet instead of over the text of every one. */ @media print { html.light, html.rust, html.navy, html.coal, html.ayu, html:not(.js) { color-scheme: light; --bg: #F3F4F7; --fg: #0B0F1C; --sidebar-bg: #FFFFFF; --sidebar-fg: #0B0F1C; --sidebar-non-existant: #98A1B8; --sidebar-active: #3350D6; --sidebar-spacer: #D6DAE4; --scrollbar: #566079; --icons: #566079; --icons-hover: #0B0F1C; --links: #3350D6; --inline-code-color: #0B0F1C; --theme-popup-bg: #FFFFFF; --theme-popup-border: #566079; --theme-hover: #D6DAE4; --quote-bg: #FFFFFF; --quote-border: #566079; --table-border-color: #D6DAE4; --table-header-bg: #FFFFFF; --table-alternate-bg: #F3F4F7; --searchbar-border-color: #566079; --searchbar-bg: #FFFFFF; --searchbar-fg: #0B0F1C; --searchbar-shadow-color: transparent; --searchresults-header-fg: #566079; --searchresults-border-color: #D6DAE4; --searchresults-li-bg: #FFFFFF; --search-mark-bg: #3350D6; --code-bg: #FFFFFF; --sidebar-header-border-color: #D6DAE4; --footnote-highlight: #3350D6; --fs-ink: #0B0F1C; --fs-ink-muted: #566079; --fs-canvas: #F3F4F7; --fs-surface: #FFFFFF; --fs-rule: #D6DAE4; --fs-rule-strong: #566079; --fs-action: #3350D6; --fs-on-action: #FFFFFF; --fs-danger: #AC001E; --fs-ok: #0A6355; --fs-selection: rgb(51 80 214 / 0.22); } a, a:visited, a:active, a:hover { color: var(--links); } a[href]:not([href^="#"])::after { content: " (" attr(href) ")"; overflow-wrap: anywhere; } tr { break-inside: avoid; } body::before { position: static; display: block; } } /* theme/hpr.css */ /* SPDX-License-Identifier: MIT OR Apache-2.0 */ /* hpr-sim's additions to the product system's mdBook theme (ADR-164). */ /* What the product system's mdBook theme (`fusionspace-mdbook.css`, Rev D) doesn't set, because only this site's markup has it: the copy icon's file, the system's icons in place of Font Awesome's (`xtask/src/site/chrome.rs`), the notes, the menu bar's lockup, the title block, the intro and sheets, the theme switch, the text marks and the print page's cover (`xtask site` draws each). The theme sets the colors and roles (`--fs-ink` and the rest) in every theme, mdBook's own defaults, the type scale and the column. */ /* The copy button's icon: mdBook tints a black image with a filter to a gray of its own; here it is the system's copy icon (`product/icons/copy.svg`, drawn in Void for the figures check) as a mask, painted in the button's own color. */ pre > .buttons button.clip-button::before, pre > .buttons button.clip-button:hover::before { content: ""; display: inline-block; width: 24px; height: 24px; filter: none; background-color: currentColor; -webkit-mask: url("../images/copy.svg") center / contain no-repeat; mask: url("../images/copy.svg") center / contain no-repeat; } /* Icons: the system's set (`foundations.md`, *Icons*), which `xtask site` draws in place of mdBook's Font Awesome glyphs (`xtask/src/site/chrome.rs`), at the system's sizes: 20 px in the menu bar and the search field, 24 px for the page arrows and a code block's buttons, beside the copy icon. mdBook fills its glyphs; the system's are stroked in the text's color. The previous page's arrow is the next one's, mirrored. The page check fails an icon at another size. */ .fa-svg svg { width: 20px; height: 20px; fill: none; margin-bottom: 0; vertical-align: middle; } .nav-chapters .fa-svg svg, .mobile-nav-chapters .fa-svg svg, pre > .buttons .fa-svg svg { width: 24px; height: 24px; } .previous .fa-svg svg { transform: scaleX(-1); } /* The page arrows' names (`web.md`, *Page anatomy*; `frame.rs` writes them, and the system's mdBook theme draws the arrows as buttons under the text, inside the column): the direction in `label` capitals over the page's title, which wraps rather than run out of its button. */ .nav-wrapper .fs-nav-name { display: grid; gap: 2px; min-width: 0; } .nav-wrapper .fs-nav-dir { font: 400 var(--fs-12)/var(--fs-16) 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fs-ink-muted); } .nav-wrapper .fs-nav-title { overflow-wrap: anywhere; } /* The page's frame (#384; `foundations.md`, *Type* and *Space and layout*) is the product system's mdBook theme's (`fusionspace-mdbook.css`, Rev D): the type scale on mdBook's elements, growing with the window inside the page; the column centered beside the sidebar up to 1,120 px with its gutters, and the prose filling it; the page arrows under the page. `cargo xtask site`'s page check reads every text's size, line height, family and capitals against the scale at the window's width, fails prose held narrower than its column, and measures the column and its gutters, at every width, with the system's own check (`fusionspace-check.js`). Here, what only this site's markup needs: the source title block's field names in `label`. */ .title-block td:first-child { font-size: var(--fs-12); line-height: var(--fs-16); } /* Notes (#384; `web.md`, *Components*): the signal word in a strip above the message, as an ANSI Z535.4 safety label sets it, the system's `.fs-note`. `cargo xtask site` draws every quote block a page writes as one (a trust note, or a `[!NOTE]`, `[!CAUTION]` or `[!WARNING]` alert), and the page check fails a note not drawn this way. The box takes the column, as the prose does. */ .content main .fs-note { box-sizing: border-box; margin: 16px 0; border: 1px solid var(--fs-rule-strong); background: var(--fs-surface); } .fs-note > .fs-note-head { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font: 600 var(--fs-12)/var(--fs-16) 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--fs-rule-strong); color: var(--fs-ink-muted); } .fs-note > .fs-note-head svg { width: 14px; height: 14px; flex: none; } .fs-note > .fs-note-body { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .fs-note > .fs-note-body > * { margin-block: 0; } .fs-note[data-kind="trust"] > .fs-note-head { color: var(--fs-ink); } .fs-note[data-kind="caution"] { border-color: #F5AF20; } .fs-note[data-kind="caution"] > .fs-note-head { background: #F5AF20; color: #0B0F1C; border-color: #F5AF20; } .fs-note[data-kind="warning"] { border: 2px solid #AC001E; } .fs-note[data-kind="warning"] > .fs-note-head { background: #AC001E; color: #FFFFFF; border-color: #AC001E; } @media print { .fs-note { break-inside: avoid; } } /* Forced colors (Windows' high-contrast mode; #383): the system's mdBook theme borders the boxes mdBook sets apart by their fill alone. Here, this site's own: the status chip gets a border, the theme switch's pressed button an outline inside its edge, and the copy icon, painted through a mask, keeps the button's text color. `cargo xtask site`'s page check reads every page as forced colors would leave it. */ @media (forced-colors: active) { .content main .fs-intro-row > .fs-status { border: 1px solid CanvasText; } #mdbook-theme-list.fs-seg .theme[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -4px; } pre > .buttons button.clip-button::before { forced-color-adjust: none; background-color: ButtonText; } } /* The page's frame (#384; `web.md`, *Page anatomy*). `cargo xtask site` makes the menu bar the system's header and ends every page with its title block, in a `footer`; its page check fails either drawn off the system's. The header: the horizontal lockup, 24 px tall in the text's color (Void on light, Paper on dark, as the brand's one-color files are), with the brand's clear space around it, a quarter of its height, then the product's name; both one link to the landing page. The menu button stands at every width: from 720 px it puts the sidebar away and brings it back, as dragging the sidebar's edge to the window's side puts it away (`web.md`, *Site patterns*, Docs), and mdBook keeps the choice from page to page. */ #mdbook-menu-bar .fs-logo { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 12px; overflow: visible; padding-inline: 6px; color: var(--fs-ink); text-decoration: none; } #mdbook-menu-bar .fs-lockup { height: 24px; width: auto; flex: none; } #mdbook-menu-bar .fs-product { flex: none; } /* With scripts off, nothing ticks mdBook's sidebar box, which draws the sidebar: from 720 px the stylesheet draws it instead, as mdBook draws it ticked, and the menu button, which nothing would answer, goes. */ @media only screen and (min-width: 720px) { html:not(.js) #mdbook-sidebar-toggle { display: none; } html:not(.js) #mdbook-sidebar-toggle-anchor ~ .sidebar { transform: none; } html:not(.js) #mdbook-sidebar-toggle-anchor ~ .page-wrapper { transform: none; margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)); } } @media only screen and (min-width: 720px) and (max-width: 1380px) { html:not(.js) #mdbook-sidebar-toggle-anchor ~ .page-wrapper .nav-wide-wrapper { display: none; } html:not(.js) #mdbook-sidebar-toggle-anchor ~ .page-wrapper .nav-wrapper { display: block; } } /* The menu bar holds its buttons and the lockup on one row from 520 px (below, the lockup takes a row of its own) only with the buttons closed up: at mdBook's spacing they take 512 px, more than a 520 px window leaves beside a 15 px scroll bar, as on Linux and Windows. From 720 px the sidebar takes 300 px beside the page, and the menu button stays, which leaves as little room until about 1,000 px once the theme switch joins the row at 960 px: there, beside the sidebar and a 15 px scroll bar, the row needs about 648 px and has 637. Up to 1,040 px the buttons close up, as mdBook closes them up on a phone, each still 28 px wide. */ @media only screen and (min-width: 520px) and (max-width: 1039px) { #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button { padding: 0 4px; } #mdbook-menu-bar .right-buttons { margin: 0 8px; } } /* The title block (`fusionspace.css`, `.fs-titleblock`): ISO 7200's fields in ruled cells, inside a 2 px ink border on the surface, each field's name in `label` capitals over its entry in Cascadia Mono. The cells wrap as the system's grid does, at least 132 px wide (the owner's 264 px), but each row's cells grow to its end, so a row cut short by a long entry, which takes a row of its own, leaves no hole. The owner's carries the mark, at 24 px, the brand's least. It ends the page, centered as the column is, its edges on the column's. */ .content .fs-titleblock { box-sizing: border-box; max-width: var(--content-max-width); margin: 48px auto 0; display: flex; flex-wrap: wrap; border: 2px solid var(--fs-ink); background: var(--fs-surface); } .fs-titleblock > div { flex: 1 1 132px; box-sizing: border-box; padding: 6px 10px 8px; border-right: 1px solid var(--fs-rule-strong); border-bottom: 1px solid var(--fs-rule-strong); display: grid; gap: 2px; align-content: start; min-width: 0; margin: 0 -1px -1px 0; } .fs-titleblock .k { font: 400 var(--fs-12)/var(--fs-16) 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fs-ink-muted); } .fs-titleblock .v { font: 400 var(--fs-14)/var(--fs-20) 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; } .fs-titleblock .v code { font-size: inherit; padding: 0; background: none; } .fs-titleblock .wide { flex: 2 1 264px; } .fs-titleblock .full { flex-basis: 100%; } .fs-titleblock .mark .v { display: flex; gap: 8px; align-items: center; } .fs-titleblock .fs-mark { height: 24px; width: auto; flex: none; } /* The intro and the sheets (#384; `web.md`, *Page anatomy*; `fusionspace.css`, `.fs-tag` and `.fs-sheet`). `cargo xtask site` opens every page's intro with the site's designation in the system's tag, one corner chamfered 4 px where the mark points (up and right), in Cascadia Mono 12/16; and makes each `h2` section a sheet: a 2 px ink rule on top, then the rail, the sheet's number (`SHEET 2 / 5`) in `label` capitals over its name. Where the column is 880 px wide or more, the rail stands beside the sheet's text, 184 px wide with a 32 px gap, as the system's `.fs-sheet` sets it; in a narrower column it stands over the text, as the system's sheet draws it on a phone. The column, not the window, decides, since the sidebar takes part of the window. A figure starts at the text's left edge, as the text does; one drawn wider than the text beside the rail moves left, under the rail, only as far as it must to be shown at its size (shown smaller, its 12 px labels would read under 12 px). Its paragraph takes the whole column, and an empty first item, 216 px wide, gives way before the figure does. The rail is a float that the figure clears, so the figure starts below the rail and never over it. The page check fails a tag or a sheet drawn otherwise. The tag shares the intro's first row with the status chip (`fusionspace.css`, `.fs-status`): the site's status from the title block, a drawing word in `label` capitals, 600, beside its 14 px icon; RELEASED in the ok fill, the same in every theme and on paper (`foundations.md`, *Color*), and IN PREPARATION outlined in the action color. The row wraps on a phone, the chip under the tag. Under the title, the page's first paragraph is its lead, one sentence in `lead` type (20/28 Archivo) in the muted ink. The page check fails a chip or a lead drawn otherwise. */ .content main .fs-intro-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; } .content main .fs-intro-row > .fs-tag { --c: 4px; box-sizing: border-box; display: flex; width: fit-content; max-width: 100%; align-items: center; margin: 0; padding: 2px 10px 2px 8px; min-height: 24px; font: 400 var(--fs-12)/var(--fs-16) 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em; color: var(--fs-ink); border: 1px solid var(--fs-rule-strong); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); background: linear-gradient(225deg, transparent calc(var(--c) * 0.7071 - 1px), var(--fs-rule-strong) 0 calc(var(--c) * 0.7071), transparent 0); } .content main .fs-intro-row > .fs-status { box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin: 0; padding: 2px 8px; font: 600 var(--fs-12)/var(--fs-16) 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid transparent; white-space: nowrap; } .content main .fs-intro-row > .fs-status svg { width: 14px; height: 14px; flex: none; } .content main .fs-intro-row > .fs-status[data-state="ok"] { background: #0A6355; color: #FFFFFF; } .content main .fs-intro-row > .fs-status[data-state="info"] { background: transparent; color: var(--fs-action); border-color: currentColor; } .content main .fs-intro > h1 { margin-top: 0; } .content main .fs-intro > .fs-lead { font-size: var(--fs-20); line-height: var(--fs-28); font-weight: 400; color: var(--fs-ink-muted); } .content main .fs-sheet { border-top: 2px solid var(--fs-ink); margin-top: 32px; padding-top: 16px; } .content main .fs-sheet-rail { display: grid; gap: 8px; margin-bottom: 16px; } /* The system's mdBook theme draws the sheet's edge on the `h2` itself; here the sheet draws it. */ .content main .fs-sheet-rail > h2 { margin: 0; padding-top: 0; border-top: 0; } .fs-sheet-no { font: 400 var(--fs-12)/var(--fs-16) 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fs-ink-muted); } .content { container-type: inline-size; } @container (min-width: 880px) { .content main .fs-sheet { display: flow-root; } .content main .fs-sheet-rail { float: left; width: 184px; margin: 0 32px 16px 0; } .content main .fs-sheet-body { margin-inline-start: 216px; } .content main .fs-sheet-body > p:has(> .checkbox-label) { clear: left; margin-inline-start: -216px; } .content main .fs-sheet-body > p > .checkbox-label::before { content: ""; flex: 0 100000 216px; min-width: 0; } } @media print { .fs-sheet-rail { break-after: avoid; } } /* The theme switch (#384, #429; `web.md`, *Page anatomy*, *Components* and *Theme*; `fusionspace.css`, `.fs-seg`): Auto, Light and Dark, each a button 44 px tall in Cascadia Mono 14 inside a 1 px rule, the chosen one filled in ink. `cargo xtask site` makes mdBook's theme menu this group, and `theme/hpr.js` sets each button's `aria-pressed` from mdBook's mark. From 960 px it stands in the header's row, before its buttons; narrower, the header has no room for it and `theme/hpr.js` moves it to the top of the sidebar, above the chapters' scrolling list, so it stays in view (`xtask/src/site/switch.rs`, `HEADER_FROM_PX`). mdBook's script hides its menu when focus leaves it, so the group is drawn over that. It needs scripts to work, so without them it isn't drawn. */ #mdbook-theme-list.fs-seg { position: static; display: inline-flex !important; flex: none; align-self: center; box-sizing: border-box; margin: 0; padding: 0; max-height: none; overflow: visible; list-style: none; border: 1px solid var(--fs-rule-strong); background: transparent; color: var(--fs-ink-muted); } #mdbook-theme-list.fs-seg > li { display: flex; } #mdbook-theme-list.fs-seg .theme { box-sizing: border-box; min-height: 44px; width: auto; margin: 0; padding: 0 12px; font: 400 var(--fs-14)/var(--fs-20) 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; text-align: center; white-space: nowrap; color: var(--fs-ink-muted); background: transparent; border: 0; border-left: 1px solid var(--fs-rule); cursor: pointer; } #mdbook-theme-list.fs-seg > li:first-child .theme { border-left: 0; } #mdbook-theme-list.fs-seg .theme:hover { color: var(--fs-ink); background: transparent; } #mdbook-theme-list.fs-seg .theme[aria-pressed="true"] { color: var(--fs-canvas); background: var(--fs-ink); } #mdbook-menu-bar .right-buttons:has(> #mdbook-theme-list) { display: flex; align-items: center; } #mdbook-menu-bar #mdbook-theme-list.fs-seg { margin-inline-end: 8px; } .sidebar > #mdbook-theme-list.fs-seg { position: absolute; top: 10px; left: 10px; } .sidebar:has(> #mdbook-theme-list) > .sidebar-scrollbox { top: 66px; } html:not(.js) #mdbook-theme-list.fs-seg { display: none !important; } @media print { #mdbook-theme-list.fs-seg { display: none !important; } } /* Text marks (#383; `foundations.md`, *Icons*): mdBook draws three icons as characters, which the system draws from its own set or not at all. The sidebar's fold toggles get the system's chevron at 16 px (`xtask site` swaps mdBook's `❱` in `toc.js`); the chosen theme is filled in ink in the theme switch, not ticked with `✓`; a heading jumped to takes no `»`, as the scroll padding already brings it to the top of the window. The page check fails a mark drawn as text outside a page's `main`, or as a `::before` or `::after` anywhere. */ .chapter-fold-toggle .fa-svg svg { width: 16px; height: 16px; } .theme-selected::before { content: none; } :is(h1, h2, h3, h4, h5, h6, dt):target::before { content: none; } /* Print (#383; `web.md`, *Print*): the system's mdBook theme prints in the light theme's values whatever theme the page is read in, its links in the action role with their addresses after them, a table row on one sheet, and the strip once at the top of the first sheet (mdBook's `print.css` hides its sidebar, menu bar and page arrows). Here, this site's own: the title block, which carries the version and date of issue, kept on one sheet of paper; the tag's chamfer, a diagonal drawn as a background, which a browser leaves off paper unless asked to print backgrounds; and the chip's fill, the same on paper as on screen (`foundations.md`, *Color*). The page check reads every page with the stylesheets' print rules applied, in each theme, and fails a color that differs from the light theme's, a control or navigation drawn, a link without its address, a row, note or title block that can split, a title block not drawn whole, or anything fixed to the window. */ @media print { .fs-titleblock { break-inside: avoid; } .content main .fs-intro-row > .fs-tag { print-color-adjust: exact; -webkit-print-color-adjust: exact; } .content main .fs-intro-row > .fs-status { print-color-adjust: exact; -webkit-print-color-adjust: exact; } } /* The print page's cover, shown on screen; on paper the page is the chapters the site's script places after it as the browser prints (`xtask/src/site/print.rs`). Its button is the system's primary button (`web.md`, *Components*; `fusionspace.css`, `.fs-btn`): square, 44 px tall, Cascadia Mono 14 semibold, filled with ink, the action role on hover. Without the script it can't print, and the cover says so instead. */ @media print { #hpr-print-cover { display: none; } } html:not(.js) #hpr-print { display: none; } #hpr-print-cover .fs-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; margin: 0; padding: 0 16px; font: 600 var(--fs-14)/var(--fs-20) 'Cascadia Mono', 'Cascadia Mono Fallback', ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0; white-space: nowrap; cursor: pointer; color: var(--fs-canvas); background: var(--fs-ink); border: 2px solid var(--fs-ink); border-radius: 0; transition: background-color 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1); } #hpr-print-cover .fs-btn:hover { color: var(--fs-on-action); background: var(--fs-action); border-color: var(--fs-action); } .content main .fs-sheet-rail { align-content: start; margin-bottom: 0; } }