<!--
Custom header classes. These classes can be used on various elements
of your choosing. Classes depicted below are strictly for example
purposes and not a requirement.

If you'd like to manipulate the size of other typographic elements,
feel free to include the Sass '@extend' with your selector.
For example…

p {
	@extend .typl8-alpha;
}
-->
<h1 class="typl8-giga">Heading Giga</h1>
<h1 class="typl8-mega">Heading Mega</h1>
<h1 class="typl8-alpha">Heading Alpha</h1>
<h2 class="typl8-beta">Heading Beta</h2>
<h3 class="typl8-gamma">Heading Gamma</h3>
<h4 class="typl8-delta">Heading Delta</h4>
<h5 class="typl8-epsilon">Heading Epsilon</h5>
<h6 class="typl8-zeta">Heading Zeta</h6>

$typl8-measure: $typl8-font-base * $typl8-line-height;

// $Typescale
// -------------------------------------//
// Greek heading names and scale using base font-size
//
// typl8-tera                    117 = 18 × 6.5
// typl8-giga                     90 = 18 × 5
// typl8-mega                     72 = 18 × 4
// typl8-alpha                    60 = 18 × 3.3333
// typl8-beta                     48 = 18 × 2.6667
// typl8-gamma                    36 = 18 × 2
// typl8-delta                    24 = 18 × 1.3333
// typl8-epsilon                  21 = 18 × 1.1667
// typl8-zeta                     18 = 18 × 1

$typl8-scale: (
  typl8-tera: 117,
  typl8-giga: 90,
  typl8-mega: 72,
  typl8-alpha: 60,
  typl8-beta: 48,
  typl8-gamma: 36,
  typl8-delta: 24,
  typl8-epsilon: 21,
  typl8-zeta: 18,
) !default;

$typl8-headings: (
  h1: typl8-mega,
  h2: typl8-alpha,
  h3: typl8-beta,
  h4: typl8-gamma,
  h5: typl8-delta,
  h6: typl8-zeta
) !default;

// $Typescale Unit
// -------------------------------------//

$typl8-typescale-unit: rem !default;

// $Context Calculator
// -------------------------------------//
// target / context = result
//
// @example             p { font-size: typl8-context-calc(24, 16, px); }

@function typl8-context-calc($scale, $base, $value) {
	@return ($scale/$base)#{$value};
}

// $Measure-Margin
// -------------------------------------//
// divide 1 unit of measure by given font-size & return relative value

@function typl8-measure-margin($scale, $measure, $value) {
	$pixelValue: $measure/$scale;
	$remValue: $pixelValue * $typl8-font-base;

	@if $value == rem {
		@return $pixelValue#{$value};
	} @else if $value == em {
		@return ($remValue/$scale)#{$value};
	} @else {
		@return $remValue#{$value};
	}
}

// $Typescale Mixin
// -------------------------------------//

@mixin typl8-typescale($scale, $base, $value, $measure:"") {
	@if $value == rem {
		font-size: $scale#{px};
		font-size: typl8-context-calc($scale, $base, $value);
	} @else if $value == em {
		font-size: typl8-context-calc($scale, $base, $value);
	} @else {
		font-size: $scale#{px};
	}

	@if $measure != "" {
		@if $value == rem {
			margin-bottom: typl8-measure-margin($scale, $measure, $value: px);
			margin-bottom: typl8-measure-margin($scale, $measure, $value);
		} @else if $value == em {
			margin-bottom: typl8-measure-margin($scale, $measure, $value: em);
		} @else {
			margin-bottom: typl8-measure-margin($scale, $measure, $value);
		}
	}
}

// $Headings Styles
// -------------------------------------//
// Heading scale. Call from actual headings or other elements.
// Special Props to Harry Roberts for this trick.
//
// @markup                      <h6 class="typl8-giga">Awesome Headline</h6>
//                              <p class="typl8-tera">A story about a dude</p>
// optimizeLegibility           Enables ligatures and kerning
// single line height           Fixes large spaces when a heading wraps two lines

%typl8-hN {
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 0;
  color: $typl8-heading-color;
}

@include typl8-headings;
@include typl8-headings-style;