front page redesign: progressive enhancement for no-JS

static/style.css

@@ -113,13 +113,6 @@ pre .value, code .value, code.value {
   box-shadow: 0 0 .5em 1.5em var(--fg);
 }
 
-#front-form {
-  margin-bottom: 0;
-  padding-bottom: 2em;
-  background-color: transparent;  /* topology animation is behind */
-  box-shadow: none;
-}
-
 .text-outline {
   text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);
   /* this is easier and supported in major browsers but draws the outline *inside*

static/topology.js

@@ -166,6 +166,10 @@ let sketch = function(p) {
 
 let myQ5Sketch = new p5(sketch, document.getElementById('topology'));
 
+// canvas is behind #front-form
+const frontForm = document.getElementById('front-form');
+frontForm.style.backgroundColor = 'transparent';
+frontForm.style.boxShadow = 'none';
 
 // tried setting this inside the sketch with p.windowResized = ...
 // but that didn't work.

templates/index.html

@@ -6,7 +6,7 @@
 <script src="/static/bootstrap.min.js"></script>
 <script src="/static/index.js"></script>
 
-<div id="front-form" class="front-dark">
+<div id="front-form" class="row front-dark">
 <div id="topology" style="position: absolute; top: 0; left: 0"></div>
 
 <div id="front-tagline" class="row bigger">