eight.css/src/eight.typography.styl

A micro (and modular) CSS framework based on 8pt grid

@require 'eight.theme'
@require 'eight.mixins'


/* Text */

html
  color $text-color
  font-family $base-font-family
  font-size $base-font-size
  font-weight $base-font-weight
  line-height $base-line-height
  letter-spacing $base-letter-spacing

p
  margin-top $base-top-margin
  margin-bottom $base-bottom-margin

pre
  overflow auto

dt
  font-weight $base-highlight-font-weight

hr
  height 1px
  margin 2 * $base-bottom-margin 0
  border none
  color $border-color
  background-color $border-color

cite:before
  content "\2014 \2009"
  font-style italic

blockquote
  margin-left 0
  margin-right 0
  margin-top $base-top-margin
  margin-bottom $base-bottom-margin
  padding $base-side-margin
  font-size $base-font-size * 1.25
  border-left 1 * $ept solid $border-dark-color

  :last-child
    margin-bottom 0

  cite
    font-size .75em

ol, ul
  margin-top 0

ol
  padding-left 1 * $base-side-margin

  li
    padding-left 1 * $base-side-margin

ul
  padding-left 1.5 * $base-side-margin

  li
    padding-left .5 * $base-side-margin

dd
  margin-left 2 * $base-side-margin


/* Forms */

legend
  display inline-block
  color $text-color
  font-family $header-font-family
  font-weight $form-legend-font-weight
  line-height $header-line-height
  letter-spacing $header-letter-spacing
  text-transform uppercase

label
  display inline-block
  margin 0 $base-side-margin .5 * $base-bottom-margin 0
  color $text-color
  font-family $header-font-family
  font-weight $form-label-font-weight
  line-height $header-line-height
  letter-spacing $header-letter-spacing

input[type="checkbox"],
input[type="radio"]
  height 1rem * $base-line-height
  min-height 1rem * $base-line-height
  margin-right .25 * $base-side-margin
  vertical-align middle


/* Tables */

table
  display inline-table
  box-sizing border-box
  width 100%
  min-width 100%
  max-width 100%
  margin-top $base-top-margin
  margin-bottom $base-bottom-margin
  border-spacing 0

  th, td
    box-sizing border-box
    padding $table-cell-padding

  th
    font-weight $base-highlight-font-weight
    text-align left

  &.compact
    min-width auto
    width auto

    td, th
      min-width auto


/* Headers */

h1, h2, h3, h4, h5, h6
  font-family $header-font-family
  font-weight $header-font-weight
  line-height $header-line-height
  letter-spacing $header-letter-spacing
  margin $header-base-top-margin 0 $header-base-bottom-margin

h1
  font-size $base-font-size * 2.25

  @media screen and (min-width $sm)
    font-size $base-font-size * 3

h2
  font-size $base-font-size * 2

  @media screen and (min-width $sm)
    font-size $base-font-size * 2.5

h3
  font-size $base-font-size * 1.75

  @media screen and (min-width $sm)
    font-size $base-font-size * 2

h4
  font-size $base-font-size * 1.5

h5
  font-size $base-font-size * 1.25

h6
  font-size $base-font-size * 1