From 34173b2e225b76b672ea523874a9e577dba24dff Mon Sep 17 00:00:00 2001
From: Ryan Barrett <git@ryanb.org>
Date: Tue, 26 Dec 2023 10:08:32 -0800
Subject: [PATCH] front page redesign: progressive enhancement for no-JS

---
 static/style.css     | 7 -------
 static/topology.js   | 4 ++++
 templates/index.html | 2 +-
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/static/style.css b/static/style.css
index f179883..7d1436b 100644
--- a/static/style.css
+++ b/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*
diff --git a/static/topology.js b/static/topology.js
index 3d96633..1642317 100644
--- a/static/topology.js
+++ b/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.
diff --git a/templates/index.html b/templates/index.html
index 4ad17bc..301c935 100644
--- a/templates/index.html
+++ b/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">