// // Magic-Stylez - Typo // // if you like to change values, remove the '!default' flag! // // //== Typography // //## Font, line-height, and color for body text, headings, and more. // $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; //** Default monospace fonts for `

`, ``, and ``.
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
// $font-family-base:        $font-family-sans-serif !default;


$font-family-sans-serif:  $readFont;
$font-family-base:        $smallReadFont;


$font-size-base:          15px !default;
$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px

$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5:            $font-size-base !default;
$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px

//** Unit-less `line-height` for use in components like buttons.
$line-height-base:        1.428571429 !default; // 20/14
$line-height-large:         1.33 !default;
$line-height-small:         1.5 !default;


//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed:       floor(($font-size-base * $line-height-base)) !default; // ~20px
$line-height-computed-lg:    floor(($font-size-large * $line-height-large)) !default; // ~20px
$line-height-computed-sm:    floor(($font-size-small * $line-height-small)) !default; // ~20px
$line-height-computed-xs:    floor(($font-size-small * $line-height-small)) !default; // ~20px

//** By default, this inherits from the ``.
// $headings-font-family:    inherit !default;
$headings-font-family:    $bigFont;
$headings-font-weight:    500 !default;
$headings-line-height:    1.1 !default;
$headings-color:          inherit !default;


//== Buttons

$btn-font-weight:                normal !default;


$loud-factor: 1.25;

h1.loud, .h1.loud { font-size: ceil($font-size-h1 * $loud-factor); }
h2.loud, .h2.loud { font-size: ceil($font-size-h2 * $loud-factor); }
h3.loud, .h3.loud { font-size: ceil($font-size-h3 * $loud-factor); }
h4.loud, .h4.loud { font-size: ceil($font-size-h4 * $loud-factor); }
h5.loud, .h5.loud { font-size: ceil($font-size-h5 * $loud-factor); }
h6.loud, .h6.loud { font-size: ceil($font-size-h6 * $loud-factor); }


div, ul, ol, li, p, span {
	&.loud {
		@include sansCondensedThin;
		font-size: ceil($font-size-base * $loud-factor);
	}
	&.highlight {
		@include sansCondensedThin;
		font-weight: 600;
		font-size: ceil($font-size-base * $loud-factor);
	}
}

ul, ol, li, p, span, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	&.brand { color: $brand-color; }
}