:root{--color-000:oklch(0.995 0.005 255);--color-050:oklch(0.945 0.025 255);--color-100:oklch(0.895 0.045 255);--color-200:oklch(0.795 0.085 255);--color-300:oklch(0.695 0.125 255);--color-400:oklch(0.595 0.165 255);--color-500:oklch(0.495 0.165 255);--color-600:oklch(0.395 0.125 255);--color-700:oklch(0.295 0.085 255);--color-800:oklch(0.195 0.045 255);--color-900:oklch(0.095 0.005 255)}@font-face{font-family:suse;src:url(/fonts/SUSE[wght].woff2)}@font-face{font-family:ovo;src:url(/fonts/Ovo-Regular.ttf)}@font-face{font-family:spleen;src:url(/fonts/spleen-32x64.otf)}body{margin:0;min-height:100vh;font-family:SUSE,sans-serif;line-height:1.3;color:var(--color-800);background-color:var(--color-000);> * { max-width: 80rem; margin: 0 auto; }}:is(h1,h2){font-family:Ovo,serif;color:var(--color-600);margin-top:1.5rem;margin-bottom:1rem}:is(h3,h4){font-family:Ovo,serif;color:var(--color-700);margin-top:1.25rem;margin-bottom:1rem}:is(h5,h6){font-family:Ovo,serif;color:var(--color-800);margin-top:1rem;margin-bottom:1rem}code{font-family:Spleen,monospace;font-weight:900;letter-spacing:.5px}a{color:inherit;text-decoration:none}ul{padding-left:1.5rem}header{ul { padding: 0.5rem 1rem; list-style-type: none; display: flex; gap: 1rem; margin: 0; } li { margin: auto 0; } li:first-child { margin-right: auto; font-size: 2rem; font-weight: 300; color: var(--color-700); filter: drop-shadow(0px 0px 1.5px var(--color-700)); &:hover { scale: 1.03; filter: drop-shadow(0px 0px 2px var(--color-700)); transition: 200ms; } a::before { content: ""; background-color: var(--color-700); mask-image: url(/images/logo.svg); display: inline-block; width: 2.5rem; height: 2.5rem; margin-right: 0.5rem; vertical-align: text-bottom; } } li:nth-child(n + 2) a { font-weight: 900; text-transform: uppercase; padding: 0.125rem 0.375rem; color: var(--color-000); background-color: var(--color-700); border: 0.125rem solid var(--color-700); border-radius: 0.25rem; &:is(:hover, :focus, :active) { color: var(--color-700); background-color: var(--color-000); } }}footer{position:sticky;top:100vh;font-size:.75rem;text-align:center;line-height:.5;padding-block:1.5rem;a { text-decoration: underline; } opacity: 0.3}footer::before{content:"";height:1rem;display:block;background-color:var(--color-800);mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=".5rem" height=".5rem" viewBox="0 0 7 7"><path d="M0,7 l7,-7 M-1,1 l2,-2 M6,8 l2,-2" stroke="black" stroke-width="1"/></svg>');margin-bottom:1.5rem}main{display:grid;column-gap:1rem;grid-template-areas:"title" "article" "aside";> * { min-width: 0; } a { text-decoration: underline dashed; } a:is(:hover, :focus, :active) { text-decoration: underline; } h1 { grid-area: title; padding: 2rem 1rem; margin: 0; font-size: 3rem; font-weight: 300; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=".5rem" height=".5rem" viewBox="0 0 15 15"><circle cx="7" cy="7" r="1" stroke="lightgray" stroke-width="2"/></svg>'); } article { grid-area: article; padding: 0 1rem; p { text-align: justify; } .highlight pre { border: 1px solid var(--color-200); border-radius: 0.25rem; box-shadow: 0.25rem 0.25rem 0px var(--color-050); } .highlight code { display: grid; padding: 0.5rem; backdrop-filter: brightness(1.05); overflow-x: scroll; } } aside { grid-area: aside; padding: 0 1rem; top: 1rem; align-self: start; ul { list-style-type: none; } nav { border-left: 1px solid lightgray; } }}@media(width < 60rem){main{grid-template-columns:1fr;grid-template-areas:"title" "aside" "article";h1 { padding-right: 1rem; } aside { position: static; }}}@media(width >= 60rem){main{grid-template-columns:1fr 20rem;grid-template-areas:"title   title" "article aside";h1 { padding-right: 25rem; } aside { position: sticky; }}}