Support apple-system-body only on iOS/iPadOS

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

* {
  padding: 0;
  margin: 0
}
html { scroll-behavior: smooth }
body {
  font-size: 1em;
  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;
  padding: 2em;
}
@supports (-webkit-touch-callout: none) { body { font: -apple-system-body } }
aside {
  clear: both;
  padding: 2em 0;
}
::selection {
  background-color: #e8e8e8;
  color: #00f;
}
.h2 { margin-top: 1em }
@media only screen and (min-width: 500px) {
  body { overflow-x: auto }
  .columned {
    width: max-content;

    .h2:not(:only-child) {
      float: left;
      margin: 0 60px 0 0;

      h2 { max-width: 14.6em }
      .h3,
      li,
      p { max-width: 24em }
      pre { max-width: 25em }
    }

    .h2:first-of-type {
      columns: 3;
      width: 24em;

      h2:empty {display: none}
      h2,
      pre,
      ul,
      p:not(.a) { column-span: all }
      p { break-after: column }
      p.a { break-after: avoid }
    }
  }
}

.a { margin: 0 0.3em }
pre {
  background-color: #eee;
  font-family: courier, monospace;
  font-size: 0.875em;
  max-width: 55em;
  overflow-x: auto;
  padding: 1em;
}
pre[role="img"] { display: none }
blockquote, p, article > div {
  max-width: 45em
}
blockquote {
  border-left: 4px solid #ccc;
  padding-left: 10px;
}
br { display: none }
h1, h2, h3 {
  font-family: "Avenir Next";
  font-weight: 900
}
h1 { font-size: 2em }
h3 {
  font-weight: 600;
  margin-top: 1em
}

h2, h3, a { color: #00f }
[data-title="/index.html"] {
  .h2:nth-of-type(n+2):nth-of-type(-n+4) {
    h2, h3, a { color: #EE0700 }
  }

  .h2:nth-of-type(n+5):nth-of-type(-n+6) {
    h2, h3, a { color: #398557 }
  }

  .h2:nth-of-type(n+7):nth-of-type(-n+9) {
    h2, h3, a { color: #6A5ACD }
  }

  .h2:nth-of-type(10) {
    h2, h3, a { color: #A76905 }
  }

  .h2:nth-of-type(11) {
    h2, h3, a { color: #1D76DB }
  }

  .h2:nth-of-type(n+12):nth-of-type(-n+16) {
    h2, h3, a { color: #D505C6 }
  }

  .h2:nth-of-type(17) {
    h2, h3, a { color: #6A788A }
  }
}

.h2 a {
  display: inline-block;
  padding: 0.25em 0;
  margin: 0.25em 0;
}

header h1 {
  font-size: min(7.5rem, 17vw);
  font-weight: 900;
  letter-spacing: -0.2em;
  line-height: 1em;
}
header h1 a {
  background: repeating-linear-gradient(
    0deg,
    black,
    black 1px,
    white 1px,
    white 2px
  );
  background-clip: text;
  color: transparent;
  display: inline-block;
  padding-right: 0.2em;
  text-decoration: none;
  -webkit-text-stroke: 1px #000;
}

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

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
    color: #fff;
  }
  canvas {
    background-color: #fff;
    border: 1px solid #fff;
  }
  h2, h3, a { color: #5dc1fd }
  [data-title="/index.html"] .h2:nth-of-type(n+7):nth-of-type(-n+9) {
    h2, h3, a { color: #675CFB }
  }
  pre { background-color: #222 }
  header h1 a {
    -webkit-text-stroke: 1px #fff;
  }
}