_typography.sass

// --- this doesn't really belong here ---

$text-color: black

// ---------------------------------------


// variables
$headline-font-family: "Helvetica", "Arial", sans-serif
$fliesstext-font-family: "Georgia", serif

$small-fliesstext-font-size: 11px
$default-fliesstext-font-size: 13px
$big-fliesstext-font-size: 15px

$small-headline-font-size: 17px
$default-headline-font-size: 18px
$big-headline-font-size: 25px
$gigantic-headline-font-size: 36px


// mixins
@mixin headline-text($font-size: $default-headline-font-size, $line-height-factor: 1.2, $font-color: $text-color)
  font-family: $headline-font-family
  font-weight: bold
  color: $font-color
  font-size: $font-size
  line-height: $font-size * $line-height-factor

@mixin fliesstext($font-size: $default-fliesstext-font-size, $line-height-factor: 1.4, $font-color: $text-color)
  font-family: $fliesstext-font-family
  color: $font-color
  font-size: $font-size
  line-height: $font-size * $line-height-factor



// placeholder selectors
%f-gigantic-headline
  +headline-text($gigantic-headline-font-size)
%f-big-headline
  +headline-text($big-headline-font-size)
%f-default-headline
  +headline-text($default-headline-font-size)
%f-small-headline
  +headline-text($small-headline-font-size)

%f-big-fliesstext
  +fliesstext($big-fliesstext-font-size)
%f-default-fliesstext
  +fliesstext($default-fliesstext-font-size)
%f-small-fliesstext
  +fliesstext($small-fliesstext-font-size)