pico/scss/content/_typography.scss

/**
 * Typography
 */


// Reboot
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.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;
}

// 1. Remove the border on images inside links in IE 10.
// 2. Responsive by default
img {
  max-width: 100%; // 2
  height: auto; // 2
  border-style: none; // 1
}
svg,
img {
  vertical-align: text-bottom;
}


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

address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-top: 0;
  margin-bottom: $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;
  transition:
    background-color $transition,
    color $transition,
    text-decoration $transition,
    box-shadow $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);

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

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

// Link .contrast
@if $enable-classes {
  a.contrast:not([role="button"]) {
    box-shadow: inset 0 -.33rem 0 var(--contrast-border);
    color: var(--contrast);

    &: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: $spacing-typography;
  font-weight: $heading-weight;
}

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

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

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

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

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

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

// Increase headings font size inside <header>
header {
  h1 {
    font-size: 2rem*1.5;
  }

  h2 {
    font-size: 1.75rem*1.5;
  }

  h3 {
    font-size: 1.5rem*1.5;
  }

  h4 {
    font-size: 1.25rem*1.5;
  }

  h5 {
    font-size: 1.125rem*1.5;
  }

  h6 {
    font-size: 1rem*1.5;
  }
}

// Multi-level heading
hgroup {
  margin-bottom: $spacing-typography;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6{
    margin-bottom: 0;
  }
  > *:last-child {
    color: var(--muted-text);
    font-size: 1.125rem;
    font-weight: normal;
  }
}

// Paragraphs
p {
  margin-bottom: $spacing-typography/2;
}

// 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: $spacing-typography;

  li {
    margin-bottom: $spacing-typography/2;
  }
}

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: ($spacing-typography*2) 0;
  margin-right: -$spacing-gutter;
  margin-left: -$spacing-gutter;
  padding: $spacing-gutter;
  border-left: .25rem solid var(--muted-border);

  @if map-get($breakpoints, "sm") {
    @media (min-width: map-get($breakpoints, "sm")) {
      margin-right: 0;
      margin-left: 0;
    }
  }

  footer {
    margin-top: $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);
}