<!--
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 .alpha;
}
-->
<h1 class="giga">Heading Giga</h1>
<h1 class="mega">Heading Mega</h1>
<h1 class="alpha">Heading Alpha</h1>
<h2 class="beta">Heading Beta</h2>
<h3 class="gamma">Heading Gamma</h3>
<h4 class="delta">Heading Delta</h4>
<h5 class="epsilon">Heading Epsilon</h5>
<h6 class="zeta">Heading Zeta</h6>

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

// Modular Scale Values
// http://typecast.com/blog/contrast-through-scale
$tera: 117 !default; // 117 = 18 × 6.5
$giga: 90 !default; // 90 = 18 × 5
$mega: 72 !default; // 72 = 18 × 4
$alpha: 60 !default; // 60 = 18 × 3.3333
$beta: 48 !default; // 48 = 18 × 2.6667
$gamma: 36 !default; // 36 = 18 × 2
$delta: 24 !default; // 24 = 18 × 1.3333
$epsilon: 21 !default; // 21 = 18 × 1.1667
$zeta: 18 !default; // 18 = 18 × 1

// typscale unit
$type-scale-unit-value: rem !default;

// $Function $Context Calculator
// -------------------------------------//
// divide a given font-size by base font-size & return a relative value

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

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

@function measure-margin($scale, $measure, $value) {
	@return ($measure/$scale)#{$value};
}

// $Mixin $Type-Scale
// -------------------------------------//

@mixin type-scale($scale, $base, $value, $measure:"") {

	@if $value == rem {
		font-size: $scale#{px};
	}

	font-size: context-calc($scale, $base, $value);

	@if $measure != "" {

		@if $value == rem {
			margin-bottom: measure-margin($scale, $measure, $value: px);
		}

		margin-bottom: measure-margin($scale, $measure, $value);
	}
}

// Extend included classes on any element of your
// choosing for adjusting type based on the scale
// provided.
// Special Props to Harry Roberts for this trick.

// For example:

// <h6 class="giga">Awesome Headline</h6>
// <p class="tera">a story about a dude</p>

// Our Type Scale is as follows with px fallbacks
// for IE 6-8 as they do not understand REM units.
//
// 18, 21, 24, 36, 48, 60, 72, 90, 117

// styles for all headings, in the style of @csswizardry
%hN {
	text-rendering: optimizeLegibility; // voodoo to enable ligatures and kerning
	line-height: 1; // this fixes huge spaces when a heading wraps onto two lines
	margin-top: 0;
}

// Multi-dimensional array, where:
// the first value is the name of the class
// and the second value is the variable for the size
$sizes: tera $tera, giga $giga, mega $mega, alpha $alpha, beta $beta, gamma $gamma, delta $delta, epsilon $epsilon, zeta $zeta;

// Sass loop to associate h1-h6 tags with their appropriate greek
// heading based on a modular scale.
// for each size in the scale, create a class
@each $size in $sizes {
	.#{nth($size, 1)} {
		@include type-scale(nth($size, 2), $font-base, '#{$type-scale-unit-value}', $measure);
	}
}

// associate h1-h6 tags with their appropriate greek heading
h1 {
	@extend .alpha;
	@extend %hN;
}

h2 {
	@extend .beta;
	@extend %hN;
}

h3 {
	@extend .gamma;
	@extend %hN;
}

h4 {
	@extend .delta;
	@extend %hN;
}

h5 {
	@extend .epsilon;
	@extend %hN;
}

h6 {
	@extend .zeta;
	@extend %hN;
}