_typesettings.scss

@charset "UTF-8";


// ==============================================================================
// Typesettings
// ==============================================================================
// A toolkit that sets type in Ems based on modular scale, vertical rhythm,
// and responsive ratio based headlines. Oh, and pixel borders that maintain
// rhythm.
//
// Release Versions: https://github.com/ianrose/typesettings/releases
// Github: https://github.com/ianrose/typesettings
// License: The MIT License (MIT)
//
// Inspired by and used stuff from:
// https://github.com/typeplate/typeplate.github.io
// https://github.com/csswizardry/typecsset


//==============================================================================
// Config Variables
//==============================================================================
// The config variables have default values that are just looking to be adjusted.
// Use this variables to customize your Typesettings. Or take the whole thing
// apart if you want :)

// Font families and default text color.
$font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$font-serif: Georgia, 'Times New Roman', serif !default;
$font-mono: 'Lucida Console', Monaco, monospace !default;
$text-color: #000 !default;

// The vertical grid unit. Margin, padding, and line-height are set to multiples
// of this value. This is the value that determines the baseline for our vertical
// rhythm. The default value of 6px allows more fine tuned designs that still
// obey vertical rhythm.
$base-vertical-unit: 6px !default;

// The value that multiplies the $base-vertical-unit to get the $base-line-height.
// This gives type an ideal line-height.
$base-line-multi: 4 !default;

// Base font size in pixels.
$base-font-size: 16px !default;

// Modular scale ratio that is used to figure out all the different font sizes
$ms-ratio: 1.414 !default;

// [1] Paragraph setting that you can turn on or off the indent of the first line
// of a new paragraph.
// [2] Paragraph setting that you can turn on or off to have your paragraphs ragged
// right or justified.
$paragraph-indent: true !default; // [1]
$paragraph-justify: true !default; // [2]

// You can optionally load type styles that use Typesettings.
$load-typesetted: true !default;

//==============================================================================
// Internal Variables
//==============================================================================
// It's Best not to adjust the internal variables directly.[Note]

// Creates a handy variable for the 1em
$base-em-font-size: 1em;

// Generates modular scale values in Ems. [Note]If you need more size up and/or down
// then add more sizes.
// [1] One step down in the modular scale in EMs
// [2] One step up in the modular scale in EMs
$ms-down1: $base-em-font-size / $ms-ratio; // [1]
$ms-down2: $ms-down1 /$ms-ratio;
$ms-down3: $ms-down2 / $ms-ratio;
$ms-down4: $ms-down3 / $ms-ratio;
$ms-up1: $base-em-font-size * $ms-ratio; // [2]
$ms-up2: $ms-up1 * $ms-ratio;
$ms-up3: $ms-up2 * $ms-ratio;
$ms-up4: $ms-up3 * $ms-ratio;
$ms-up5: $ms-up4 * $ms-ratio;
$ms-up6: $ms-up5 * $ms-ratio;
$ms-up7: $ms-up6 * $ms-ratio;
$ms-up8: $ms-up7 * $ms-ratio;
$ms-up9: $ms-up8 * $ms-ratio;
$ms-up10: $ms-up9 * $ms-ratio;

// Warning text for when an integer is not used in rhythm functions
$not-integer-txt: ' value breaks vertical rhythm. Use an integer (whole number) for $lines.';

//==============================================================================
// Helper function(s)
//==============================================================================

// Check if value is an integer and returns true or false
@function is-int($number) {
  @return type-of($number) == number and floor(abs($number)) == abs($number);
}

// Returns a number without a unit. For example 16px becomes 16
@function stripUnits($number) {
  @return $number / ($number * 0 + 1);
}

// Returns an EM value. For example 24px becomes 1.5em
@function emCalc($target, $context: $base-font-size) {
  @return stripUnits(($target / $context)) + 0em;
}

// Returns an EM value that is a multiple of our defined base vertical unit. For
// example 3 becomes 1.125em
@function emRhythm($lines: $base-vertical-unit, $font-size: $base-em-font-size, $silent: false) {
  @if is-int($lines) == false and $silent == false {
    @warn  #{$lines} + $not-integer-txt;
  }
  @return (stripUnits($lines) * stripUnits($base-vertical-unit)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}

// Returns a unitless number that is a multiple of our defined base vertical unit.
// For example 3 becomes 1.125
@function unitlessRhythm($lines: $base-line-multi, $font-size: $base-em-font-size, $silent: false) {
  @if is-int($lines) == false and $silent == false {
    @warn #{$lines} + $not-integer-txt;
  }
  @return ($lines * stripUnits($base-vertical-unit)) / (stripUnits($font-size) * stripUnits($base-font-size));
}

//==============================================================================
// Mixin(s)
//==============================================================================
// Finally, the tools that you can use throughout your project to set
// all the wonderful type related stuffs.

// Sets the type in EMs and makes a vertical rhythm unitless line-height that is
// based on context.
@mixin setType($lines: $base-line-multi, $font-size: $base-em-font-size, $silent: false) {
  font-size: $font-size;
  line-height: unitlessRhythm($lines, $font-size, $silent);
}

// Creates a vertical rhythm unitless line-height that is based on context
@mixin setLeading($lines: $base-line-multi, $font-size: $base-em-font-size, $silent: false) {
  line-height: unitlessRhythm($lines, $font-size, $silent);
}

// Creates a pixel width border top with padding that is a multiple of the base
// vertical grid unit. You will need to set border style and color rules.
@mixin rhythmBorderTop($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) {
  border-top-width: $border-width;
  padding-top: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}

// Creates a pixel width border bottom with padding that is a multiple of the base
// vertical grid unit. You will need to set border style and color rules.
@mixin rhythmBorderBottom($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) {
  border-bottom-width: $border-width;
  padding-bottom: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}

// Creates a pixel width border with padding that is a multiple of the base
// vertical grid unit. You will need to set border style and color rules.
@mixin rhythmBorder($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) {
  border-width: $border-width;
  padding: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}

// Creates base type baseline overlay and vertical unit overlay.
// To use on the body tag for example: body { @include debug-vertical-alignment(); } and add class va-debug to the body tag
@mixin debug-vertical-alignment($opacity: 0.8, $vertical-unit: $base-vertical-unit, $type-base-line-multi: $base-line-multi, $type-size: $base-em-font-size) {
  position: relative;

  &:before, &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    display: none;
  }

  &:before {
    z-index: 10;
    background-image: -webkit-linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-image: linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 100% (unitlessRhythm($type-base-line-multi, $type-size) + 0rem);
  }

  &:after {
    z-index: 9;
    background-image: -webkit-linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-image: linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 100% $vertical-unit;
  }

  &.va-debug:before, &.va-debug:after {
    display: block;
    pointer-events: none;
  }
}

