typography.scss

@import "modular-scale";
@import "functions";

$base-font-size: 16px;
$base-line-height: 24px;
$rhythm-unit: "rem";

// Setup vertical rhythm
@include establish-baseline;

// Font families
$base-font-family: "Rokkitt", "Helvetica Neue", Helvetica, Arial, sans-serif;
$alt-font-family: "Domine", Georgia, sans-serif;

// Setup modular-scale
$ms-base: 1em;
$ms-ratio: $fourth;

@mixin type-scale($scale, $map: $type-scale) {
  $font-size: map-fetch($map, $scale font-size);
  $base-lines: map-fetch($map, $scale base-lines);
  @include adjust-font-size-to($font-size, $base-lines);
}

$type-scale: (
  tiny: (
    font-size: ms(-2),
    base-lines: 0.5
  ),
  small: (
    font-size: ms(-1),
    base-lines: 0.75
  ),
  base: (
    font-size: ms(0),
    base-lines: 1
  ),
  medium: (
    font-size: ms(0),
    base-lines: 1
  ),
  large: (
    font-size: ms(1),
    base-lines: 1
  ),
  xlarge: (
    font-size: ms(2),
    base-lines: 1.35
  ),
  xxlarge: (
    font-size: ms(3),
    base-lines: 1.75
  )
);

// Headings
#{h1, h2, h3, h4, h5} {
  color: gray(15%);
  font-family: $base-font-family;
  @include margin-trailer(1);
  @include margin-leader(1);
  font-weight: 700;
}

h1 {
  @include type-scale(xxlarge);
}
h2 {
  @include type-scale(xlarge);
}
h3 {
  @include type-scale(large);
}
h4 {
  @include type-scale(medium);
}
h5 {
  @include type-scale(base);
}
h6 {
  @include type-scale(small);
}
small {
  @include type-scale(small);
}