Update nav menu css

This commit is contained in:
Julien Dessaux 2023-01-27 23:05:50 +01:00
parent 744819c90d
commit 6ad4e164af
Signed by: adyxax
GPG key ID: F92E51B86E07177E
10 changed files with 59 additions and 69 deletions

View file

@ -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 {

View file

@ -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;
text-transform: uppercase;
}
.nav-menu-margin-left {
margin-left: 4px;
}
.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;
}

7
assets/responsive.css Normal file
View file

@ -0,0 +1,7 @@
@media only screen and (min-width: 60rem) {
body {
max-width:60rem;
margin-left: auto;
margin-right: auto;
}
}

View file

@ -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.

View file

@ -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.

View file

@ -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.

View file

@ -2,7 +2,7 @@
title: "Search"
menu:
main:
weight: 1
weight: 4
layout: single
---

View file

@ -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 -}}

View file

@ -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 -}}

View file

@ -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>