citrine/citrine/_typography.styl

A typography library for stylus to make working with vertical rhythm a little bit easier (comes with a nice set of defaults too !).

citrine-presets()

  citrine-h6 = ms(-1)
  citrine-h5 = ms(0)
  citrine-h4 = ms(1)
  citrine-h3 = ms(2)
  citrine-h2 = ms(3)
  citrine-h1 = ms(4)

  html
    font-size 100%
    -webkit-tap-highlight-color rgba(0,0,0,0)
    -webkit-tap-highlight-color transparent

  body 
    font-size remify(citrine-base-font-size) 
    line-height citrine-base-line-height
    -webkit-font-smoothing antialiased

  h1
    font-size remify(citrine-h1)

  h2
    font-size remify(citrine-h2)

  h3
    font-size remify(citrine-h3)

  h4
    font-size remify(citrine-h4)

  h5
    font-size remify(citrine-h5)

  h6
    font-size remify(citrine-h6)

  p
    font-size remify(citrine-h5)

  p, h1, h2, h3, h4, h5, h6, ol, ul, dl
    margin 0 0 rhythm(1, citrine-h5)

  ul ul, ol ol, dl dl
    margin 0 0 0 rhythm(1, citrine-h5)

  ol
    list-style-type decimal
    list-style-position inside

  dl dt
    font-weight bold
    if citrine-definition-list-style is 'inline'
      display inline
      &:before
        content ''
        display block

  dl dd
    margin-left rhythm(1, citrine-h5)
    if citrine-definition-list-style is 'inline'
      display inline

  img
    margin 0
    max-width 100%

  strong
    font-weight bold

  small
    font-size remify(citrine-h6)

  em
    font-style italic

  s, del
    text-decoration line-through

  blockquote
    border-left 3px solid citrine-blockquote-border-color
    padding-left rhythm(1, citrine-h5)
    footer
      font-size citrine-h6
      font-style italic
      &:before
        content '\2014 \00A0'