typerules/lib/typerules.styl

A typography toolkit that sets vertical rhythm and provides type functions.

/*!!
*   Typerules v0.1.0
*
*   Copyright (c) 2017 Tiago Porto (http://tiagoporto.com)
*   Released under the MIT license
*/

@import "_variables.styl"
@import "_web-fonts.styl"
@import "_functions.styl"
@import "_vertical-rhythm.styl"
@import "_rhythm.styl"

/*!
*
* Box model reset
* http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*
*/
*, *:before, *:after
  box-sizing: inherit

$pseudo-elements
  content: ""
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  width: 100%
  pointer-events: none

html
  /* Stops devices from scaling up text. */
  -webkit-text-size-adjust: 100%
  -ms-text-size-adjust: 100%
  font-size: 100%
  box-sizing: border-box

  if $debug-vertical-rhythm
    position: relative

    if $show-secondary-debug-line
      &:before,
      &:after
        @extends $pseudo-elements
    else
      &:before
        @extends $pseudo-elements

    &:before
      z-index: 100000
      background-image: linear-gradient($debug-color-line.primary 1px, rgba(0, 0, 0, 0) 1px)
      background-size: 100% rem($base-line-height)

    if $show-secondary-debug-line
      &:after
        z-index: 99999
        background-image: linear-gradient($debug-color-line.secondary 1px, rgba(0, 0, 0, 0) 1px)
        background-size: 100% rem($base-line-height / $debug-line-divisions)


body
  font: normal normal $base-font-size\/rem($base-line-height) $font-family-base
  background-color: $color.bg
  color: $color.font
  margin: 0
  padding: 0
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-decoration-skip-ink: auto
  font-smoothing: auto
  font-feature-settings: "liga", "kern"

/*!
*
* Better Font Smoothing in Chrome & Safari
* http://www.intridea.com/blog/2014/5/8/better-font-smoothing-in-chrome-on-mac-os-x
*
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.25),\
  only screen and ( min-device-pixel-ratio: 1.25),\
  only screen and ( min-resolution: 200dpi),\
  only screen and ( min-resolution: 1.25dppx)

  body
      -webkit-font-smoothing: subpixel-antialiased