liftie/public/stylesheets/weather.styl

Clean, simple, easy to read, fast ski resort lift status

@font-face {
  font-family: "iconvault";
  src: url("fonts/iconvault_forecastfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

div.weather-icon
  ul
    li
      list-style none

    [class^="icon-"], [class*=" icon-"]
      font-family 'iconvault'
      font-weight normal
      font-style normal
      text-decoration inherit
      speak none
      -webkit-font-smoothing antialiased
      font-size 4em

    .basecloud:before
      font-family 'iconvault'
      font-size 4em
      content '\f105'
      position absolute
      color rgb(204, 204, 204)

    .windyraincloud:before
      font-family 'iconvault'
      font-size 4em
      content '\f111'
      position absolute
      color rgb(204, 204, 204)

    .windysnowcloud:before
      font-family 'iconvault'
      font-size 4em
      content '\f109'
      position absolute
      color rgb(204, 204, 204)

    .icon-thunder:before
      content "\f114"
      position absolute
      color rgb(255, 165, 0)

    .icon-sunny:after
      content "\f101"
      color rgb(255, 165, 0)
      position absolute

    .icon-drizzle:before
      content "\f10a"
      color #82b2e4
      position absolute

    .icon-hail:before
      content "\f10f"
      position absolute
      color rgb(204, 204, 204)

    .icon-showers:before
      content "\f104"
      position absolute
      color #82b2e4

    .icon-rainy:before
      content "\f107"
      position absolute
      color #4681c3

    .icon-snowy:before
      content "\f10b"
      position absolute
      color #acd3f3

    .icon-frosty:before
      content "\f102"
      position absolute
      color #85d8f7

    .icon-windy:before
      content "\f115"
      position absolute
      color rgb(204, 204, 204)

    .icon-windyrain:before
      content "\f10e"
      position absolute
      color #acd3f3

    .icon-windysnow:before
      content "\f103"
      position absolute
      color #acd3f3

    .icon-sleet:before
      content "\f10c"
      position absolute
      color #acd3f3

    .icon-moon:after
      content "\f10d"
      color rgb(255, 165, 0)
      position absolute

    .icon-night:after
      content "\f100"
      position absolute
      color rgb(255, 165, 0)

    .icon-sun:after
      content "\f113"
      color rgb(255, 165, 0)
      position absolute

    .icon-cloud:after
      content "\f106"
      color rgb(204, 204, 204)
      position absolute

    .icon-sunrise:before
      content '\f112'
      color rgb(255, 165, 0)
      position absolute

    .icon-sunset:before
      content '\f110'
      color #f96f23
      position absolute

    .icon-mist:before
      content '\f108'
      color rgb(204, 204, 204)
      position absolute