typography

////////////////////////
// TYPOGRAPHY
////////////////////////

$base-font-size: 14px
$base-line-height: 22px
$rhythm-unit: 'rem'
$rem-with-px-fallback: true


$arial: Arial, Helvetica, sans-serif
$sans-serif-small: 'Helvetica', Arial, sans-serif
$sans-serif-large: Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif
$sans-serif-arial-helvetica: Arial, Helvetica, sans-serif
$calibri-candara: Calibri, Candara, Arial, Helvetica, sans-serif
$serif-small: Garamond, Perpetua, 'Times New Roman', serif
$serif-large: Georgia, Baskerville, Palatino, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif
$modern-myriad: 'Segoe UI', 'Myriad Pro', Myriad, Arial, Helvetica, sans-serif
$lucida: 'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Grande', Verdana, Geneva, sans-serif
$impact: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', sans-serif
$mono: Consolas, Monaco, 'Courier New', Courier, monospace, sans-serif
$inder: 'Inder', sans-serif

/* Mediacurrent Glyph Font */
+font-face ("mediacurrentregular", font-files("mediacurrent-regular-webfont.otf","mediacurrent-regular-webfont.eot","mediacurrent-regular-webfont.woff","mediacurrent-regular-webfont.ttf","mediacurrent-regular-webfont.svg"))
$mediacurrent: "mediacurrentregular", sans-serif

/* Dosis Font */
+font-face("Dosis Extra Light", font-files("dosis-extralight.otf","dosis-extralight.svg","dosis-extralight.ttf","dosis-extralight.woff","dosis-extralight.eot"))
+font-face("Dosis Light", font-files("dosis-light.otf","dosis-light.svg","dosis-light.ttf","dosis-light.woff","dosis-light.eot"))
+font-face("Dosis Medium", font-files("dosis-medium.otf","dosis-medium.svg","dosis-medium.ttf","dosis-medium.woff","dosis-medium.eot"))
+font-face("Dosis Book", font-files("dosis-book.otf","dosis-book.woff.svg","dosis-book.ttf","dosis-book.woff","dosis-book.eot"))
+font-face("Dosis Semi Bold", font-files("dosis-semibold.otf","dosis-semibold.svg","dosis-semibold.ttf","dosis-semibold.woff","dosis-semibold.eot"))
+font-face("Dosis Bold", font-files("dosis-bold.otf","dosis-bold.svg","dosis-bold.ttf","dosis-bold.woff","dosis-bold.eot"))
+font-face("Dosis Extra Bold", font-files("dosis-extrabold.otf","dosis-extrabold.svg","dosis-extrabold.ttf","dosis-extrabold.woff","dosis-extrabold.eot"))

$dosis: "Dosis Book", $arial
$dosis-medium: "Dosis Medium", $arial
$dosis-semibold: "Dosis Semi Bold", $arial


@mixin dosis
  font-family: $dosis
  font-style: normal
  letter-spacing: 1px


@mixin dosis-medium
  font-family: $dosis-medium
  font-style: normal

@mixin dosis-semibold
  font-family: $dosis-semibold
  font-style: normal


@mixin thick
  font-weight: bold
@mixin thin
  font-weight: normal
@mixin italic
  font-style: italic

////////////////////////////////////
@mixin header1
  font-weight: normal
  color: $secondary-color
  margin-left: 10%
  @include adjust-font-size-to($base-font-size * 2.58, $lines: 4)
  @include leader(1.1, 16px)
  @include trailer(0.8, 16px)
  +thick
  color: #444444


@mixin header2
  color: $secondary-color
  +adjust-font-size-to(54px, 1.3)
  text-transform: uppercase
  font-family: $dosis
  font-weight: normal
  margin: 0
  +leader(0.8, 16px)
  +trailer(0.5, 16px)
  +thick

@mixin header3
  //24px
  +adjust-font-size-to(30px, 1.3)
  +leader(0.6, 16px)
  +trailer(0.6, 16px)
  +thin
  color: $graydark
  font-family: $dosis-semibold

@mixin header4
  // 22px
  +adjust-font-size-to(21px, 1.3)
  +leader(0.6, 16px)
  +trailer(0.4, 16px)

@mixin header5
  // 18px
  +adjust-font-size-to($base-font-size * 1.5, 1.3)
  +leader(0, 16px)
  +trailer(0.4, 16px)

@mixin header6
  // 14px
  +adjust-font-size-to($base-font-size * 1.2, 1.3)
  +leader(0.6, 16px)
  +trailer(0.4, 16px)
  +thin
  font-style: italic