body{background-color:var(--color-background);color:var(--color-on-background);transition:grid-template .5s allow-discrete;&> header { background-color: var(--color-surface-container-high); .skip-link { background: var(--color-background); } } &> .sidebar { background-color: var(--color-surface-container-highest); border-right: 0.15rem solid var(--color-outline-variant); color: var(--color-on-surface); nav.toc { white-space: nowrap; &> h2 { font-size: 1.2em; margin-bottom: 0; } ul { list-style: none; padding-left: .75em; } > ul { margin-top: 0; padding-left: .5em; } } a { color: var(--color-on-surface); text-decoration: none; &:hover { text-decoration: underline; } } label[for="sidebar-switch"] { opacity: 0; position: absolute; &::before { content: "close sidebar"; } &:has(+ [data-visual-sign="sidebar-switch"]:checked) { &::before { content: "open sidebar"; } } } [data-visual-sign="sidebar-switch"] { appearance: none; aspect-ratio: 1; background-color: transparent; border: none; color: var(--color-on-secondary-container); margin: 0; padding: .2em; position: absolute; right: -.75em; top: 0.75em; min-height: 1.5em; min-width: 1.5em; font-size: 1.5em; & + label { visibility: hidden; } &:checked { &::after { content: "left_panel_open"; } } &::after { content: "left_panel_close"; } &::before { content: ""; background-color: var(--color-surface-container-highest); display: block; height: 1.5em; border-bottom: solid; border-left: none; border-right: solid; border-top: solid; border-radius: 0 .10em .10em 0; border-width: .1em; border-color: var(--color-outline-variant); width: .75em; position: absolute; top: 50%; left: 1.12em; transform: translate(-50%, -50%); } &:hover { &::after { font-size: 125%; color: var(--color-on-secondary); } } &:focus-visible { outline: none; &::after { outline: .1rem solid var(--color-on-primary); outline-offset: .15rem; } } } nav, dl { transition: opacity .3s ease-out, display .3s allow-discrete; overflow: hidden; padding: .2em; } } &> main { h1 { display: inline-flex; align-items: center; margin: 0; } &> .content { padding-bottom: 1em; } &> article > figure { margin: 0 0 1em; } ul { &.section-tree, &.taxonomies { li { list-style: none; } } &> li > blockquote { margin: 0; padding: 0 .5em; &> p { margin: 0; margin-block-end: .5em; } } .sections-list, .pages-list { border-top: 0.35rem solid var(--color-secondary-container); padding-top: 1em; h2 { padding-left: 1.2em; font-size: 1.2em; } } } } &> footer { background-color: var(--color-surface-container); color: var(--color-on-surface-container); height: var(--footer-height); padding: 1.2rem; &> span + span::before { display: inline-block; margin: 0 0.25em; content: "|"; } } &:has([data-visual-sign="sidebar-switch"]:checked) { --sidebar-size: var(--sidebar-size-collapsed); .sidebar { nav, dl { opacity: 0; display: none; } } }}a{color:var(--color-on-secondary-container);text-decoration-color:oklch(from currentcolor l c h/75%)}a[target=_blank]:not(body>footer a){&::after { --icon-size:.75em; content:"open_in_new"/""; display:inline-block; font-family:var(--font-family-icons); font-size:var(--icon-size); position:relative; vertical-align:top; }}:where(a,h1,h2,h3,h4,h5,h6){&:has([data-visual-sign]) { display:inline-flex; align-items:center; [data-visual-sign] { padding-right:.25em; } }}hr{border-color:var(--color-outline-variant)}blockquote{margin:0;padding:.4em .8em;border-left:thick solid var(--color-on-secondary-container);p:last-child { margin-bottom:0; }}kbd{border-color:var(--color-surface-bright);box-shadow:0 2px 2px var(--color-shadow),0 2px 0 0 var(--color-light)inset;background-color:var(--color-surface-container);border-bottom:3px solid var(--color-surface-container-lowest)}code{background-color:var(--color-surface-container)}figure{color:var(--color-on-surface-variant);background-color:var(--color-surface-variant);border-radius:.5rem;margin:.5rem;width:auto;&:has(> img) { width:fit-content; }}h1{color:var(--color-on-primary)}h2,h3,h4,h5,h6{color:var(--color-on-primary-container)}.categories a,.tags a{text-decoration:none}.categories dd,.tags dd{margin-inline-start:.5em}.pagination{&> li { display: inline-block; list-style: none; padding: 1em; } a { text-decoration: none; .active & { font-weight: bold; } .disabled & { color: hsl(from currentcolor h s l / 50%); text-decoration: none; } } &:hover { text-decoration: underline; }}nav.breadcrumb [property=name]{color:var(--color-on-tertiary)}.sections-list ul>li,.pages-list ul>li{list-style:none}nav.primary{position:sticky;top:0;align-self:start;color:var(--color-on-primary-container);background-color:var(--color-primary-container);z-index:10;.brand { color: var(--color-primary); white-space: nowrap; font-size: 1rem; margin: 0; padding: .5em; align-content: center; a:any-link:hover { text-decoration: none; } img, svg { max-height: 2.5em; height: fit-content; padding: 0; margin-left: .5em; margin-right: .5em; vertical-align: middle; } hgroup { display: inline-block; vertical-align: middle; span { color: var(--color-on-primary); text-transform: uppercase; white-space: nowrap; font-size: 1.7em; display: inline-block; } p { text-align: right; font-size: .9em; color: var(--color-on-tertiary); margin: 0; } } }}[aria-haspopup=true] svg{height:1em;vertical-align:middle}[data-visual-sign=calendar]{&::before { position:relative; } &:has(+ time) { vertical-align:middle; font-size:1.1em; color:var(--color-on-primary-container); &+ time { vertical-align:middle; font-size:.9em; color:var(--color-on-primary-container); } }}a:has(+[data-visual-sign=calendar]){display:block}ul.taxonomies{padding:0;li { padding: 1em; .count::before { content: "("; } .count::after { content: ")"; } a { text-decoration: none; font-size: 120%; &:hover { text-decoration: underline; } } }}@media only screen and (width <= 480px){:root{--base-font-size:110%}h1{margin-bottom:.5em}nav{flex-direction:column}body>main h2{margin-top:.5em;margin-bottom:.5em}body>main figure{width:auto}body>main .pages-list{margin:.1rem;padding:.1rem}body>main .sections-list h2,body>main .pages-list h2{padding-left:.5em}}@media only screen and (width <= 1024px){body{&> .sidebar { border-top: 0.15rem solid var(--color-outline-variant); position: relative; max-height: var(--sidebar-size); transition: max-heigh 1s allow-discrete; [data-visual-sign="sidebar-switch"] { left: 50%; right: 50%; top: -0.75em; &:checked { &::after { content: "bottom_panel_open"; } } &::after { content: "bottom_panel_close"; } &::before { border-bottom: none; border-left: solid; border-right: solid; border-top: solid; border-radius: 0 .10em .10em 0; border-width: .1em; border-color: var(--color-outline-variant); height: .75em; width: 1.5em; position: absolute; top: .375em; left: 50%; transform: translate(-50%, -50%); } } }}body>main{padding:.1rem .1rem 0;margin:1rem;margin-bottom:2em}body>header nav.primary{display:flow-root}nav.primary .brand{display:block;text-align:inherit;font-size:1.2rem;margin:.5rem .1rem;padding:0}nav.primary{position:relative}}@media only screen and (width > 1024px){:root{--base-font-size:120%}body:not(.full-space)>.sidebar{position:sticky;top:0;height:100%;margin-bottom:var(--footer-height)}}@media print{.sidebar,#theme-links{display:none}nav.primary .brand img,nav.primary .brand svg,nav.primary .brand hgroup{padding:0%;margin:0%}}