simplify css, allow multiple inspectors

1 files changed, 18 insertions, 47 deletions

diff --git a/site/main.css b/site/main.css
index 00c6453..bf3eff8 100644
--- a/site/main.css
+++ b/site/main.css
@@ -5,21 +5,26 @@ html {
     box-sizing: inherit;
 }
 
-#ff {
+.flex-col {
     display: flex;
     flex-direction: row;
 }
 
-body h1 {
-    flex: 2;
+.flex-col section {
+    flex: 1;
 }
 
-body footer {
-    flex: 2;
+#arena {
+    border: 1px solid orangered;
+    background-color: rgb(200 200 200);
 }
 
-body #arena {
-    flex: 1;
+button.halten .play, button.blinken .pause {
+    display: block;
+}
+
+button.blinken .play, button.halten .pause {
+    display: none;
 }
 
 #fps {
@@ -28,11 +33,7 @@ body #arena {
     text-align: right;
 }
 
-body #robview {
-    flex: 1;
-}
-
-#code #src {
+x-inspector .src {
     min-height: 25ex;
     margin-top: 1ex;
     padding: 1em;
@@ -40,36 +41,19 @@ body #robview {
     white-space: pre-wrap;
 }
 
-::highlight(exec) {
+x-inspector ::highlight(exec) {
     background-color: yellowgreen;
 }
 
-#scope {
-    /* display: grid; */
-    /* grid-template-columns: repeat(2, 1fr); */
-}
-
-#scope summary {
-    grid-column: 1 / span 2;
-}
-
-#scope .wordlist {
-    grid-column: 1 / span 2;
-}
-
-#scope .vars {
-    grid-column: 1 / span 2;
-}
-
-#scope .wordlist .ip {
+x-inspector .wordlist .ip {
     background-color: yellow;
 }
 
-x-bytecode {
+x-inspector x-bytecode {
     display: block;
 }
 
-x-bytecode::before {
+x-inspector x-bytecode::before {
     display: inline-block;
     width: 1em;
     content: attr(x-index);
@@ -77,21 +61,8 @@ x-bytecode::before {
     padding-right: 0.4em;
 }
 
-x-op {
+x-inspector x-op {
     display: inline-block;
     padding: 5px;
     border: 1px solid grey;
 }
-
-canvas {
-    border: 1px solid orangered;
-    background-color: rgb(200 200 200);
-}
-
-button.halten .play, button.blinken .pause {
-    display: block;
-}
-
-button.blinken .play, button.halten .pause {
-    display: none;
-}