pagez

The theme

Pagez's theme, for a page with no CSS of its own. It makes what Markdown writes readable, in the system's fonts, light or dark. A style.css replaces it, and any other CSS beats it, since it's all in one layer.

@layer theme {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* The system's font, 16px on a phone, growing to 18px on a wide screen, in rem so the reader's
     setting scales it. Every font is sized to its x-height, so code matches the text. */
  html {
    color-scheme: light dark;
    font-family: system-ui, sans-serif;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-size-adjust: ex-height from-font;
    line-height: 1.6;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
  }

  /* One column of 60ch, about 85 characters a line, centered, with room at its sides on a phone. Less
     room above it, since the first heading brings its own. */
  main {
    width: min(60ch, 100% - 2.5rem);
    margin: 0 auto;
    padding-block: 2rem 4rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block: 1.5em 0.5em;
    line-height: 1.2;
    text-wrap: balance;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }
  h4,
  h5,
  h6 {
    font-size: 1rem;
  }

  /* A heading linked to by its id isn't flush against the top of the screen. */
  :target {
    scroll-margin-block-start: 2rem;
  }

  img {
    max-width: 100%;
    height: auto;
  }
  figure {
    margin-inline: 0;
  }
  figcaption {
    font-size: 0.875em;
    color: color-mix(in oklch, currentColor 70%, transparent);
  }

  /* So x² and H₂O don't push their lines apart. */
  sub,
  sup {
    line-height: 0;
  }
  dt {
    font-weight: 600;
  }
  summary {
    cursor: pointer;
  }

  /* A highlight and a selection in each scheme's own color, with the text's color kept, since the
     browser's yellow mark glares in dark mode. */
  mark {
    color: inherit;
    background: light-dark(oklch(0.93 0.12 95), oklch(0.45 0.09 85));
  }
  ::selection {
    background: light-dark(oklch(0.88 0.07 250), oklch(0.42 0.1 250));
  }

  /* Tints and rules are mixed from the text's color, so they follow dark mode. */
  code,
  kbd,
  samp,
  pre {
    /* Named, since Chrome's monospace on a Mac is Courier. */
    font-family: ui-monospace, Menlo, Consolas, monospace;
  }
  :not(pre) > code,
  kbd {
    padding: 0.1em 0.3em;
    border-radius: 0.25em;
    background: color-mix(in oklch, currentColor 8%, transparent);
  }
  kbd {
    border: 1px solid color-mix(in oklch, currentColor 25%, transparent);
    border-block-end-width: 2px;
  }
  pre {
    padding: 1rem;
    overflow-x: auto;
    border-radius: 0.375rem;
    background: color-mix(in oklch, currentColor 6%, transparent);
  }

  blockquote {
    margin-inline: 0;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid color-mix(in oklch, currentColor 25%, transparent);
  }

  /* Markdown's column alignment is an align attribute, which any CSS outranks, so a cell that
     has one is left alone. */
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th,
  td {
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid color-mix(in oklch, currentColor 25%, transparent);
  }
  th:not([align]) {
    text-align: start;
  }

  hr {
    margin-block: 2.5rem;
    border: 0;
    border-block-start: 1px solid color-mix(in oklch, currentColor 25%, transparent);
  }
}