update styles for runtime demo

jank/app.js

@@ -21,6 +21,7 @@
       bodySize = document.body.getBoundingClientRect(),
       ballSize = proto.getBoundingClientRect(),
       maxHeight = Math.floor(bodySize.height - ballSize.height),
+      maxWidth = 97, // 100vw - width of square (3vw)
       incrementor = 10, 
       frame,
       minimum = 10,
@@ -44,7 +45,7 @@
       } else {
         m.classList.add('down');
       }
-      m.style.left = (i / (app.count / 100)) + 'vw';
+      m.style.left = (i / (app.count / maxWidth)) + 'vw';
       m.style.top = top + 'px';
       document.body.appendChild(m);
     }

jank/index.html

@@ -27,6 +27,10 @@
       <button class="subtract" disabled></button>
       <button class="stop">Stop</button>
       <button class="optimize">Optimize</button>
+      <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/"
+         target="_blank">
+        <button class="optimize">Help</button>
+      </a>
     </div>
   </body>
-</html>
+</html>

jank/styles.css

@@ -29,8 +29,21 @@ body {
   z-index: 1;
 }
 
+.controls button {
+  display: block;
+  font-size: 1em;
+  padding: 1em;
+  margin: 1em;
+  background-color: beige;
+  color: black;
+}
+
+.subtract:disabled {
+  opacity: 0.2;
+}
+
 .mover {
-  height: 1vw;
+  height: 3vw;
   position: absolute;
   z-index: 0;
 }
@@ -38,3 +51,9 @@ body {
 .border {
   border: 1px solid black;
 }
+
+@media (max-width: 600px) {
+  .controls button {
+    min-width: 20vw;
+  }
+}