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

$lightGray: #eeeeee
$blue: #0096df
$green: #00bfa8
$yellow: #fdf485
$orange: #ff8000
$red: #ff4040

$color: #ccc
$bgColor: #444

$headingColor: #444
$linkColor: $green

$fontSize: 18px
$columnWidth: 600px
$radius: 4px

body
  background: $bgColor

body, input, textarea
  color: $color
  font-size: $fontSize
  font-family: "Karla", "lucida grande", sans-serif

h1, h2, h3, h4, h5, h6
  color: white
  line-height: 1.2em
  font-weight: 500

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

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

h3
  font-size: 16px
  letter-spacing: 0.1em
  margin-bottom: 0.2em
  text-transform: uppercase

h4
  font-size: 20px
  margin-bottom: 1em

p
  line-height: 1.4em
  margin-bottom: 1em

strong
  font-weight: bold

code,
kbd
  font: $fontSize - 6 "Andale Mono", "DejaVu Sans Mono", monospace
  color: darken($color, 15%)

/* Links */
a
  color: $linkColor
  text-decoration: none
  &:hover
    color: lighten($linkColor, 30%)

/* Images */
img
  display: block

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

body
  margin: 40px 40px 80px 40px

.wrapper
  max-width: $columnWidth
  margin: 0 auto

.section-header
  text-align: center

.intro
  text-align: center
  margin-bottom: 2em

.description
  max-width: 450px
  margin-right: auto
  margin-left: auto

.read-more-links
  font-size: $fontSize - 2

.image-section
  margin-bottom: 80px
  background: darken($bgColor, 10%)
  .image-wrap
    position: relative
    background: #444

.examples
  .image-section
    .target-image
      +border-bottom-radius($radius)
      +box-shadow(0 4px 0 #333)
  .color-thief-output
    +box-shadow(none)
  .image-section.with-color-thief-output
    .target-image
      +border-bottom-radius(0)
      +box-shadow(none)
    .color-thief-output
      +box-shadow(0 4px 0 #333)

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

/* -- Image examples ------------------------------------------------------------------ */

.run-functions-button
  position: absolute
  top: 50%
  left: 50%
  width: 100px
  height: 100px
  margin-top: -50px
  margin-left: -50px
  border: none
  +border-radius(50%)
  color: darken($yellow, 55%)
  background-color: $yellow
  border-bottom: 2px solid darken($yellow, 60%)
  font-size: 24px
  font-weight: 500
  cursor: pointer
  &:hover
    background-color: lighten($yellow, 10%)
    color: darken($yellow, 60%)
  &:active
    +scale(0.9)
  &.hide
    +transition(transform .4s, top .4s)
    top: 100%
    +scale(0)

// Use Modernizr to check for touch support
.touch
  .touch-label
    display: inline
  .no-touch-label
    display: none
.no-touch
  .touch-label
    display: none
  .no-touch-label
    display: inline

.target-image
  width: 100%
  +border-top-radius($radius)

.color-thief-output
  display: none
  padding: 20px
  background-color: #eee
  +border-bottom-radius($radius)
  +box-shadow(0 4px 0 #333)
  .function-title
    color: $bgColor
    font-weight: bold

.function
  margin-bottom: 10px

.swatches
  +pie-clearfix

.swatch
  width: 60px
  height: 30px
  margin: 0 2px 2px 0
  background: #dddddd
  float: left

canvas
  display: none

/* -- Animated logo ------------------------------------------------------------------ */
.logo
  .char1
    +transition( color .1s)
  .char2
    +transition( color .1s .05s)
  .char3
    +transition( color .1s .1s)
  .char4
    +transition( color .1s .15s)
  .char5
    +transition( color .1s .2s)

  .char7
    +transition( color .1s .3s)
  .char8
    +transition( color .1s .35s)
  .char9
    +transition( color .1s .4s)
  .char10
    +transition( color .1s .45s)
  .char11
    +transition( color .1s .5s)
  &:hover
    .char1
      +transition( color .1s)
      color: $red
    .char2
      +transition( color .1s .05s)
      color: $orange
    .char3
      +transition( color .1s .1s)
      color: $yellow
    .char4
      +transition( color .1s .15s)
      color: $green
    .char5
      +transition( color .1s .2s)
      color: $blue

    .char7
      +transition( color .1s .3s)
      color: $red
    .char8
      +transition( color .1s .35s)
      color: $orange
    .char9
      +transition( color .1s .4s)
      color: $yellow
    .char10
      +transition( color .1s .45s)
      color: $green
    .char11
      +transition( color .1s .5s)
      color: $blue


/* -- Drag and drop ------------------------------------------------------------------ */

.drag-drop
  display: none

.drop-zone
  height: 400px
  margin-bottom: 80px
  +border-radius($radius)
  background: url("../img/dark_checkered_bg.png")
  &.dragging
    +box-shadow(inset 0 0 0 4px $linkColor)
    .default-label
      display: none
    .dragging-label
      display: block

.drop-zone-label
  position: relative
  top: 170px
  padding: 10px
  margin: 0 100px
  border: 4px solid $yellow
  +border-radius($radius)
  color: $yellow
  font-size: 24px
  text-align: center
  pointer-events: none

.dragging-label
  display: none

.dropped-image
  .run-functions-button
    display: none
  .targetImage
    // width: 100%


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

@media only screen and (max-width : 480px)
  body
    margin: 80px 0 40px 0
    font-size: $fontSize - 3
  .intro
    padding-left: 20px
    padding-right: 20px
  h1
    font-size: 48px // from 72px
  h2
    font-size: 24px // from 40px
  h3
    font-size: 14px // from 16px
  .examples,
  .dragged-images
    .image-section
      .target-image
        +border-radius(0)
      .color-thief-output
        +border-radius(0)
  .examples
    .image-wrap
      min-height:  200px

@media only screen and (min-width : 640px)
  .examples
    .image-wrap
      min-height: 450px // All 3 examples are 450px tall.