blog/src/styles/base/content.css

.content {
   font-family: var(--font-body);
   font-size: var(--layout-responsive-font);
}

.prose {
  @mixin py var(--space-8);
  @mixin typo_body;

  font-size: var(--layout-responsive-font);

  & ::selection {
    color: var(--color-palette-ice-blue);
    background: var(--color-primary)
  }

  & > :first-child,
  & > article > :first-child {
    @mixin mt var(--size-0);
  }

  & > :last-child,
  & > article > :last-child {
    @mixin mb var(--size-0);
  }

  /* === HEADINGS === */
  & h2 {
    @mixin typo_heading-1;
    @mixin mt var(--space-11);
    @mixin mb var(--space-6);
    @mixin pl var(--space-4);
    @mixin border-l var(--size-8), solid, var(--color-text-primary);

    hyphens: auto;
  }

  & h3 {
    @mixin typo_heading-3;
    @mixin mt var(--space-10);
    @mixin mb var(--space-6);
    @mixin py var(--space-2);
    @mixin px var(--space-4);

    hyphens: auto;
    color: var(--color-text-inverse);
    background: var(--color-surface-inverse);
  }

  & h4 {
    @mixin typo_heading-4;
    @mixin mt var(--space-9);
    @mixin mb var(--space-4);
    @mixin py var(--space-2);
    @mixin px var(--space-4);
    @mixin border-y var(--size-6), solid, var(--color-text-secondary);

    hyphens: auto;
    color: var(--color-text-secondary);
  }

  & h5 {
    @mixin typo_heading-5;
    @mixin mt var(--space-9);
    @mixin mb var(--space-4);

    hyphens: auto;
    color: var(--color-text-secondary);

    &::before {
      @mixin pr var(--space-2);

      content: "▼";
    }
  }

  & h6 {
    @mixin typo_heading-6;
    @mixin mt var(--space-8);
    @mixin mb var(--space-2);

    hyphens: auto;
    color: var(--color-text-tertiary);
  }

  /* === BODY TEXT === */

  & p {
    @mixin my var(--space-6);

    hyphens: auto;
    text-align: justify;
  }

  & blockquote {
    @mixin my var(--space-8);
    @mixin py var(--space-4);
    @mixin pl var(--space-6);
    @mixin border-l var(--size-8), solid, var(--color-text-tertiary);

    font-style: italic;
    color: var(--color-text-tertiary);

    & p {
      @mixin ma var(--size-0);

      hyphens: none;
      text-align: left;
    }

    & p + p {
      @mixin mt var(--space-4);
    }
  }

  /* === CODE === */

  & pre {
    @mixin typo_code;
    @mixin my var(--space-8);
    @mixin pa var(--space-6);

    scrollbar-color: var(--color-border-normal) transparent;
    scrollbar-width: thin;

    overflow-x: auto;

    color: var(--color-tertiary);

    background: var(--color-surface-inverse);

    & code {
      padding: 0;
      font-size: inherit;
      color: inherit;
      background: transparent;
    }
  }

  & :not(pre) > code {
    @mixin py var(--size-1);
    @mixin px var(--space-2);

    font-family: var(--font-mono);
    font-size: var(--type--1);
    color: var(--color-tertiary);
    background: var(--color-surface-inverse);
  }

  & kbd {
    @mixin py var(--size-1);
    @mixin px var(--space-2);

    border: var(--size-1) solid var(--color-border-normal);
    border-bottom-width: var(--size-2);

    font-family: var(--font-mono);
    font-size: var(--type--3);
    color: var(--color-text-inverse);
    text-transform: uppercase;

    background: var(--color-surface-inverse);
  }

  & samp {
    @mixin py var(--size-1);
    @mixin px var(--space-2);
    @mixin border-l var(--size-2), solid, var(--color-text-tertiary);

    font-family: var(--font-mono);
    font-size: var(--type--1);
    color: var(--color-text-primary);
    background: var(--color-surface-elevated-2);
  }

  & var {
    font-family: var(--font-mono);
    font-weight: 600;
    font-style: normal;
    color: var(--color-text-secondary);
  }

  /* === LISTS === */

  & ul,
  & ol {
    @mixin my var(--space-6);
  }

  & ul ul,
  & ul ol,
  & ol ol,
  & ol ul {
    @mixin my var(--space-2);
    @mixin pl var(--space-4);
  }

  & li {
    @mixin my var(--space-2);

    list-style-position: outside;
  }

  /* == UNORDERED == */

  & ul {
    @mixin pl var(--space-5);

    list-style: none;

    & > li {
      @mixin pl var(--space-4);
      @mixin ml var(--space-2);
    }
  }

  & ul > li::marker {
    content: "⎊";
  }

  & ul ul > li::marker {
    content: '⋊';
  }

  & ul ul ul > li::marker {
    content: "⸪";
  }

  & ul ul ul ul > li::marker {
    content: "⸭";
  }

  /* == ORDERED == */

  & ol {
    @mixin pl var(--space-8);

    counter-reset: ol-l1;
    contain: style;
    list-style: none;

    & > li {
      @mixin ml var(--space-9);
      @mixin pl var(--space-4);

      counter-increment: ol-l1;

     &::marker {
       content: counter(ol-l1, decimal-leading-zero) '.)';
     }
    }
  }

  & ol ol {
    counter-reset: ol-l2;

    & > li {
      @mixin ml var(--space-7);

      counter-increment: ol-l2;

      &::marker {
        content: counter(ol-l2, lower-alpha) '.)';
      }
    }
  }

  & ol ol ol {
    counter-reset: ol-l3;

    & > li {
      @mixin ml var(--space-7);

      counter-increment: ol-l3;

      &::marker {
        content: counter(ol-l3, upper-roman) '.)';
      }
    }
  }

  & ol ol ol ol {
    counter-reset: ol-l4;

    & > li {
      @mixin ml var(--size-9);

      counter-increment: ol-l4;

      &::marker {
        content: counter(ol-l4, lower-greek) '.)';
      }
    }
  }

  /* === TABLES === */
  & table {
    @mixin my var(--space-9);

    border-collapse: collapse;
    width: 100%;
    border: var(--size-4) solid var(--color-text-primary);

    & th {
      @mixin typo_table-header;
      @mixin py var(--space-2);
      @mixin px var(--space-4);

      border: var(--size-1) solid var(--color-border-strong);
      color: var(--color-text-inverse);
      text-align: center;
      background: var(--color-surface-inverse);
    }

    & td {
      @mixin typo_table-data;
      @mixin pa var(--space-4);

      border: var(--size-1) solid var(--color-border-subtle);
      text-align: center;
    }

    & th,
    & td {
      &:first-child {
        text-align: left;
      }
    }
  }

  & .axes {
    & table {
      & th,
      & td {
        &:first-child {
          width: 10em;
        }

        &:nth-child(2) {
          width: 5em;
        }

        &:nth-child(3) {
          text-align: left;
        }
      }
    }
  }

  & .random {
    & table {
      text-align: left;

      & th,
      & td {
        &:first-child {
          width: 5em;
          text-align: center;
        }
      }
    }
  }

  .elemental-grid {
    & table {
      & td {
        &:first-child {
          @mixin typo_table-header;
          @mixin py var(--space-2);
          @mixin px var(--space-4);

          border: var(--size-1) solid var(--color-border-strong);
          color: var(--color-text-inverse);
          background: var(--color-surface-inverse);
        }
      }
    }
  }

  .theme {
    & table {
      & th,
      & td {
        &:first-child {
          width: 10em;
        }

        &:nth-child(2) {
          width: 50%;
          text-align: left;
        }

        &:nth-child(3) {
          width: calc(50% - 10em)
        }
      }
    }
  }

  .vocabulary {
    & table {
      & td {
        &:first-child {
          width: 10em;
          font-style: italic;
        }

        &:nth-child(2) {
          width: calc(60% - 10em);
        }

        &:nth-child(3) {
          width: 40%;
        }
      }
    }
  }

  /* === DEFINTION LISTS === */
  & dl {
    @mixin my var(--space-3);
  }

  & dt {
    @mixin typo_definition-header;
    @mixin mt var(--space-6);
    @mixin pa var(--space-4);

    color: var(--color-text-inverse);
    background: var(--color-surface-inverse);
  }

  & dd {
    @mixin typo_definition-data;
    @mixin mt var(--space-2);
    @mixin mb var(--space-4);
    @mixin px var(--space-4);
  }

  /* === DETAILS / SUMMARY === */

  /* & details {
    @mixin mr var(--space-8);
    @mixin border-l var(--size-4), solod, var(--color-border-normal);

    &[open] {
      @mixin pb var(--space-4);

      & > summary {
        @mixin mb var(--space-4);
        @mixin border-b var(--size-1), solid, var(--color-border-subtle);
      }
    }
  }

  & summary {
    @mixin typo_label;
    @mixin py var(--space-2);
    @mixin px var(--space-4);

    cursor: pointer;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    list-style: none;

    &::before {
      @mixin pr var(--space-2);

      content: "▶";
    }

    details[open] > &::before {
      content: "▼";
    }

    &:hover {
      color: var(--color-text-primary);
    }
  }

  & details > *:not(summary) {
    @mixin px var(--space-6);
  } */

  & hr {
    @mixin my var(--space-10);

    position: relative;

    overflow: visible;

    height: var(--size-6);
    border: none;

    background: var(--color-text-tertiary);

    &::after {

      @mixin px var(--space-4);

      content: '▼';

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      font-size: var(--type-3);
      line-height: 1;
      color: var(--color-text-tertiary);

      background: var(--color-surface-base);
    }
  }

  /* === FIGURES === */

 /*  & figure {
    @mixin my var(--space-10);

    & img {
      width: 100%;
    }

    & figcaption {
      @mixin typo_fine;
      @mixin mt var(--space-2);
      @mixin py var(--space-2);
      @mixin border-b var(--size-1), solid, var(--color-border-subtle);

      color: var(--color-text-tertiary);
    }
  } */

  /* === INLINE ELEMENTS === */

  & em,
  & i {
    font-style: italic;
  }

  & b,
  & strong {
    font-weight: 900;
  }

  & a {
    position: relative;

    font-weight: 700;
    color: var(--text-color-tertiary);
    text-decoration: underline;
    text-decoration-thickness: var(--space-2);
    text-decoration-skip-ink: auto;
    text-underline-offset: var(--space-2);

    transition:
      color var(--motion-normal) var(--ease-out),
      background var(--motion-normal) var(--ease-out);

    &:hover {
      color: var(--color-text-inverse);
      text-decoration: none;
      background: var(--color-primary);
    }

    &.sidenote-ref {
      scroll-margin-top: calc(var(--layout-header-height) + var(--size-8));
      text-decoration: none;
    }
  }

  &:visited {
    color: var(--color-text-disabled);
  }

  &:focus-visible {
    @mixin focus-ring;
  }

  & mark {
    @mixin px var(--size-1);

    color: var(--color-text-primary);
    background: var(--color-tertiary);
  }

  & small {
    @mixin typo_fine;

    color: var(--color-text-teriary);
  }

  & sub,
  & sup {
    font-size: var(--type--3);
    font-weight: 700;
    color: var(--color-text-secondary);
  }

  & del,
  & s {
    color: var(--color-text-tertiary);
    text-decoration: line-through;
    text-decoration-thickness: var(--space-2);
  }

  & ins {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: var(--space-2);

    background: transparent;
  }

  & abbr[title] {
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-thickness: var(--size-1);
    text-underline-offset: var(--size-2);
  }

  & dfn {
    font-weight: 700;
    font-style: normal;
  }

  /* & cite {
    font-weight: 600;
    font-style: normal;
    color: var(--color-text-secondary);
  } */

  & q {
    font-style: normal;

    &::before {
      content: '»';
    }

    &::after {
      content: '«';
    }
  }

  & time {
    @mixin typo_label;

    color: var(--color-text-tertiary);
  }

  /** LEAD PARAGRAPH */

  & > article {
    & > p:first-of-type {
      font-size: var(--type-1);
      font-weight: 700;
      line-height: var(--leading-1);
      letter-spacing: var(--tracking-1);

      &::first-letter {
        @mixin mr var(--space-2);

        float:left;

        font-family: var(--font-display);
        font-size: var(--type-9);
        line-height: 0.8;
        color: var(--color-primary);

        @supports (initial-letter: 3) {
          @mixin pr var(--space-2);

          float: none;

          margin: 0;

          font-size: inherit;
          line-height: inherit;
          initial-letter: 3;
        }
      }
    }
  }
}