good enough eye candy

visualisers/hmvis/public/css/main.css

@@ -1,26 +1,45 @@
+@import "solarized.css";
+
+html, body
+{ height: 100%
+}
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    color: green;
     overflow: hidden;
 }
 
-#editor {
-    margin: 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+.editor-container
+{ position: relative
+; height: 80vh
 }
 
-#type-check {
+#editor
+{ width: 100%;
+; height: 100%
+; position: relative
+}
+
+#type-check-button {
     position: fixed;
     top: 0;
     left: 50%;
     z-index: 2;
+    /* margin: 0 auto; */
     transform: translateX(-50%);
 }
 
+#type-check-output
+{ background: green
+; width: 100%
+; height: 100%
+}
+
+.main-view-container
+{ columns: 2 auto;
+
+}
+
 .split {
     height: 100%;
     width: 50%;
@@ -40,14 +59,36 @@ body {
 }
 
 .annotation-wrapper
+{ display: inline-flex
+; flex-direction: column
+/* ; border-style: solid */
+/* ; border-width: 0 0 0.45em 0 */
+}
+
+.typed-wrapper
 { display: inline-block
-; padding-bottom: 1em
-; border-style: solid
-; border-color: green
-; border-width: 0 0 4px 0
 }
 
 .annotation-wrapper .annotation
-{ position: fixed
+{ position: relative
+; bottom: 0
+; min-height: 0.50em
 }
 
+.annotation-text
+{ display: none
+}
+
+.annotation.hovering > .annotation-text
+{ display: inline-block
+}
+
+.code-wrapper
+{ display: inline-block
+}
+
+/* .typed-wrapper.hovering > .code-wrapper */
+/* { border-width: 0.2em */
+/* ; border-style: solid */
+/* } */
+