@use 'sass:math';
/*!
 *
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.

	.                                      '||            .
  .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....
   ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...||
   ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||
   '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...'
		.. |      ||               ||
		 ''      ''''             ''''      A Typographic Starter Kit

  URL ........... http://typeplate.com
  VERSION ....... 1.1.1
  Github ........ https://github.com/typeplate/typeplate.github.io
  AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
  LICENSE ....... Creative Commmons Attribution 3.0
  LICENSE URL ... http://creativecommons.org/licenses/by/3.0

 .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
 *
 */

// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Variables
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //

// $Variable $BaseType
// -------------------------------------//
//the serif boolean var can be redeclared from another stylesheet. However
//the var must be placed after your @import "typeplate.scss";
$serif-boolean: true !default;

$font-family: if(
  $serif-boolean,
  serif,
  sans-serif
) !default; // Non-font-face font-stack

$font-weight: normal !default;
$line-height: 1.65 !default;
$font-size: 112.5 !default; // percentage value (16 * 112.5% = 18px)
$font-base: 16 * ($font-size/100) !default; // converts our percentage to a pixel value
$custom-font-family: false !default; // Custom font-face stack, if set will be added to the $font-family
$measure: $font-base * $line-height;

// $Variable $Small-Print
// -------------------------------------//

$small-print-size: 65% !default;

// $Variable $Base-Color
// -------------------------------------//

$body-copy-color: #444 !default;
$heading-color: #222 !default;

// $Variable $Ampersand
// -------------------------------------//

$amp-fontface-name: Ampersand !default;
$amp-fontface-source: local("Georgia"), local("Garamond"), local("Palatino"),
  local("Book Antiqua") !default;
$amp-fontface-fallback: local("Georgia") !default;

// Allows for our ampersand element to have differing
// font-family from the ampersand unicode font-family.
$amp-font-family: Verdana, sans-serif !default;

// $Variable $Icon-Font-Helper
// -------------------------------------//
// ex.1) $icon-fonts: (icon-name);
// ex.2) $icon-fonts: (icon-name1, icon-name2, icon-name3);
$icon-fonts: null !default;

// $Variable $Typescale
// -------------------------------------//

$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

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

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

// $Variable $Text-Indentation
// -------------------------------------//

$indent-val: 1.5em !default;

// $Variable $Pull-Quotes
// -------------------------------------//

$pull-quote-fontsize: 4em !default;
$pull-quote-opacity: 0.5 !default;
$pull-quote-color: #dc976e !default;

// $Variable $Citation
// -------------------------------------//

$cite-display: block !default;
$cite-text-align: right !default;
$cite-font-size: inherit !default;

// $Variable $Small-Caps
// -------------------------------------//

$small-caps-color: gray !default;
$small-caps-weight: 600 !default;

// $Variable $DropCap
// -------------------------------------//

$dropcap-float-position: left !default;
$dropcap-font-size: 4em !default;
$dropcap-font-family: inherit !default;
$dropcap-txt-indent: 0 !default;
$dropcap-margin: inherit !default;
$dropcap-padding: inherit !default;
$dropcap-color: inherit !default;
$dropcap-line-height: 1 !default;
$dropcap-bg: transparent !default;

// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Fontfaces
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //

// $Fontface $Unicode-Range-Ampersand
// -------------------------------------//

@font-face {
  font-family: "#{$amp-fontface-name}";
  src: $amp-fontface-source;
  unicode-range: U+0026;
}

// Ampersand fallback font for unicode range
@font-face {
  font-family: "#{$amp-fontface-name}";
  src: $amp-fontface-fallback;
  unicode-range: U+270C;
}

// $Fontface $Icon-Font-Helper
// -------------------------------------//
// ICON FONT HELPER
// In order to use this hot rod you must have the following…
// 1. Compass.
// 2. Create a 'fonts' directory in the root of your project.
// 3. Specify within your 'config.rb' file the following line…
//
// fonts_dir = "name-of-your-fonts-directory" ( i.e. fonts_dir = "fonts" )
//
// Example usage:
// ex.1) $icon-fonts: (icon-name);
// ex.2) $icon-fonts: (icon-name1, icon-name2, icon-name3);
//
// Additional Notes:
// @include font-face() is a Compass helper function
// based on this gist by Chris Van Patten
// https://gist.github.com/4469518

