diff --git a/examples/css/screen.css b/examples/css/screen.css
index 783b394..f903654 100644
--- a/examples/css/screen.css
+++ b/examples/css/screen.css
@@ -1 +1,88 @@
-article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{background:#fff;color:#000;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type='button'],input[type='reset'],input[type='submit']{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0}input[type='search']{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html{font:87%/1.5 "Karla","lucida grande",sans-serif,sans-serif;font-weight:400}@media (min-width: 40rem){html{font-size:100%}}@media (min-width: 64rem){html{font-size:106%}}body{color:#777;background-color:#f3f3f3}h1,h2,h3,h4,h5{color:#222;line-height:1.2em;font-family:"Montserrat","Helvetica",sans-serif;font-weight:700}h1{font-size:4rem;margin:0 0 0.2em 0;line-height:1.1em}@media (min-width: 40rem){h1{font-size:4.5rem}}@media (min-width: 64rem){h1{font-size:5rem}}h2{color:#e67e39;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:0.5rem}p{margin:0 auto 2em auto;text-align:left}.lead{max-width:50rem;margin-bottom:1.4rem;font-size:1.1rem}@media (min-width: 40rem){.lead{font-size:1.25rem}}strong{font-weight:bold}a{color:#4ae;text-decoration:none}a:hover{text-decoration:underline}::-moz-selection,::selection{background:#e67e39;color:#fff}code{color:#aaa;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px;font-family:Consolas,Courier,monospace;font-size:0.9rem;padding:0.1rem 0.3rem;position:relative;top:-1px}ul{margin:0;text-align:left}@media (min-width: 40rem){ul{display:inline-block}}.button{display:block;padding:0.7rem 2rem;margin-bottom:0.5rem;border:none;color:#fff;background-color:#4ae;font-size:1.1rem;font-weight:bold;text-transform:uppercase;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px;vertical-align:middle;white-space:nowrap}.button:hover{background:#1595ea;text-decoration:none}@media (min-width: 40rem){.button{display:inline-block;margin:0 0.25rem}}.button-minor{padding:0.35rem 1rem;border:2px solid #4ae;color:#4ae;background-color:transparent;font-size:0.8rem}.button-minor:hover{color:#fff}hr{border:0;border-top:2px solid #e6e6e6;margin:2rem auto;width:3rem}@media (min-width: 40rem){hr{margin:2.5rem auto}}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{margin:0;padding:0;background:#f3f3f3}section{border-top:2px solid #e6e6e6;text-align:center;padding:1.5rem 0}section:first-of-type{border-top:none}@media (min-width: 40rem){section{padding:2rem 0}}.container{margin:0 auto;max-width:40rem;width:90%}header{padding:4rem 0 2rem 0;background-color:#fff;text-align:center}header p{text-align:center}@media (min-width: 40rem){header{padding:2rem 0}}.image-section{margin-bottom:80px}.image-section .image-wrap{position:relative;line-height:1em}.examples-section .image-section .target-image{-moz-border-radius-bottomleft:8px;-webkit-border-bottom-left-radius:8px;border-bottom-left-radius:8px;-moz-border-radius-bottomright:8px;-webkit-border-bottom-right-radius:8px;border-bottom-right-radius:8px}.examples-section .image-section.with-color-thief-output .target-image{-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;border-bottom-right-radius:0}.run-functions-button{position:absolute;top:50%;left:50%;width:8rem;height:8rem;margin-top:-4rem;margin-left:-4rem;border:none;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;color:#777;background-color:#fdf485;font-size:2rem;font-weight:bold;cursor:pointer;text-transform:uppercase;outline:none}.run-functions-button:hover{-webkit-transform:scale(1.1, 1.1);-moz-transform:scale(1.1, 1.1);-ms-transform:scale(1.1, 1.1);-o-transform:scale(1.1, 1.1);transform:scale(1.1, 1.1);-webkit-transition:-webkit-transform 0.2s;-moz-transition:-moz-transform 0.2s;-o-transition:-o-transform 0.2s;transition:transform 0.2s}.run-functions-button:active{-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);-ms-transform:scale(0.9, 0.9);-o-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}.run-functions-button.hide{background-color:#fdf485;color:#777;-webkit-transition:-webkit-transform 0.8s,top 0.8s cubic-bezier(0.22, -0.37, 0.75, 0.75);-moz-transition:-moz-transform 0.8s,top 0.8s cubic-bezier(0.22, -0.37, 0.75, 0.75);-o-transition:-o-transform 0.8s,top 0.8s cubic-bezier(0.22, -0.37, 0.75, 0.75);transition:transform 0.8s,top 0.8s cubic-bezier(0.22, -0.37, 0.75, 0.75);top:105%;-webkit-transform:scale(0, 0);-moz-transform:scale(0, 0);-ms-transform:scale(0, 0);-o-transform:scale(0, 0);transform:scale(0, 0)}.touch .touch-label{display:inline}.touch .no-touch-label{display:none}.no-touch .touch-label{display:none}.no-touch .no-touch-label{display:inline}.target-image{display:block;width:100%;-moz-border-radius-topleft:8px;-webkit-border-top-left-radius:8px;border-top-left-radius:8px;-moz-border-radius-topright:8px;-webkit-border-top-right-radius:8px;border-top-right-radius:8px}.color-thief-output{display:none;padding:1.5rem;background-color:#fff;border:1px solid #e6e6e6;border-top-width:0;-moz-border-radius-bottomleft:8px;-webkit-border-bottom-left-radius:8px;border-bottom-left-radius:8px;-moz-border-radius-bottomright:8px;-webkit-border-bottom-right-radius:8px;border-bottom-right-radius:8px}.function-title{margin-top:0}.function{margin-bottom:1.5rem}.swatch{display:inline-block;margin:0;background:#ddd}@media (min-width: 40rem){.swatch{margin-right:-2px}}.get-color .swatch{width:6rem;height:3rem}.get-palette .swatch{width:3rem;height:2rem}@media (min-width: 40rem){.get-palette .swatch{width:4rem;height:2.7rem}}canvas{display:none}footer{padding:2rem 0;background-color:#fff;text-align:center}footer p{text-align:center}footer .button{margin-top:0.5rem}.sharing-section{position:fixed;z-index:10;top:20px;right:0}.drag-drop-section{display:none}.drop-zone{height:25rem;margin-bottom:4rem;background-color:#222;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px}.drop-zone.dragging{font-weight:700;-webkit-box-shadow:inset 0 0 0 8px #4ae;-moz-box-shadow:inset 0 0 0 8px #4ae;box-shadow:inset 0 0 0 8px #4ae}.drop-zone.dragging .drop-zone-label{color:#4ae}.drop-zone.dragging .default-label{display:none}.drop-zone.dragging .dragging-label{display:block}.drop-zone-label{position:relative;top:11rem;color:#fdf485;font-size:1.8rem;text-align:center;pointer-events:none;text-transform:uppercase;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px}@media (min-width: 40rem){.drop-zone-label{top:10.5rem;font-size:2.4rem}}.dragging-label{display:none}.dropped-image .run-functions-button{display:none}
+:root {
+  /* Colors */
+  --color: #000;
+  --bg-color: #f9f9f9;
+  --primary-color: #fc4c02;
+  --secondary-color: #f68727;
+  --code-color: var(--primary-color);
+  --code-bg-color: #fff;
+
+  /* Typography */
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --code-font: Menlo, Consolas, Monaco, Lucida Console, monospace;
+  --bold: 700;
+  --x-bold: 900;
+  --line-height: 1.5em;
+  --line-height-heading: 1.3em;
+
+  /* Breakpoints */
+  --sm-screen: 640px;
+}
+
+/* Base
+ * *----------------------------------------------- */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg-color);
+}
+
+/* Typography
+ * *----------------------------------------------- */
+
+html {
+  font-size: 16px;
+}
+
+body,
+input,
+button,
+select,
+textarea {
+  font-family: var(--font);
+  font-size: 1rem;
+  line-height: var(--line-height);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5 {
+  margin-bottom: 0.5em;
+  font-weight: var(--x-bold);
+  line-height: var(--line-height-heading);
+  letter-spacing: -0.005em;
+}
+
+h2 {
+  font-size: 1.06rem;
+}
+
+
+/* -- Layout ------------------------------------------------------------------ */
+
+/* -- Examples -- */
+.image-section {
+  border-bottom: 1px solid #ccc;
+  padding: 16px 16px 32px 16px;
+  margin-bottom: 32px;
+}
+
+.swatch {
+  display: inline-block;
+  margin: 0;
+  background: #dddddd;
+}
+
+.get-color .swatch {
+  width: 6rem;
+  height: 3rem;
+}
+
+.get-palette .swatch {
+  width: 3rem;
+  height: 2rem;
+}
+
diff --git a/examples/sass/_normalize.sass b/examples/sass/_normalize.sass
deleted file mode 100644
index 055e45e..0000000
--- a/examples/sass/_normalize.sass
+++ /dev/null
@@ -1,224 +0,0 @@
-/**! normalize.css v2.1.1 | MIT License | git.io/normalize
-
-// HTML5 display definitions
-
-// Correct `block` display not defined in IE 8/9.
-article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
-  display: block
-
-// Correct `inline-block` display not defined in IE 8/9.
-audio, canvas, video
-  display: inline-block
-
-audio:not([controls])
-  // Prevent modern browsers from displaying `audio` without controls.
-  display: none
-
-  // Remove excess height in iOS 5 devices.
-  height: 0
-
-// Address styling not present in IE 8/9.
-[hidden]
-  display: none
-
-
-// Base
-
-html
-  // Prevent system color scheme's background color being used in Firefox, IE, and Opera.
-  background: #fff
-
-  // Prevent system color scheme's text color being used in Firefox, IE, and Opera.
-  color: #000
-
-  // Set default font family to sans-serif.
-  font-family: sans-serif
-
-  // Prevent iOS text size adjust after orientation change, without disabling user zoom.
-  -ms-text-size-adjust: 100%
-  -webkit-text-size-adjust: 100%
-
-// Remove default margin.
-body
-  margin: 0
-
-
-// Links
-
-a
-  // Address `outline` inconsistency between Chrome and other browsers.
-  &:focus
-    outline: thin dotted
-
-  // Improve readability when focused and also mouse hovered in all browsers.
-  &:active, &:hover
-    outline: 0
-
-
-// Typography
-
-// Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari 5, and Chrome.
-h1
-  font-size: 2em
-  margin: 0.67em 0
-
-// Address styling not present in IE 8/9, Safari 5, and Chrome.
-abbr[title]
-  border-bottom: 1px dotted
-
-// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
-b, strong
-  font-weight: bold
-
-// Address styling not present in Safari 5 and Chrome.
-dfn
-  font-style: italic
-
-// Address differences between Firefox and other browsers.
-hr
-  -moz-box-sizing: content-box
-  box-sizing: content-box
-  height: 0
-
-// Address styling not present in IE 8/9.
-mark
-  background: #ff0
-  color: #000
-
-// Correct font family set oddly in Safari 5 and Chrome.
-code, kbd, pre, samp
-  font-family: monospace, serif
-  font-size: 1em
-
-// Improve readability of pre-formatted text in all browsers.
-pre
-  white-space: pre-wrap
-
-// Set consistent quote types.
-q
-  quotes: '\201C' '\201D' '\2018' '\2019'
-
-// Address inconsistent and variable font size in all browsers.
-small
-  font-size: 80%
-
-// Prevent `sub` and `sup` affecting `line-height` in all browsers.
-sub, sup
-  font-size: 75%
-  line-height: 0
-  position: relative
-  vertical-align: baseline
-
-sup
-  top: -0.5em
-
-sub
-  bottom: -0.25em
-
-
-// Embedded content
-
-// Remove border when inside `a` element in IE 8/9.
-img
-  border: 0
-
-// Correct overflow displayed oddly in IE 9.
-svg:not(:root)
-  overflow: hidden
-
-
-// Figures
-
-// Address margin not present in IE 8/9 and Safari 5.
-figure
-  margin: 0
-
-
-// Forms
-
-// Define consistent border, margin, and padding.
-fieldset
-  border: 1px solid #c0c0c0
-  margin: 0 2px
-  padding: 0.35em 0.625em 0.75em
-
-legend
-  // Correct `color` not being inherited in IE 8/9.
-  border: 0
-
-  // Remove padding so people aren't caught out if they zero out fieldsets.
-  padding: 0
-
-button, input, select, textarea
-  // Correct font family not being inherited in all browsers.
-  font-family: inherit
-
-  // Correct font size not being inherited in all browsers.
-  font-size: 100%
-
-  // Address margins set differently in Firefox 4+, Safari 5, and Chrome.
-  margin: 0
-
-// Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
-button, input
-  line-height: normal
-
-// Address inconsistent `text-transform` inheritance for `button` and `select`.
-// All other form control elements do not inherit `text-transform` values.
-// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
-// Correct `select` style inheritance in Firefox 4+ and Opera.
-button, select
-  text-transform: none
-
-button, html input[type='button'], input[type='reset'], input[type='submit']
-  // Avoid the WebKit bug in Android 4.0.* where `html input[type='button'] { -webkit-appearance: button }` destroys native `audio` and `video` controls.
-  // Correct inability to style clickable `input` types in iOS.
-  -webkit-appearance: button
-
-  // Improve usability and consistency of cursor style between image-type `input` and others.
-  cursor: pointer
-
-// Re-set default cursor for disabled elements.
-button[disabled], html input[disabled]
-  cursor: default
-
-input
-  &[type='checkbox'], &[type='radio']
-    // Address box sizing set to `content-box` in IE 8/9.
-    box-sizing: border-box
-
-    // Remove excess padding in IE 8/9.
-    padding: 0
-
-  &[type='search']
-    // Address `appearance` set to `searchfield` in Safari 5 and Chrome.
-    -webkit-appearance: textfield
-
-    // Address `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof).
-    -moz-box-sizing: content-box
-    -webkit-box-sizing: content-box
-    box-sizing: content-box
-
-    // Remove inner padding and search cancel button in Safari 5 and Chrome on OS X.
-    &::-webkit-search-cancel-button, &::-webkit-search-decoration
-      -webkit-appearance: none
-
-// Remove inner padding and border in Firefox 4+.
-button::-moz-focus-inner, input::-moz-focus-inner
-  border: 0
-  padding: 0
-
-textarea
-  // Remove default vertical scrollbar in IE 8/9.
-  overflow: auto
-
-  // Improve readability and alignment in all browsers.
-  vertical-align: top
-
-
-// Tables
-
-// Remove most spacing between table cells.
-table
-  border-collapse: collapse
-  border-spacing: 0
\ No newline at end of file
diff --git a/examples/sass/screen.sass b/examples/sass/screen.sass
deleted file mode 100644
index fb4bb2f..0000000
--- a/examples/sass/screen.sass
+++ /dev/null
@@ -1,405 +0,0 @@
-@import "compass/css3"
-@import "compass/utilities/general/clearfix"
-
-@import "normalize"
-
-// COLORS & BACKGROUNDS --------------------------------------------------------
-
-$yellow:     #fdf485
-$orange:     #e67e39
-$blue:       #4ae
-$green:      #61c227
-$gray:       #777
-$gray-light: #aaa
-$gray-dark:  #222
-
-$color:                 $gray
-$bg-color:              #f3f3f3
-$border-color:          darken($bg-color, 5%)
-$header-bg-color:       #fff
-$section-heading-color: $orange
-$heading-color:         $gray-dark
-$link-color:            $blue
-$code-color:            $gray-light
-
-// 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
-
-$sharing-section-z-index: 10
-
-// UI COMPONENTS --------------------------------------------------------
-
-$radius: 8px
-
-
-/* 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: 4rem
-  margin: 0 0 0.2em 0
-  line-height: 1.1em
-
-@media (min-width: 40rem)
-  h1
-    font-size: 4.5rem
-
-@media (min-width: 64rem)
-  h1
-    font-size: 5rem
-
-h2
-  color: $section-heading-color
-  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
-
-p
-  margin: 0 auto 2em auto
-  text-align: left
-
-.lead
-  max-width: 50rem
-  margin-bottom: 1.4rem
-  font-size: 1.1rem
-
-@media (min-width: 40rem)
-  .lead
-    font-size: 1.25rem
-
-strong
-  font-weight: bold
-
-a
-  color: $link-color
-  text-decoration: none
-  &:hover
-    text-decoration: underline
-
-::-moz-selection,
-::selection
-  background: $orange
-  color: white
-
-
-/* Code
- * ========================================================================== */
-
-code
-  color: $code-color
-  +border-radius($radius)
-  font-family: Consolas, Courier, monospace
-  font-size: 0.9rem
-  padding: 0.1rem 0.3rem
-  position: relative
-  top: -1px
-
-
-/* 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.35rem 1rem
-  border: 2px solid $link-color
-  color: $link-color
-  background-color: transparent
-  font-size: 0.8rem
-  &:hover
-    color: white
-
-
-/* Elements
- * ========================================================================== */
-
-hr
-  border: 0
-  border-top: 2px solid $border-color
-  margin: 2rem auto
-  width: 3rem
-
-@media (min-width: 40rem)
-  hr
-    margin: 2.5rem auto
-
-/* -- 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: 1.5rem 0
-  &:first-of-type
-    border-top: none
-
-@media (min-width: 40rem)
-  section
-    padding: 2rem 0
-
-.container
-  margin: 0 auto
-  max-width: 40rem
-  width: 90%
-
-/* -- Header -- */
-
-header
-  padding: 4rem 0 2rem 0
-  background-color: $header-bg-color
-  text-align: center
-  p
-    text-align: center
-
-@media (min-width: 40rem)
-  header
-    padding: 2rem 0
-
-
-/* -- Examples -- */
-
-.image-section
-  margin-bottom: 80px
-  .image-wrap
-    position: relative
-    line-height: 1em
-
-.examples-section
-  .image-section
-    .target-image
-      +border-bottom-radius($radius)
-  .image-section.with-color-thief-output
-    .target-image
-      +border-bottom-radius(0)
-
-.run-functions-button
-  position: absolute
-  top: 50%
-  left: 50%
-  width: 8rem
-  height: 8rem
-  margin-top: -4rem
-  margin-left: -4rem
-  border: none
-  +border-radius(50%)
-  color: $color
-  background-color: $yellow
-  font-size: 2rem
-  font-weight: bold
-  cursor: pointer
-  text-transform: uppercase
-  outline: none
-  &:hover
-    +scale(1.1)
-    +transition(transform .2s)
-  &:active
-    +scale(0.9)
-  &.hide
-    background-color: $yellow
-    color: $color
-    +transition(transform .6s, top .6s cubic-bezier(0.220, -0.370, 0.750, 0.750))
-    top: 105%
-    +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
-  display: block
-  width: 100%
-  +border-top-radius($radius)
-
-.color-thief-output
-  display: none
-  padding: 1.5rem
-  background-color: white
-  border: 1px solid $border-color
-  border-top-width: 0
-  +border-bottom-radius($radius)
-
-.function-title
-  margin-top: 0
-
-.function
-  margin-bottom: 1.5rem
-
-.swatch
-  display: inline-block
-  margin: 0
-  background: #dddddd
-
-@media (min-width: 40rem)
-  .swatch
-    margin-right: -2px
-
-.get-color
-  .swatch
-    width: 6rem
-    height: 3rem
-
-.get-palette
-  .swatch
-    width: 3rem
-    height: 2rem
-
-@media (min-width: 40rem)
-  .get-palette
-    .swatch
-      width: 4rem
-      height: 2.7rem
-
-canvas
-  display: none
-
-
-/* -- Credits -- */
-
-footer
-  padding: 2rem 0
-  background-color: $header-bg-color
-  text-align: center
-  p
-    text-align: center
-  .button
-    margin-top: 0.5rem
-
-/* -- Sharing -- */
-
-.sharing-section
-  position: fixed
-  z-index: $sharing-section-z-index
-  top: 20px
-  right: 0
-
-
-/* -- Drag and drop ------------------------------------------------------------------ */
-
-.drag-drop-section
-  display: none
-
-.drop-zone
-  height: 25rem
-  margin-bottom: 4rem
-  background-color: $gray-dark
-  +border-radius($radius)
-  &.dragging
-    font-weight: 700
-    +box-shadow(inset 0 0 0 8px $link-color)
-    .drop-zone-label
-      color: $link-color
-    .default-label
-      display: none
-    .dragging-label
-      display: block
-
-.drop-zone-label
-  position: relative
-  top: 11rem
-  color: $yellow
-  font-size: 1.8rem
-  text-align: center
-  pointer-events: none
-  text-transform: uppercase
-  +border-radius($radius)
-
-@media (min-width: 40rem)
-  .drop-zone-label
-    top: 10.5rem
-    font-size: 2.4rem
-
-.dragging-label
-  display: none
-
-.dropped-image
-  .run-functions-button
-    display: none
-  .targetImage
-    // width: 100%
-
-