added pretty icons for navigation in CSS

server/main.go

@@ -105,11 +105,17 @@ func (srv *Server) ProcessToHtml(urlPath, filePath string, bts []byte) ([]byte,
 			return nil, err
 		}
 
-		fmt.Fprint(&b, "<header><nav class=\"base\">")
+		fmt.Fprint(&b, "<header>")
+
+		fmt.Fprint(&b, "<nav class=\"base\">")
 		fmt.Fprintf(
-			&b, "<a href=\"..\">&lt&lt&lt</a><a href=\".\">%s</a>",
+			&b, "<a class=\"prev\" href=\"..\">"+
+				"&lt&lt&lt</a>"+
+				"<a class=\"home\"href=\".\">%s</a>",
 			srv.makeFileName(fileDirPath, "index"+srv.options.WikiExt),
 		)
+		fmt.Fprint(&b, "</nav>")
+
 		fmt.Fprint(&b, "<nav class=\"dirs\">")
 		for _, entry := range entries {
 			if !entry.IsDir() {
@@ -121,8 +127,6 @@ func (srv *Server) ProcessToHtml(urlPath, filePath string, bts []byte) ([]byte,
 				srv.makeFileName(fileDirPath, entry.Name()),
 			)
 		}
-
-		fmt.Fprint(&b, "</nav>")
 		fmt.Fprint(&b, "</nav>")
 
 		fmt.Fprint(&b, "<nav class=\"files\">")

web/main.css

@@ -23,7 +23,7 @@ table, th, td {
   border: var(--bd-width) var(--bd-style) var(--bd-color);
 }
 
-h2:after, h3:after {
+h2::after, h3::after {
   display : block ;
   content: '';
   margin-top: 0.2rem;
@@ -37,9 +37,12 @@ h2:after, h3:after {
   --bd-color: gray;
   --bd-width: .15rem;
   --bd-style: solid;
+  --border: var(--bd-width) var(--bd-style) var(--bd-color);
 
   --hv-fg-color: white;
   --hv-bg-color: silver;
+
+  --header-bg: whitesmoke;
   --header-width: 6rem;
 }
 
@@ -60,20 +63,15 @@ body {
   /*gap: 1rem;*/
 }
 
-@media screen and (max-width: 480px) {
-  body {
-    flex-direction: column;
-    position: static;
-  }
-}
-
 header {
+  background: var(--header-bg);
   max-width: fit-content;
 
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-right: var(--bd-width) var(--bd-style) var(--bd-color);
+  border-right: var(--border);
+  border-bottom: var(--border);
   overflow-y: auto;
   overflow-x: hidden;
   flex-shrink: 1;
@@ -81,11 +79,24 @@ header {
   resize: horizontal;
 }
 
+@media screen and (max-width: 480px) {
+  body {
+    flex-direction: column;
+    position: static;
+  }
+  header {
+    width: 100%;
+    max-width: 100%;
+    resize: none;
+  }
+}
+
 header > nav {
   padding-left: .25rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
-  border-bottom: var(--bd-width) var(--bd-style) var(--bd-color);
+  width: 100%;
+  border-bottom: var(--border);
 }
 
 nav {
@@ -104,3 +115,25 @@ main {
   overflow-y: auto;
 }
 
+a {
+  text-decoration: none;
+}
+
+nav.base > a.prev::before {
+  content: '⏎';
+}
+nav.base > a.home::before {
+  content: '🏠';
+}
+
+nav.dirs > a::before {
+  content: '🗀 ';
+}
+
+nav.files > a::before {
+  content: '🗎 ';
+}
+
+nav.document a::before {
+  content: '🕮 ';
+}