From 6ad4e164af37e6fe90283a4b9b124c03057d3805 Mon Sep 17 00:00:00 2001 From: Julien Dessaux Date: Fri, 27 Jan 2023 23:05:50 +0100 Subject: Update nav menu css --- assets/base.css | 21 ++----------------- assets/header.css | 49 +++++++++++++++++++++++++------------------- assets/responsive.css | 7 +++++++ content/blog/_index.md | 2 +- content/books/_index.md | 2 +- content/docs/_index.md | 2 +- content/search/_index.md | 2 +- layouts/404.html | 3 ++- layouts/_default/baseof.html | 3 ++- layouts/partials/nav.html | 37 +++++++++++++-------------------- 10 files changed, 59 insertions(+), 69 deletions(-) create mode 100644 assets/responsive.css 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 -}} {{ 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 -}} {{ 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 @@
-- cgit v1.2.3