impl: Enhanced styling

src/__init__.py

@@ -1,7 +1,6 @@
 #!/usr/bin/env python3
 
 import traceback
-import os
 import posixpath
 
 from flask import Flask, render_template, request

static/style/main.css

@@ -1,18 +1,19 @@
-html {
-    min-height: 100%;
-}
-
 body {
-    padding: 20px;
+    /*padding: 20px;*/
     background-color: #191919;
     color: white;
     font-family: monospace;
-    margin-bottom: 100px;
+    /*margin-bottom: 100px;*/
+    min-height: 100vh;
+    margin: 0px;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2  {
     color: orange;
 }
+h3, h4 {
+    color: gray;
+}
 
 a {
 	text-decoration: none;
@@ -23,12 +24,18 @@ a {
 	  background-color: orange;
   }
 
+hr {
+    border: none;
+    border-bottom: 1px solid #444;
+    margin: 0px;
+}
+
 input {
     border: 1px solid black;
     background-color: white;
 }
 
-footer {
+body > footer {
     background-color: black;
     position: fixed;
     left: 0;
@@ -40,28 +47,46 @@ footer {
 }
 
 ul {
-    padding-left: 20px;
+    margin: 0px;
+    padding-left: 10px;
     padding-bottom: 0px;
     list-style-type: none;
 }
 
-main {
+li {
-    display: flex;
+    margin-top: -2px;
-    gap: 20px;
+    margin-bottom: -1px;
-    min-height: 80vh;
 }
 
+body > main {
+    display: flex;
+    min-height: 100vh;
+}
+    body > main > * > *:not(hr) {
+        padding: 20px;
+    }
+    body > main hr {
+        width: 100%;
+    }
+    body > main > nav {
+        background-color: black;
+    }
+
 nav {
-    padding-right: 10px;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid orange;
+    border-right: 1px solid #444;
     width: 200px;
 }
 
 article {
     flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
+    article > main {
+        flex-grow: 1;
+    }
 
 pre {
     background-color: #000;

templates/main.html

@@ -2,12 +2,20 @@
 
 {% block title %}{{ path }}{% endblock %}
 
-{% macro render_tree(tree, root='/') %}
+{% macro render_tree(tree, root='') %}
 <ul>
     {% for entry in tree %}
     <li>
         {% set url = path_join(root, entry.name) %}
-        <a href="{{ url }}">{{ entry.name }}</a>
+
+        {#{% if loop.last or entry.children|length > 0 %}#}
+        {% if entry.children|length > 0 %}
+        ▼
+        {% else %}
+        ·
+        {% endif %}
+        <a href="{{ path_join('/', url ) }}">{{ entry.name }}</a>
+
         {{ render_tree(entry.children, url) }}
     </li>
     {% endfor %}
@@ -16,11 +24,19 @@
 
 {% block body %}
 <main>
+
     <nav>
+        <div>
+            &gt; <a href="/">index</a>/{{ path }}
+        </div>
+
+        <hr/>
+
         {{ render_tree(document_tree.root.children) }}
     </nav>
 
     <article>
+        <main>
         {% if not edit %}
             {% if path != '' %}
             <a href="/{{ path }}?edit">Edit</a>
@@ -65,16 +81,22 @@
             });
             </script>
         {% endif %}
+        </main>
 
         <hr/>
 
         {% for child in document_tree.get_node(path).children %}
         
+
         {% if loop.first %}
-        <h1>Children</h1>
+        <footer>
+            <h1>Children</h1>
+        {% endif %}
+            <a href="{{ path_join(path, child.name) }}">{{child.name}}</a>{% if not loop.last %},{% endif %}
+        {% if loop.last %}
+        </footer>
         {% endif %}
 
-        <a href="{{ path_join(path, child.name) }}">{{child.name}}</a>{% if not loop.last %},{% endif %}
         {% endfor %}
 
     </article>