Add the system body text

[rbdr/r.bdr.sh] / css / style.css

html {
  scroll-behavior: smooth;
}

body {
  font: -apple-system-body;
  font-family: "Hoefler Text", "Times New Roman", serif;
  font-feature-settings: "liga" 1, "dlig" 1, "pnum" 1;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

@media only screen and (min-width: 500px) {
  body {
    overflow-x: auto;
  }

  .columned {
    height: calc(100vh - 200px);
    width: max-content;
  }

  .columned .h2:not(:only-child) {
    float: left;
    margin: 0 40px;
    height: calc(100vh - 200px);
  }

  .columned .h2:not(:only-child) h2 {
    width: 14.6em;
  }

  .columned .h2:not(:only-child) .h3,
  .columned .h2:not(:only-child) li,
  .columned .h2:not(:only-child) p {
    width: 22em;
  }

  .columned .h2:not(:only-child) pre { width: 25em }
}

.columned .h2:first-of-type pre {
  line-height: 1;
}

blockquote, p { max-width: 45em }
pre { max-width: 55em }
blockquote {
  border-left: 4px solid #ccc;
  padding-left: 10px;
}

h1, h2, h3 { font-weight: normal }
br { display: none }
pre {
  font-family: courier, monospace;
  font-size: 0.875em;
  background-color: #eee;
  overflow-x: auto;
}

canvas {
  width: 64px;
  height: 64px;
  display: inline-block;
  background-color: #000;
  border: 1px solid #000;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background: #000;
  }

  canvas {
    background-color: #fff;
    border: 1px solid #fff;
  }

  a {
    color: #5dc1fd;
    display: inline-block;
    min-height: 48px;
  }

  a:visited {
    color: #ed6eff;
  }

  pre {
    background-color: #222;
  }
}