:root{--black-v:22;--black:rgb(var(--black-v) var(--black-v) var(--black-v));--white:rgb(from var(--black) calc(255 - r) calc(255 - g) calc(255 - b));--grey:rgb(from var(--white) calc(r / 2) calc(g / 2) calc(b / 2));--dark:rgb(from var(--grey) calc(r - var(--black-v)) calc(g - var(--black-v)) calc(b - var(--black-v)));--orange:rgb(233 128 22);--darkorange:rgb(from var(--orange) calc(r / 1.5) calc(g / 1.5) calc(b / 1.5));--side:var(--orange);--back:rgb(from var(--white) calc(r - var(--black-v)) calc(g - var(--black-v)) calc(b - var(--black-v)));--code:var(--back);--mainfont:'Source Sans Pro Webfont', Helvetica, Arial, sans-serif;--headfont:'Raleway Webfont', var(--mainfont);--codefont:'Source Code Pro Webfont', var(--mainfont);--content-pad:1em;--content-min:calc(8em + var(--content-pad));--content-max:calc(40em + var(--content-pad));--nav-min:var(--content-min);--nav-max:100%;--header-size:2em;--header-weight:300}.hyphens{hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto}.bidi{unicode-bidi:bidi-override;direction:rtl}.icon,.brand-icon{display:inline-block;margin:0;& svg { height: 1.25em; width: 1.25em; top: 0.2em; position: relative; }}.icon{& svg { stroke: currentColor; stroke-width: 0.1em; fill: none; }}.brand-icon{& svg { fill: currentColor; top: 0.15em; }}a{&:hover { color:var(--darkorange); .brand-icon svg { fill:var(--darkorange); } .icon svg { stroke:var(--darkorange); } }}h1,h2,h3,h4,h5{font-family:var(--headfont)}code,pre{font-family:var(--codefont);font-size:94%;white-space:pre-wrap;background-color:var(--code);border-radius:.2em;padding:0 .2em;overflow:auto}pre{padding:.5em;& code { white-space: pre; padding: 0; }}table{margin:1em auto;border-collapse:collapse;thead { color: white; background-color: var(--grey); th { font-weight: 200; } } tbody { tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.1); } } tr { th, td { padding: .2em; } }}html,body{position:relative}body{margin:0;padding:0;background:var(--back);color:var(--black)}section{width:100%;max-width:var(--content-max);min-width:var(--content-min);margin:0 auto;position:relative;font-family:var(--mainfont);font-weight:400;font-kerning:auto;font-feature-settings:"liga","onum"}aside{position:relative;overflow:hidden;width:100%;min-width:var(--nav-min);background-color:var(--black);nav { min-width: var(--nav-min); text-align: center; li { display: inline-block; &.active a { color: var(--white); background-color: var(--black); } } a { display: inline-block; max-width: var(--nav-max); --padding: 1em; padding: var(--padding); margin: 0 var(--padding); text-decoration: none; text-transform: uppercase; font-family: var(--headfont); font-weight: 400; color: var(--orange); transition: all 0.25s; &:hover { color: var(--black); background-color: var(--orange); } } ul, li { margin: 0; padding: 0; list-style: none; } }}header,footer{font-family:var(--headfont);position:relative;font-size:var(--header-size);font-weight:var(--header-weight);a { color: inherit; text-decoration: none; } .brand-icon svg { width: 0.8em; height: 0.8em; } .icon svg { stroke-width: .05em; width: 1em; height: 1em; }}header{padding:1em 0;h1 { margin: 0; font-weight: var(--header-weight); } div { color: var(--dark); font-size: 0.7em; time, span { margin-right: 1em; } }}footer{padding:.5em 0;display:flex;align-items:baseline;justify-content:space-between;div { display: inline-block; } a { margin: 0 .25em; }}article{position:relative;padding:var(--content-pad);background-color:var(--white);hyphens:auto;min-width:var(--content-min);max-width:var(--content-max);h1, h2, h3 { font-family: var(--headfont); font-weight: var(--header-weight); background-color: var(--black); color: white; a { font-weight: var(--header-weight)+100; } } h1 { --font-size: 2; font-size: calc(1em * var(--font-size)); margin: 1.5em calc(-1em / var(--font-size)) 0.5em calc(-1em / var(--font-size)); padding: calc(.5em / var(--font-size)) calc(1em / var(--font-size)); } h2 { --font-size: 1.5; font-size: calc(1em * var(--font-size)); margin: 1.5em calc(-1em / var(--font-size)) 0.5em calc(-1em / var(--font-size)); padding: calc(.5em / var(--font-size)) calc(1em / var(--font-size)); } h3 { --font-size: 1.17; font-size: calc(1em * var(--font-size)); margin: 1.5em calc(-1em / var(--font-size)) 0.5em calc(-1em / var(--font-size)); padding: calc(.5em / var(--font-size)) calc(1em / var(--font-size)); } h4 { --font-size: 1; font-size: calc(1em * var(--font-size)); margin: 1.5em calc(-1em / var(--font-size)) 0.5em calc(-1em / var(--font-size)); padding: calc(.5em / var(--font-size)) calc(1em / var(--font-size)); } h3, h4 { background-color: var(--grey); } p { margin-top: .2em; } a { text-decoration: none; color: var(--darkorange); &:hover { text-decoration: underline; } } img { max-width: 100%; } ul.pages { margin: 0; padding: 0; list-style: none; li { margin: .5em; list-style: none; a { margin: 1em; } } }}