oatcake.css

@layer oatcake {
  @layer reset, base, elements;

  :host,
  :root {
    --ok-bold-fontweight: 700;
    --ok-border-radius: 7px;
    --ok-color-bg: white;
    --ok-color-block-bg: rgb(248, 249, 250);
    --ok-color-block-fg: rgb(16, 15, 15);
    --ok-color-border: #dee2e6;
    --ok-color-code-bg: rgba(175, 184, 193, 0.2);
    --ok-color-code-fg: rgb(16, 15, 15);
    --ok-color-fg: rgb(16, 15, 15);
    --ok-color-highlight-bg: LemonChiffon;
    --ok-color-highlight-fg: rgb(16, 15, 15);
    --ok-color-summary-marker: oklch(
      from var(--ok-color-block-bg) calc(l - 0.22) c h
    );
    --ok-color-kbd-bg: #fafbfc;
    --ok-color-kbd-border-bottom: rgb(68, 77, 86);
    --ok-color-kbd-fg: rgb(16, 15, 15);
    --ok-color-link-active-fg: #ff0000;
    --ok-color-link-fg: #0000ee;
    --ok-color-link-visited-fg: #551a8b;
    --ok-color-muted-fg: #aaa;
    --ok-font-family-mono:
      ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
      "DejaVu Sans Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji"; /* This is the Monospace Code font stack plus emoji support from https://modernfontstacks.com/ */
    --ok-font-family:
      system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji"; /* This is the System UI font stack plus emoji support from https://modernfontstacks.com/ */
    --ok-font-size-small: 13px;
    --ok-font-size: 16px;
    --ok-line-height: 24px; /* The line-height sets the vertical rhythm. All sizes, margins, paddings, and borders must be added in multiples of this line height. */
  }

  @layer reset {
    /* http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126, License: none (public domain) */
    a,
    abbr,
    acronym,
    address,
    applet,
    article,
    aside,
    audio,
    b,
    big,
    blockquote,
    body,
    canvas,
    caption,
    center,
    cite,
    code,
    dd,
    del,
    details,
    dfn,
    div,
    dl,
    dt,
    em,
    embed,
    fieldset,
    figcaption,
    figure,
    footer,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    header,
    hgroup,
    hr,
    html,
    i,
    iframe,
    img,
    ins,
    kbd,
    label,
    legend,
    li,
    mark,
    menu,
    nav,
    object,
    ol,
    output,
    p,
    pre,
    q,
    ruby,
    s,
    samp,
    section,
    small,
    span,
    strike,
    strong,
    sub,
    summary,
    sup,
    table,
    tbody,
    td,
    tfoot,
    th,
    thead,
    time,
    tr,
    tt,
    u,
    ul,
    var,
    video {
      border: 0;
      font: inherit;
      margin: 0;
      padding: 0;
      vertical-align: baseline;
    }

    /* HTML5 display-role reset for older browsers */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
      display: block;
    }
  }

  /* Fonts, font-sizes and vertical rhythm (line-heights, margins and padding). */
  @layer base {
    :host,
    body {
      font-family: var(--ok-font-family);
      font-size: var(--ok-font-size);
      line-height: var(--ok-line-height);
    }

    aside,
    blockquote,
    details,
    dl,
    figcaption,
    figure,
    footer,
    ol,
    p,
    pre,
    ul {
      margin-bottom: var(--ok-line-height);
    }

    /* Nested lists fix. */
    li dl:not(p ~ dl),
    li ol:not(p ~ ol),
    li ul:not(p ~ ul) {
      margin-bottom: 0;
    }

    /* Fix for list item bullets messing up the vertical rhythm. */
    ul > li {
      list-style-type: "•";
      margin-left: 18px;
      padding-inline-start: 1ch;
    }

    /* Some elements need a bit more breathing space above and below or they feel cramped. */
    audio,
    figure,
    iframe,
    img,
    svg,
    table,
    video {
      margin-bottom: calc(var(--ok-line-height) * 2);
      margin-top: calc(var(--ok-line-height) * 2);
    }

    :is(aside, blockquote) > *:first-child,
    details:has(summary) > :not(summary):first-child,
    details > summary:first-child + *,
    figure > :not(figcaption):first-child,
    figure > figcaption:first-child + * {
      margin-top: 0 !important;
    }

    :is(aside, blockquote, figure) > *:last-child {
      margin-bottom: 0 !important;
    }
  }

  /* Base colors. */
  @layer base {
    :host,
    body {
      background-color: var(--ok-color-bg);
      color: var(--ok-color-fg);
    }
  }

  /* Preventing horizontal overflows. */
  @layer base {
    /* If a single unbroken string (e.g. a URL) is too long to fit on one line then
     * break it across lines rather than letting it overflow. */
    :host,
    body {
      overflow-wrap: break-word;
    }

    /* Don't break long words in <pre>'s: they have horizontal scrollbars instead. */
    pre {
      overflow-wrap: normal;
    }

    /* Prevent line wrapping within certain elements. This does mean that if you
     * put really long text in one of these it will overflow. */
    :is(h1, h2, h3, h4, h5, h6) :is(code, samp),
    kbd {
      white-space: nowrap;
    }
  }

  /* Links. */
  @layer elements {
    /* These are the link colors suggested in the HTML standard:
       https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
    :link,
    mark :link,
    :link mark {
      color: var(--ok-color-link-fg);
    }

    :visited,
    mark :visited,
    :visited mark {
      color: var(--ok-color-link-visited-fg);
    }

    :link:active,
    :visited:active,
    mark :link:active,
    mark :visited:active,
    :link:active mark,
    :visited:active mark {
      color: var(--ok-color-link-active-fg);
    }

    :link,
    :visited {
      text-decoration: underline;
      cursor: pointer;
    }
  }

  /* Underlines and strikethroughts. */
  @layer elements {
    /* These are the suggested underlined elements from the HTML standard:
       https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
    ins,
    u {
      text-decoration: underline;
    }

    /* These are the suggested struck-through elements from the HTML standard:
       https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
    del,
    s,
    strike {
      text-decoration: line-through;
    }
  }

  /* Monospace. */
  @layer elements {
    /* These are the suggested monospaced elements from the HTML standard:
       https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
    code,
    kbd,
    samp,
    tt {
      font-family: var(--ok-font-family-mono);
    }
  }

  /* Bold and italics. */
  @layer elements {
    /* These are the suggested italic elements from the HTML standard:
       https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
    cite,
    dfn,
    em,
    i,
    var {
      font-style: italic;
    }

    /* These are the suggested bold elements from the HTML standard:
       https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
    b,
    strong {
      font-weight: var(--ok-bold-fontweight);
    }

    :is(b, strong) :is(b, strong) {
      font-weight: 900;
    }
  }

  /* Highlights (the <mark> element). */
  @layer elements {
    mark {
      background-color: var(--ok-color-highlight-bg);
      color: var(--ok-color-highlight-fg);
    }
  }

  /* Abbreviations. */
  @layer elements {
    abbr[title],
    acronym[title] {
      cursor: help;
      text-decoration-skip-ink: none;
      text-decoration: dotted underline;
    }
  }

  /* Media (images, video, audio, iframes). */
  @layer elements {
    audio,
    iframe,
    img,
    svg,
    video {
      border-radius: var(--ok-border-radius);
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
    }

    audio {
      height: calc(2 * var(--ok-line-height));
      width: 100%;
    }

    iframe,
    img,
    video {
      border: 1px solid var(--ok-color-border);
      box-sizing: border-box; /* Prevent the border from offsetting the rhythm. */
    }
  }

  /* Horizontal rules. */
  @layer elements {
    hr {
      background: transparent;
      border: 0;
      border-top: 1px solid var(--ok-color-border);
      margin-bottom: calc(var(--ok-line-height) - 1px);
      /* Fix the vertical rhythm breakage introduced by the border-top. */
    }
  }

  /* Subscript and superscript. */
  @layer elements {
    sub,
    sup {
      font-size: var(--ok-font-size-small);
      line-height: 0;
      padding-left: 0.1em;
      position: relative;
      vertical-align: baseline;
    }

    sub {
      top: 0.4em;
    }

    sup {
      top: -0.4em;
    }
  }

  /* Small text. */
  @layer elements {
    small {
      font-size: var(--ok-font-size-small);
      vertical-align: bottom;
      /* Prevent <small>'s from throwing off the vertical rhythm. */
    }
  }

  /* Footers. */
  @layer elements {
    footer {
      color: var(--ok-color-muted-fg);
    }

    /* Remove the color from links, code, highlights and samp elements in
       footers: footers are supposed to be in a muted color style. */
    footer :is(:link, :visited, code, mark, samp) {
      color: inherit;
    }

    /* Remove the background from code and samp elements in footers: footers are
       supposed to be in a muted style, and the code and samp backgrounds stand
       out too much. */
    footer :is(code, samp) {
      background-color: inherit;
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* <kbd> */
  @layer elements {
    kbd {
      background-color: var(--ok-color-kbd-bg);
      border-radius: var(--ok-border-radius);
      border: 1px solid var(--ok-color-border);
      border-bottom-color: var(--ok-color-kbd-border-bottom);
      color: var(--ok-color-kbd-fg);
      font-size: 12px;
      padding: 3px 5px;
      vertical-align: top;
    }

    /* Don't attempt to show nesting of <kbd>'s within <kbd>'s. */
    kbd kbd {
      border: none;
      padding: 0;
    }
  }

  /* Inline quotes (<q>). */
  @layer elements {
    q {
      quotes: "“" "”" "‘" "’";
    }

    q:before {
      content: open-quote;
    }

    q:after {
      content: close-quote;
    }
  }

  /* Block quotes. */
  @layer elements {
    blockquote {
      border-left: 2px solid var(--ok-color-border);
      padding-left: calc(0.5 * var(--ok-line-height) - 2px);
      quotes: none;
    }

    blockquote:before,
    blockquote:after {
      content: "";
      content: none;
    }
  }

  /* Lists. */
  @layer elements {
    ol li {
      margin-left: 30px;
    }
  }

  /* Description lists. */
  @layer elements {
    dl {
      padding-left: calc(0.5 * var(--ok-line-height));
    }

    dt {
      font-weight: var(--ok-bold-fontweight);
    }

    /* We don't generally want a blank line between two <dd>'s that belong to the
     * same <dt>, but we *do* want a blank line after the final <dd> before the
     * next <dt>. */
    dd + dt {
      margin-top: var(--ok-line-height);
    }
  }

  /* Subheadings. */
  @layer elements {
    hgroup:has(h1, h2) p {
      font-size: 19px; /* The same size as an <h2> heading, so subheadings can be used with <h1>'s or <h2>'s. */
    }

    hgroup:has(h3, h4, h5, h6) p {
      font-weight: 300; /* Subheadings of h3-h6 headings use a lighter font-weight instead of a larger font-size. */
    }

    hgroup:has(h1, h2) p :is(code, samp) {
      font-size: 0.8em;
    }

    hgroup:has(h1, h2) p kbd {
      font-size: 0.75em;
      padding-bottom: 1px;
      padding-top: 1px;
    }

    hgroup p ~ :is(h1, h2, h3, h4, h5, h6) {
      padding-top: 0;
    }
  }

  /* Headings. */
  @layer elements {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: var(--ok-bold-fontweight);
      line-height: var(--ok-line-height);
    }

    h1 {
      font-size: 24px;
      padding-bottom: var(--ok-line-height);
      padding-top: calc(var(--ok-line-height) * 2);
    }

    h2 {
      font-size: 19px;
      padding-bottom: var(--ok-line-height);
      padding-top: calc(var(--ok-line-height) * 2);
    }

    h3,
    h4,
    h5,
    h6 {
      font-size: var(--ok-font-size);
      padding-bottom: var(--ok-line-height);
      padding-top: var(--ok-line-height);
    }

    /* At lot of the time you don't want any padding-top before a heading, for
       example when the heading is the first child element of something like a
       blockquote, aside, or disclosure widget, or when the heading immediately
       follows another heading. */
    :is(aside, blockquote, details, figure)
      :is(h1, h2, h3, h4, h5, h6):first-child,
    figcaption + :is(h1, h2, h3, h4, h5, h6),
    summary + :is(h1, h2, h3, h4, h5, h6),
    :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
      padding-top: 0;
    }

    /* Remove the background from code and samp elements in headings. */
    :is(h1, h2, h3, h4, h5, h6) :is(code, samp) {
      background-color: inherit;
      padding: 0;
    }

    :is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
      font-weight: 900;
    }

    /* Surround <code> elements in headings with back-ticks to make them a bit more
       noticeable (the font change alone can be quite subtle). */
    :is(h1, h2, h3, h4, h5, h6) :is(code, samp)::before,
    :is(h1, h2, h3, h4, h5, h6) :is(code, samp)::after {
      content: "`";
      display: inline-block;
      /* This prevents link underlines from going under the ::before and ::after content. */
    }

    /* I've no idea why but when I reduce the font-size of `<mark>`'s within
     * headings it offsets the vertical-rhythm unless I say `line-height:
     * 100%;`.
     * You'd think it'd mean the same thing but `line-height: var(--ok-line-height);`
     * doesn't fix the rhythm.
     * This doesn't seem to be necessary when reducing the font-sizes of other
     * elements like <code>'s and <samp>'s in headings and subheadings. */
    hgroup > :is(h1, h2) ~ p mark,
    :is(h1, h2) mark {
      font-size: 0.8em;
      line-height: 100%;
    }

    :is(h1, h2) kbd {
      font-size: 0.85em;
      padding-bottom: 0;
      padding-top: 0;
    }

    :is(h3, h4, h5, h6) kbd {
      font-size: inherit;
      padding-bottom: 0;
      padding-top: 0;
    }
  }

  /* Figures and captions. */
  @layer elements {
    figcaption {
      text-align: center;
    }

    /* Images, videos, iframe, audio, and tables normally have two lines
       of bottom margin but we only want one line of margin between an
       image, video, iframe, audio or table in a figure and the <figcaption>
       that follows it. Achieve this by applying a negative margin to the
       <figcaption> element. */
    figure :is(audio, iframe, img, svg, video, table) + figcaption {
      margin-top: calc(var(--ok-line-height) * -1);
    }
  }

  /* Code and sample output. */
  @layer elements {
    code,
    samp {
      background-color: var(--ok-color-code-bg);
      border-radius: var(--ok-border-radius);
      color: var(--ok-color-code-fg);
      line-height: 18px;
      padding-left: 5px;
      padding-right: 5px;
    }

    :is(a, kbd, mark) :is(code, samp) {
      background-color: inherit;
      color: inherit;
      padding: 0;
    }

    :is(small, sub, sup) :is(code, samp) {
      line-height: inherit;
    }
  }

  /* Disclosure widgets. */
  @layer elements {
    details,
    summary {
      border-radius: var(--ok-border-radius);
      border: 1px solid var(--ok-color-border);
      padding: var(--ok-line-height) calc(0.5 * var(--ok-line-height));
    }

    details {
      /* Avoid breaking the vertical rhythm by subtracting 2px of vertical space to
         account for the 2px of borders around <details> elements
         (1px top and 1px bottom). */
      margin-top: -2px;
    }

    summary {
      background-color: var(--ok-color-block-bg);
      color: var(--ok-color-block-fg);
      cursor: pointer;
      margin-left: calc(-0.5 * var(--ok-line-height) - 1px);
      margin-right: calc(-0.5 * var(--ok-line-height) - 1px);
      margin-top: calc(-1 * calc(var(--ok-line-height)) - 1px);
      /* Give long text in <summary>'s a horizontal scrollbar instead of letting it overflow. */
      overflow: auto;
      white-space: nowrap;
    }

    summary::marker {
      color: var(--ok-color-summary-marker);
    }

    details:not([open]) > summary {
      /* Align the <summary>'s bottom border with the bottom border of the containing <details>. */
      margin-bottom: -1px;
    }

    details[open] > summary {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: none;
      margin-bottom: var(--ok-line-height);
    }

    details:not(:has(> summary)) {
      background-color: var(--ok-color-block-bg);
      color: var(--ok-color-block-fg);
    }

    details[open]:not(:has(> summary)) *:first-child {
      /* When a details has no <summary> put some whitespace between the top of the
         <details> and the first child-element within.
         Unfortunately this only works if the <details> contents is made up of child
         elements (e.g. <p>'s) rather than just text content. */
      margin-top: var(--ok-line-height);
    }

    details:not([open]):has(> summary) {
      /* A closed <details> with a <summary> doesn't need any padding bottom because
         the <summary> has padding bottom. */
      padding-bottom: 0;
    }

    details[open]:has(> :not(summary)) {
      /* An open <details> with any non-<summary> child elements doesn't need any
       padding bottom because it's assumed that the last child element inside
       the <details> will have its own padding-bottom or margin-bottom. */
      padding-bottom: 0;
    }

    /* Fix headings in summaries. */
    summary :is(h1, h2, h3, h4, h5, h6) {
      display: inline-block;
      padding: 0;
    }

    summary:has(h1) {
      /* I have no idea why but the contents of <summary> elements that contain
         <h1>'s are ending up 27px high even though the heading is only 24px high.
         Correct it by removing 3px from the <summary>'s padding-bottom. This seems
         to work across browsers. */
      padding-bottom: calc(var(--ok-line-height) - 3px);
    }

    summary:has(h2) {
      /* I have no idea why but the contents of <summary> elements that contain
         <h2>'s are ending up 25px high even though the heading is only 24px high.
         Correct it by removing 1px from the <summary>'s padding-bottom. This seems
         to work across browsers. */
      padding-bottom: calc(var(--ok-line-height) - 1px);
    }

    details > *:last-child {
      margin-bottom: var(--ok-line-height);
    }
  }

  /* Preformatted text blocks (including multiline code and sample output blocks). */
  @layer elements {
    pre {
      border-radius: var(--ok-border-radius);
      border: 1px solid var(--ok-color-border);
      overflow: auto;
      padding: var(--ok-line-height) calc(0.5 * var(--ok-line-height) - 1px)
        calc(var(--ok-line-height) - 2px);
    }

    pre,
    pre :is(code, samp) {
      background-color: var(--ok-color-block-bg);
      color: var(--ok-color-block-fg);
    }

    pre :is(code, samp) {
      padding: 0;
      white-space: pre;
    }
  }

  /* Asides. */
  @layer elements {
    aside {
      background-color: var(--ok-color-block-bg);
      color: var(--ok-color-block-fg);
      border-bottom: 1px solid var(--ok-color-border);
      border-top: 1px solid var(--ok-color-border);
      padding: var(--ok-line-height) calc(0.5 * var(--ok-line-height))
        calc(var(--ok-line-height) - 2px);
    }
  }

  /* Tables. */
  @layer elements {
    table {
      border-collapse: collapse;
      width: 100%;
    }

    caption,
    td,
    th {
      line-height: var(--ok-line-height);
      padding-bottom: calc(0.5 * var(--ok-line-height));
      padding-top: calc(0.5 * var(--ok-line-height));
      text-align: left;
    }

    table caption {
      text-align: center;
    }

    :is(td, th):not(:first-child) {
      padding-left: var(--ok-line-height);
    }

    :is(tbody, tfoot) :is(td, th) {
      border-top: 1px solid var(--ok-color-border);
      padding-top: calc(0.5 * var(--ok-line-height) - 1px);
    }

    th {
      font-weight: var(--ok-bold-fontweight);
    }
  }
}