pico/scss/content/_typography.scss

/**
 * Typography
 */


// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | 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: .75em;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

// Remove the margin on nested lists in Edge 18- and IE
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}


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

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

// Links
// 1. Remove the gray background on active links in IE 10
a {
  --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);
  }

  &:hover,
  &:active,
  &:focus {
    --color: var(--primary-hover);
    --text-decoration: underline;
  }

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

  @if $enable-classes {

    // Secondary
    &.secondary {
      --color: var(--secondary);

      &:hover,
      &:active,
      &:focus {
        --color: var(--secondary-hover);
      }

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

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

      &: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);
  color: var(--color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
}

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
address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  & ~ h1,
  & ~ h2,
  & ~ h3,
  & ~ h4,
  & ~ h5,
  & ~ h6 {
    margin-top: var(--typography-spacing-vertical);
  }
}

// Heading group
hgroup {
  margin-bottom: var(--typography-spacing-vertical);

  > * {
    margin-bottom: 0;
  }

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

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

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

// Lists
ul,
ol {
  padding-left: var(--spacing);

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

ul li {
  list-style: square;
}

// Highlighted text
mark {
  padding: .125rem .25rem;
  background-color: var(--mark-background-color);
  color: var(--mark-color);
  vertical-align: middle;
}

// Blockquote
blockquote {
  display: block;
  margin: var(--typography-spacing-vertical) 0;
  padding: var(--spacing);
  border-left: .25rem solid var(--blockquote-border-color);

  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);
}