@if ($icon-fonts != null) {
  @each $font in $icon-fonts {
    @include font-face(
      $font,
      font-files(
        "#{$font}/#{$font}.woff",
        "#{$font}/#{$font}.ttf",
        "#{$font}/#{$font}.svg",
        svg
      ),
      "#{$font}/#{$font}.eot"
    );
  }
}

// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Functions
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //

// $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};
}

// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Mixins / $Placeholders
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //

// $Mixin $Type-Scale
// -------------------------------------//
// provides a pixel fallback if you decide
// to use 'rems' as a unit over ems.

@mixin type-scale($scale, $base, $value, $measure: "") {
  // If 'rem' is used as a $value then provide a px fallback.
  @if $value == rem {
    font-size: $scale#{px};
  }
  font-size: context-calc($scale, $base, $value);
  @if $measure != "" {
    margin-bottom: measure-margin($scale, $measure, $value);
  }
}

// $Mixin $Hypens
// -------------------------------------//
//http://trentwalton.com/2011/09/07/css-hyphenation

@mixin css-hyphens($val) {
  // Accepted values: [ none | manual | auto ]
  hyphens: $val; // W3C standard
}

// $Mixin $Smallcaps
// -------------------------------------//
// http://blog.hypsometry.com/articles/true-small-capitals-with-font-face
// ISSUE #1 : https://github.com/typeplate/typeplate.github.com/issues/1

@mixin smallcaps($color, $font-weight) {
  // depends on the font family.
  // some font-families don't support small caps
  // or don't provide them with their web font.
  font-variant: small-caps;
  font-weight: $font-weight;
  text-transform: lowercase;
  color: $color;
}

// $Mixin $Fontsize-Adjust
// -------------------------------------//
// correct x-height for fallback fonts: requires secret formula
// yet to be discovered. This is still wacky for support. Use
// wisely grasshopper.

@mixin font-size-adjust($adjust-value) {
  // firefox 17+ only (as of Feb. 2013)
  font-size-adjust: $adjust-value;
}

// $Mixin $Ampersand
// -------------------------------------//

@mixin ampersand($amp-font-family...) {
  font-family: $amp-font-family;
}

%ampersand-placeholder {
  @include ampersand($amp-fontface-name, $amp-font-family);
}

// Call your ampersand on any element you wish from another stylesheet
// using this Sass extend we've provided. For exmaple:
//
// <h6 class="ampersand">Dewey Cheat 'em & Howe</h6>
//
// .ampersand { @extend %ampersand-placeholder; }

// $Mixin $Blockquote
// -------------------------------------//
// https://github.com/typeplate/typeplate.github.io/issues/95
//
// Use our pre-defined markup and add a class
// to your custom blockquote element.
// For example:
//
// .blockquote { @include blockquote("-"); }
//
// "-" is your citation flourish. For example:
//
// I always say important things because I'm so smart
//                           - Super Important Person

// Citation Mixin for Custom Styling
@mixin cite-style($display, $text-align, $font-size) {
  display: $display;
  font-size: $font-size;
  text-align: $text-align;
}

%cite {
  @include cite-style($cite-display, $cite-text-align, $cite-font-size);
}

@mixin blockquote($citation-flourish) {
  p {
    &:last-of-type {
      margin-bottom: -#{$line-height/2}em;
    }
  }
  + figcaption {
    @extend %cite;
    &:before {
      content: $citation-flourish;
    }
  }
}

// $Mixin $Pull-Quotes
// -------------------------------------//

