html: animate independently of tick rate, reorg a lot of html

i should have done this in more commits, but i'm not going to go back
and fix it now.

1 files changed, 25 insertions, 27 deletions

diff --git a/site/main.css b/site/main.css
index 52b3063..519ae31 100644
--- a/site/main.css
+++ b/site/main.css
@@ -5,19 +5,28 @@ html {
     box-sizing: inherit;
 }
 
-#editor {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 1em;
+#ff {
+    display: flex;
+    flex-direction: row;
 }
 
-#code {
-    position: relative;
-    grid-row: 1;
+body h1 {
+    flex: 2;
+}
+
+body footer {
+    flex: 2;
+}
+
+body #arena {
+    flex: 1;
+}
+
+body #robview {
+    flex: 1;
 }
 
 #code #src {
-    width: 100%;
     min-height: 25ex;
     margin-top: 1ex;
     padding: 1em;
@@ -29,36 +38,24 @@ html {
     background-color: yellowgreen;
 }
 
-#compile {
-    position: absolute;
-    right: 0;
-}
-
-#state-container {
-    grid-row: 1;
-}
-
-#state {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+#scope {
+    /* display: grid; */
+    /* grid-template-columns: repeat(2, 1fr); */
 }
 
-#state .controls {
-    grid-row: 1;
+#scope summary {
     grid-column: 1 / span 2;
 }
 
-#state .wordlist {
-    grid-row: 2;
+#scope .wordlist {
     grid-column: 1 / span 2;
 }
 
-#state .vars {
-    grid-row: 3;
+#scope .vars {
     grid-column: 1 / span 2;
 }
 
-#wordlist .ip {
+#scope .wordlist .ip {
     background-color: yellow;
 }
 
@@ -82,4 +79,5 @@ x-op {
 
 canvas {
     border: 1px solid orangered;
+    background-color: rgb(200 200 200);
 }