Add: Headings

[Deleted user]

//
// Styles
// ------

.h1, .h2, .h3, .h4, .h5, .h6,
.giga, .mega, .kilo {
  color: getColor(text, heading);
  font-family: $font-family-headings;
  line-height: 1.25em;

  .small {
    color: getColor(text, secondary);
    font-weight: lighter;
    vertical-align: 0;
  }
}

.h1, .h2, .h3,
.giga, .mega, .kilo {
  margin: 1lh 0 0.25lh;

  small,
  .small { font-size: 65%; }
}

.h4, .h5, .h6 {
  margin: 0.25lh 0;

  small,
  .small { font-size: 75%; }
}

.h1 {
  font-size: $h1-size * .75 + pr;

  @media (--medium) {
    font-size: $h1-size + pr;
  }
}

.h2 {
  font-size: $h2-size * .75 + pr;

  @media (--medium) {
    font-size: $h2-size + pr;
  }
}

.h3 {
  font-size: $h3-size * .75 + pr;

  @media (--medium) {
    font-size: $h3-size + pr;
  }
}

.h4 { font-size: $h4-size + pr; }

.h5 { font-size: $h5-size + pr; }

.h6 { font-size: $h6-size + pr; }



//
// Sizes
// -----

// Giga
.giga {
  font-size: $giga-size * .75 + pr;

  @media (--medium) {
    font-size: $giga-size + pr;
  }
}

// Mega
.mega {
  font-size: $mega-size * .75 + pr;

  @media (--medium) {
    font-size: $mega-size + pr;
  }
}

// Kilo
.kilo {
  font-size: $kilo-size * .75 + pr;

  @media (--medium) {
    font-size: $kilo-size + pr;
  }
}