From 0c4551dee05609e484221fe40827cf36a9966a93 Mon Sep 17 00:00:00 2001
From: Sam Anthony <sam@samanthony.xyz>
Date: Tue, 19 Apr 2022 22:30:42 -0230
Subject: make navbar display inline in text-based browsers

---
 htdocs/base.html |  8 ++++++--
 htdocs/style.css | 31 +++++++++++++++++++++----------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/htdocs/base.html b/htdocs/base.html
index 5c02174..cc85064 100644
--- a/htdocs/base.html
+++ b/htdocs/base.html
@@ -17,9 +17,13 @@
 			{{ $this_section := .Nav.ThisSection }}
 			{{ range .Nav.Links }}
 				{{ if eq .Href $this_section }}
-					<p>/</p><a class="this-section" href="{{ .Href }}">{{ .Label }}</a>
+					<a class="this-section" href="{{ .Href }}">
+						/<span class="label">{{ .Label }}</span>
+					</a>
 				{{else }}
-					<p>|</p><a href="{{ .Href }}">{{ .Label }}</a>
+					<a href="{{ .Href }}">
+						|<span class="label">{{ .Label }}</span>
+					</a>
 				{{ end }}
 			{{ end }}
 			<hr>
diff --git a/htdocs/style.css b/htdocs/style.css
index ae0ac35..d260d69 100644
--- a/htdocs/style.css
+++ b/htdocs/style.css
@@ -1,3 +1,4 @@
+/* General */
 body {
 	margin-left: 0px;
 	margin-right: 0px;
@@ -9,21 +10,31 @@ body {
 	font-family: sans-serif;
 }
 
-/* Navbar */
-nav {
-	background-color: #4acaa4;
-	font-size: 1.6em;
+a { text-decoration: none; }
+a:hover {
+	text-decoration: underline;
+	text-decoration-thickness: 0.055em;
 }
+
+/* Navbar */
+nav { background-color: #4acaa4; }
+
 nav a {
-	font-size: 0.7em;
+	margin-left: 0.2em;
+
+	font-size: 1.6em;
+	font-weight: normal;
 	color: white;
-	text-decoration: none;
 }
-nav p:first-child + a { font-weight: bold; }
-nav a.this-section { font-style: italic; }
-nav p { display: inline; }
-nav p:first-child { margin-left: 0.1em; }
+
+nav a:first-child .label { font-weight: bold; }
+
+nav .label { font-size: 0.7em; }
+
+nav .this-section { font-style: italic; }
+
 nav hr {
 	margin: 0px;
+
 	color: white;
 }
-- 
cgit v1.2.3