//- Main Stylesheet

@import compass/css3/transition
@import compass/css3/transform

@import flat
@import fonts
@import reset
@import base


html
  border-top: 4px solid $flat-blue-4

body
  padding-bottom: 6em


li, a, small
  +latofont(400)
  color: $flat-gray-1
  font-variant: small-caps
  text-rendering: auto

h1
  color: $flat-blue-4
  font-variant: small-caps
  text-rendering: auto
  margin: 0
  padding: 0 0 0.4em

h2
  +latofont(400)
  color: $flat-blue-4
  font-size: 0.8em
  font-variant: small-caps
  text-rendering: auto
  margin: 0
  padding: 1em 0 0

ul
  width: 100%

li
  padding: 0.4em 0
  &:nth-child(odd)
    background-color: $flat-green-1
  &:nth-child(even)
    background-color: $flat-green-2

a
  border: none
  +transition(color 300ms)
  &:hover
    border: none
    background: none
    color: $flat-purple-1

span
  cursor: default

small
  padding: 0 0.6em
  font-size: 0.8em
  cursor: default

button
  +latofont(300)
  background-color: $flat-blue-3
  border-color: $flat-blue-3
  font-variant: small-caps
  text-rendering: auto
  padding: 0.6em
  &:focus
    outline: none

.header
  margin: 4em 0 6em

.title
  +latofont(700)
  +translateZ(0)
  cursor: default

  &:before, &:after
    +translateZ(0)
    padding: 0 0.2em
    +transition(padding 600ms)

  &:before
    content: '{'
  &:after
    content: '}'

  &:hover
    &:before, &:after
      padding: 0 0.4em

.github-link
  +latofont(700)
  color: $flat-blue-4
  &:hover
    color: $flat-red-2

.article-link
  +latofont(700)

.postedBy
  +latofont(400)