!!! 5
html
  head
    //if lt IE 9
      script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')

    meta(charset='UTF-8')

    :stylus
      body {
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 13px;
        line-height: 18px;
        color: #333333;
        background-color: #ffffff;
      }

      .page-header
        width 100%
        position fixed
        background white
        z-index 10
        top 0

        small
          font-size 0.6em
          color #666
          font-weight normal

        .container
          border-bottom 1px solid #ddd
          padding 12px 0

      .container,
      #preview
        width 940px
        margin auto
        position relative

      #icons 
        margin-top 112px
        font-size 24px

        .icon
          float left
          padding 6px

    include font.jade

  body
    .page-header
      .container
        h1 #{font.fullname}
          small  font demo

    #icons
      #preview.clearfix
        - var col_class = "span" + Math.ceil(12 / meta.columns)
        - var chunk_size = Math.ceil(glyphs.length / meta.columns)
        - for (var i = 0; i < meta.columns; i++)

          - var offset = i * chunk_size
          - for (var c = 0; c < chunk_size && glyphs[offset + c]; c++)
            - var g = glyphs[offset + c]
            - var css_class = meta.css_prefix + '-' + (g.css || g.file)
            - var code = g.code.toString(16)
            - var match = g.search + ' ' + g.css.split('-').join(' ')
              .icon(data-name='#{g.css}', data-code='#{code}', data-match='#{match} ')
                span(class=meta.css_prefix + ' ' + css_class)