@mixin pull-quotes(
  $pull-quote-fontsize,
  $pull-quote-opacity,
  $pull-quote-color
) {
  position: relative;
  padding: context-calc($pull-quote-fontsize, $pull-quote-fontsize, em);
  &:before,
  &:after {
    height: context-calc($pull-quote-fontsize, $pull-quote-fontsize, em);
    opacity: $pull-quote-opacity;
    position: absolute;
    font-size: $pull-quote-fontsize;
    color: $pull-quote-color;
  }
  &:before {
    content: "“";
    top: 0;
    left: 0;
  }
  &:after {
    content: "”";
    bottom: 0;
    right: 0;
  }
}

// $Placeholder $Wordwrap
// -------------------------------------//
// Silent Sass Classes - A.K.A Placeholders
//
// normal: Indicates that lines may only break at normal word break points.
// break-word : Indicates that normally unbreakable words may be broken at
// arbitrary points if there are no otherwise acceptable break points in the line.

%breakword {
  word-wrap: break-word;
}

%normal-wrap {
  word-wrap: normal;
}

%inherit-wrap {
  word-wrap: auto;
}

// $Mixin $Dropcaps
// -------------------------------------//
/**
 * Dropcap Sass @include
 * Use the following Sass @include with any selector you feel necessary.
 *
	@include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
 *
 * Extend this object into your custom stylesheet. Let the variables do the work.
 *
 */

// Use @include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
// to pass the following arguments below. Feel free to pass in custom
// values for the variables we've provided.
//
// Make sure you add the class “drop-cap” to your markup in order to operate.
@mixin dropcap(
  $dropcap-float-position,
  $dropcap-font-size,
  $dropcap-font-family,
  $dropcap-txt-indent,
  $dropcap-margin,
  $dropcap-padding,
  $dropcap-color,
  $dropcap-line-height,
  $dropcap-bg
) {
  &:first-letter {
    float: $dropcap-float-position;
    margin: $dropcap-margin;
    padding: $dropcap-padding;
    font-size: $dropcap-font-size;
    font-family: $dropcap-font-family;
    line-height: $dropcap-line-height;
    text-indent: $dropcap-txt-indent;
    background: $dropcap-bg;
    color: $dropcap-color;
  }
}

// $Mixin $Codeblocks
// -------------------------------------//

@mixin white-space($wrap-space) {
  @if $wrap-space == "pre-wrap" {
    white-space: #{-moz-}$wrap-space; // Firefox 1.0-2.0
    white-space: $wrap-space; // current browsers
  } @else {
    white-space: $wrap-space;
  }
}

// $Mixin $Definition-Lists
// -------------------------------------//
// lining
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
//
// dictionary-style
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css

@mixin definition-list-style($style) {
  // lining style
  @if $style == lining {
    dt,
    dd {
      display: inline;
      margin: 0;
    }
    dt,
    dd {
      & + dt {
        &:before {
          content: "\A";
          white-space: pre;
        }
      }
    }
    dd {
      & + dd {
        &:before {
          content: ", ";
        }
      }
      &:before {
        content: ": ";
        margin-left: -0.2rem; //removes extra space between the dt and the colon
      }
    }
  }
  // dictionary-style
  @if $style == dictionary-style {
    dt {
      display: inline;
      counter-reset: definitions;
      & + dt {
        &:before {
          content: ", ";
          margin-left: -0.2rem; // removes extra space between the dt and the comma
        }
      }
    }
    dd {
      display: block;
      counter-increment: definitions;
      &:before {
        content: counter(definitions, decimal) ". ";
      }
    }
  }
}

// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Typeplate Styles
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //

// $Styles $Globals
// -------------------------------------//

html {
  font-weight: $font-weight;
  font-size: math.percentage($font-size / 100);
  line-height: $line-height;
  @if $custom-font-family {
    font-family: $custom-font-family, $font-family;
  } @else {
    font-family: $font-family;
  }
}

body {
  // Ala Trent Walton
  @include css-hyphens(auto);

  // normal: Indicates that lines may only break at normal word break points.
  // break-word : Indicates that normally unbreakable words may be broken at ...
  // arbitrary points if there are no otherwise acceptable break points in the line.
  @extend %breakword;
  color: $body-copy-color;
}

