@import "../text-stroke";

// Code below mostly from http://codepen.io/pixelass/pen/gbGZYL

html {
	background: #f5f5f5;
	font-weight: 900;
	font-size: (100%/16)*14;
	font-family: "Armata", sans-serif;
}
h1 {
	@include text-stroke(2, #26a69a);

	color: #f5f5f5 ;
	font-size: 3em;
}
.function {
	@include text-stroke(2, #ff6f00);

	color: #ffe082;
}
.mixin {
	@include text-stroke(3, #cddc39);

	color: #827717;
}
.large {
	font-size: 2em;
	line-height: 1.3;
	div {
		margin: 4px;
	}
}
.symbols {
	@include text-stroke(10, red);

	font-size: 80px;
}

@function _ss-str-replace($string, $search, $replace: "") {
	$index: str-index($string, $search);
	@if $index {
		@return str-slice($string, 1, $index - 1) + $replace + _ss-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
	}
	@return $string;
}

@import url("http://fonts.googleapis.com/css?family=Armata|Atomic+Age|Sigmar+One|Fontdiner+Swanky|Graduate|Luckiest+Guy|Freckle+Face|Iceland|UnifrakturMaguntia|Titan+One|Oregano|Miltonian+Tattoo|Raleway+Dots|Milonga|Pirata+One|Wellfleet|Medula+One|Lato|Roboto|Open Sans");

$font-families: ("Armata", "Medula One", "Atomic Age", "Sigmar One", "Fontdiner Swanky", "Graduate", "Luckiest Guy", "Freckle Face", "Iceland", "UnifrakturMaguntia", "Titan One", "Oregano", "Miltonian Tattoo", "Raleway Dots", "Milonga", "Pirata One", "Wellfleet", "Lato", "Roboto", "Open Sans", "Arial", "Georgia");

@for $i from 1 through length($font-families) {
	$font-family: nth($font-families, $i);
	$classname: _ss-str-replace($font-family, ' ', '-');
	.#{$classname} {
		$deg: (360/length($font-families)*0.9);
		@include text-stroke(max(2, $i%5), hsl($i*$deg, 100%, 50%));

		font-family: $font-family;
		color: hsl($i*$deg - 180, 100%, 50%);
	}
}