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: .75rem;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25rem;
}
sup {
  top: -0.5rem;
}

// 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(--spacing-typography);
  color: var(--text);
  font-size: 1rem;
  font-style: normal;
}

// Links
// 1. Remove the gray background on active links in IE 10
a {
  background-color: transparent; // 1
  color: var(--primary);
  text-decoration: none;

  @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 {
    outline: none;
    background-color: var(--primary-focus);
  }
}

// Link .secondary
@if $enable-classes {
  a.secondary {
    color: var(--secondary);
    text-decoration: underline;

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

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

// Link .contrast
@if $enable-classes {
  a.contrast {
    color: var(--contrast);
    text-decoration: underline;

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

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

// Headings
// Because vertical margins can collapse, we avoid `margin-top`
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: var(--spacing-typography);
  font-family: var(--titles-font);
  font-weight: var(--titles-weight);
}

h1 {
  margin-bottom: calc(var(--spacing-typography) * 2);
  color: var(--h1);
  font-size: var(--h1-size);
}

h2 {
  margin-bottom: calc(var(--spacing-typography) * 1.75);
  color: var(--h2);
  font-size: var(--h2-size);
}

h3 {
  margin-bottom: calc(var(--spacing-typography) * 1.5);
  color: var(--h3);
  font-size: var(--h3-size);
}

h4 {
  margin-bottom: calc(var(--spacing-typography) * 1.25);
  color: var(--h4);
  font-size: var(--h4-size);
}

h5 {
  margin-bottom: calc(var(--spacing-typography) * 1.125);
  color: var(--h5);
  font-size: var(--h5-size);
}

h6 {
  color: var(--h6);
  font-size: var(--h6-size);
}

// Margin-top for headings after a typography block
address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  & ~ h1 {
    margin-top: calc(var(--spacing-typography) * 2);
  }

  & ~ h2 {
    margin-top: calc(var(--spacing-typography) * 1.75);
  }

  & ~ h3 {
    margin-top: calc(var(--spacing-typography) * 1.5);
  }

  & ~ h4 {
    margin-top: calc(var(--spacing-typography) * 1.25);
  }

  & ~ h5 {
    margin-top: calc(var(--spacing-typography) * 1.125);
  }

  & ~ h6 {
    margin-top: calc(var(--spacing-typography));
  }
}


// Multi-level heading
hgroup {
  margin-bottom: var(--spacing-typography);

  *{
    margin-bottom: 0;
  }

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

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

// Small
small {
  font-size: 85%;

  @if map-get($breakpoints, "sm") and $enable-responsive-typography {
    @media (min-width: map-get($breakpoints, "sm")) {
      font-size: 83%;
    }
  }

  @if map-get($breakpoints, "md") and $enable-responsive-typography {
    @media (min-width: map-get($breakpoints, "md")) {
      font-size: 81%;
    }
  }

  @if map-get($breakpoints, "lg") and $enable-responsive-typography {
    @media (min-width: map-get($breakpoints, "lg")) {
      font-size: 79%;
    }
  }
  @if map-get($breakpoints, "lg") and $enable-responsive-typography {
    @media (min-width: map-get($breakpoints, "xl")) {
      font-size: 77%;
    }
  }
}

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

  li {
    margin-bottom: calc(var(--spacing-typography) / 4);
  }
}

ul li {
  list-style: square;
}

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

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

  footer {
    margin-top: calc(var(--spacing-typography) / 2);
    color: var(--muted-text);
  }
}

// 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(--valid);
  text-decoration: none;
}

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

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