style.sass

@import 'compass/css3'
@import 'compass/utilities'
@import 'compass/reset'

$liteslate: #7bd
$slate: #7bd
$box:   #7bd
$bg:    #fafafa
$yellow: #fafae0

html, body
  -webkit-backface-visibility: hidden

body, td, label
  font-family: 'helvetica neue', helvetica, arial, sans-serif
  font-weight: 200
  font-size: 12pt

body
  line-height: 1.5
  color: #555
  background: $bg
  text-shadow: 1px 1px 0 rgba(white, 0.4)

#all
  width: 800px
  margin: 0 auto

em
  font-style: italic
  color: #aaa

// Code
pre, code
  font-family: monaco, monospace

code
  font-size: 0.9em
  color: $slate
  padding: 0 6px
  +border-radius(2px)
  background: rgba(white, 0.3)
  +box-shadow(1px 1px rgba(black, 0.1))
  font-weight: 200

pre
  +box-sizing(border-box)
  padding: 10px
  font-size: 9pt

  .comment
    color: #808090

  b
    color: #389
    background: $yellow
    padding: 2px 3px
    +border-radius(2px)

//
// Header
//
#header
  &
    text-align: center
    line-height: 1.3
    padding: 40px 0

  h1
    font-size: 33pt
    font-weight: 100

  p
    font-size: 14pt
    font-weight: 800
    padding: 0 200px
    color: $slate

//
// Each thingie
//
article
  +pie-clearfix
  margin: 40px 0
  padding-top: 10px
  position: relative

  &.mini
    margin: 0 0

  *:not(.mini) + &.mini
    margin-top: 40px

  &.mini.last
    margin-bottom: 40px

  >.hover
    cursor: pointer
    position: absolute
    top: 0
    left: 0
    bottom: 0
    right: 50%
    z-index: 2

  h3
    font-weight: 800
    font-size: 12pt
    color: $liteslate

  .code
    float: right
    width: 50%
    +box-sizing(border-box)
    padding-left: 20px

  .code pre
    padding: 5px 0 20px 0

  .field
    position: relative
    float: right
    width: 50%
    height: 100px

    background: #f3f3f3
    border: solid 1px #eee
    +box-sizing(border-box)
    +border-radius(2px)

  &.highlight .field
    background: #e8f0f0 * 1.03
    border: solid 1px rgba($slate, 0.4)

  .box, .ghost
    width: 50px
    height: 50px
    +box-sizing(border-box)
    display: block
    position: absolute
    +border-radius(2px)
    background: $box
    +box-shadow(inset 1px 1px 0 rgba(white, 0.3))
    border: solid 1px $box

  .ghost
    background: #e0fafa * 1.2
    opacity: 0.4
    border: 0
    +box-shadow(inset 0 0 1px #7bd, inset 2px 2px 3px rgba(#7bd*0.4, 0.2))

h2
  text-align: center
  font-size: 1.1em
  padding: 5px 0
  +border-radius(2px)
  margin-bottom: -10px
  border-bottom: solid 1px rgba($slate, 0.1)
  background: mix($slate, $bg, 20%)
  line-height: 20pt

  font-weight: 800

h2 + .info
  margin-top: 10px
  background: mix($slate, $bg, 8%)
  padding: 10px 50px
  text-align: center
  margin-bottom: -10px

button, a.button
  text-decoration: none
  position: relative
  padding: 0 50px 0 10px
  border: 0
  margin: 0
  text-shadow: 1px 1px 0 rgba(black, 0.1)
  +box-sizing(border-box)
  display: inline-block

  height: 20px
  line-height: 20px

  background: $slate
  color: white
  font-weight: 800
  +border-radius(15px)

  cursor: pointer

  &:before
    content: '›'
    display: block

    position: absolute
    right: 20px
    top: 0

    height: 20px
    line-height: 20px

  &:hover
    background: $slate * 0.8

  small
    font-size: 0.8em
    color: #aaa

.meta
  padding: 10px 0 50px 0
  text-align: center

  a.button
    margin: 0 10px
    background: #777
    font-weight: 200
    padding: 0 50px
    text-align: center
    height: 30px
    line-height: 30px

    &:hover
      background: #555

    &:before
      display: none

//
// Info links
//
.info
  a
    text-decoration: none
    color: #555
    padding: 3px 5px
    +border-radius(2px)
    background: $yellow
    +box-shadow(1px 1px 0 rgba(black, 0.1))
    +transition(all 200ms linear)

  a span
    border-bottom: solid 1px rgba(black, 0.1)

  a:hover
    background: $yellow * 0.9

//
// More info
//
.info.source, .more.info
  margin-top: 30px
  margin-bottom: 30px
  background: transparent
  text-align: center
  padding-left: 50px
  padding-right: 50px

  >*:first-child
    margin-top: 0

  p, ul, pre
    margin-top: 10px

  pre
    color: #888
    padding: 10px
    background: #e8eaea
    +box-shadow(1px 1px 0 rgba(black, 0.1))
    +border-radius(2px)
    margin: 20px 150px 0 150px
    text-align: left

.info
  li
    display: inline-block
    margin-left: 5px
    background: rgba($slate, 0.1)
    padding: 2px 8px
    +border-radius(4px)
    +box-shadow(1px 1px 0 rgba(black, 0.1))

.credits
  padding: 30px 0 100px 0
  font-size: 0.8em
  overflow: hidden

  p, ul
    float: left
    width: 32%
    +box-sizing(border-box)
    padding-right: 30px
    margin: 10px 0

  ul
    margin-left: 20px

  ul, ul li
    list-style-type: disc

  a
    color: #999
    text-decoration: none

  a:hover
    border-bottom: solid 1px #aaa

.info.transformations
  padding:
    left: 125px
    right: 125px

  text-align: left

  ul
    line-height: 2

  li
    line-height: 1.3
    display: inline-block
    width: 150px
    text-align: left
    font-size: 0.9em
    +box-shadow(none)
    background: transparent

  li em
    font-style: normal
    margin-left: 5px
    font-size: 0.9em