small {
  font-size: $small-print-size;
}

// $Styles $Headings
// -------------------------------------//

// Extend included classes on any element of your
// choosing for adjusting type based on the scale
// provided.

// 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;
}

// $Styles $Parargraphs
// -------------------------------------//

p {
  margin: auto auto $indent-val;
  & + p {
    //siblings indentation
    text-indent: $indent-val;
    margin-top: -$indent-val;
  }
}

// $Styles $Hyphenation
// -------------------------------------//
// http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation

abbr,
acronym,
blockquote,
code,
dir,
kbd,
listing,
plaintext,
q,
samp,
tt,
var,
xmp {
  @include css-hyphens(none);
}

// $Styles $Codeblocks
// -------------------------------------//

pre code {
  @extend %normal-wrap;
  @include white-space(pre-wrap);
}

pre {
  @include white-space(pre);
}

code {
  @include white-space(pre);
  font-family: monospace;
}

// $Styles $Smallcaps
// -------------------------------------//
/**
 * Abbreviations Markup
 *
	<abbr title="hyper text markup language">HMTL</abbr>
 *
 * Extend this object into your markup.
 *
 */
abbr {
  @include smallcaps($small-caps-color, $small-caps-weight);
  &[title]:hover {
    cursor: help;
  }
}

// $Styles $Headings-Color
// -------------------------------------//

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $heading-color;
}

// $Styles $Dropcap
// -------------------------------------//

// Combats our sibling paragraphs syling and indentation
// As not to ruin our beautiful drop caps.
p + .drop-cap {
  text-indent: 0;
  margin-top: 0;
}

.drop-cap {
  @include dropcap(
    $dropcap-float-position,
    $dropcap-font-size,
    $dropcap-font-family,
    $dropcap-txt-indent,
    $dropcap-margin,
    $dropcap-padding,
    $dropcap-color,
    $dropcap-line-height,
    $dropcap-bg
  );
}

// $Styles $Definition-Lists
// -------------------------------------//
/**
 * Lining Definition Style Markup
 *
	<dl class="lining">
		<dt><b></b></dt>
		<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.lining {
  @include definition-list-style(lining);
}

/**
 * Dictionary Definition Style Markup
 *
	<dl class="dictionary-style">
		<dt><b></b></dt>
			<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.dictionary-style {
  @include definition-list-style(dictionary-style);
}

// $Styles $Blockquote-Markup
// -------------------------------------//
/**
 * Blockquote Markup
 *
		<figure>
			<blockquote cite="">
				<p></p>
			</blockquote>
			<figcaption>
				<cite>
					<small><a href=""></a></small>
				</cite>
			</figcaption>
		</figure>
 *
 * Extend this object into your markup.
 *
 */

// $Styles $Pull-Quotes
// -------------------------------------//
// http://24ways.org/2005/swooshy-curly-quotes-without-images
//
// http://todomvc.com - Thanks sindresorhus!
// https://github.com/typeplate/typeplate.github.io/issues/49

/**
 * Pull Quotes Markup
 *
	<aside class="pull-quote">
		<blockquote>
			<p></p>
		</blockquote>
	</aside>
 *
 * Extend this object into your custom stylesheet.
 *
 */

.pull-quote {
  @include pull-quotes(
    $pull-quote-fontsize,
    $pull-quote-opacity,
    $pull-quote-color
  );
}

// $Styles $Figures
// -------------------------------------//
/**
 * Figures Markup
 *
	<figure>
		<figcaption>
			<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
		</figcaption>
	</figure>
 *
 * Extend this object into your markup.
 *
 */

// $Styles $Footnotes
// -------------------------------------//
/**
 * Footnote Markup : Replace 'X' with your unique number for each footnote
 *
	<article>
		<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
		<footer>
			<ol class="foot-notes">
				<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
			</ol>
		</footer>
	</article>
 *
 * Extend this object into your markup.
 *
 */
