path: root/style.css

/* Taken from https://tug.org/~mseven/style.css */

:root {
  --color-light:hsl(32, 98%, 92%);
  --color-light-semi:hsl(32, 35%, 65%);
  --color-light-faded:hsl(32, 20%, 40%);
  --color-dark:hsl(32, 80%, 8%);
  --color-dark-semi:hsl(32, 35%, 28%);
  --color-dark-faded:hsl(32, 20%, 60%);
  --color-blue:hsl(213, 90%, 33%);
  --color-purple:hsl(280, 90%, 37%);
  --color-light-blue:hsl(213, 85%, 75%);
  --color-light-purple:hsl(280, 84%, 75%);
  --heading-ratio:0.7071067811865476;
  --heading-base:2.5rem;
  --linespread:1.3;
  --margin-big:1rem;
  --margin-small:0.5rem;
  --base-font-size:1.125rem;
  --page-margin:15px;
  --max-page-width:55rem;
  --margin-width:calc((100vw  - var(--max-page-width)) / 2)
}
@media (max-width:55rem) {
  :root {
    --margin-width:var(--page-margin)
  }
}
:root {
  --color-background:var(--color-light);
  --color-text:var(--color-dark);
  --color-link:var(--color-blue);
  --color-link-followed:var(--color-purple);
  --color-faded:var(--color-dark-faded);
  --color-semi:var(--color-dark-semi)
}
@media (prefers-color-scheme:dark) {
  :root {
    --color-background:var(--color-dark);
    --color-text:var(--color-light);
    --color-link:var(--color-light-blue);
    --color-link-followed:var(--color-light-purple);
    --color-faded:var(--color-light-faded);
    --color-semi:var(--color-light-semi)
  }
  img.dark,
  svg {
    filter:invert(1) hue-rotate(180deg) saturate(140%)!important
  }
}
*,
::after,
::before {
  box-sizing:border-box;
  text-rendering:optimizeLegibility
}
[hidden] {
  display:none!important
}
[hidden][aria-hidden=false] {
  position:absolute;
  display:initial!important;
  clip:rect(0,0,0,0);
  clip-path:inset(100%)
}
html {
  color:var(--color-text);
  background-color:var(--color-background)
}
a:link,
a:visited {
  color:var(--color-link);
  text-decoration:none
}
a:visited {
  color:var(--color-link-followed)
}
a:hover,
code .token.url {
  text-decoration:underline
}
body {
  display:grid;
  justify-items:center;
  margin:var(--page-margin);
  font-size:var(--base-font-size);
  font-family:ui-sans-serif,system-ui,sans-serif;
  line-height:var(--linespread);
  hyphens:auto;
  font-variant-ligatures:common-ligatures contextual;
  font-kerning:normal
}
body * {
  min-width:0
}
:focus-visible {
  border-radius:4px;
  outline:2px solid var(--color-text);
  outline-offset:2px
}
::selection {
  background-color:var(--color-faded)
}
:root,
pre {
  scrollbar-width:thin;
  scrollbar-color:var(--color-faded) var(--color-background)
}
:is(:root,
pre)::-webkit-scrollbar {
  width:8px;
  height:8px
}
:is(:root,
pre)::-webkit-scrollbar-track {
  background:var(--color-background)
}
:is(:root,
pre)::-webkit-scrollbar-thumb {
  background-color:var(--color-faded)
}
h1 {
  text-align:center;
  margin-bottom:0;
  margin-top:1rem;
  font-size:max(var(--heading-base),var(--base-font-size));
}
header {
  padding-bottom:0.28rem;
  border-bottom:1px solid var(--color-faded);
  margin-bottom:var(--margin-big);
}
h2 {
  font-size:max(calc(var(--heading-base)*var(--heading-ratio)),var(--base-font-size))
}
h2,
h3,
h4,
h5 {
  margin-top:var(--margin-big);
  margin-bottom:var(--margin-small)
}
h1,
h2,
h3 {
  font-weight:700
}
h3 {
  font-size:max(calc(var(--heading-base)*var(--heading-ratio)*var(--heading-ratio)),var(--base-font-size))
}
h4,
h5 {
  font-weight:500
}
h4 {
  font-size:max(calc(var(--heading-base)*var(--heading-ratio)*var(--heading-ratio)*var(--heading-ratio)),var(--base-font-size));
  font-style:italic
}
h5 {
  font-size:calc(var(--base-font-size)*.9);
  color:var(--color-semi)
}
:is(h1,
h2,
h3,
h4,
h5)+* {
  margin-top:0
}
p {
  margin-top:var(--margin-small);
  margin-bottom:var(--margin-small);
  position:relative
}
code {
  font-family:ui-monospace,monospace;
  overflow-wrap:anywhere;
  hyphens:none
}
article,
body nav,
footer,
header,
section {
  display:block;
  width:100%;
  max-width:var(--max-page-width)
}
code.block {
  display:block;
  max-width:100%
}
footer {
  margin-top:1em;
  padding-top:0;
  border-top:1px solid var(--color-faded)
}
footer ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin:0;
  padding:0
}
footer ul li {
  display:inline;
  list-style-type:none
}
footer ul li:first-of-type {
  margin-right:auto
}
footer li:not(:last-child):not(:first-child)::after {
  content:" • "
}
nav ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin:0;
  padding:0
}
nav ul li {
  display:inline;
  list-style-type:none
}
nav li:not(:last-child)::after {
  content:" • "
}
abbr {
  text-decoration:none;
  font-variant-caps:all-small-caps;
  font-variant-numeric:oldstyle-nums;
  font-size:1.075em
}
svg {
  width:100%;
  height:fit-content;
  max-height:90vh;
  padding:1rem;
  background-color:hsla(0,0%,100%,0%);
  filter:invert(0) hue-rotate(0deg) saturate(120%);
  transition:all 250ms ease-out
}
img.dark:hover,
svg:hover {
  background-color:hsla(0,0%,100%,100%);
  filter:invert(0) hue-rotate(0deg) saturate(100%)!important;
  transition:all 250ms ease-in
}
pre {
  max-width:calc(100vw - var(--page-margin)*2);
  overflow-x:auto;
  hyphens:none;
  margin:calc(2*var(--margin-small))0
}
pre.scroll {
  overflow-y:auto;
  max-height:90vh
}
th {
  text-align:right;
  font-weight:400
}
thead th {
  font-weight:700
}
td,
th {
  padding:0 1ch
}
dd {
  margin-bottom:var(--margin-small)
}
/*
li {
  margin-bottom:var(--margin-small)
}
*/
figure {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column
}
figcaption {
  font-style:italic
}
@media (min-width:70em) {
  span.sidenote {
    float:left;
    font-size:80%;
    text-align:right;
    position:absolute;
    --sidenote-width:calc(var(--margin-width) - 1rem - var(--page-margin));
    width:var(--sidenote-width);
    left:calc(-1*var(--sidenote-width) - 1rem);
    top:0
  }
}
@media (max-width:70em) {
  span.sidenote {
    display:block;
    font-size:80%;
    margin-top:1em;
    margin-left:3em
  }
}
ul.inline {
  padding-left:0
}
ul.inline>li {
  display:inline;
  list-style-type:none
}
@media (min-width:55rem) {
  ul.inline>li {
    white-space:nowrap
  }
}
:is(ul.inline>li):not(:first-child)::before {
  content:" • "
}
dd>p {
  margin-top:0
}
dl.bold>dt,
summary {
  font-weight:500
}
/* header p {
  font-style:italic;
  position:absolute;
  right:var(--margin-width)
} */
summary {
  list-style-position:outside
}



slot:not([name]) {
  display: none;
}
:host([open]) slot:not([name]) {
  display: revert;
}

summary {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}
:host([open]) summary {
  list-style-type: disclosure-open;
}

nav {
  text-align: center;
}