style.styl

@import 'lib/reset.css'
@import 'lib/mixins.styl'
@import 'lib/stybr.styl'

lightgrey = rgb(189, 189, 189)
grey = rgb(115, 115, 115)
darkgrey = rgb(82, 82, 82)

::selection
  background-color grey
  color #fff
  fill #fff
::-moz-selection
  background-color grey
  color #fff
  fill #fff

body
  font-family 'Helvetica Neue', Helvetica, sans-serif
  background-image url(img/grey.png)
  background-repeat repeat
  margin 0
  min-width 980px

  applyColor(normal, dark)
    .color,
    a
      color normal
      &:hover
        color dark
    #ix-hint
      background-color rgba(normal, .8)
      color #fff
    #write-up
      h1, h2, h3, h4, h5, h6
        border-left-color normal
        &:hover
          border-left-color dark

  &.pollutant-all
    applyColor(rgb(66, 146, 198), rgb(33, 113, 181))

  &.pollutant-no2
    applyColor(rgb(65, 171, 93), rgb(35, 139, 69))

  &.pollutant-so2
    applyColor(rgb(128, 125, 186), rgb(106, 81, 163))

  &.pollutant-pm2_5
    applyColor(rgb(239, 59, 44), rgb(203, 24, 29))

  &.pollutant-pm10
    applyColor(rgb(241, 105, 19), rgb(217, 72 ,1))

.color,
a
  color inherit
  transition color .25s

a
  text-decoration none

h1, h2, h3, h4, h5, h6
  color darkgrey
  font-weight normal

header
  padding 30px 0
  .content
    width 960px
    margin 0 auto

    h1
      margin 0
      text-align center
      font-size 40px

    p.author
      color grey
      margin-top 20px
      font-size 14px
      text-align center
      font-style italic

#ix-hint
  position fixed
  bottom -50px
  left 0
  right 0
  background-color rgba(#000, .5)
  text-align center
  color grey
  padding 15px 0
  color #fff
  transition background-color .25s, bottom 1s
  text-shadow 0 -1px rgba(#000, .25)
  &.active
    bottom 0

#vis
  padding 35px 0 20px
  height 600px
  background-color rgba(#fff, .75)
  box-shadow 0 0 10px rgba(#000, .5)
  .content
    width 960px
    padding 0 10px
    margin 0 auto
    position relative

    #loading
      text-align center
      position absolute
      left 0
      right 0
      top 260px
      font-size 50px
      color grey

    .legend-element
      font-size 10px
    text.legend-element
      fill grey

    #stations
      float-wrapper()

      #map-wrapper
        width 522px
        svg.map
          path
            cursor pointer
            fill #fff
            stroke #fff
            stroke-linejoin round
            stroke-width 1px
            fill-opacity .25
            stroke-opacity .75
            transition fill-opacity .25s, stroke-width .5s
            &:hover
              fill-opacity .5
            &.active
              fill-opacity .75
              stroke-width 2px
              cursor auto

          circle.location
            cursor pointer
            fill-opacity .25
            stroke-opacity 0
            transition fill-opacity .25s, stroke-opacity .5s
            &:hover
              fill-opacity .5
            &.active
              fill-opacity .75
              cursor auto
              stroke-width 1.5px
              stroke-opacity .75

          .legend
            circle.legend-element
              fill lightgrey
              opacity .5

      #station
        width 418px
        margin-left 20px
        position relative

        h2
          font-size 24px
          color grey
          font-weight normal
          margin 0
          position absolute
          top 3px
          left 0
          max-width 360px
          line-height 1.25

        #radial-wrapper
          svg.radial
            path.layer
              stroke-width 1px
              stroke #fff
              fill #fff
              opacity .5
              transition opacity .25s
              cursor pointer
              &:hover,
              &.active
                opacity 1
              &.active
                cursor auto

            .legend
              path.legend-element
                fill none
                stroke lightgrey
              text.legend-element
                text-anchor middle

        #tiles-wrapper
          svg.tiles
            rect
              fill #fff

    #pollutant-selector
      clear both
      margin-top 40px
      text-align center
      .pollutant
        width 140px
        display inline-block
        text-align center
        padding 12px 0
        line-height 12px
        border-top 5px solid
        border-bottom 3px solid
        cursor pointer
        opacity .25
        transition opacity .25s
        color darkgrey
        &:hover
          opacity .5
        &.active
          opacity 1
        sub
          vertical-align sub
          font-size .75em
          display inline-block
          margin-bottom -1em

#write-up
  padding 35px 0 20px
  color darkgrey
  .content
    width 700px
    margin 0 auto
    b
      font-weight bold
    i
      font-style italic
    h2, h3, h4, h5, h6
      border-left solid lightgrey
      padding-left 15px
      transition border-left-color .25s
      line-height 1.25
    h2
      font-size 30px
      margin-top 40px
      margin-bottom 20px
      border-left-width 5px
      margin-left -20px
    h3
      font-size 20px
      margin-top 25px
      margin-bottom 15px
      border-left-width 3px
      margin-left -17px
    p, ul
      font-size 15px
      line-height 1.5
      margin 15px 0
    sub
      vertical-align sub
      font-size .75em
      display inline-block
      margin-bottom -1em
    ul
      margin-left 20px
      list-style circle
      li
        b
          margin-right 1em

footer
  padding 20px 0
  margin-bottom 20px
  background-color rgba(lightgrey, .15)
  box-shadow inset 0 0 5px rgba(#000, .5)
  .content
    width 700px
    margin 0 auto
    p
      text-align center
      font-size 12px
      line-height 1.5
      color grey

#social
  position absolute
  top 10px
  right 10px
  .social-button-wrapper
    display inline-block
    margin-left 10px