

/*  |---------------| Mobile First |---------------|  */
@media screen and (max-width: $at_desktop ) {	
  body {
	$viewPortHeight: $golden * 1.618vmin !global;
	
  }
}


/*  |---------------| Desktop |---------------|  */
@media screen and (min-width: $at_desktop ) {	
  body {
    $viewPortHeight: $golden * 0.618vmin !global;
	
  } 
}

/*  |---------------| The Typographic Scale |---------------|  */

/* Typography metrics & leading */
	$lineHeight: $golden;
	
/* Type Ratio */
$type10:	100 / $golden;			
$type9:		100 - $type10;
$type8:		$type9 / $golden;
$type7:		$type9 - $type8;
$type6:		$type7 / $golden;
$type5:		$type7 - $type6;
$type4:		$type5 / $golden;
$type3:		$type5 - $type4;
$type2:		$type3 / $golden;			
$type1:		$type3 - $type2;

$h1: $type5 * $viewPortHeight;
$h2: $type4 * $viewPortHeight;
$h3: $type3 * $viewPortHeight;
$h4: $type2 * $viewPortHeight;
$h5: $type1 * $viewPortHeight;
$h6: $type1 * $viewPortHeight;


/*  |---------------| The Calculation of the Edge Cases |---------------|  */

/// Inspired by CSS-Tricks at https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes/ - fixed it by adding interpolation everywhere
/// @param {Number}   $golden-font-size  - Golden ratio based font size in vmin
/// @param {Number}   $min        		 - Minimum font size (px)
/// @param {Number}   $max         		 - Maximum font size (px)
/// @param {Number}   $golden-unitless   - Unitless golden ratio based font size

@mixin golden-font($golden-font-size, $min, $max, $golden-unitless) {

  $min-breakpoint: #{$min} / #{$golden-unitless} * 100;
  
  @media (max-height: #{$min-breakpoint}) {   
    font-size: #{$min};
  }
  @media (max-width: #{$min-breakpoint}) {
    font-size: #{$min};
  }
  @media (max-width: #{$min-breakpoint}) and (max-height: #{$min-breakpoint}) {
    font-size: #{$min};
  }
  
  @if $max {
    $max-breakpoint: #{$max} / #{$golden-unitless} * 100;
    
     @media (max-width: #{$min-breakpoint}) and (max-height: #{$min-breakpoint}) {
      font-size: #{$max};
    }
  }
  
  font-size: #{$golden-font-size};
}


/// Taken from https://css-tricks.com/snippets/sass/strip-unit-function/ 
/// Remove the unit of a length
/// @param  {Number} $number 		- Number to remove unit from
/// @return {Number} 				- unitless number


@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

// Unitless versions of our golden-ratio based headings to use them in the calculation

$unitless-h1: strip-unit($h1);
$unitless-h2: strip-unit($h2);
$unitless-h3: strip-unit($h3);
$unitless-h4: strip-unit($h4);
$unitless-h5: strip-unit($h5);
$unitless-h6: strip-unit($h6); 


// We simply add the golden-ratio based headings with and without headings plus minimum and maximum font-sizes for each heading. You can change the max and min values.

h1 { @include golden-font(#{$h1}, 36px, 48px, #{$unitless-h1}); }
h2 { @include golden-font(#{$h2}, 24px, 36px, #{$unitless-h2}); }
h3 { @include golden-font(#{$h3}, 16px, 24px, #{$unitless-h3}); }
h4 { @include golden-font(#{$h4}, 12px, 16px, #{$unitless-h4}); }
h5 { @include golden-font(#{$h5}, 12px, 16px, #{$unitless-h5}); }
h6 { @include golden-font(#{$h6}, 12px, 16px, #{$unitless-h6}); }
p, li, dt, dd, table, form { @include golden-font(#{$h3}, 16px, 24px, #{$unitless-h3});  }

