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

    meta(charset='UTF-8')

    :stylus
      @import "bootstrap"

      body
        margin-top 90px

      .header
        position fixed
        top: 0
        left 50%
        margin-left -480px
        background-color #fff
        border-bottom 1px solid #ddd
        padding-top 10px
        z-index 10

      .footer
        color #ddd
        font-size 12px
        text-align center
        margin-top 20px
        a
          color #ccc
          text-decoration underline

      .the-icons
        font-size 14px
        line-height 24px

      .switch
        position absolute
        right 0
        bottom 10px
        color #888
        input
          margin-right .3em

      .codesOn
        .i-name
          display none
        .i-code
          display inline
      .i-code
        display none

    | <style type="text/css">
    include demo.codes.jade
    | </style>

    script
      function toggleCodes(on) {
        var obj = document.getElementById('icons');

        if (on) {
          obj.className += ' ' + 'codesOn';
        } else {
          obj.className = obj.className.replace(' codesOn', '');
        }
      }

  body
    .container.header
      h1 #{font.fullname}
        |  
        small font demo
      label.switch
        input(type='checkbox', onclick='toggleCodes(this.checked)')
        | show codes

    #icons.container
      - var col_class = "span" + Math.ceil(12 / meta.columns)
      - var rows_total = Math.ceil(glyphs.length / meta.columns)
      - for (var row = 0; row < rows_total; row++)

        .row
          - for (var col = 0; col < meta.columns && glyphs[row*meta.columns + col]; col++)

            - var g = glyphs[row*meta.columns + col]

            - var css_class = css_name = meta.css_use_suffix ? g.css + meta.css_prefix_text : meta.css_prefix_text + g.css

            - if (g['css-ext']) css_class += ' ' + g['css-ext']

            - var code = g.code.toString(16)
              .the-icons(class=col_class, title='Code: 0x#{code}')
                i(class=css_class)
                |  
                span.i-name #{css_name}
                span.i-code 0x#{code}

    .container.footer
      | Generated by 
      a(href='http://fontello.com') fontello.com