reset.styl

// -----
// Reset
// -----

// Global Reset
// Based on [Eric Meyer's reset](http:https://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
// ported from Nib

global-reset()
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td
    reset-box-model()
    reset-font()
  body
    reset-body()
  ol, ul
    list-style: none
  table
    reset-table()
  caption, th, td
    reset-table-cell()
  a img
    border: none

nested-reset()
  div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
  pre, a, abbr, acronym, address, code, del, dfn, em, img,
  dl, dt, dd, ol, ul, li, fieldset, form, label,
  legend, caption, tbody, tfoot, thead, tr
    reset-box-model()
    reset-font()
  table
    reset-table()
  caption, th, td
    reset-table-cell()
  a img
    border: none

reset-box-model()
  margin: 0
  padding: 0
  border: 0
  outline: 0

reset-font()
  font-weight: inherit
  font-style: inherit
  font-family: inherit
  font-size: 100%
  vertical-align: baseline

reset-body()
  line-height: 1
  color: black
  background: white

reset-table()
  border-collapse: separate
  border-spacing: 0
  vertical-align: middle

reset-table-cell()
  text-align: left
  font-weight: normal
  vertical-align: middle

reset-html5()
  article, aside, canvas, details, figcaption,
  figure, footer, header, hgroup, menu, nav,
  section, summary, main
    reset-box-model()
    display: block
  audio, canvas, video
    display inline-block
    *display inline
    *zoom 1
  audio:not([controls]),[hidden]
    display none

// Mixin: Normalize CSS
// Based on v4.0.0 https://github.com/necolas/normalize.css

normalize-css()
  html
    font-family: sans-serif
    -ms-text-size-adjust: 100%
    -webkit-text-size-adjust: 100%

  body
    margin 0

  article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary
    display: block

  audio, canvas, progress, video
    display: inline-block

  audio:not([controls])
    display: none
    height: 0

  progress
    vertical-align: baseline

  template, [hidden]
    display: none

  a
    background-color: transparent

  a:active, a:hover
    outline-width: 0

  abbr[title]
    border-bottom: none
    text-decoration: underline
    text-decoration: underline dotted

  b, strong
    font-weight: inherit

  dfn
    font-style: italic

  h1
    font-size: 2em
    margin: 0.67em 0

  mark
    background-color: #ff0
    color: #000

  small
    font-size: 80%

  sub, sup
    font-size: 75%
    line-height: 0
    position: relative
    vertical-align: baseline

  sub
    bottom: -0.25em

  sup
    top: -0.5em

  img
    border-style: none

  svg:not(:root)
    overflow: hidden

  code, kbd, pre, samp
    font-family: monospace, monospace
    font-size: 1em

  figure
    margin: 1em 40px

  hr
    box-sizing: content-box
    height: 0
    overflow: visible

  button, input, select, textarea
    font: inherit

  optgroup
    font-weight: bold

  button, input, select
    overflow: visible

  button, input, select, textarea
    margin: 0

  button, select
    text-transform: none

  button, [type="button"], [type="reset"], [type="submit"]
    cursor: pointer

  [disabled]
    cursor: default

  button, html [type="button"], [type="reset"], [type="submit"]
    -webkit-appearance: button

  button::-moz-focus-inner, input::-moz-focus-inner
    border: 0
    padding: 0

  button:-moz-focusring, input:-moz-focusring
    outline: 1px dotted ButtonText

  fieldset
    border: 1px solid #c0c0c0
    margin: 0 2px
    padding: 0.35em 0.625em 0.75em

  legend
    box-sizing: border-box
    -moz-box-sizing: border-box
    color: inherit
    display: table
    max-width: 100%
    padding: 0
    white-space: normal

  textarea
    overflow: auto

  [type="checkbox"], [type="radio"]
    box-sizing: border-box
    padding: 0

  [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button
    height: auto

  [type="search"]
    -webkit-appearance: textfield

  [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration
    -webkit-appearance: none

// Mixin: Fluid Media
// Makes your img, video, and iframe tags responsive to their parent container.

fluid-media()
  img,
  video,
  iframe
    max-width: 100%
    height: auto
    border: 0
    -ms-interpolation-mode: bicubic
    display: block

// Mixin: Border Box HTML
// Add border box to every element in your project. Used in your project root.
// http:https://www.paulirish.com/2012/box-sizing-border-box-ftw/

border-box-html()
  html
    box-sizing: border-box

  *,
  *:before,
  *:after
    box-sizing: inherit

// Mixin: Print Styles
// Nice clean print styles so you don't have to worry about it.

print-styles()
  @media print
    body
      width: 100% !important
      margin: 0 !important
      padding: 0 !important
      font-size: 14pt
      line-height: 1.45
      font-family: Garamond, "Times New Roman", serif
      color: #000
      background: none

    h1,
    h2,
    h3,
    h4,
    h5,
    h6
      page-break-after: avoid
      font-family: "Helvetica", Arial, sans-serif

    h1
      font-size: 36pt
      line-height: 1.25em

    h2
      font-size: 24pt
      line-height: 1.25em

    h3
      font-size: 18pt
      line-height: 1.25em

    h4,
    h5,
    h6
      font-size: 14pt
      line-height: 1.25em

    p,
    h2,
    h3
      orphans: 3
      widows: 3

    code
      font: 12pt Courier, $monospace

    blockquote
      margin: 1.2em
      padding: 1em
      font-size: 24pt
      line-height: 1.45833333em
      font-style: italic

    hr
      background-color: #ccc

    img
      float: left
      margin: 1em 1.5em 1.5em 0
      max-width: 100% !important

    a img
        border: none

    a:link,
    a:visited
      background: transparent
      font-weight: 700
      text-decoration: underline
      color: #333

    a:link[href^="http:https://"]:after,
    a[href^="http:https://"]:visited:after
      content: " (" attr(href) ") "
      font-size: 90%

    abbr[title]:after
      content: " (" attr(title) ")"

    a[href^="http:https://"]
      color: #000

    a[href$=".jpg"]:after,
    a[href$=".jpeg"]:after,
    a[href$=".gif"]:after,
    a[href$=".png"]:after
      content: " (" attr(href) ") "
      display: none

    a[href^="#"]:after, a[href^="javascript:"]:after
      content: ""

    table
      margin: 1px
      text-align: left

    th
      border-bottom: 1px solid #333
      font-weight: bold

    td
      border-bottom: 1px solid #333

    th,
    td
      padding: 4px 10px 4px 0

    tfoot
      font-style: italic

    caption
      background: #fff
      margin-bottom: 2em
      text-align: left

    thead
      display: table-header-group

    img,
    tr
      page-break-inside: avoid