website/sass/_pico/content/_typography.scss

/**
 * Typography
 */

// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––

// Add the correct font weight in Chrome, Edge, and Safari
b,
strong {
  font-weight: bolder;
}

// Prevent `sub` and `sup` elements from affecting the line height in all browsers
sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

// Pico
// ––––––––––––––––––––

address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical);
  color: var(--color);
  font-style: normal;
  font-weight: var(--font-weight);
  font-size: var(--font-size);
}

// Links
// 1. Remove the gray background on active links in IE 10
a,
[role="link"] {
  --color: var(--primary);
  --background-color: transparent;
  outline: none;
  background-color: var(--background-color); // 1
  color: var(--color);
  text-decoration: var(--text-decoration);

  @if $enable-transitions {
    transition: background-color var(--transition), color var(--transition),
      text-decoration var(--transition), box-shadow var(--transition);
  }

  &:is([aria-current], :hover, :active, :focus) {
    --color: var(--primary-hover);
    --text-decoration: underline;
  }

  &:focus {
    --background-color: var(--primary-focus);
  }

  @if $enable-classes {
    // Secondary
    &.secondary {
      --color: var(--secondary);

      &:is([aria-current], :hover, :active, :focus) {
        --color: var(--secondary-hover);
      }

      &:focus {
        --background-color: var(--secondary-focus);
      }
    }

    // Contrast
    &.contrast {
      --color: var(--contrast);

      &:is([aria-current], :hover, :active, :focus) {
        --color: var(--contrast-hover);
      }

      &:focus {
        --background-color: var(--contrast-focus);
      }
    }
  }
}

// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  //margin-bottom: var(--typography-spacing-vertical);
  margin-bottom: calc(var(--typography-spacing-vertical) * 0.7);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  font-family: var(--font-family);
}

h1 {
  --color: var(--h1-color);
}
h2 {
  --color: var(--h2-color);
}
h3 {
  --color: var(--h3-color);
}
h4 {
  --color: var(--h4-color);
}
h5 {
  --color: var(--h5-color);
}
h6 {
  --color: var(--h6-color);
}

// Margin-top for headings after a typography block
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
  ~ :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--typography-spacing-vertical);
  }
}

// Heading group
@if $enable-classes == false {
  hgroup {
    margin-bottom: var(--typography-spacing-vertical);

    > * {
      margin-bottom: 0;
    }

    > *:last-child {
      --color: var(--muted-color);
      --font-weight: unset;
      font-size: 1rem;
      font-family: unset;
    }
  }
}

@if $enable-classes {
  hgroup,
  .headings {
    margin-bottom: var(--typography-spacing-vertical);

    > * {
      margin-bottom: 0;
    }

    > *:last-child {
      --color: var(--muted-color);
      --font-weight: unset;
      font-size: 1rem;
      font-family: unset;
    }
  }
}

// Paragraphs
p {
  margin-bottom: var(--typography-spacing-vertical);
}

// Small
small {
  font-size: var(--font-size);
}

// Lists
:where(dl, ol, ul) {
  padding-right: 0;
  padding-left: var(--spacing);
  padding-inline-start: var(--spacing);
  padding-inline-end: 0;

  li {
    margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
  }
}

// Margin-top for nested lists
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
:where(dl, ol, ul) {
  :is(dl, ol, ul) {
    margin: 0; // 1
    margin-top: calc(var(--typography-spacing-vertical) * 0.25);
  }
}

ul li {
  list-style: square;
}

// Highlighted text
mark {
  padding: 0.125rem 0.25rem;
  background-color: var(--mark-background-color);
  color: var(--mark-color);
  vertical-align: baseline;
}

// Blockquote
blockquote {
  display: block;
  margin: var(--typography-spacing-vertical) 0;
  padding: var(--spacing);
  border-right: none;
  border-left: 0.25rem solid var(--blockquote-border-color);
  border-inline-start: 0.25rem solid var(--blockquote-border-color);
  border-inline-end: none;

  footer {
    margin-top: calc(var(--typography-spacing-vertical) * 0.5);
    color: var(--blockquote-footer-color);
  }
}

// Abbreviations
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none; // 1
  cursor: help;
}

// Ins
ins {
  color: var(--ins-color);
  text-decoration: none;
}

// del
del {
  color: var(--del-color);
}

// selection
::selection {
  background-color: var(--primary-focus);
}