_typesettings.bundle.styl

@charset "UTF-8"

// ==============================================================================
// Typesettings - Stylus Version
// ==============================================================================
// 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.
//
// Author: Ian Rose
// 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;
$font-serif:= Georgia, 'Times New Roman', serif;
$font-mono:= 'Lucida Console', Monaco, monospace;
$text-color:= #000;

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

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

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

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

// [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; // [1]
$paragraph-justify:= true; // [2]

// Optionally set html and body font-size and line-height for. See
// _global-init.styl
$global-init:= false;

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

//==============================================================================
// 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)
//==============================================================================

// Stringify the given arg
string(arg)
  type(arg) + ' ' + arg

// Check if value is an integer and returns true or false
is-int($number)
  ($number is a'unit' and floor(abs($number)) == abs($number)) ? true : false

// Returns a number without a unit. For example 16px becomes 16
stripUnits($number)
  remove-unit($number)

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

// Returns an EM value that is a multiple of our defined base vertical unit. For
// example 3 becomes 1.125em
emRhythm($lines= $base-vertical-unit, $font-size= $base-em-font-size, $silent= false)
  if is-int($lines) == false and $silent == false
    warn(string($lines) + $not-integer-txt)
  (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
unitlessRhythm($lines= $base-line-multi, $font-size= $base-em-font-size, $silent= false)
  if is-int($lines) == false and $silent == false
    warn(string($lines) + $not-integer-txt)
  ($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.
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
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.
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.
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.
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 { debug-vertical-alignment(); } and add class va-debug to the body tag
debug-vertical-alignment($position= absolute,$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: $position;
    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;
  }

typesettingsInit()
  html {
    font-size: stripUnits($base-font-size / 16px) * 100%;
  }
  body {
    setLeading();
  }

if $global-init
  typesettingsInit()

if $load-typesetted
  // Sets the font-size of the project as a percentage. Making it easy to
  // scale up/down the whole project for specific media queries

  typesettingsInit()

  //==============================================================================
  // 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]
    setType(6, $ms-up2); // [2]

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

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

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

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

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

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

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

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

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

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

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

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

  small,
  .font-small {
    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;
    rhythmBorderTop(1px, 4);
  }