Grote push

style.css

@@ -1,5 +1,19 @@
+body {
+    font-family: 'Linux Libertine','Georgia','Times',serif;
+    padding: 0 1.5em 1.5em 1.5em;
+    line-height: 1.6;
+}
+
+h1 {
+    margin-bottom: 0.25em;
+    padding: 0;
+    line-height: 1.3;
+    font-size: 1.8em;
+    font-weight: normal;
+    border-bottom: 1px solid #a2a9b1;
+}
+
 li ul {
-    /* Zorg ervoor dat de kinderelementen met hun bolletje onder de eerste letter van het vorige element staan. */
     margin: 0.2vh 1ch;
     padding: 0.2vh 1vw;
 }
@@ -14,38 +28,60 @@ ul#wortel {
     list-style-type: none;
 }
 
-.header h1 {
-    text-align: center;
-    margin: 0 auto;
-
-    font-min-size: 2vw;
-    font-size: 3vw;
-    position: relative;
-}
-
 .header img {
-    display: block;
-    margin: 0 auto;
-
-    width: 10%;
-    height: 10%;
-
-    min-width: 2%;
-    min-height: 2%;
-    max-width: 20%;
-    max-height: 20%;
+    height: 1.8em;
+    margin-top: 0.3em;
+    float: left;
 }
 
 .header p {
-    font-weight: bold;
-    text-align: center;
+    font-size: 92%;
+    display: block;
+    color: #202122;
+    font-family: sans-serif;
 }
 
-.top-bar {
-    position: fixed;
-    top: 0;
+#bar {
+    font-family: sans-serif;
+    font-size: 95%;
+
+    padding: 7px;
+    border: 1px solid #a2a9b1;
+    background-color: #f8f9fa;
+    color: #202122;
+
+    position: sticky;
+    top: 7px;
 }
 
-#waarschuwing {
-    color: darkorange;
+#visualisatie {
+    margin: 0.5em 0;
+    font-size: calc(1em * 0.875);
+}
+
+button {
+    cursor: pointer;
+    border: none;
+    background: none;
+    color: #3366bb;
+}
+
+button:disabled {
+    color: #ba0000;
+}
+
+button:hover {
+    text-decoration: underline;
+}
+
+button:before {
+    color: #54595d;
+    margin-right: 0.25em;
+    content: "[";
+}
+
+button:after {
+    color: #54595d;
+    margin-left: 0.25em;
+    content: "]";
 }