From acbe0dd9ea988046db24d12a57c1317a0f28fe40 Mon Sep 17 00:00:00 2001
From: Franck Cuny <franck@fcuny.net>
Date: Mon, 23 Aug 2021 09:15:40 -0700
Subject: CSS: makes the menu more readable

Move the title to the left and the menu items to the right.
---
 static/css/custom.css | 48 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 15 deletions(-)

(limited to 'static/css')

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 {
-- 
cgit 1.4.1