CSS: makes the menu more readable

Move the title to the left and the menu items to the right.

2 files changed, 39 insertions, 23 deletions

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 508e259..76e23a2 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,15 +1,13 @@
 <header>
   <nav class='menu'>
-    <a href="{{ .Site.Home.Permalink }}">{{ .Site.Home.Title }}</a>
-    <ul>
+    <a href="{{ .Site.Home.Permalink }}"><b>{{ .Site.Home.Title }}</b></a>
+    <div class='navigation'>
       {{ $currentPage := . }}
       {{ range .Site.Menus.main }}
-      <li>
-        <a class='{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}menu-active{{ end }}' href="{{ absURL .URL }}">
-          {{ .Title }}
-        </a>
-      </li>
+      <a class='menu-item {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}menu-active{{ end }}' href="{{ absURL .URL }}">
+        {{ .Title }}
+      </a>
       {{ end }}
-    </ul>
+    </div>
   </nav>
 </header>
diff --git a/static/css/custom.css b/static/css/custom.css
index 1113707..3475d1f 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -115,39 +115,57 @@ blockquote {
 
 nav.menu {
     display: flex;
-    flex: 2 0px;
-    justify-content: flex-end;
-    padding-left: 1em;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: nowrap;
     margin: 0 auto;
+    font-size: 18px;
 }
 
-nav.menu ul {
+.navigation {
     display: flex;
-    list-style-type: none;
-    margin: 0
+    justify-content: flex-end;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    box-sizing: border-box;
+    flex-basis: auto;
+    flex-grow: 1;
+    align-items: center;
+}
+
+.menu-item {
+    box-sizing: border-box;
+    font-weight: 400;
+    padding-right: 8px;
 }
 
 nav.menu a {
-    padding: 1em;
     display: inline-block;
     color: black;
-    font-family: sans-serif;
     text-decoration: none;
     transition: all 75ms ease-in;
 }
 
-nav.menu a:hover {
-    color: #fff;
-    background-color: #007d9c;
+.navigation a:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 4px;
+    text-underline-offset:.3rem;
+    color: #007d9c;
 }
 
-nav.menu a.menu-active:hover {
-    color: #fff;
-    background-color: #007d9c;
+a.menu-active:hover {
+    text-decoration: underline;
+    text-underline-offset:.3rem;
+    color: #007d9c;
+    font-weight: 700;
 }
 
-nav.menu a.menu-active {
+a.menu-active {
+    text-decoration: underline;
+    text-underline-offset:.3rem;
+    text-decoration-thickness: 4px;
     color: #007d9c;
+    font-weight: 700;
 }
 
 .toc {