guillaume
/
whatcolorisit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move spectrum to bottom of screen

master
Guillaume Dott 2018-06-06 20:36:32 +02:00
parent ef9848b4ea
commit 9a29f0ef6a
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

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