From 9a29f0ef6aca20a4daf8c7cfda7b97e9b9c73e83 Mon Sep 17 00:00:00 2001
From: Guillaume Dott <guillaume+github@dott.fr>
Date: Wed, 6 Jun 2018 20:36:32 +0200
Subject: [PATCH] Move spectrum to bottom of screen

---
 index.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 7614074..e9e2951 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <title>What color is it?</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="user-scalable=yes,initial-scale=1" />
+    <link rel="shortcut icon" href="favicon.ico" />
     <style>
 * { color: #fff; }
 html, body, body > div { margin: 0; height: 100%; }
@@ -16,11 +17,24 @@ h1 {
 }
 h2 { font-family: courier; }
 
+#whatcolorisit {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+#whatcolorisit > div {
+  width: 100%;
+}
+
 .spectrum {
   height: 50px;
   background-color: #000;
   overflow: hidden;
+  align-self: flex-end;
 }
+
 .spectrum > div {
   width: 1px;
   height: 100%;
@@ -75,9 +89,9 @@ function WhatColorIsIt(mainDiv, toColor) {
   this.timeDiv.className = 'time';
   this.timeDiv.innerHTML = '<h1><time></time></h1><h2></h2>';
 
-  this.mainDiv.appendChild(this.spectrumDiv);
   this.mainDiv.appendChild(this.timeDiv);
   this.mainDiv.appendChild(this.controlsDiv);
+  this.mainDiv.appendChild(this.spectrumDiv);
 
   this.current();
 };