Cleanup: remove unused jquery, tabs to spaces

examples/css/screen.css

@@ -4,6 +4,7 @@
     --bg-color: #f9f9f9;
     --primary-color: #fc4c02;
     --secondary-color: #f68727;
+    --muted-color: #999;
     --code-color: var(--primary-color);
     --code-bg-color: #fff;
 
@@ -36,34 +37,37 @@ body {
 
 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;
+h1,
+h2,
+h3 {
     font-weight: var(--x-bold);
     line-height: var(--line-height-heading);
     letter-spacing: -0.005em;
 }
 
 h2 {
+    margin: 0 0 0.25em 0;
+    font-size: 1.5rem;
+}
+
+h3 {
+    margin: 1em 0 0.25em 0;
     font-size: 1.06rem;
 }
 
+code {
+    font-family: var(--code-font);
+    overflow-wrap: break-word;
+}
+
 
 /* -- Layout ------------------------------------------------------------------ */
 
-/* -- Examples -- */
 .image-section {
     border-bottom: 1px solid #ccc;
     padding: 16px 16px 32px 16px;
@@ -72,17 +76,20 @@ h2 {
 
 .swatch {
     display: inline-block;
-  margin: 0;
     background: #dddddd;
 }
 
-.get-color .swatch {
+.color .swatch {
     width: 6rem;
     height: 3rem;
 }
 
-.get-palette .swatch {
+.palette .swatch {
     width: 3rem;
     height: 2rem;
 }
 
+.time {
+    color: var(--muted-color);
+    font-weight: normal;
+}

examples/js/demo.js

@@ -1,6 +1,34 @@
+var colorThief = new ColorThief();
+
+var images = [
+    'black.png',
+    'red.png',
+    'rainbow-horizontal.png',
+    'rainbow-vertical.png',
+    // 'transparent.png',
+    // 'white.png',
+];
+
+// Render example images
+var examplesHTML = Mustache.to_html(document.getElementById('image-tpl').innerHTML, images);
+document.getElementById('example-images').innerHTML = examplesHTML;
+
+// Once images are loaded, process them
+document.querySelectorAll('.image').forEach((image) => {
+    const section = image.closest('.image-section');
+    if (this.complete) {
+        showColorsForImage(image, section);
+    } else {
+        image.addEventListener('load', function() {
+            showColorsForImage(image, section);
+        });
+    }
+})
+
 // Run Color Thief functions and display results below image.
 // We also log execution time of functions for display.
 const showColorsForImage = function(image, section) {
+    const file = section.src;
     const start = Date.now();
     const color = colorThief.getColor(image);
     const elapsedTimeForGetColor = Date.now() - start;
@@ -20,29 +48,3 @@ const showColorsForImage = function(image, section) {
     const outputEl = section.querySelector('.output');
     outputEl.innerHTML = ouputHTML;
 };
-
-var colorThief = new ColorThief();
-
-var images = [
-    'black.png',
-    'red.png',
-    'rainbow-horizontal.png',
-    'rainbow-vertical.png',
-    // 'transparent.png',
-    // 'white.png',
-];
-
-// Render example images
-var examplesHTML = Mustache.to_html(document.getElementById('image-tpl').innerHTML, images);
-document.getElementById('example-images').innerHTML = examplesHTML;
-
-document.querySelectorAll('.image').forEach((image) => {
-    const section = image.closest('.image-section');
-    if (this.complete) {
-        showColorsForImage(image, section);
-    } else {
-        image.addEventListener('load', function() {
-            showColorsForImage(image, section);
-        });
-    }
-})

index.html

@@ -13,6 +13,7 @@
     <script id='image-tpl' type='text/x-mustache'>
         {{#.}}
             <div class="image-section">
+                <h2>{{.}}</h2>
                 <img class="image" src="examples/img/{{.}}" />
                 <div class="output"></div>
             </div>
@@ -20,19 +21,27 @@
     </script>
 
     <script id="output-tpl" type="text/x-mustache">
-        <div class="get-color">
-            <h2>Dominant Color</h3>
-            <div class="swatches"></div>
-            <code>colorThief.getColor(image):{{elapsedTimeForGetColor}}ms</code>
+        <div class="color">
+            <h3>Dominant Color</h3>
+            <div class="swatches">
+                <div class="swatch" style="background-color: rgb({{color.0}}, {{color.1}}, {{color.2}})"></div>
             </div>
-        <div class="get-palette">
-            <h2>Palette</h3>
+            <code>
+                {{colorStr}}<br>
+                <span class="time">{{elapsedTimeForGetColor}}ms</span>
+            </code>
+        </div>
+        <div class="palette">
+            <h3>Palette</h3>
             <div class="swatches">
                 {{#palette}}
                     <div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
                 {{/palette}}
             </div>
-            <code>colorThief.getPalette(image):{{elapsedTimeForGetPalette}}ms</code>
+            <code>
+                {{paletteStr}}<br>
+                <span class="time">{{elapsedTimeForGetPalette}}ms</span>
+            </code>
         </div>
     </script>