refactor as hugo site

content/hypno/web/index.html

@@ -0,0 +1,8 @@
++++
+title = "web"
+date = 2020-05-29
+draft = true
+unlisted = true
++++
+<div class="light"></div>
+<div id="circles"></div>

content/hypno/web/web.css

@@ -0,0 +1,19 @@
+.circle {
+    border: solid red;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.light {
+    height: 20px;
+    width: 20px;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: red;
+    box-shadow: 0 0 5px red, 0 0 2px FireBrick, 0 0 1px DarkRed;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+}

content/hypno/web/web.js

@@ -0,0 +1,23 @@
+var innermost = 15;
+var start = 30;
+var growth = 1.2;
+
+var radius = innermost;
+for (var i = 0; radius < Math.min(window.innerWidth, window.innerHeight)/2; ++i) {
+    e = document.createElement("div");
+    e.className = "circle";
+    e.style.height = (2*radius) + "px";
+    e.style.width = (2*radius) + "px";
+    document.getElementById("circles").appendChild(e);
+
+    radius += start * Math.pow(growth, i);
+}
+
+/*      document.getElementsByClassName("light")[0].animate(
+        [
+        { top: "50%", left: "50%" },
+        { top: "50%", left: "50%", offset: 0.9 },
+        { top: "50%", left: "50%" }
+        ],
+        { duration: 10000, iterations: Infinity }
+        );*/