doctype
  html
    head
      title Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap
      // favicons
      link(rel='apple-touch-icon', sizes='57x57', href='/apple-touch-icon-57x57.png')
      link(rel='apple-touch-icon', sizes='60x60', href='/apple-touch-icon-60x60.png')
      link(rel='icon', type='image/png', href='/favicon-16x16.png', sizes='16x16')
      link(rel='icon', type='image/png', href='/favicon-32x32.png', sizes='32x32')
      meta(name='msapplication-TileColor', content='#da532c')
      //favicons
  
      meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')
  
      link(rel='stylesheet', href='css/styles.css')
      link(rel='stylesheet', href='css/weather-icons.css')
      link(rel='stylesheet', href='css/weather-icons-wind.css')
  
      script(src='//use.typekit.net/hse2lqc.js')
      script.
        try{Typekit.load();}catch(e){}
      script(src='js/bootstrap.min.js')
      script.
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-547519-12', 'erikflowers.github.io');
        ga('send', 'pageview');
  
    body
  
      header
        .container
          .row-fluid
            .col-sm-12
              .icon
                .icon-box
                  .wi.wi-day-cloudy
              h1 Weather Icons
              h2 222 Weather Themed Icons and CSS
              a.download-now(href="https://github.com/erikflowers/weather-icons/archive/master.zip") Download Now 
                i.wi.wi-sunset
      section.social
        .container
          .row
            .col-sm-12
              .social-wrapper
                ul
                  li
                    iframe.github-btn(src='https://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=watch&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='100px', height='20px')
                  li
                    iframe.github-btn(src='https://ghbtns.com/github-btn.html?user=erikflowers&repo=weather-icons&type=fork&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='90px', height='20px')
                  li
                    a.twitter-share-button(href='https://twitter.com/share', data-lang='en', data-text='Weather Icons - 222 weather themed font icons!', data-via='Erik_UX', data-count='none') Tweet
                  li
                    a.twitter-follow-button(href='https://twitter.com/Erik_UX', data-show-count='false', data-lang='en') Follow @Erik_UX
                    script.
                      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
  
  
      section.content.container.intro
        .row
          .col-sm-12
            .intro-icons
              i.wi.wi-day-lightning
              i.wi.wi-night-thunderstorm
              i.wi.wi-day-snow
              i.wi.wi-sprinkle
              i.wi.wi-day-sunny
              i.wi.wi-cloudy
              i.wi.wi-night-rain-mix
              i.wi.wi-sunset
              i.wi.wi-sunrise
              i.wi.wi-day-cloudy-windy
              i.wi.wi-night-rain
              i.wi.wi-night-alt-snow
            p.headline Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into  
              a(href="http://getbootstrap.com") Bootstrap,
              |  or any project that needs high quality weather, maritime, and Alphaological based icons!
  
  
            .features
              .row
                .col-sm-4
                  h3
                    i.wi.wi-day-sunny
                    | The Freedom of CSS
                  p Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! 
                .col-sm-4
                  h3
                    i.wi.wi-lightning
                    | Use In Graphic Apps
                  p Weather Icons come with OTF and TTF files, so you can use this page to copy icons and paste them right into your favorite design apps like Photoshop, Illustrator, Sketch!
                .col-sm-4
                  h3
                    i.wi.wi-night-rain
                    | Flip, Scale, Transform
                  p Easily modify the icon look with built-in utility classes for fixed-width, flip horizontal, flip vertical, and rotating 90, 180, or 270 degrees.
                    i.wi.wi-night-thunderstorm.wi-flip-vertical.purple
                    i.wi.wi-night-thunderstorm.wi-flip-horizontal.purple
                    i.wi.wi-night-thunderstorm.wi-rotate-90.purple
                    i.wi.wi-night-thunderstorm.wi-rotate-180.purple
                    i.wi.wi-night-thunderstorm.wi-rotate-270.purple
              .row
                .col-sm-4
                  h3
                    i.wi.wi-earthquake
                    | Popular Weather API Classes
                  p Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, Weather Underground, and World Alphaological Organization.  
                    a(href="api-list.html") View the list of API mappings here.
                .col-sm-4
                  h3
                    i.wi.wi-thunderstorm
                    | Specialty Icons
                  p Included are 28 moon phases, 12 hours of clock, the Beaufort wind force scale, maritime wind warnings,
                .col-sm-4
                  h3
                    i.wi.wi-volcano.from-270-deg
                    | Less and Sass Support
                  p Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds.
              .row
                .col-sm-12
                  .section-title Getting Started
                  p To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type  
                    code <i class="wi wi-night-sleet"></i>
  
  
  
            .meta
              a.github-button(href="http://github.com/erikflowers/weather-icons") View the project on GitHub 
                i.fa.fa-github
              p Please make requests or report any issues to the 
                a(href="https://github.com/erikflowers/weather-icons/issues") main repository on GitHub.
  
        include new-icons
        .row
          include icon-list
  
        .row
          .col-sm-12
            .section-title Utility Classes
            .instructions
              .info-icon
                i.fa.fa-info-circle
              p Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.
            .row
              .col-sm-4
                h3 Flip
                p
                  code wi-flip-horizontal
                p
                  code wi-flip-vertical
              .col-sm-4
                h3 Rotate
                p
                  code wi-rotate-90
                p
                  code wi-rotate-180
                p
                  code wi-rotate-270
              .col-sm-4
                h3 Fixed Width
                p
                  code wi-fw
  
  
  
      footer
          .container
            .row
              .col-sm-6
                p The Weather Icons project created and maintained by 
                  a(href="http://www.twitter.com/Erik_UX") Erik Flowers
                  |. v1.0 artwork by 
                  a(href="http://www.twitter.com/artill") Lukas Bischoff
                  |. v1.1 - 2.0 artwork by 
                  a(href="http://www.twitter.com/Erik_UX") Erik Flowers
                p LESS/HTML implementation inspired and heavily influenced by 
                  a(href="http://fortawesome.github.io/Font-Awesome/") Font Awesome.
              .col-sm-6
                p Weather Icons licensed under 
                  a(href="http://scripts.sil.org/OFL") SIL OFL 1.1, 
                  |  Code licensed under 
                  a(href="http://opensource.org/licenses/mit-license.html") MIT License, 
                  |  Documentation licensed under 
                  a(href="http://creativecommons.org/licenses/by/3.0/") CC BY 3.0
            .row
              .col-sm-12
                i.wi.wi-day-lightning
                i.wi.wi-night-thunderstorm
                i.wi.wi-day-snow
                i.wi.wi-sprinkle
                i.wi.wi-day-sunny
                i.wi.wi-cloudy
                i.wi.wi-night-rain-mix
                i.wi.wi-sunset
                i.wi.wi-sunrise
                i.wi.wi-day-cloudy-windy
                i.wi.wi-night-rain
                i.wi.wi-night-alt-snow