Expand CSS, plus some minor templating tweaks

static/style.css

@@ -1,17 +1,89 @@
 html {
-  height: 100%;
+    height: 100%;
+    font-family: sans-serif;
 }
 
 body {
-  height: 100%;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
+    height: 100%;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+}
+
+pre {
+    max-width: 90vw;
+    overflow: auto;
+    box-sizing: border-box;
+    padding: 10px;
+    margin: 10px;
+
+}
+
+code {
+    padding: 3px 6px;
+    border-radius: 6px;
+}
+
+pre, code {
+    background-color: #e0e0e0;
+    border: solid 1px #d0d0d0;
+}
+
+a {
+    color: #0d6161;
+    text-decoration: underline dotted #138e8e;
+    text-decoration-thickness: 1.5px;
+}
+
+a:visited {
+        text-decoration-color: #aaa;
+}
+
+div.header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+div.labels {
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+}
+
+span.label {
+    padding: 3px 6px;
+    border-radius: 6px;
+    margin: 5px;
+}
+
+span.id-label {
+    background-color: #e0e0e0;
+    border: solid 1px #d0d0d0;
+}
+
+span.hidden-label  {
+    background-color: #888;
+    color: #eee;
+    border: solid 1px #d0d0d0;
+}
+
+h1.node-title {
+    display: inline;
+    margin: 10px;
 }
 
 footer div {
-  margin: 20px 0;
-  text-align: center;
-  font-size: 0.8em;
+    margin: 20px 0;
+    text-align: center;
+    font-size: 0.8em;
+}
+
+footer p {
+    margin: 0;
+}
+
+nav li {
+    margin-right: 10px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -19,4 +91,24 @@ footer div {
         background-color: #222222;
         color: #f1e9e5;
     }
+
+    pre, code {
+        background-color: #333333;
+        border: solid 1px #434343;
+    }
+
+    a {
+        color: #1bc8c8;
+        text-decoration-color: #159b9b;
+    }
+}
+
+@media (max-width: 650px) {
+    nav li {
+        margin-right: 3px;
+    }
+
+    div.header-row {
+        display: block;
+    }
 }

templates/base.html

@@ -44,10 +44,9 @@
             <div>
             {% if config.footer_text %}{{ config.footer_text | safe }}{% endif %}
             {% if config.footer_text and (config.footer_credits or config.footer_date) %}
-            <br/>
             {% endif %}
             {% if config.footer_credits %}
-            <cite>made with <a href="https://en.jutty.dev">en</a></cite>, a non-linear writing instrument
+            <cite>made with <a href="https://en.jutty.dev">en</a>, a non-linear writing instrument</cite>
             {% endif %}
             {% if config.footer_credits and config.footer_date %}
             <br/>

templates/index.html

@@ -43,8 +43,9 @@
         {% if config.index_node_count < nodes | length %}
         <br/>
         <em style="font-size:0.9em"">
-           Listing {{ config.index_node_count }} of {{ nodes | length }} nodes, {{ nodes | length - config.index_node_count }} not shown in this sample.
+           Listing {{ config.index_node_count }} of {{ nodes | length }} nodes.
            {% if config.tree %}
+           <br/>
            See the <a href="/tree">tree</a> for a full list.
            {% endif %}
         </em>