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


// COLORS & BACKGROUNDS --------------------------------------------------------

$yellow:     #fdf485
$orange:     #ff8000
$red:        #ff4040
$blue:       #4ae
$green:      #61c227
$gray:       #ccc
$light-gray: #eeeeee
$dark-gray:  #222

$color:         $gray
$bg-color:      $dark-gray
$heading-color: $orange
$link-color:    $blue

// TYPE --------------------------------------------------------

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

$font-size: 18px

// LAYOUT --------------------------------------------------------

$gutter: 40px
$base-line-height: 1.7em
$max-column-width: 800px


// UI COMPONENTS --------------------------------------------------------

$radius: 6px



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

body,
input,
textarea
  color: $color
  font-size: $font-size
  font-family: $body-font-family

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

h1
  font-size: 72px
  line-height: 1em

h2
  font-size: 36px
  line-height: 1.2em
  margin-bottom: 0.3em
  text-transform: uppercase

h3
  margin-bottom: 0.5em
  color: $heading-color
  font-size: $font-size
  letter-spacing: 0.1em
  text-align: center
  text-transform: uppercase

h4
  font-size: $font-size

p
  line-height: $base-line-height
  margin-bottom: $base-line-height

ol
  list-style-type: decimal

ul, ol
  margin: 0 0 1.25em 0

li
  margin-bottom: 2em
  line-height: $base-line-height - 0.2
  &.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

pre
  padding: $gutter/4
  margin-top: $gutter/8
  margin-bottom: $gutter/4
  background-color: darken($bg-color, 5%)
  font-family: $code-font-family
  line-height: 1.5em
  +border-radius($radius)
  overflow-x: auto

code, kbd
  padding: 2px 4px
  color: desaturate($orange, 65%)
  background-color: darken($bg-color, 5%)
  font-family: $code-font-family
  +border-radius($radius)

code
  position: relative
  top: -1px

pre code
  top: 0
  padding: 0
  background: transparent

a
  color: $link-color
  text-decoration: none
  &:hover
    color: lighten($link-color, 30%)

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

.sub-point
  display: block
  font-size: $font-size - 4
  code
    font-size: $font-size - 6
    padding: $gutter/20


/* -- Layout ------------------------------------------------------------------ */

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

.section
  padding: 0 0 40px 0
  +pie-clearfix
  &.last
    border-bottom: none

.section-header
  position: relative
  z-index: 1
  margin-top: 0
  margin-bottom: $gutter * 2
  color: lighten($bg-color, 12%)
  text-align: center
  font-size: 72px

  &:before
    border-top: 2px solid lighten($bg-color, 12%)
    content: ""
    margin: 0 auto // this centers the line to the full width specified 
    position: absolute // positioning must be absolute here, and relative positioning must be applied to the parent
    top: 50%
    left: 0
    right: 0
    bottom: 0
    z-index: -1
  
  .line-cover
    /* to hide the lines from behind the text, you have to set the background color the same as the container */ 
    background: $bg-color
    padding: 0 15px 

.section-content
  margin: 0 auto
  padding-bottom: $gutter
  max-width: $max-column-width

.row
  +pie-clearfix

/* -- Sections ------------------------------------------------------------------ */

/* -- Intro -- */

.intro-section
  text-align: center

.logo
  color: white
  margin-bottom: 0.07em
  .version
    color: $heading-color

.author
  margin-top: -9px
  padding-left: 23px
  line-height: 1.2em

.author-links
  font-size: $font-size - 2

.lead
  font-size: $font-size + 4

/* -- Examples -- */
.examples-section
  text-align: center

.image-row
  +pie-clearfix
  margin-bottom: $gutter/2

.example-image-link
  display: inline-block
  margin: 0 $gutter/4 $gutter/2 $gutter/4
  line-height: 0
  +border-radius($radius)
  border: 4px solid transparent
  +transition(all .1s ease-out)
  &:hover
    border: 4px solid $link-color

.example-image
  +border-radius(2px)

/* -- Download -- */

.download-section
  text-align: center

.download-button
  display: block
  max-width: 300px
  margin: 0 auto $gutter/2 auto
  padding-top: $gutter/4 + 10
  padding-bottom: $gutter/4
  background-color: darken($bg-color, 10%)
  border: 4px solid $bg-color
  +border-radius($radius)
  +transition(all .1s ease-out)
  +pie-clearfix
  &:hover
    border-color: $link-color
    background-color: #444
  .file
    font-size: 36px
    color: white
    line-height: 1em
  .version
    font-size: 24px
    color: $link-color

/* -- Donate -- */

fieldset
  border: none
.donate-button-form
  text-align: center
.donate-button
  border: 4px solid rgba(0, 0, 0, 0)
  +border-radius($radius)
  +transition(all .1s ease-out)
  &:hover
    background-color: #444
    border-color: $link-color

/* -- Credits -- */

.credits-section
  text-align: center

/* -- Sharing -- */

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


/* -- Responsive design -------------------------------------------------------------- */

@media only screen and (max-width : 640px)
  body
    font-size: $font-size - 4
  h1
    font-size: 48px // from 72px
  h2
    font-size: 26px // from 48px
  h3
    font-size: 16px // from 18px
  ol
    list-style-position: inside
  code,
  kbd,
  pre,
  pre code
    font-size: $font-size - 7
  .sub-point
    font-size: $font-size - 6
    code
      font-size: $font-size - 9
  .lead
    font-size: $font-size - 2
  .section
    padding-bottom: $gutter/2
    margin-bottom: $gutter/2
  .author
    margin-top: -5px
    padding-left: 30px
  .author-links
    font-size: $font-size - 6