Update nav menu css

10 files changed, 59 insertions, 69 deletions

diff --git a/assets/base.css b/assets/base.css
index b1345da..cb62dec 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -74,14 +74,6 @@
 	--br_violet: #825dc0;
 }
 
-#themes {
-	background-color: var(--bg-0);
-	border: none;
-	color: var(--fg-1);
-	font-size: 0.9em;
-	padding: 14px 16px;
-}
-
 * {
 	box-sizing: border-box;
 }
@@ -138,13 +130,6 @@ ul li {
 h1, h2, h3, h4, h5 {
 	font-family: open, serif;
 }
-@media only screen and (min-width: 60rem) {
-	body {
-		max-width:60rem;
-		margin-left: auto;
-		margin-right: auto;
-	}
-}
 .fullwidth {
 	width: 100%;
 }
@@ -159,12 +144,10 @@ a {
 a:visited {
 	color: var(--orange);
 }
-a:hover {
-	color: var(--red);
-}
 h1,
 body header nav ul li a,
-body header nav ul li a:visited {
+body header nav ul li a:visited,
+a:hover {
 	color: var(--red);
 }
 h2, h3, h4, h5, h6 {
diff --git a/assets/header.css b/assets/header.css
index d4091be..94d3ca9 100644
--- a/assets/header.css
+++ b/assets/header.css
@@ -1,40 +1,47 @@
 header {
 	background-color: var(--bg-0);
 }
-header nav ul {
+header nav {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+header nav ol {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
-	overflow: hidden;
-	font-size: 1.25rem;
 }
-header nav ul li {
-	display: inline;
-	float: right;
-	margin-bottom: 0;
-}
-header nav ul li a {
+header nav ol li a {
 	display: block;
+	font-size: 1.25rem;
+	padding: 4px 16px 14px 16px;
 	text-align: center;
-	padding: 14px 16px;
 	text-decoration: none;
 }
-header nav ul li a:hover {
+header nav ol li a:hover {
 	background-color: var(--bg-1);
 }
+#nav-menu {
+	align-items: baseline;
+	display: flex;
+	flex-wrap: nowrap;
+}
+#nav-menu li {
+	flex-direction: column;
+}
 .nav-menu-active {
 	background-color: var(--bg-1);
 }
-.nav-menu-title {
-	float: left;
-	text-transform: uppercase;
+#title {
 	font-weight: 700;
-	margin-right: 4px;
-}
-.nav-menu-margin-left {
-	margin-left: 4px;
+	text-transform: uppercase;
 }
-.nav-menu-margins-left-and-right {
-	margin-left: 4px;
-	margin-right: 4px;
+#themes {
+	background-color: var(--bg-0);
+	border: none;
+	color: var(--fg-1);
+	font-size: 1.25rem;
+	margin: 0;
+	padding: 0;
 }
diff --git a/assets/responsive.css b/assets/responsive.css
new file mode 100644
index 0000000..d192217
--- /dev/null
+++ b/assets/responsive.css
@@ -0,0 +1,7 @@
+@media only screen and (min-width: 60rem) {
+	body {
+		max-width:60rem;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
diff --git a/content/blog/_index.md b/content/blog/_index.md
index eebca49..b842812 100644
--- a/content/blog/_index.md
+++ b/content/blog/_index.md
@@ -2,7 +2,7 @@
 title: "Blog"
 menu:
   main:
-    weight: 4
+    weight: 1
 ---
 
 This is the blog section of this website. It is an heritage of the old wiki I maintained before switching to a static website generated with [hugo]({{< ref "hugo" >}}), so articles before 2021 can be a little short and are more like notes than regular articles.
diff --git a/content/books/_index.md b/content/books/_index.md
index 63de345..a50f426 100644
--- a/content/books/_index.md
+++ b/content/books/_index.md
@@ -2,7 +2,7 @@
 title: "Books"
 menu:
   main:
-    weight: 3
+    weight: 2
 ---
 
 I used to read a lot when I was younger and really liked it. I went through many great sagas like Asimov's Foundation and Robots cycles, all the Dune books by Franck Herbert... I really liked reading. Without knowing why, I stopped reading books when I started working in 2009... I guess I got caught up with grown-up life then.
diff --git a/content/docs/_index.md b/content/docs/_index.md
index ccd78bf..6177dfa 100644
--- a/content/docs/_index.md
+++ b/content/docs/_index.md
@@ -2,7 +2,7 @@
 title: "Docs"
 menu:
   main:
-    weight: 2
+    weight: 3
 ---
 
 This is the Docs section of this website. It is an heritage of the old wiki I maintained before switching to a static website generated with [hugo]({{< ref "hugo" >}}), with information that does not really fit in a blog format.
diff --git a/content/search/_index.md b/content/search/_index.md
index 98f5b7e..2fcd606 100644
--- a/content/search/_index.md
+++ b/content/search/_index.md
@@ -2,7 +2,7 @@
 title: "Search"
 menu:
   main:
-    weight: 1
+    weight: 4
 layout: single
 ---
 
diff --git a/layouts/404.html b/layouts/404.html
index 31808d1..c0242ed 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -15,7 +15,8 @@
 		{{- $header := resources.Get "header.css" -}}
 		{{- $home := resources.Get "home.css" -}}
 		{{- $pagination := resources.Get "pagination.css" -}}
-		{{- $allCss := slice $base $code $footer $header $home $pagination | resources.Concat "static/all.css" | fingerprint | minify -}}
+		{{- $responsive := resources.Get "responsive.css" -}}
+		{{- $allCss := slice $base $code $footer $header $home $pagination $responsive | resources.Concat "static/all.css" | fingerprint | minify -}}
 		<link rel="stylesheet" href="{{ $allCss.Permalink }}">
 
 		{{ range .AlternativeOutputFormats -}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 201d609..c05ed38 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -15,7 +15,8 @@
 		{{- $header := resources.Get "header.css" -}}
 		{{- $home := resources.Get "home.css" -}}
 		{{- $pagination := resources.Get "pagination.css" -}}
-		{{- $allCss := slice $base $code $footer $header $home $pagination | resources.Concat "static/all.css" | fingerprint | minify -}}
+		{{- $responsive := resources.Get "responsive.css" -}}
+		{{- $allCss := slice $base $code $footer $header $home $pagination $responsive | resources.Concat "static/all.css" | fingerprint | minify -}}
 		<link rel="stylesheet" href="{{ $allCss.Permalink }}">
 
 		{{ range .AlternativeOutputFormats -}}
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 5abfc6f..9a63b34 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -1,29 +1,13 @@
 <header>
 	<nav>
-		<ul>
-			<li class="nav-menu-title{{if .IsHome}} nav-menu-active{{end}}"><a href="/">{{ .Site.Title }}</a></li>
-			<li>
-				<select id="themes" class="nav-menu-magin-left" onchange="setTheme()">
-					<option value="black-theme">Black</option>
-					<option value="dark-theme">Dark</option>
-					<option value="light-theme">Light</option>
-				</select>
+		<ol>
+			<li id="title"{{if .IsHome}} class="nav-menu-active"{{end}}>
+				<a href="/">{{ .Site.Title }}</a>
 			</li>
+		</ol>
+		<ol id="nav-menu">
 			{{- $p := . -}}
-
-			{{- range first 1 .Site.Menus.main.ByWeight -}}
-			{{- $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) -}}
-			{{- with .Page -}}
-			{{- $active = or $active ( $.IsDescendant .)  -}}
-			{{- end -}}
-			{{- $url := urls.Parse .URL -}}
-			{{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
-			<li class="nav-menu-margin-left{{if $active }} nav-menu-active{{end}}">
-				<a href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}"{{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ .Name }}</a>
-			</li>
-			{{ end }}
-
-			{{- range after 1 .Site.Menus.main.ByWeight -}}
+			{{- range .Site.Menus.main.ByWeight -}}
 			{{- $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) -}}
 			{{- with .Page -}}
 			{{- $active = or $active ( $.IsDescendant .)  -}}
@@ -34,6 +18,13 @@
 				<a href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}"{{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ .Name }}</a>
 			</li>
 			{{ end }}
-		</ul>
+			<li>
+				<select id="themes" class="nav-menu-magin-left" onchange="setTheme()">
+					<option value="black-theme">Black</option>
+					<option value="dark-theme">Dark</option>
+					<option value="light-theme">Light</option>
+				</select>
+			</li>
+		</ol>
 	</nav>
 </header>