koodiklinikka.fi/src/styles/style.styl

linkColor = #3090de
textColor = #444
feedWidth = 500px
footerHeight = 50px

@require '_input'
@require '_button'
@require '_header'

body, html
  margin 0
  font 16px 'proxima-nova', 'Helvetica Neue', helvetica, arial, sans-serif
  height 100%
  width 100%
  font-weight 400
  color textColor
  font-smoothing antialiased
  box-sizing border-box

h1, h2, h3
  margin 0
  margin-bottom 0.5em
  text-shadow 1px 1px 10px rgba(255,255,255,0.5)
p
  margin-top 1em
  line-height 1.5em
  font-size 16px

a
  color linkColor
  text-decoration none
  &:hover
    text-decoration underline

.site
  display flex
  min-height 100vh
  flex-direction column

.container
  flex 1
  min-height 100vh
  padding-bottom footerHeight

section
  background #fff
  padding 2em 0

.content
  z-index 2
  position relative
  padding-right feedWidth
  min-height 50vh
  box-sizing border-box

  @media screen and (max-width: 700px)
    h3
      margin-top 0
section:first-child
  box-shadow -1px -1px 1px rgba(0, 0, 0, 0.05)
  border-bottom 1px solid #EEEEEE
  background #FCFCFC

.row
  max-width 850px
  margin auto
  overflow auto
  padding 0 2em
  margin-top 2em

  &:first-child
    margin-top 0

.column
  float left
  overflow auto
  padding 0 1em
  box-sizing border-box
  &:first-child
    padding-left 0
  &:last-child
    padding-right 0

  img:first-child
    max-width 100%

.column3-5
  width (100/5*3)%

.column2-5
  width (100/5*2)%

.column1-2
  width 50%

.column
  @media screen and (max-width: 700px)
    width 100%
    float none
    margin-top 1em
    padding 0
    &:first-child
      margin-top 0
.invite-form
  position relative
  .btn
    width 40px
    height 32px
    background linkColor
    padding 0
    position absolute
    right 8px
    top 7px

    border-bottom 2px solid #117280
    color rgba(255, 255, 255, 0.5)
    &:active
      border-bottom 0
  .loader
    position absolute
    right 9px
    top 9px
    width 0px
    height 0px
    background transparent url('../images/ajax-loader.gif') no-repeat center center
    display block
  &.sending
    .btn
      display none
    .loader
      width 28px
      height 28px

@keyframes drop
  0%
    transform rotateX(90deg)
  30%
    transform rotateX(45deg)
  45%
    transform rotateX(0deg)
  60%
    transform rotateX(45deg)
  100%
    transform rotateX(0deg)

.invite-form--message
  background linkColor
  color #fff
  line-height 40px
  padding 0 0.5em
  margin-top 4px
  transform rotateX(0deg)
  transform-origin 100% 0
  animation drop 0.6s linear

.invite-form.has-error
  .invite-form--message
    background rgb(226, 33, 112)

.members
  a
    display inline-block

.member
  width 30px
  vertical-align middle
  margin 3px
  border-radius 3px

footer
  height footerHeight
  line-height footerHeight
  margin-top footerHeight * -1
  padding 0.5em
  padding-right 1em
  z-index 2
  position relative
  border-top 1px solid #ECECEC
  font-size 1.5em
  i
    margin 0 0.30em
    font-size 1.5em

#email
  font-size .85rem
  float right

  @media screen and (min-width: 400px)
    font-size 1rem

.feed
  width feedWidth
  height 100%
  overflow auto
  position absolute
  top 0
  right 0
  z-index 5
  background #fff
  border-left 1px solid #E5E5E5
  &::-webkit-scrollbar
      display none

@media screen and (max-width: 980px)
  .feed
    width 0
  .content
    padding-right 0

.message
  padding 1em
  padding-right 2em
  border-top 1px solid #E5E5E5
  position relative
  display flex

.message__content
  flex 1

.message__body
  font-weight 400
  font-size 14px
  line-height 1.4em

.message__image
  width 50px
  margin-right 1em
  margin-top 0.5em
  text-align center
  a
    outline 0
  img
    width 50px

.message__icon
  margin 6px
  font-size 20px
  position absolute
  top 0
  right 0
  .fa-twitter
    color #55ACEE
  .fa-github
    color #333333
  .fa-slack
    color #DC005D

.message__details
  font-size 0.7em
  margin-top 0.5em

.message__meta
  margin-left 0.5em

.fader
  position fixed
  bottom 0
  left 0
  width 100%
  height 50px
  background linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 99%,rgba(0,0,0,0.15) 100%)
  pointer-events none
  z-index 2

.bread
  display table
  table-layout fixed
  width 100%
  .column
    float none
    display table-cell
    vertical-align middle

@media screen and (max-width: 700px)
  .bread
    display block
    .column
      display block