.avatar{display:flex;flex-flow:column nowrap;justify-content:center;max-height:var(--size-10);max-width:var(--size-10);border-radius:var(--shape-corner-full);fill:var(--color-primary-container);& path { fill: var(--color-on-primary-container); } &.monogram { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: var(--size-10); width: var(--size-10); max-height: var(--size-10); max-width: var(--size-10); border-radius: var(--shape-corner-full); background-color: var(--color-primary-container); color: var(--color-on-primary-container); font-family: var(--typescale-title-medium-font); font-size: var(--typescale-title-medium-size); font-weight: var(--typescale-title-medium-weight); line-height: var(--typescale-title-medium-line-height); } &.check { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: var(--size-10); width: var(--size-10); max-height: var(--size-10); max-width: var(--size-10); border-radius: var(--shape-corner-full); background-color: var(--color-primary-container); color: var(--color-on-primary-container); }}.breadcrumb{padding:0;& ol { padding: 0; margin: 0; } & li { display: inline; padding: 0; margin: 0; list-style: none; &::before { margin: 0; } &:not(:last-child)::after { content: "»"; padding: 0 var(--size-2); } &.active { display: none; } & a { color: var(--color-primary); text-decoration: none; } }}#github-button{margin-top:var(--size-7);width:100%}@media screen and (max-width:599px){#github-button{width:0;padding:unset;align-self:flex-end;transition:width var(--motion-duration-long4)var(--motion-easing-emphasized);.repo-name { display: none; }}}#random-button{cursor:pointer;&:hover,&:focus { animation:rattle var(--motion-duration-short4) var(--motion-easing-emphasized) infinite; } &:active { animation:roll var(--motion-duration-extra-long4) var(--motion-easing-emphasized) infinite; }}@keyframes roll{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes rattle{0%{transform:rotate(0)}25%{transform:rotate(10deg)}50%{transform:rotate(0)}75%{transform:rotate(-10deg)}100%{transform:rotate(0)}}#top-link{position:fixed;bottom:var(--size-4);right:var(--size-4);z-index:9999;opacity:0;visibility:hidden;transition:all var(--motion-duration-extra-long4)var(--motion-easing-emphasized);.icon { color: var(--icon-color); }}.set.tabs:has(.sub-tabs-container){background-color:var(--color-surface-container);padding:0 var(--size-1);--set-gap:7px;--set-overflow:visible;.tab { --container-shape: var(--shape-corner-m-top); &.active { --container-color: var(--color-surface-container-low); } &:not(.active) { background-color: var(--color-surface-container-high); } &::before { all: unset; content: ""; position: absolute; inset: 0; z-index: -1; flex: 0 1 auto; background-color: var(--container-color); box-shadow: var(--container-elevation); border: var(--container-outline); border-radius: var(--container-shape); } } .sub-tabs-container { flex: 1 1 auto; position: relative; .sub-tabs { position: absolute; display: none; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; min-width: fit-content; width: 100%; box-shadow: var(--elevation2); --container-shape: var(--shape-corner-none); z-index: 1; .tab { flex: 1 1 auto; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: var(--size-2); padding: var(--size-7); --container-color: var(--color-surface-container); --container-shape: var(--shape-corner-none); z-index: 1; &.active { --container-color: var(--color-surface-container-high); } &::before { all: unset; content: ""; position: absolute; inset: 0; z-index: -1; flex: 0 1 auto; background-color: var(--container-color); box-shadow: var(--container-elevation); border: var(--container-outline); border-radius: var(--container-shape); } } } &:hover .sub-tabs, &:focus .sub-tabs { display: flex; } }}@media screen and (max-width:599px){.set.tabs:has(.sub-tabs-container){.tab { max-height: var(--size-12); } .tab .icon { display: none; }}}.theme-controls{position:relative;.divider { margin-block: var(--size-5); } .theme-controls-title { display: flex; flex-flow: row nowrap; align-items: center; padding: var(--size-3); } .controls::before { box-shadow:none; } .controls { position: absolute; inset: auto 0 auto auto; display: flex; flex-flow: column nowrap; flex: 1 1 auto; border: none; padding: var(--size-3); overflow-y: auto; color: var(--color-on-surface); background-color: var(--color-surface-container-low); max-height: calc(100dvh - var(--size-16)); visibility: hidden; width: var(--size-100); height: 0%; transition: all var(--motion-duration-medium4); } & input#theme-controls { display: none; } &:has(input#theme-controls[type="checkbox"]:checked) { .controls { visibility: visible; width: var(--size-100); height: calc(100dvh - var(--size-16)); min-height: 100%; transition: height var(--motion-duration-medium4); } } .slider { position: relative; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; width: 100%; & input { width: 100%; } & output { display: flex; width: 100%; } } #theme-hues, #theme-chromas, #theme-lightness { display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; width: 100%; height: var(--size-5); margin-bottom: var(--size-3); border-radius: var(--shape-corner-full); } #theme-hues { background: linear-gradient( 0.25turn, var(--palette-hue-0), var(--palette-hue-30), var(--palette-hue-60), var(--palette-hue-90), var(--palette-hue-120), var(--palette-hue-150), var(--palette-hue-180), var(--palette-hue-210), var(--palette-hue-240), var(--palette-hue-270), var(--palette-hue-300), var(--palette-hue-330) ); } #theme-chromas { background: linear-gradient( 0.25turn, var(--palette-chroma-0), var(--palette-chroma-10), var(--palette-chroma-20), var(--palette-chroma-30), var(--palette-chroma-40), var(--palette-chroma-50), var(--palette-chroma-60), var(--palette-chroma-70), var(--palette-chroma-80), var(--palette-chroma-90), var(--palette-chroma-100) ); } #theme-lightness { margin-top: var(--size-3); background: linear-gradient( 0.25turn, var(--palette-primary-0), var(--palette-primary-10), var(--palette-primary-20), var(--palette-primary-30), var(--palette-primary-40), var(--palette-primary-50), var(--palette-primary-60), var(--palette-primary-70), var(--palette-primary-80), var(--palette-primary-90), var(--palette-primary-100) ); } [id*="selector-container"] { border-radius: var(--shape-corner-l); background-color: var(--color-surface-container-lowest); padding: var(--size-8); margin-bottom: var(--size-4); gap: var(--size-2); & label:not([class]), & legend:not([class]) { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; margin-bottom: var(--size-2); &:not(:first-child) { margin-top: var(--size-3); } } } #typography-selector { margin-top: var(--size-3); .typography-fieldset { margin-block: var(--size-2); } .example { text-align: right; } } #color-selector-container { display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; width: 100%; gap: var(--size-2); text-align: left; .title-large { margin-bottom: var(--size-2); } .title-large:not(:first-child) { margin-top: var(--size-5); } .color-temp-reference { display: flex; flex-flow: row nowrap; align-items: center; margin-top: var(--size-2); #primary, #primary-container, #tertiary, #tertiary-container { flex: 1 1 0; display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: center; padding: var(--size-2); } #primary { background-color: var(--color-primary); border-radius: var(--shape-corner-xl-start); } #tertiary { background-color: var(--color-tertiary); border-radius: var(--shape-corner-xl-end); } #primary-container { background-color: var(--color-on-primary); border-radius: var(--shape-corner-xl-start); } #tertiary-container { background-color: var(--color-on-tertiary); border-radius: var(--shape-corner-xl-end); } } }}:root{--color-showcase-tokens-container:var(--palette-neutral-variant-10);& img { filter: brightness(var(--input-dim-image)); } #moon { opacity: 0; } #sun { transform: translate(calc(-1 * var(--size-3)), 0px); opacity: 1; } #theme-toggle-container:focus-within { #moon { animation: set-moon var(--motion-duration-medium2) var(--motion-easing-emphasized) forwards; } #sun { animation: rise-sun var(--motion-duration-medium2) var(--motion-easing-emphasized) forwards; } }}:root:has(#theme-toggle:checked){--color-showcase-tokens-container:var(--palette-neutral-variant-90); #sun { opacity: 0; } #moon { transform: translate(var(--size-3), 0px); opacity: 1; } #theme-toggle-container:focus-within { #sun { animation: set-sun var(--motion-duration-medium2) var(--motion-easing-emphasized) forwards; } #moon { animation: rise-moon var(--motion-duration-medium2) var(--motion-easing-emphasized) forwards; } } #theme-toggle { + label { --container-color: var(--color-surface-container-highest); --icon-color: var(--color-on-surface-variant); .icon { font-variation-settings: "FILL" 0; } } }}@keyframes rise-moon{0%{transform:translate(calc(-1 * var(--size-9)),var(--size-12));opacity:0}100%{transform:translate(var(--size-3),0);opacity:1}}@keyframes rise-sun{0%{transform:translate(calc(-1 * var(--size-15)),var(--size-12));opacity:0}100%{transform:translate(calc(-1 * var(--size-3)),0);opacity:1}}@keyframes set-moon{0%{transform:translate(var(--size-3),0);opacity:1}100%{transform:translate(var(--size-15),var(--size-12));opacity:0}}@keyframes set-sun{0%{transform:translate(calc(-1 * var(--size-3)),0);opacity:1}100%{transform:translate(var(--size-9),var(--size-12));opacity:0}}.admonition{position:relative;display:block;margin-block:var(--size-8);padding:var(--spacing-panes);outline:1px solid var(--color-outline-variant);border-radius:var(--shape-corner-m);box-shadow:var(--elevation1);min-width:100%;min-height:var(--size-24);background-color:var(--color-surface-container-low);color:var(--text-color);--icon-size:calc(var(--spacing-panes) * 5);&[class*="-container"] { outline: unset; padding: var(--size-8) var(--size-4) var(--size-8) var(--icon-size); background-color: var(--container-color); } & a { word-break: break-word; } .icon { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; bottom: 0; left: 0; width: var(--icon-size); height: 100%; font-size: var(--size-12); color: var(--icon-color); } &.centered { box-shadow: unset; padding: unset; background-color: unset; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; }}h1,h2,h3,h4,h5,h6{.anchor { flex: 1 1 0; height: 100%; display: inline-flex; align-items: center; gap: var(--size-1); user-select: none; opacity: 0; transition: opacity var(--motion-duration-medium2) var(--motion-easing-emphasized); margin-inline-start: var(--size-1); &:hover { color: var(--color-primary); } } &:active .anchor, &:focus-within .anchor, &:hover .anchor { opacity: 1; }}:root,body,main,#header,#footer,.layout,#top-link{transition:var(--motion-duration-long2)var(--motion-easing-emphasized);transition-property:font-size,font-weight,line-height,font-family,margin,border-radius,height,min-height,max-height,width,min-width,max-width,transform,visibility,opacity,display}.layout,.layout *{transition:background-color var(--motion-duration-medium4)var(--motion-easing-emphasized)}@media(prefers-reduced-motion){:root{animation:none}}.icon{font-family:var(--font-icon);font-weight:400;font-style:normal;font-size:var(--size-6);line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga";user-select:none;height:var(--size-6);width:var(--size-6);min-height:var(--size-6);min-width:var(--size-6)}.github-icon,.site-icon{min-width:var(--size-6);min-height:var(--size-6);max-width:var(--size-6);max-height:var(--size-6);padding:2px}.site-icon-w{fill:var(--color-primary)}.site-icon-j-left{fill:var(--color-tertiary)}.site-icon-j-right{fill:var(--color-secondary)}#home-page-icon{min-width:var(--size-12);min-height:var(--size-12);max-width:var(--size-12);max-height:var(--size-12);padding:var(--size-2)}.share-icon{min-width:var(--size-12);min-height:var(--size-12);max-width:var(--size-12);max-height:var(--size-12);padding:var(--size-3);fill:var(--color-secondary)}h1[id]{color:var(--color-heading-1)}h2[id]{color:var(--color-heading-2)}h3[id]{color:var(--color-heading-3)}h4[id]{color:var(--color-heading-4)}h5[id]{color:var(--color-heading-5)}h6[id]{color:var(--color-heading-6)}.highlight-text{background-color:var(--color-complementary);color:var(--color-on-complementary);padding-inline:5px;border-radius:var(--shape-corner-xs);max-width:fit-content; *{ color: inherit; }}#footer{position:relative;flex:auto;display:flex;flex-flow:column nowrap;align-items:stretch;padding:30vmax 8vmax 5vmax;gap:5vmax;.footer-links { display: flex; flex-flow: row wrap; gap: var(--spacing-panes); .footer-links-list { flex: 1 1 0; display: flex; flex-flow: column nowrap; & span:first-child { color: var(--color-on-surface-variant); } } & a { display: flex; align-items: center; text-decoration: none; margin-bottom: var(--size-1); } & span { margin-block: 0 var(--spacing-panes); } } .footer-lower { flex: 1 1 0; display: flex; flex-flow: row nowrap; align-items: flex-end; justify-content: space-between; gap: var(--size-5); margin-top: var(--spacing-panes); > * { flex: 1 1 0; } & a { text-decoration: none; } .copyright { display: flex; align-items: flex-start; flex-flow: column nowrap; gap: var(--spacing-panes); } #copyright-button { display: flex; justify-content: flex-start; align-items: center; color: var(--color-on-surface-variant); &:hover { color: var(--color-on-surface); text-decoration: underline; } } .footer-buttons { display: flex; flex-flow: column nowrap; gap: var(--spacing-panes); align-items: stretch; .footer-buttons-set { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: var(--size-3); } } }}#header{flex:auto;display:flex;flex-flow:column nowrap;position:sticky;top:0;z-index:999999;.app-bar.top { padding-inline: var(--size-2) var(--size-4); z-index: 3; } #site-headline { position: relative; color: var(--color-on-surface); flex-flow: row nowrap; align-items: center; justify-content: flex-start; .site-id-title { display: none; font-family: var(--typescale-title-large-font); font-size: var(--typescale-title-large-size); font-weight: var(--typescale-title-large-weight); line-height: var(--typescale-title-large-line-height); } & img { object-fit: cover; padding: var(--size-1); max-width: var(--size-6); max-height: var(--size-6); } }}@media screen and (min-width:600px){#header #site-headline>.site-id-title{display:flex}}:is(.button,.chip,.text-field) img,svg,:is(.set.tabs) :is(img,svg){min-inline-size:var(--size-10);max-inline-size:var(--size-10);min-block-size:var(--size-10);max-block-size:var(--size-10)}#post-content{max-width:var(--input-char-width);margin:var(--input-post-content-margin);.highlight-text, & p, & pre, & ul, & ol, & li, & blockquote { width: auto; } & p { padding: 0 0 1.3em 0.5em; &:has(img:first-of-type) { position: relative; display: flex; flex-flow: column nowrap; height: 100%; min-height: auto; margin: var(--size-2) 0; padding: var(--size-5) 0 var(--size-5) 20%; overflow: visible; & img:first-of-type, & img#cover-image { position: absolute; top: 0; left: 0; width: 16%; height: 100%; object-fit: cover; margin: 0; } } } & ul { &:has(li:first-child > figure) { position: relative; margin: 0; padding: 0; display: flex; flex-flow: column nowrap; min-height: max-content; padding-left: 16%; & li:first-child > figure { position: absolute; top: 0; left: 0; height: 100%; width: 16%; margin: 0; & img { width: 100%; height: 100%; object-fit: cover; margin: 0; } } } &:has(li:last-child > figure) { position: relative; margin: 0; padding: 0; display: flex; flex-flow: column nowrap; min-height: max-content; padding-right: 16%; & li:last-child > figure { position: absolute; top: 0; right: 0; height: 100%; width: 16%; margin: 0; & img { width: 100%; height: 100%; object-fit: cover; margin: 0; } } } & li > figure { max-width: 16%; margin: 0; } } & h1[id], & h2[id], & h3[id], & h4[id], & h5[id], & h6[id] { padding-top: 0.8em; padding-block-start: 0.8em; padding-bottom: 0.4em; padding-block-end: 0.4em; } & ul { display: flex; flex-flow: column nowrap; } & figure:has(img, svg, video) { margin: var(--size-2) auto; max-width: 100%; & img, & svg, & video { max-inline-size: 100%; max-block-size: fit-content; align-items: center; margin: var(--size-3) auto; } } #cover-image { margin: var(--size-5) auto; & img, & svg, & video { border-radius: inherit; max-width: 88%; margin: var(--size-5) auto; } & figcaption { font-style: italic; font-size: 88%; max-width: 88%; margin: var(--size-5) auto; } } *:not(pre) > code { display: inline-flex; display: inline flex; flex-flow: row nowrap; background-color: var(--color-surface-container-high); color: var(--color-on-surface-variant); border-radius: var(--shape-corner-xs); padding-inline: 5px; margin-inline: 3px; }}.highlight{position:relative;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch;align-content:stretch;overflow:auto;padding-block:var(--size-2);margin-bottom:var(--size-4); *{ font-size: var(--typescale-body-small-size); line-height: var(--typescale-body-small-line-height); font-weight: var(--typescale-body-small-weight); font-family: var(--typeface-mono); } & span { display: flex; flex-flow: row nowrap; & a { color: var(--color-secondary) !important; &:hover { color: var(--color-primary-fixed-dim) !important; } } } .copy-code { display: none; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 100; padding: var(--size-2); border-radius: var(--shape-corner-m); background-color: var(--color-tertiary-container); font-weight: var(--typeface-weight-bold); color: var(--color-on-tertiary-container); cursor: pointer; } &:hover { .copy-code { display: block; } }}.feedback-form{--layout-flex:1 1 auto;--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-padding:var(--size-13);--layout-margin:var(--size-13);--layout-gap:var(--size-13);--layout-shape:var(--shape-corner-m);--layout-border:initial;--layout-bg:var(--color-surface-container);box-shadow:var(--elevation1);color:var(--color-on-surface);.button { cursor: pointer; margin-top: var(--size-21); } .error { color: var(--color-on-error); } .status { color: var(--color-inverse-primary); }}.layout.page-header{--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:initial;--layout-height:max-content;--layout-padding:var(--size-13) var(--size-8);--layout-gap:var(--size-7);--layout-shape:var(--shape-corner-xl-bottom);--layout-border:initial;--layout-bg:var(--color-surface-container-low);.title, .description { word-wrap: break-word; white-space: normal; } .metadata { color: var(--color-on-surface-variant); }}.page-links{--layout-flex:initial;--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:flex-start;--layout-width:100%;--layout-height:auto;--layout-min-height:auto;--layout-padding:var(--spacing-panes);--layout-margin:0;--layout-gap:var(--size-24);--layout-border:inherit; #backlinks, #related-pages { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--size-2); .page-links-title { grid-column: 1 / 3; margin-block: var(--size-5) var(--size-3); } .card { .card-content { align-items: flex-start } } } #share-links { flex: 1 1 auto; display: flex; flex-flow: column nowrap; background: var(--color-surface-container-low); border-radius: var(--shape-corner-s); box-shadow: var(--elevation2); margin-top: var(--size-8); padding: var(--size-6); min-width: 75%; margin-inline: auto; gap: var(--size-6); .share-buttons, .action-buttons { display: flex; flex-flow: row wrap; align-items: center; padding: var(--size-1); gap: var(--size-1); margin-inline: auto; .button { flex: 1 1 0; } } .share-buttons { min-width: 95%; } .action-buttons { width: 85%; } .page-links-title { display: flex; flex-flow: row nowrap; width: 100%; } } .page-links-title { width: 100%; font-family: var(--typescale-headline-large-font); font-size: var(--typescale-headline-large-size); font-weight: var(--typescale-headline-large-weight); line-height: var(--typescale-headline-large-line-height); }}@media screen and (max-width:599px){.page-links{ #backlinks, #related-pages { display: flex; flex-flow: column nowrap; gap: var(--size-2); .page-links-title { width: 100%; margin-block: var(--size-5) var(--size-3); } .card .card-content { align-items: flex-start } }}}@media screen and (min-width:1200px){.page-links{ #backlinks, #related-pages { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: var(--size-2); .page-links-title { grid-column: 1 / 5; margin-block: var(--size-5) var(--size-3); } .card .card-content { align-items: flex-start } }}}.page-navigation{--layout-flex:initial;--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:flex-start;--layout-width:100%;--layout-height:auto;--layout-min-height:auto;--layout-padding:var(--spacing-panes);--layout-margin:0;--layout-gap:var(--size-4);--layout-border:inherit;.prev, .next { flex: 1 1 0; display: flex; flex-flow: column nowrap; align-content: flex-start; align-items: stretch; justify-content: flex-start; padding: calc(var(--spacing-panes)); gap: var(--size-2); --container-shape: var(--shape-corner-xs); --container-color: var(--color-surface-container-lowest); color: var(--color-on-surface); box-shadow: var(--elevation1); .icon { font-size: 18px; } .page-direction { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; color: var(--color-on-surface-variant); } &.empty { opacity: 0; pointer-events: none; height: 0px; } }}@media screen and (min-width:600px){.page-navigation{--layout-flex-flow:row nowrap;.prev, .next { flex: 1 1 0; }}}.content-wrapper{--layout-flex:1 1 auto;--layout-display:flex;--layout-flex-flow:column nowrap;--layout-align-items:stretch;--layout-align-content:initial;--layout-justify-content:initial;--layout-width:100%;--layout-height:100%;--layout-min-height:calc(100dvh - var(--size-32));--layout-margin:0;--layout-gap:0;--layout-border:initial;--layout-bg:var(--color-surface);--layout-shape:var(--shape-corner-none)}.page-header,.page-navigation,.page-links{--layout-bg:inherit;--layout-shape:var(--shape-corner-none)}.page-navigation{margin-top:var(--spacing-panes)}#header,#footer{background-color:var(--color-surface-container);border-radius:var(--shape-corner-none)}.toc li,.toc li::before,.toc ul{all:unset}.toc{--layout-display:flex;--layout-flex-flow:column nowrap;--layout-padding:0;--layout-margin:0;position:-webkit-sticky;position:sticky;top:var(--size-40);& li { display: flex; flex-flow: column nowrap; margin-left: unset; } & ul li ul li ul li { margin-left: var(--size-4); } & a { font-family: var(--typescale-body-medium-font); font-size: var(--typescale-body-medium-size); font-weight: var(--typescale-body-medium-weight); line-height: var(--typescale-body-medium-line-height); color: var(--color-on-surface-variant); text-decoration: none; display: flex; flex-flow: row nowrap; align-items: center; padding: 0 var(--size-4); border-radius: var(--shape-corner-l); cursor: pointer; position: relative; z-index: 1; &:focus-visible { outline: 2px solid var(--color-outline-variant); outline-offset: -2px; text-decoration: none; color: inherit; } &::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background-color: var(--color-surface-container-lowest); z-index: -1; transition: width var(--motion-duration-short2) var(--motion-easing-emphasized); } &:target::before, &:hover::before, &:active::before, &:focus::before { width: max-content; } } .headline { font-family: var(--typescale-label-small-font); font-size: var(--typescale-label-small-size); font-weight: var(--typescale-label-small-weight); line-height: var(--typescale-label-small-line-height); padding: 0 var(--size-4) var(--size-2); color: var(--color-on-surface-variant); } .title { display: none; font-family: var(--typescale-headline-small-font); font-size: var(--typescale-headline-small-size); font-weight: var(--typescale-headline-small-weight); line-height: var(--typescale-headline-small-line-height); padding: 0 var(--size-4) var(--size-2); color: var(--color-on-surface); }}@media screen and (min-width:1200px){.toc{.title { display: block; }}}html.is-publish-mode{all:unset;& main, .panes, .pane { all: unset; } #header, #footer, .page-header, .page-links, .page-navigation, #toc, #top-link { display: none; } #main-content-container { all: unset; flex: 1 1 auto; display: flex; flex-flow: column nowrap; align-items: stretch; overflow-y: auto; overflow-x: hidden; * { flex: 1 1 auto; } }}@media print{html,body,main,article,section{overflow:visible;margin:0}#header,#footer,#top-link,#share-links,.page-navigation{display:none!important}*{break-inside:auto!important;page-break-inside:auto!important}@page{size:auto}table,figure{page-break-inside:avoid}h1,h2,h3,h4,h5,h6{page-break-after:avoid}}.upper{text-transform:uppercase}.lower{text-transform:lowercase}.capitalize{text-transform:capitalize}.strikethrough{text-decoration:line-through}.underline{text-decoration:underline}.overline{text-decoration:overline}.page-404{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;height:100%;width:100%;gap:var(--spacing-panes);margin-block:var(--spacing-panes);& h1 { font-family: var(--typeface-mono); color: var(--color-on-surface); } & h2 { color: var(--color-on-surface-variant); }}.archive-entry-title{margin:var(--size-2)0}.archive-year-header *,.archive-count,.archive-meta{font-family:var(--typeface-mono)}.archive-count,.archive-meta{color:var(--color-on-surface-variant)}.archive-count{font-size:var(--typescale-title-small-size);margin-left:unset;vertical-align:super}.archive-year{padding:var(--size-8);& h2, & h3 { color: var(--color-primary); } [class*="-link"] { text-decoration: none; } .archive-month { background: var(--color-surface-container-lowest); padding: var(--size-5); border-radius: var(--shape-corner-l); box-shadow: var(--elevation2); margin: var(--size-3) 0 var(--size-3) var(--size-1); .archive-posts { padding: var(--size-3); margin: var(--size-2) 0 0 var(--size-1); .archive-entry { background: var(--color-surface-container-low); padding: var(--size-5); margin: var(--size-3); border-radius: var(--shape-corner-m); box-shadow: var(--elevation3); &:hover { background: var(--color-surface-container); } .archive-entry-title { display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } } } }}#home-page{flex:auto;display:flex;flex-flow:column nowrap;padding:unset;margin:unset; #home-header { flex: 0 1 auto; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; text-align: center; gap: var(--size-5); padding: var(--size-14) var(--spacing-panes); min-height: 18dvh; .site-id { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: var(--size-8); & img { object-fit: cover; max-width: var(--size-20); } } .tagline { color: var(--color-complementary); & strong { color: var(--color-add180); margin-inline: var(--size-2); } } } #home-blurb { flex: 0 1 0; display: flex; flex-flow: column nowrap; text-wrap: balance; gap: var(--size-5); padding: var(--size-8); margin: var(--spacing-panes) auto; border-radius: var(--shape-corner-m); .blurb { display: flex; flex-flow: column nowrap; text-wrap: balance; gap: var(--size-5); padding: var(--size-8); border-radius: var(--shape-corner-xl); } } .home-page-content { margin: 0 var(--spacing-panes); padding: 0 var(--spacing-panes); border-radius: var(--shape-corner-m); background-color: var(--color-surface-dim); display: flex; flex-flow: column nowrap; align-items: flex-start; padding-bottom: var(--size-8); & li { display: inline-flex; flex-flow: row wrap; padding-right: var(--spacing-panes); &::before { display: none; } } } .home-buttons-container { display: flex; flex-flow: row wrap; gap: var(--size-3); margin: var(--size-16) auto; .home-buttons { flex: 1 1 auto; display: flex; flex-flow: column nowrap; gap: var(--size-5); padding: var(--size-5); margin: var(--size-5); & h3 { margin-block: var(--size-3) var(--size-5); } .button, .button span { flex: 0 1 auto; min-width: fit-content; } } }}@media screen and (max-width:599px){#home-page{.site-id svg, .site-id img { display: none; }}}.most-recently-updated-pages{min-width:100%;border:1px solid var(--color-outline-variant);margin-block:var(--size-16)var(--size-1);overflow-x:auto;& caption { margin-bottom: var(--spacing-panes); } & tbody { & tr { color: var(--color-on-surface-variant); &:nth-child(even) { background: var(--color-surface-container-lowest); } &:nth-child(odd) { background: var(--color-surface-container-low); } } } & td, & th { padding: var(--size-1) var(--size-2); border: 1px solid var(--color-outline-variant); } & th { background: var(--color-surface); text-align: left; padding: var(--size-3); color: var(--color-on-surface); font-family: var(--typescale-title-large-font); font-size: var(--typescale-title-large-size); line-height: var(--typescale-title-large-line-height); font-weight: var(--typescale-title-large-weight); }}#searchbox{position:relative;display:flex;flex-flow:column nowrap;align-self:stretch;&:has(#searchResults:not(:empty)) { .search.bar { &::before { border-bottom:1px solid var(--color-outline-variant); border-radius:var(--shape-corner-xl-top); box-shadow:var(--elevation0); } } } #searchResults { background:var(--color-surface-container-high); border-radius:var(--shape-corner-xl-bottom); & li { margin-left:unset; position:relative; min-width:fit-content; color:var(--color-on-surface); padding:var(--size-4); &:active { background:var(--color-primary-container); } &::before { display:none; } } & a { position:absolute; inset:0; } .focus,& li:hover { color:var(--color-on-tertiary-container); background:var(--color-tertiary-container); } }}#page-sitemap{padding:unset;margin:unset;max-width:100%;overflow-x:auto;.table-sitemap { width: 100%; background: var(--color-surface-container); padding: var(--size-1); & td, & th { padding: var(--size-2) var(--size-4); } & th { background: var(--color-surface-container-lowest); border-bottom: var(--color-outline-variant); text-align: left; color: var(--color-on-surface); font-family: var(--typescale-title-medium-font); font-size: var(--typescale-title-medium-size); line-height: var(--typescale-title-medium-line-height); font-weight: var(--typescale-title-medium-weight); } & tr:nth-of-type(2n) { background: var(--color-surface-container-low); } }}@media(max-width:599px){th{display:none}td{display:grid;grid-template-columns:15ch auto;gap:var(--size-4);padding:var(--size-4)var(--size-8);&:first-child { padding-top:var(--size-16); } &:last-child { padding-bottom:var(--size-16); } &::before { font-weight:var(--typeface-weight-bold); text-transform:capitalize; } &:nth-of-type(1) { display:none; } &:nth-of-type(2)::before { content:"title"; } &:nth-of-type(3)::before { content:"link"; } &:nth-of-type(4)::before { content:"date created"; } &:nth-of-type(5)::before { content:"last modified"; } &:nth-of-type(6)::before { content:"kind"; } &:nth-of-type(7)::before { content:"type"; } &:nth-of-type(8)::before { content:"layout"; }}}