// Sets the font-size of the project as a percentage. Making it easy to
// scale up/down the whole project for specific media queries
html {
  font-size: ($base-font-size / 16px) * 100%;
}

body {
  margin: 0;
  padding: 0;
  @include setLeading();
}

@if $load-typesetted {
  //==============================================================================
  // Default Type Styles
  //==============================================================================

  // Stops devices from scaling up text.
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: $font-serif;
    font-weight: 400;
    color: $text-color;
  }

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-family: $font-sans;
    font-weight: bold;
  }

  // [1] Applies a margin bottom that is a multiple of the vertical grid in EMs.
  // The first argument is the font size context and the second is multiple of the
  // vertical grid unit.
  // [2] Sets the type to one of the modular scale values and the second argument
  // sets a unitless line-height as a multiple of the vertical grid.
  // [3] A generic media query for tablet size ranges.
  // [4] Applies a margin bottom that is the same vertical grid value as the mobile
  // first rule.
  // [5] Sets the type to one of the modular scale values and the second argument
  // sets a unitless line-height as a multiple of the vertical grid.
  h1, .h1 {
    margin-bottom: emRhythm(1, $ms-up2); // [1]
    @include setType(6, $ms-up2); // [2]

    @media (min-width: 43.75em) {
      // [3]
      margin-bottom: emRhythm(1, $ms-up3); // [4]
      @include setType(8, $ms-up3); // [5]
    }

    @media (min-width: 56.25em) {
      margin-bottom: emRhythm(1, $ms-up4);
      @include setType(10, $ms-up4);
    }
  }

  h2, .h2 {
    margin-bottom: emRhythm(1, $ms-up1);
    @include setType(5, $ms-up1);

    @media (min-width: 43.75em) {
      margin-bottom: emRhythm(1, $ms-up2);
      @include setType(6, $ms-up2)
    }

    @media (min-width: 56.25em) {
      margin-bottom: emRhythm(1, $ms-up3);
      @include setType(8, $ms-up3);
    }
  }

  h3, .h3 {
    margin-bottom: emRhythm(1, $ms-up1);
    @include setType(5, $ms-up1);

    @media (min-width: 56.25em) {
      margin-bottom: emRhythm(1, $ms-up2);
      @include setType(6, $ms-up2);
    }
  }

  h4, .h4 {
    margin-bottom: emRhythm(1, $ms-up1);
    @include setType(5, $ms-up1);
  }

  h5, .h5,
  h6, .h6 {
    margin-bottom: emRhythm(1);
    @include setType(4);
  }

  p {
    margin-top: 0;
    margin-bottom: emRhythm($base-line-multi);
    padding-top: 0;
    padding-bottom: 0;
    max-width: emRhythm(96);

    @media (min-width: 43.75em) {
      @if $paragraph-justify {
        text-align: justify;
      }
    }
  }

  @if $paragraph-indent {
    p + p {
      margin-top: emRhythm($base-line-multi * -1);
      text-indent: emRhythm($base-line-multi);
    }
  }

  small,
  .font-small {
    @include setType(3, $ms-down1);
  }

  em {
    font-style: italic;
  }

  strong {
    font-weight: bold;
  }

  blockquote {
    margin-top: emRhythm(4);
    margin-bottom: emRhythm(4);
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: emRhythm(4);
    border-left: $base-vertical-unit solid lighten(#000, 50%);
    font-family: $font-serif;

    p {
      margin-bottom: emRhythm(2);
    }

    footer {
      cite {
        &:before {
          content: " – ";
        }
      }
    }
  }

  pre,
  code {
    font-family: $font-mono;
  }

  time,
  .time {
    text-transform: uppercase;
  }

  ol,
  ul,
  dl {
    margin-top: 0;
    margin-bottom: emRhythm(4);
    margin-left: emRhythm(4);
    padding-top: 0;
    padding-bottom: 0;
  }

  ul ul,
  ol ol,
  dl dl {
    margin-left: 0;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  // [1] https://developer.mozilla.org/en-US/docs/CSS/font-variant
  abbr {
    font-variant: small-caps; // [1]
    font-weight: 600;
    text-transform: lowercase;
  }

  // Cursor changed to a question mark when it has a title
  abbr[title]:hover {
    cursor: help;
  }

  // Creates horizontal rules that obey the baseline.
  // [1] Zero outs the user agent border
  hr {
    margin-top: emRhythm(4);
    margin-bottom: 0;
    border: none; // [1]
    border-top-color: $text-color;
    border-top-style: solid;
    @include rhythmBorderTop(1px, 4);
  }
}