diff --git a/docs/_assets/base.css b/docs/_assets/base.css deleted file mode 100644 index 1fe74a0..0000000 --- a/docs/_assets/base.css +++ /dev/null @@ -1,1316 +0,0 @@ - -:root { - font-size: 16px; - --font-open-sans: 'Open Sans', sans-serif; - --font-monospace: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; -} - -@media (max-width: 400px) { - :root { - font-size: 14px; - } -} - -@media (min-width: 1600px) or (min-height: 1600px) { - :root { - font-size: calc(12px + 100vw / 400); - } -} - -@media print { - :root { - font-size: 12px; - } -} - -* { - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; -} - -html, body { - height: 100%; - min-height: 100%; -} - -body { - background: var(--theme-bg-main); -} - -color-scheme-toggle-button, -outline-button { - position: fixed; - top: 0.5rem; - right: 0.5rem; - display: block; - z-index: 2; -} - -outline-button { - top: 0.5rem; - right: 3rem; -} - -#outline-panel { - position: fixed; - top: 4rem; - right: 2rem; - width: min(30rem, 80vw); - max-height: 80vh; - overflow-y: auto; - background: var(--theme-bg-light); - border: 0.2rem solid var(--theme-line); - display: none; - z-index: 10; -} - -[data-show-outline] #outline-panel { - display: block; -} - -#outline-panel h2 { - margin-block: 1rem; - margin-inline: 1rem; - padding: 0; - font-size: 1.4rem; -} - -#outline-panel ol { - list-style: none; - padding: 0; -} - -#outline-panel li[data-depth='h1'] { - font-size: 1.2rem; - font-weight: 700; - margin-inline-start: 1rem; -} - -#outline-panel li[data-depth='h2'] { - font-size: 1.1rem; - font-weight: 600; - margin-inline-start: 2rem; -} - -#outline-panel li[data-depth='h3'] { - margin-inline-start: 3rem; -} - -#outline-panel li[data-depth='h4'] { - font-size: 0.9rem; - margin-inline-start: 4rem; -} - -#outline-panel li[data-depth='h5'] { - font-size: 0.9rem; - margin-inline-start: 5rem; -} - -#outline-panel li[data-depth='h6'] { - font-size: 0.9rem; - margin-inline-start: 6rem; -} - -@media print { - color-scheme-toggle-button, - outline-button, - #outline-panel { - display: hidden !important; - } -} - - - - -/* ===== Theme Toggle Animations ===== */ - -/* todo: is there a better way to handle defining these animations? despite efforts, - this implementation still has some degree of transition stacking / delays in nested - svg contexts in chrome */ - -/* BG Color Only */ -body[data-color-transition-enabled], -body[data-color-transition-enabled] :is( - [data-bg-transition]:not([data-color-transition]):not([data-border-transition]), - button, - .markdown-example-output -) { - transition: background linear .5s; -} - -/* Border Color Only */ -body[data-color-transition-enabled] :is( - [data-border-transition]:not([data-bg-transition]):not([data-color-transition]) -) { - transition: border-color linear .5s; -} - -/* Color Only */ -body[data-color-transition-enabled] :is( - [data-color-transition]:not([data-bg-transition]):not([data-border-transition]), - p, - a:not(h1 a), - span:not(p span), - time:not(p time), - li:not([role='doc-footnote']), dt, dd, - h1, h2, h3, h4, h5, h6, - td, th -) { - transition: color linear .5s; -} - -/* BG and Color */ -body[data-color-transition-enabled] :is( - [data-bg-transition][data-color-transition]:not([data-border-transition]), - pre, - code:not(pre code), - samp:not(pre samp), - mark, - [role='doc-footnote'] -) { - transition: - color linear .5s, - background linear .5s; -} - -/* BG and Border */ -body[data-color-transition-enabled] :is( - [data-bg-transition][data-border-transition]:not([data-color-transition]), - #root > footer, - p.error-box, - .popup form, - #outline -) { - transition: - background linear .5s, - border-color linear .5s; -} - -/** Color and Border */ -body[data-color-transition-enabled] :is( - [data-color-transition][data-border-transition]:not([data-bg-transition]), - .private-indicator, - tbody tr, - .tbody .tr, -) { - transition: - color linear .5s, - border-color linear .5s; -} - -/* BG, Color, and Border */ -body[data-color-transition-enabled] :is( - [data-bg-transition][data-border-transition][data-color-transition], - input, textarea, select, - blockquote, - :is(section, aside):is([role='note'], .info, .highlight, .warning, .problem) -) { - transition: - color linear .5s, - background linear .5s, - border-color linear .5s; -} - -/* Fill and Stroke */ -body[data-color-transition-enabled] svg :is( - [fill^='var('][stroke^='var(']:not([fill^='var('][stroke^='var('] *), - [style*='fill:'][style*='stroke:']:not([style*='fill:'][style*='stroke:'] *) -) { - transition: - fill linear .5s, - stroke linear .5s; -} - -/* Fill Only */ -body[data-color-transition-enabled] svg :is( - [fill^='var(']:not([stroke^='var(']):not([fill^='var('] *), - [style*='fill:']:not([style*='stroke:']):not([style*='fill:'] *) -) { - transition: fill linear .5s; -} - -/* Stroke Only */ -body[data-color-transition-enabled] :is( - svg [stroke^='var(']:not([fill^='var(']):not([stroke^='var('] *), - svg [style*='stroke:']:not([style*='fill:']):not([style*='stroke:'] *) - svg.icon - ) { - transition: stroke linear .5s; -} - - - - - - - - - - -/* ===== Base Layout ===== */ - -#root { - position: relative; - min-height: 100%; - padding: 1rem; - padding-block-end: 5rem; - z-index: 1; -} - -@media screen and (min-width: 60rem) { - #root { - padding-inline: 2rem; - } -} - -@media print { - #root { - padding-block: 0.5rem; - } -} - -#root > nav, -#root > main { - max-width: 100rem; - margin-inline: auto; -} - - - - - - - - - - - - - - -/* ===== Footer ===== */ - -#root > footer { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2.5rem; - background: var(--theme-bg-light); - border-block-start: 0.1rem solid var(--theme-line); - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - overflow: hidden; -} - -#root > footer :is(.left, .right) { - min-width: 22rem; -} - -#root > footer :is(.left, .center, .right) { - flex: 1 1 calc(100% / 3); -} - -#root > footer .left { - text-align: left; - padding-inline-start: 1.5rem; -} - -#root > footer .center { - text-align: center; -} - -#root > footer .right { - text-align: right; - padding-inline-end: 1.5rem; -} - -#root > footer ul { - padding: 0; -} - -#root > footer p { - font-size: 0.8rem; - margin: 0; - padding-block: 0.5rem; -} - - -@media (max-width: 1199px) { - #root > footer { - margin-block-start: 8rem; - padding-block-end: 2rem; - background: transparent; - border: 0; - position: static; - flex-direction: column; - height: auto; - } - - #root > footer > div, - #root > footer :is(p, .left, .center, .right) { - font-size: 0.8rem; - text-align: center; - padding-inline: 0; - } -} - - - - - - - - - - - - - - - - - - - - -/* ===== Typography ===== */ - -ul, ol { - padding-inline-start: 2.5rem; -} - -h1, h2, h3, h4, h5, h6, -p, a, li, dt, dd, label, -table, .table, td, .td { - font-family: var(--font-open-sans); -} - -h1, h2, h3, h4, h5, h6 { - line-height: 1; -} - -h1, h2, h3, h4, h5, h6, -th, .th { - color: var(--theme-text-heading); -} - -code, samp, pre { - color: var(--theme-code-normal); - font-family: var(--font-monospace); -} - -:not(pre) > code { - color: inherit; - background: var(--theme-bg-light); - padding-inline: 0.25rem; - border: 0.1rem solid var(--theme-line); -} - -pre { - margin-block: 3rem; - margin-inline: 2rem; - padding-block: 0.5rem; - padding-inline: 1rem; - border: 0.1rem solid var(--theme-line); - border-radius: 1rem; - font-size: 1rem; - overflow: auto; - background: var(--theme-bg-light); -} - -code, samp { - font-size: 1rem; -} - -h1 { - font-size: 2rem; - font-weight: 300; - margin-block-end: 1rem; -} - -article header h1:not(.multiline), -article header h1.multiline > div { - display: flex; - flex-direction: row; - column-gap: 1rem; - align-items: center; - margin-block: 0.5rem; - line-height: 1.3; -} - -article header h1:not(.multiline) > svg, -article header h1.multiline > div > svg { - flex: 0 0 auto; -} - -h2 { - font-size: 2rem; - font-weight: 500; - margin-block: 4rem 1rem; -} - -h3 { - font-size: 1.17rem; -} - -h3, h4, h5, h6 { - margin-block: 3rem 1rem; -} - -h5, h6 { - font-size: 0.9rem; - font-weight: 600; -} - -h6 { - font-weight: 500; -} - -:not(li) > :is(h1, h2, h3, h4, h5, h6), -li > :is(h1, h2, h3, h4, h5, h6):not(:first-child) { - padding-block-start: 1rem; -} - -:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3), -:is(h1, h2, h3):first-child { - margin-block-start: 1rem; -} - -:is(h1, h2, h3, h4, h5, h6) + :is(h4, h5, h6), -:is(h4, h5, h6):first-child { - margin-block-start: 0; -} - -p, small, li, dt, dd, label, -table, .table, td, .td { - color: var(--theme-text-body); -} - -p { - margin-block: 1.25rem; - margin-inline: 0; - font-size: 1rem; - line-height: 1.75; -} - -:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) { - font-size: 1rem; - color: var(--theme-text-light); - padding-block: 0.6rem; - padding-inline-start: 1rem; - margin: 1rem; - border-inline-start: 0.8rem solid var(--theme-line); - background: var(--theme-bg-light); -} - -:is(aside, section).info { - border-inline-start-color: var(--theme-accent-info); -} - -:is(aside, section).highlight { - border-inline-start-color: var(--theme-accent-highlight); -} - -:is(aside, section).warning { - border-inline-start-color: var(--theme-accent-warning); -} - -:is(aside, section).problem { - border-inline-start-color: var(--theme-accent-problem); -} - -:is(a, svg.icon).safe { - color: var(--theme-text-safe); -} - -:is(a, svg.icon).warn { - color: var(--theme-text-warn); -} - -:is(a, svg.icon).danger { - color: var(--theme-text-danger); -} - -[data-currency].negative { - color: var(--theme-icon-failure-indicator); -} - -li { - font-size: 1rem; - margin-block: 0.5rem; - line-height: 1.75; -} - -ul[role='doc-endnotes'] { - list-style: none; - padding-inline-start: 1rem; -} - -[role='doc-footnote']:target { - background: var(--theme-bg-heavy); -} - -dl { - padding: 1rem; -} - -dt, dd { - /* */ -} - -dt { - font-weight: 700; -} - -dt p { - margin-block-end: 1rem; -} - -dt:not(:first-of-type) { - margin-block-start: 2rem; -} - -/* dd { - margin-inline-start: 1rem; - padding-inline-start: 1rem; - padding-block: 0.125rem; - border-inline-start: 0.5rem var(--theme-line) solid; - background: var(--theme-bg-heavy) -} */ - -dd p { - margin-block: 1rem; -} - -table, .table { - display: table; - margin-block: 2rem; - border-collapse: collapse; -} - -table, th, td, -.table, .th, .td { - font-size: 1rem; - line-height: 1.75; -} - -thead, .thead { - display: table-header-group; -} - -tbody, .tbody { - display: table-row-group; -} - -tbody tr, -.tbody .tr { - border-top: 1px var(--theme-line) solid; -} - -tr, .tr { - display: table-row; -} - -th, .th { - text-align: center; - font-weight: 700; -} - -th, .th, -td, .td { - padding-block: 0.5rem; - padding-inline: 1rem; - display: table-cell; -} - -td, .td { - display: table-cell; - font-weight: 300; - vertical-align: top; -} - -:is(td, .td):not(:last-of-type) { - border-inline-end: 0.1rem solid var(--theme-line); -} - -:is(table, .table) :is(input, select) { - margin-block: 0; -} - -table dl { - padding: 0; -} - -small { - font-size: 0.8rem; - font-family: var(--font-open-sans); - /* font-family: var(--font-nunito); */ -} - -a { - color: var(--theme-text-link); -} - -a:active, -a:hover, -a:focus { - color: var(--theme-text-link-active); -} - -a:visited { - color: var(--theme-text-link-visited); -} - -a.local-ref { - font-size: 0.8em; - font-style: italic; -} - -.markdown-example-output { - padding: 1rem; - margin-block-start: 0; - margin-block-end: 1.5rem; - margin-inline: 1rem; - border-radius: 1rem; - background: var(--theme-bg-light); -} - -.markdown-example-output > :first-child { - margin-block-start: 0; -} - -.markdown-example-output > :last-child { - margin-block-end: 0; -} - -blockquote { - margin-block: 2rem; - margin-inline: 1rem; - padding-block: 0.5rem; - padding-inline: 1.5rem; - border-inline-start: 0.25rem var(--theme-line) solid; -} - -blockquote.external-embed { - max-width: 60rem; - background: var(--theme-bg-light); -} - -blockquote p { - margin: 0; -} - -hr { - border-block-start-width: 0.1rem; - border-style: solid; - border-color: var(--theme-line); - width: 90%; - margin-block: 4rem 6rem; -} - -mark { - color: var(--theme-text-highlight); - background-color: var(--theme-bg-text-highlight); - padding: 0.2rem; -} - -::selection { - fill: var(--theme-text-selection) !important; - color: var(--theme-text-selection) !important; - background-color: var(--theme-bg-text-selection) !important; -} - -figure { - margin-block: 2rem; - margin-inline: 1rem; - padding-bottom: 1.5rem; -} - -figure > :not(figcaption) { - margin-block: 0rem; -} - -figure pre { - margin-inline: 0; -} - -figcaption { - font-family: var(--font-open-sans); - text-align: center; - font-size: 0.85rem; - margin-block-start: 1rem; - color: var(--theme-text-light); - max-width: 60vw; - margin-inline: auto; -} - -a.icon-link { - display: inline-flex; - column-gap: 0.3rem; - align-items: center; -} - -a.icon-link svg.icon { - --icon-size: 1rem; -} - -a.heading-anchor { - color: var(--theme-text-light); - opacity: 0.3; - margin-inline-start: 0.5rem; -} - -:is(h1, h2, h3, h4, h5, h6):hover > a.heading-anchor { - opacity: 1; -} - -:is(h1, h2, h3, h4, h5, h6) svg.icon:not(.heading-anchor > svg) { - --icon-size: 1em; -} - -.private-indicator { - color: var(--theme-text-safe); - display: inline-flex; - align-items: baseline; - column-gap: 0.25rem; - margin-inline: 0.25rem; - margin-block-end: 1rem; - font-family: var(--font-open-sans); - border: 0.15rem solid var(--theme-line-safe); - border-radius: 1rem; - padding: 0.2rem 0.5rem; - font-weight: 600; - font-size: 0.8rem; -} - -.private-indicator > svg.icon { - align-self: center; -} - -.cite-label { - font-weight: 600; -} - - - - - - - - - - - - - - - -/* ===== Popups ===== */ - -.popup { - z-index: 1; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - user-select: none; - pointer-events: none; - display: flex; - opacity: 0; - transition: - opacity 0.125s linear, - background .5s linear; - background: var(--theme-bg-popup-mask); -} - -.popup:target { - opacity: 1; - user-select: unset; - pointer-events: unset; -} - -.popup form { - margin: auto; - position: relative; - background: var(--theme-bg-main); - border: 0.125rem solid var(--theme-border-input); - border-radius: 1rem; - padding-block-start: 1rem; - padding-block-end: 2rem; - padding-inline: 2rem; - width: 40rem; - max-width: 90vw; -} - -.popup h3 { - margin-block-start: 2rem; -} - -.popup form :is(h1, h2, h3, h4, h5, h6):first-child { - margin-block-start: 0; -} - -.popup a.close-popup { - position: absolute; - top: 1rem; - right: 2rem; - font-size: 1rem; -} - -.popup form :is(input, select) { - margin-block-start: 0.35rem; - margin-block-end: 1rem; -} - -.popup form .inline-list { - margin-block-start: 2rem; -} - - - - - - - - - - - - - - - -nav[aria-label="breadcrumbs"] { - /* */ -} - -nav[aria-label="breadcrumbs"] ol { - list-style: none; - margin: 0; - padding: 0; - display: flex; -} - -nav[aria-label="breadcrumbs"] li { - padding: 0.25rem; -} - -nav[aria-label="breadcrumbs"] li:not(:first-of-type) ::before { - display: inline-block; - content: '/'; - padding-inline-end: 0.25rem; - color: var(--theme-text-body); -} - - - - - - - - - - - - - - - - - - - - - -/* ===== Forms and Inputs ===== */ - -label { - display: block; - font-family: var(--font-open-sans); - font-size: 1rem; - margin-block-start: 1rem; -} - -label:not(:first-of-type) { - margin-block-start: 2rem; -} - -label.radio { - display: flex; - margin-block: 1rem; - justify-content: flex-start; -} - -input, -textarea { - display: block; - margin-block-start: 0.35rem; - margin-block-end: 1rem; - border: 0.125rem var(--theme-border-input) solid; - border-radius: 0.25rem; - color: var(--theme-text-body); - background-color: var(--theme-bg-input); - padding: 0.5rem; - font-family: var(--font-open-sans); - font-size: 1rem; - width: 20rem; -} - -input[disabled], -textarea[disabled] { - opacity: 0.4; - cursor: default; - pointer-events: none; -} - -input[type='text']:invalid, -input[type='password']:invalid, -textarea:invalid { - border-color: var(--theme-border-input-invalid); -} - -input[type='text'][readonly] { - color: var(--theme-text-light); - border-color: var(--theme-line); -} - -input[type='checkbox'] { - width: 1rem; - height: 1rem; - padding: 0; -} - -input[type='checkbox'] + label { - margin-inline-start: 0.5rem; - margin-inline-end: 2rem; -} - -input[type='radio'] { - flex: 0 0 2rem; - margin: 0.2rem; -} - -textarea { - line-height: 1.7rem; - font-family: var(--font-monospace); -} - -::-webkit-input-placeholder { - color: var(--theme-text-light); -} - -button { - padding: 0.5rem 1.5rem; - border-radius: 0.5rem; - font-size: 1rem; - margin-block-start: 1rem; - margin-inline-end: 1rem; - cursor: pointer; - user-select: none; - appearance: none; - color: var(--theme-text-button-primary); - background: var(--theme-bg-button-primary); - text-decoration: none; - font-size: 1rem; - font-family: var(--font-open-sans); - font-weight: 700; - line-height: 2rem; - display: flex; - align-items: center; -} - -button.icon-only { - padding: 0.5rem; -} - -button svg.icon { - --icon-size: 2rem; -} - -button:not(.icon-only) svg.icon:first-child { - margin-inline-end: 0.5rem; -} - -button:not(.icon-only) svg.icon:last-child { - margin-inline-start: 0.5rem; -} - -button[data-style='secondary'] { - color: var(--theme-text-button-secondary); - background: var(--theme-bg-button-secondary); -} - -button:not([disabled]):hover { - background: var(--theme-bg-button-primary-hover); -} - -button[data-style='secondary']:not([disabled]):hover { - background: var(--theme-bg-button-secondary-hover); -} - -button[disabled] { - opacity: 0.4; - cursor: default; - pointer-events: none; -} - -select { - display: block; - margin-block-start: 0.35rem; - margin-block-end: 1rem; - border: 0.125rem var(--theme-border-input) solid; - border-radius: 0.25rem; - color: var(--theme-text-body); - background-color: var(--theme-bg-input); - padding: 0.5rem; - font-family: var(--font-open-sans); - font-size: 1rem; - width: 20rem; - cursor: pointer; -} - -select[disabled] { - opacity: 0.4; - cursor: default; - pointer-events: none; -} - -select option { - color: var(--theme-text-body); - background-color: var(--theme-bg-input); - padding: 0.5rem; - font-family: var(--font-open-sans); - font-size: 1rem; -} - -:is(table, .table) :is(input, select) { - margin-block: 0; -} - -p.error-box { - margin: 0; - padding: 0.5rem; - border-radius: 0.25rem; - color: var(--theme-text-error-box); - background: var(--theme-bg-error-box); - border: 0.1rem solid var(--theme-border-error-box); -} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -/* ===== Rendered Blocks ===== */ - -/* === General === */ - -figure[data-lang] { - margin-block: 2rem; -} - -figure[data-lang] svg { - display: block; - margin-inline: auto; -} - -figure[data-size='small'] svg { - max-width: 40rem; - max-height: min(20rem, 50vw); -} - -figure[data-size='medium'] svg { - max-width: 60rem; - max-height: min(40rem, 50vw); - margin-block-start: 4rem; -} - -figure[data-size='large'] svg { - max-height: min(60rem, 80vw); - margin-block-start: 6rem; -} - -/* figure[data-lang].big { - background: var(--theme-bg-main); - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1000; - display: flex; - border: 0.25rem var(--theme-line) solid; - margin: 3rem; -} - -figure[data-lang].big svg { - max-width: none !important; - max-height: none !important; -} */ - -figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text { - fill: var(--theme-text-body); -} - -figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text:not([font-family~='Courier']) { - font-family: var(--font-open-sans); -} - -[data-lang='bash:samp'] samp { - display: block; - margin-block-start: 0.5rem; - padding-block-start: 0.5rem; - border-block-start: 0.1rem solid var(--theme-line); -} - -/* === KaTeX === */ - -.katex-display { - color: var(--theme-text-body); -} - -.katex-display .katex { - font-size: 1.4rem; -} - -/* using "body" here to add specificity, to override styles from katex.min.css */ -body .katex-display { - margin: 2rem; -} - -body figure.align-left .katex-display > .katex { - text-align: left; -} - -body figure.align-right .katex-display > .katex { - text-align: right; -} - -:not(.katex-display) > .katex { - font-size: inherit; - margin-inline: 0.5rem; -} - -.katex span[style~='color:transparent;'] { - user-select: none; -} - -/* === Pikchr */ - -/* boxes */ -.rendered-pikchr svg path[style*='fill:none;'] { - fill: var(--theme-bg-light) !important; - transition: fill linear .5s; -} - -/* lines and boxes */ -.rendered-pikchr svg path[style*='stroke:rgb(0,0,0);'] { - stroke: var(--theme-text-body) !important; -} - -/* circles */ -.rendered-pikchr svg circle[style*='stroke:rgb(0,0,0);'] { - stroke: var(--theme-text-body) !important; -} - -/* arrow heads */ -.rendered-pikchr svg polygon[style='fill:rgb(0,0,0)'] { - fill: var(--theme-text-body) !important; - transition: fill linear .5s; -} - -/* === Bytefield === */ - -figure[data-lang='clojure:bytefield'] svg line[stroke-width='1'] { - stroke-width: 2; -} - -figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='11'] { - font-size: 14px; -} - -figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='18'] { - font-size: 16px; -} - -figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Courier'] { - font-family: var(--font-monospace); -} - -figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Times'] { - font-family: var(--font-open-sans); -} - -figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,1'] { - stroke-dasharray: 4px, 3px; -} - -figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,3'] { - stroke-dasharray: 2px, 3px; -} - - - - - - - - - - - -blockquote.external-embed .h-entry footer p { - font-size: 0.8rem; - margin-block: 1rem; -} - -main > .h-entry header p { - margin-block: 0.6rem; -} - -main > .h-entry header p.p-summary { - font-style: italic; - color: var(--theme-text-light); -} - -main > .h-entry header p.event-time { - font-size: 0.8rem; - margin-block: 0.3rem; -} - -main > .h-entry header p.publish-time { - font-size: 0.8rem; - margin-block: 0.3rem; -} - - diff --git a/docs/_assets/breadcrumb.css b/docs/_assets/breadcrumb.css new file mode 100644 index 0000000..edd39a0 --- /dev/null +++ b/docs/_assets/breadcrumb.css @@ -0,0 +1,23 @@ + +nav[aria-label="breadcrumbs"] { + /* */ +} + +nav[aria-label="breadcrumbs"] ol { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +nav[aria-label="breadcrumbs"] li { + padding: 0.25rem; +} + +nav[aria-label="breadcrumbs"] li:not(:first-of-type) ::before { + display: inline-block; + content: '/'; + padding-inline-end: 0.25rem; + color: var(--theme-text-body); +} + diff --git a/docs/_assets/figures.css b/docs/_assets/figures.css new file mode 100644 index 0000000..b30ea46 --- /dev/null +++ b/docs/_assets/figures.css @@ -0,0 +1,160 @@ + +figure { + margin-block: 2rem; + margin-inline: 1rem; + padding-bottom: 1.5rem; +} + +figure > :not(figcaption) { + margin-block: 0rem; +} + +figure pre { + margin-inline: 0; +} + +figure[data-lang] { + margin-block: 2rem; +} + +figure[data-lang] svg { + display: block; + margin-inline: auto; +} + +figure[data-size='small'] svg { + max-width: 40rem; + max-height: min(20rem, 50vw); +} + +figure[data-size='medium'] svg { + max-width: 60rem; + max-height: min(40rem, 50vw); + margin-block-start: 4rem; +} + +figure[data-size='large'] svg { + max-height: min(60rem, 80vw); + margin-block-start: 6rem; +} + +/* figure[data-lang].big { + background: var(--theme-bg-main); + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1000; + display: flex; + border: 0.25rem var(--theme-line) solid; + margin: 3rem; +} + +figure[data-lang].big svg { + max-width: none !important; + max-height: none !important; +} */ + +figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text { + fill: var(--theme-text-body); +} + +figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text:not([font-family~='Courier']) { + font-family: var(--font-body); +} + +[data-lang='bash:samp'] samp { + display: block; + margin-block-start: 0.5rem; + padding-block-start: 0.5rem; + border-block-start: 0.1rem solid var(--theme-line); +} + +/* === KaTeX === */ + +.katex-display { + color: var(--theme-text-body); +} + +.katex-display .katex { + font-size: 1.4rem; +} + +/* using "body" here to add specificity, to override styles from katex.min.css */ +body .katex-display { + margin: 2rem; +} + +body figure.align-left .katex-display > .katex { + text-align: left; +} + +body figure.align-right .katex-display > .katex { + text-align: right; +} + +:not(.katex-display) > .katex { + font-size: inherit; + margin-inline: 0.5rem; +} + +.katex span[style~='color:transparent;'] { + user-select: none; +} + +/* === Pikchr */ + +/* boxes */ +.rendered-pikchr svg path[style*='fill:none;'] { + fill: var(--theme-bg-light) !important; + transition: fill linear .5s; +} + +/* lines and boxes */ +.rendered-pikchr svg path[style*='stroke:rgb(0,0,0);'] { + stroke: var(--theme-text-body) !important; +} + +/* circles */ +.rendered-pikchr svg circle[style*='stroke:rgb(0,0,0);'] { + stroke: var(--theme-text-body) !important; +} + +/* arrow heads */ +.rendered-pikchr svg polygon[style='fill:rgb(0,0,0)'] { + fill: var(--theme-text-body) !important; + transition: fill linear .5s; +} + +/* === Bytefield === */ + +figure[data-lang='clojure:bytefield'] svg line[stroke-width='1'] { + stroke-width: 2; +} + +figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='11'] { + font-size: 14px; +} + +figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='18'] { + font-size: 16px; +} + +figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Courier'] { + font-family: var(--font-monospace); +} + +figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Times'] { + font-family: var(--font-body); +} + +figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,1'] { + stroke-dasharray: 4px, 3px; +} + +figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,3'] { + stroke-dasharray: 2px, 3px; +} + + diff --git a/docs/_assets/forms-inputs.css b/docs/_assets/forms-inputs.css new file mode 100644 index 0000000..7d38063 --- /dev/null +++ b/docs/_assets/forms-inputs.css @@ -0,0 +1,4 @@ + +{{> .extras/forms-inputs/general.css }} + +{{> .extras/forms-inputs/spacious.css }} diff --git a/docs/_assets/structure.css b/docs/_assets/structure.css new file mode 100644 index 0000000..3ca19d8 --- /dev/null +++ b/docs/_assets/structure.css @@ -0,0 +1,212 @@ + +* { + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; +} + +html, body { + min-height: 100vh; +} + +body { + position: relative; + padding: 1rem; + padding-block-end: 5rem; + z-index: 1; + background: var(--theme-bg-main); +} + +@media screen and (min-width: 60rem) { + body { + padding-inline: 2rem; + } +} + +@media print { + body { + padding-block: 0.5rem; + } +} + +body > nav, +body > main { + max-width: 100rem; + margin-inline: auto; +} + + + + +/* ===== Footer ===== */ + +body > footer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2.5rem; + background: var(--theme-bg-light); + border-block-start: 0.1rem solid var(--theme-line); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + overflow: hidden; +} + +body > footer :is(.left, .right) { + min-width: 22rem; +} + +body > footer :is(.left, .center, .right) { + flex: 1 1 calc(100% / 3); +} + +body > footer .left { + text-align: left; + padding-inline-start: 1.5rem; +} + +body > footer .center { + text-align: center; +} + +body > footer .right { + text-align: right; + padding-inline-end: 1.5rem; +} + +body > footer ul { + padding: 0; +} + +body > footer p { + font-size: 0.8rem; + margin: 0; + padding-block: 0.5rem; +} + + +@media (max-width: 1199px) { + body > footer { + margin-block-start: 8rem; + padding-block-end: 2rem; + background: transparent; + border: 0; + position: static; + flex-direction: column; + height: auto; + } + + body > footer > div, + body > footer :is(p, .left, .center, .right) { + font-size: 0.8rem; + text-align: center; + padding-inline: 0; + } +} + + + + + + + + + + + + + +color-scheme-toggle-button, +outline-button { + position: fixed; + top: 0.5rem; + right: 0.5rem; + display: block; + z-index: 2; +} + +outline-button { + top: 0.5rem; + right: 3rem; +} + + + + + + + + + +#outline-panel { + position: fixed; + top: 4rem; + right: 2rem; + width: min(30rem, 80vw); + max-height: 80vh; + overflow-y: auto; + background: var(--theme-bg-light); + border: 0.2rem solid var(--theme-line); + display: none; + z-index: 10; +} + +[data-show-outline] #outline-panel { + display: block; +} + +#outline-panel h2 { + margin-block: 1rem; + margin-inline: 1rem; + padding: 0; + font-size: 1.4rem; +} + +#outline-panel ol { + list-style: none; + padding: 0; +} + +#outline-panel li[data-depth='h1'] { + font-size: 1.2rem; + font-weight: 700; + margin-inline-start: 1rem; +} + +#outline-panel li[data-depth='h2'] { + font-size: 1.1rem; + font-weight: 600; + margin-inline-start: 2rem; +} + +#outline-panel li[data-depth='h3'] { + margin-inline-start: 3rem; +} + +#outline-panel li[data-depth='h4'] { + font-size: 0.9rem; + margin-inline-start: 4rem; +} + +#outline-panel li[data-depth='h5'] { + font-size: 0.9rem; + margin-inline-start: 5rem; +} + +#outline-panel li[data-depth='h6'] { + font-size: 0.9rem; + margin-inline-start: 6rem; +} + +@media print { + color-scheme-toggle-button, + outline-button, + #outline-panel { + display: hidden !important; + } +} + diff --git a/docs/_assets/theme-animation.css b/docs/_assets/theme-animation.css new file mode 100644 index 0000000..7d12103 --- /dev/null +++ b/docs/_assets/theme-animation.css @@ -0,0 +1 @@ +{{> .extras/theme-animation.css }} \ No newline at end of file diff --git a/docs/_assets/typography.css b/docs/_assets/typography.css new file mode 100644 index 0000000..d0d8f99 --- /dev/null +++ b/docs/_assets/typography.css @@ -0,0 +1,29 @@ + +:root { + --font-heading: 'Open Sans', sans-serif; + --font-body: 'Open Sans', sans-serif; + --font-monospace: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; +} + +{{> .extras/typography/spacious.css }} + +{{> .extras/typography/general.css }} + + +.markdown-example-output { + padding: 1rem; + margin-block-start: 0; + margin-block-end: 1.5rem; + margin-inline: 1rem; + border-radius: 1rem; + background: var(--theme-bg-light); + transition: background linear .5s; +} + +.markdown-example-output > :first-child { + margin-block-start: 0; +} + +.markdown-example-output > :last-child { + margin-block-end: 0; +} diff --git a/docs/color-themes/schema/v1.yaml b/docs/color-themes/schema/v1.yaml index 3c389d7..9bca882 100644 --- a/docs/color-themes/schema/v1.yaml +++ b/docs/color-themes/schema/v1.yaml @@ -6,7 +6,7 @@ breadcrumb: - '[color-themes](color-themes/index.html)' --- $schema: http://json-schema.org/draft-07/schema -$id: https://gitea.jbrumond.me/doc-utils/color-themes/v1.json +$id: https://doc-utils.jbrumond.me/color-themes/schema/v1.json type: object title: Color Theme required: diff --git a/layouts/main.html b/layouts/main.html index a22a077..5aa7ff2 100644 --- a/layouts/main.html +++ b/layouts/main.html @@ -6,8 +6,13 @@ - + + + + + + @@ -18,7 +23,6 @@ {{/ page.outline_button }} -
{{> breadcrumb.html }}
@@ -29,7 +33,6 @@

Built with docs2website at

Copyright 2023 James Brumond

-
\ No newline at end of file diff --git a/layouts/preview-color-themes.html b/layouts/preview-color-themes.html index 5b80337..c7ed1a4 100644 --- a/layouts/preview-color-themes.html +++ b/layouts/preview-color-themes.html @@ -6,8 +6,13 @@ - + + + + + +