work on UI components

This commit introduces some HTML and javascript (and tests for it) to use in constructing the new UI. This is partial work that is not yet finished.

1 files changed, 16 insertions, 66 deletions

diff --git a/html/base.css b/html/base.css
index dde50e7..6085f5f 100644
--- a/html/base.css
+++ b/html/base.css
@@ -34,101 +34,51 @@ body {
     overflow: auto;
 }
 
-.bold, h2 {
+.bold, h1, h2, h3 {
     font-weight: bold;
 }
 
+h1, h2, h3 {
+    margin: 0.3em;
+    text-shadow: 0 0 0 #454;
+}
+
 h2 {
-    margin: 8px;
     font-size: 120%;
 }
 
 h3 {
-    padding: 5px;
     font-size: 108%;
-    text-shadow: 0 0 0 #454;
 }
 
-textarea {
-    font-family: monospace;
+li {
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
 }
 
-input[type="checkbox"], input[type="radio"], .hide {
-    display: none;
-}
-
-.camouflage {
-    visibility: hidden;
+li:first-child {
+    margin-top: 0;
 }
 
-.show_next:not(:checked)+* {
+.hide {
     display: none;
 }
 
-.show_hide_next2:not(:checked)+* {
-    display: none;
-}
-
-.show_hide_next2:checked+*+* {
-    display: none;
-}
-
-button, .button {
+button {
     background-color: #4CAF50;
     border: none;
-    border-radius: 8px;
+    border-radius: 0.4em;
     color: white;
     text-align: center;
     text-decoration: none;
     display: inline-block;
-    padding: 6px 12px;
-    margin: 2px 0px;
+    padding: 0.4em 0.8em;
     -moz-user-select: none;
     user-select: none;
     cursor: pointer;
-    font: 400 15px sans-serif;
-}
-
-button.slimbutton, .button.slimbutton {
-    padding: 2px 4px;
-    margin: 0;
+    font: 400 0.9em sans-serif;
 }
 
 button:hover, .button:hover {
     box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
 }
-
-aside {
-    background: #3f8dc6;
-    margin: 5px 0;
-    padding: 0.3em 1em;
-    border-radius: 3px;
-    color: #fff;
-}
-
-textarea: {
-    resize: none;
-}
-
-.has_bottom_line::after, .has_upper_line::before {
-    content: "";
-    display: block;
-    height: 8px;
-    background: linear-gradient(transparent, #555);
-}
-
-.has_bottom_line::after {
-    background: linear-gradient(#555, transparent);
-}
-
-.has_bottom_thin_line {
-    border-bottom: dashed #4CAF50 1px;
-}
-
-.has_upper_thin_line {
-    border-top: dashed #4CAF50 1px;
-}
-
-.nowrap {
-    white-space: nowrap;
-}