Drag'n'drop working again. Appending quantize.js code into color-thief.js

sass/app.sass

@@ -17,6 +17,7 @@ $linkColor: $green
 
 $fontSize: 18px
 $columnWidth: 600px
+$radius: 4px
 
 // $codeColor: #eff
 // $inputColor: #555
@@ -27,7 +28,7 @@ $columnWidth: 600px
 
 
 body, input, textarea
-  margin: 40px
+  margin: 40px 40px 80px 40px
   color: $color
   background: $bgColor
   font-size: $fontSize
@@ -37,28 +38,38 @@ h1, h2, h3, h4, h5, h6
   color: white
   line-height: 1.2em
   font-weight: 500
-  margin-bottom: 0.5em
+
+h1
+  font-size: 72px
+  line-height: 1em
 
 h2
   font-size: 36px
   line-height: 1.2em
+  margin-bottom: 0.2em
 
 h3
   font-size: 16px
   letter-spacing: 0.1em
+  margin-bottom: 0.2em
   text-transform: uppercase
 
 h4
   font-size: 20px
-  margin-bottom: 1.25em
+  margin-bottom: 1em
 
 p
-  line-height: 1.5em
-  margin-bottom: 1.25em
+  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
@@ -66,18 +77,31 @@ a
   &:hover
     color: lighten($linkColor, 30%)
 
+/* Images */
+img
+  display: block
+
 /* -- Layout ------------------------------------------------------------------ */
 
 .wrapper
-  text-align: center
   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%)
@@ -86,8 +110,7 @@ a
     background: #444
     // background: url(../img/dark_checkered_bg.png)
 
-.target-image
-  width: 100%
+/* -- Image examples ------------------------------------------------------------------ */
 
 .run-functions-button
   position: absolute
@@ -99,54 +122,50 @@ a
   margin-left: -50px
   border: none
   +border-radius(50%)
-  color: darken($yellow, 50%)
+  color: darken($yellow, 55%)
   background-color: $yellow
   font-size: 24px
+  font-weight: 500
   cursor: pointer
   &:hover
     background-color: lighten($yellow, 10%)
-    color: darken($yellow, 45%)
+    color: darken($yellow, 60%)
   &:active
     +scale(0.9)
+  &.hide
+    +transition(all .4s)
+    top: 100%
+    +scale(0)
+
+.target-image
+  width: 100%
 
 .color-thief-output
-  margin-top: 20px
+  display: none
+  padding: 20px
+  background-color: #eee
+  .function-title
+    color: $bgColor
+    font-weight: bold
 
 .function
-  clear: left
   margin-bottom: 10px
+
+.swatches
   +pie-clearfix
 
 .swatch
   width: 60px
   height: 30px
-  margin-right: 2px
+  margin: 0 2px 2px 0
   background: #dddddd
   float: left
-  +transition(scale .5s)
-  &:hover
-    +transition(none)
-    +scale(1.1, 1.1)
-    +box-shadow( 0 1px 10px black)
-
-/* Hardcoding the offset for the FB icon example */
-.fbIcon .imageWrap .targetImage
-  +border-radius(0)
-  position: relative
-  top: 142px
-  left: 192px
 
 canvas
   display: none
 
 /* -- Animated logo ------------------------------------------------------------------ */
-h1
-  font-size: 72px
-  line-height: 0.5em
-  margin-bottom: 0.3em
-  small
-    font-size: 20px
-
+.logo
   .char1
     +transition( color .1s)
   .char2
@@ -204,17 +223,38 @@ h1
 
 /* -- Drag and drop ------------------------------------------------------------------ */
 
-.drag-and-drop
+.drag-drop
   display: none
 
-.dropZone
-  height: 200px
-  margin-bottom: 60px
-  background: url("../img/drag_placeholder.png")
+.drop-zone
+  height: 400px
+  margin-bottom: 80px
+  background: url("../img/dark_checkered_bg.png")
   &.dragging
-    +box-shadow(inset 0 1px 10px #09A1EC)
-.droppedImage
+    +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%