18F/18f.gsa.gov

View on GitHub
_sass/_core/typography.scss

Summary

Maintainability
Test Coverage
// Typography
// ==========================

body {
  overflow-x: hidden;
  font-size: $base-font-size;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, section {
  line-height: 1.5;
  color: $color-base;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-sans;
  line-height: 1.3;
}

h4 {
  font-size: $h4-font-size;
}

a {
  color: $color-medium;
  cursor: pointer;

  &:hover {
    color: $color-medium-hover;
  }
}

h2 {
  margin-bottom: 1em;
}

.h1 {
  @extend h1;
}

.h2 {
  @extend h2;
}

.h3 {
  @extend h3;
}

.h4 {
  @extend h4;
}

.h5 {
  @extend h5;
}

.h6 {
  @extend h6;
}


.p-line-height {
  line-height: $paragraph-line-height;
}

.p-normal {
  font-weight: $theme-font-weight-normal;
}

.p-bold {
  font-weight: $theme-font-weight-bold;
}

@mixin small-caps {
  color: color('gray-cool-60');
  font-size: $tiny-font-size;
  font-weight: $theme-font-weight-bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

hr {
  background-color: color('gray-cool-10');
  border: 0;
  height: 1px;
  margin-top: $section-margins;
}