refactor as hugo site

content/hypno/colors/colors.css

@@ -0,0 +1,24 @@
+#word {
+    font-size: 80px;
+    font-family: sans-serif;
+    font-weight: bold;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: red;
+}
+
+#word img {
+    height: 100px;
+    width: 75px;
+}
+
+#word svg path {
+    fill: #c00;
+}
+
+#word svg:hover path {
+    fill: red;
+}

content/hypno/colors/colors.js

@@ -0,0 +1,42 @@
+var started = false;
+var showControls = false;
+
+var colorWords = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
+var hypnoWords = ["sleep", "relax", "fall", "deeper", "trance"];
+var colors = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
+var wordEl = document.getElementById("word");
+
+function randomChoice(a) {
+    return a[Math.floor(Math.random()*a.length)];
+}
+
+var hypnoFrequency = 0;
+var hypnoIncrements = 10;
+function changeWord() {
+    var wordList = (Math.random()*hypnoIncrements < hypnoFrequency) ? hypnoWords : colorWords;
+    var newWord;
+    do {
+	newWord = randomChoice(wordList);
+    } while (newWord === wordEl.innerText);
+
+    var newColor;
+    do {
+	newColor = randomChoice(colors);
+    } while (newColor === wordEl.style.color);
+
+    wordEl.innerText = newWord;
+    wordEl.style.color = newColor;
+}
+
+window.onclick = function () {
+    if (!started) {
+        started = true;
+        document.getElementById("controls").style.display = "none";
+        changeWord();
+        setInterval(changeWord, 1000);
+        setInterval(function() { if (hypnoFrequency < hypnoIncrements) { hypnoFrequency++; } }, 5000);
+    } else {
+        document.getElementById("controls").style.display = showControls ? "none" : "block";
+        showControls = !showControls;
+    }
+}

content/hypno/colors/index.html

@@ -0,0 +1,7 @@
++++
+title = "colors"
+date = 2018-11-01
+draft = false
+unlisted = false
++++
+<div id="word">{{< partial "play.svg" >}}</div>