@import "compass/css3"
@import "compass/utilities/general/clearfix"

@import "normalize"


// VARIABLES -------------------------------------------------------------------

// == COLORS & BACKGROUNDS

$yellow:     #fdf485
$orange:     #e67e39
$red:        #ff4040
$blue:       #4ae
$green:      #61c227
$gray:       #777
$light-gray: #f3f3f3
$dark-gray:  #222

$color:                 #666
$bg-color:              #fff
$heading-color:         $dark-gray
$section-heading-color: $orange
$link-color:            $blue
$code-color:            $color
$code-bg-color:         darken($bg-color, 4%)
$border-color:          darken($bg-color, 4%)

$backdrop-bg-color:     darken($bg-color, 4%)
$header-color:          $color
$footer-color:          $color


//== TYPE

$body-font-family:    "Karla", "lucida grande", sans-serif
$heading-font-family: "Montserrat", "Helvetica", sans-serif
$code-font-family:    "Karla", "lucida grande", sans-serif

//== LAYOUT

$gutter: 30px
$max-column-width: 600px

$backdrop-z-index: 5
$content-z-index: 10
$sharing-z-index: 20

//== UI COMPONENTS

$radius: 6px


/* Typography
 *----------------------------------------------- */

html
  font: 87% / 1.5 $body-font-family, sans-serif
  font-weight: 400

@media (min-width: 40rem)
  html
    font-size: 100%

@media (min-width: 64rem)
  html
    font-size: 106%

body
  color: $color
  background-color: $bg-color

h1, h2, h3, h4, h5
  color: $heading-color
  line-height: 1.2em
  font-family: $heading-font-family
  font-weight: 700

h1
  font-size: 3.5rem
  margin: 0 0 0.1em 0

@media (min-width: 40rem)
  h1
    font-size: 4.5rem

@media (min-width: 64rem)
  h1
    font-size: 5rem

h2
  color: $section-heading-color
  margin-top: 0
  margin-bottom: 1.5rem
  font-size: 1.5rem
  text-transform: uppercase

@media (min-width: 40rem)
  h2
    font-size: 2rem

h3
  font-size: 1.2rem
  margin-bottom: .5rem

blockquote
  margin: 0
  p
    color: #bbb
    font-style: italic
    margin-bottom: 1.5rem

cite
  color: #bbb

p
  margin: 0 auto 2em auto
  text-align: left

.lead
  max-width: 45rem
  margin-bottom: 1.1rem
  font-size: 1.25rem
  

ol
  list-style-type: decimal

ul, ol
  margin: 0 0 1.25em 0

li
  margin-bottom: 2em
  &.last-list-item
    border-bottom: none

dt
  font-weight: bold

dd
  margin-bottom: 1.625em

strong
  font-weight: bold

i
  font-style: italic

em
  font-style: normal

a
  color: $link-color
  text-decoration: none
  &:hover
    text-decoration: underline

::-moz-selection,
::selection
  background: $orange
  color: white

.sub-point
  display: block
  font-size: 0.75rem




/* Code
 * ========================================================================== */

code
  color: $code-color
  background-color: $code-bg-color
  +border-radius($radius)
  font-family: Consolas, Courier, monospace
  font-size: 0.9rem
  padding: 0.1rem 0.3rem
  position: relative
  top: -1px

pre
  background-color: $code-bg-color
  +border-radius($radius)
  padding: 0 0.5rem 0.1rem 0.5rem
  code
    padding: 0
    font-size: 0.8rem
    border: none


/* Lists
 * ========================================================================== */

ul
  margin: 0
  text-align: left

@media (min-width: 40rem)
  ul
    display: inline-block


/* Buttons
 * ========================================================================== */

.button
  display: block
  padding: 0.7rem 2rem
  margin-bottom: 0.5rem
  border: none
  color: #fff
  background-color: $link-color
  font-size: 1.1rem
  font-weight: bold
  text-transform: uppercase
  +border-radius($radius)
  vertical-align: middle
  white-space: nowrap
  &:hover
    background: darken($link-color, 10%)
    text-decoration: none

@media (min-width: 40rem)
  .button
    display: inline-block
    margin: 0 0.25rem

.button-minor
  padding: 0.3rem 1rem
  border: 2px solid $link-color
  color: $link-color
  background-color: transparent
  font-size: 0.8rem
  &:hover
    color: white
    background: $link-color


/* Elements
 * ========================================================================== */

hr
  border: 0
  border-top: 2px solid $border-color
  margin: 1rem auto 1.5rem auto
  width: 3rem
/* -- Layout ------------------------------------------------------------------ */

*, *:before, *:after
  +box-sizing("border-box")

body
  margin: 0
  padding: 0
  background: $bg-color

section
  border-top: 2px solid $border-color
  text-align: center
  padding: 2rem 0
  &:first-of-type
    border-top: none

@media (min-width: 40rem)
  section
    padding: 4rem 0

.container
  margin: 0 auto
  max-width: 40rem
  width: 90%

.row
  +pie-clearfix


//== Header

.backdrop
  position: fixed
  z-index: $backdrop-z-index
  width: 100%
  height: 100%
  background-color: $backdrop-bg-color

.picture-icon
  width: 2.7rem
  height: 2.7rem
  margin-right: 0.5rem
  +transition(transform .4s cubic-bezier(0.510, 1.285, 0.855, 1.185))
  &:hover
    +scale(3)

@media (min-width: 40rem)
  .picture-icon
    width: 3.4rem
    height: 3.4rem

@media (min-width: 64rem)
  .picture-icon
    width: 3.75rem
    height: 3.75rem

header
  padding-top: 5rem
  text-align: center
  color: $header-color
  p
    text-align: center

@media (min-width: 40rem)
  header
    padding-top: 6.5rem

.primary-actions
  margin-bottom: 1.5rem

.credits
  p
    text-align: center
  .button
    margin-top: 0.5rem

//== Content

.content
  position: absolute
  z-index: $content-z-index
  top: 28rem
  width: 100%
  border-top: 1px solid darken($border-color, 5%)
  background-color: $bg-color

@media (min-width: 40rem)
  .content
    top: 34rem

/* -- Examples -- */

.example-image-link
  display: inline-block
  padding: 4px
  margin: 0 0.5rem 1rem 0.5rem
  background-color: $bg-color
  line-height: 0
  +border-radius($radius)
  +transition(background-color .5s ease-out)
  &:hover
    background-color: $link-color
    +transition(background-color 0)

.example-image
  width: 7rem
  +border-radius($radius - 1)


/* -- How to use -- */    

.how-to-use-section
  p,
  ol,
  ul,
  pre
    text-align: left

/* -- Donate -- */

fieldset
  border: none

.donate-button
  width: 100%

@media (min-width: 40rem)
  .donate-button
    width: auto

/* -- Sharing -- */

.sharing-section
  position: fixed
  z-index: $sharing-z-index
  top: 20px
  right: 0