Use css font features

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

body {
  font-family: "Times New Roman", serif;
  text-rendering: optimizeLegibility;
  font-variant: historical-ligatures;
  font-feature-settings: "hlig" 1, "dlig" 1, "onum" 1, "zero" 1, "swsh" 1, "kern" 1, "medi" 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 {
    float: left;
    margin: 0 40px;
    height: calc(100vh - 200px);
  }

  .columned h2 {
    width: 14.6em;
  }

  .columned .h3, .columned p {
    width: 22em;
  }

  .columned pre { width: 25em }
}

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: Monaco, monospace;
  font-size: 14px;
  background-color: #eee;
  overflow-x: auto;
}

canvas {
  width: 64px;
  height: 64px;
  display: inline-block;
  background-color: gainsboro;
}

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

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

  a:visited {
    color: #ed6eff;
  }

  pre {
    background-color: #222;
  }
}