Update nav menu css
This commit is contained in:
parent
744819c90d
commit
6ad4e164af
10 changed files with 59 additions and 69 deletions
|
@ -74,14 +74,6 @@
|
||||||
--br_violet: #825dc0;
|
--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;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
@ -138,13 +130,6 @@ ul li {
|
||||||
h1, h2, h3, h4, h5 {
|
h1, h2, h3, h4, h5 {
|
||||||
font-family: open, serif;
|
font-family: open, serif;
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 60rem) {
|
|
||||||
body {
|
|
||||||
max-width:60rem;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.fullwidth {
|
.fullwidth {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -159,12 +144,10 @@ a {
|
||||||
a:visited {
|
a:visited {
|
||||||
color: var(--orange);
|
color: var(--orange);
|
||||||
}
|
}
|
||||||
a:hover {
|
|
||||||
color: var(--red);
|
|
||||||
}
|
|
||||||
h1,
|
h1,
|
||||||
body header nav ul li a,
|
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);
|
color: var(--red);
|
||||||
}
|
}
|
||||||
h2, h3, h4, h5, h6 {
|
h2, h3, h4, h5, h6 {
|
||||||
|
|
|
@ -1,40 +1,47 @@
|
||||||
header {
|
header {
|
||||||
background-color: var(--bg-0);
|
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;
|
list-style-type: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
}
|
||||||
header nav ul li {
|
header nav ol li a {
|
||||||
display: inline;
|
|
||||||
float: right;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
header nav ul li a {
|
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
padding: 4px 16px 14px 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 14px 16px;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
header nav ul li a:hover {
|
header nav ol li a:hover {
|
||||||
background-color: var(--bg-1);
|
background-color: var(--bg-1);
|
||||||
}
|
}
|
||||||
|
#nav-menu {
|
||||||
|
align-items: baseline;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
#nav-menu li {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
.nav-menu-active {
|
.nav-menu-active {
|
||||||
background-color: var(--bg-1);
|
background-color: var(--bg-1);
|
||||||
}
|
}
|
||||||
.nav-menu-title {
|
#title {
|
||||||
float: left;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-right: 4px;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
.nav-menu-margin-left {
|
#themes {
|
||||||
margin-left: 4px;
|
background-color: var(--bg-0);
|
||||||
}
|
border: none;
|
||||||
.nav-menu-margins-left-and-right {
|
color: var(--fg-1);
|
||||||
margin-left: 4px;
|
font-size: 1.25rem;
|
||||||
margin-right: 4px;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
7
assets/responsive.css
Normal file
7
assets/responsive.css
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
@media only screen and (min-width: 60rem) {
|
||||||
|
body {
|
||||||
|
max-width:60rem;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,7 +2,7 @@
|
||||||
title: "Blog"
|
title: "Blog"
|
||||||
menu:
|
menu:
|
||||||
main:
|
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.
|
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.
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
title: "Books"
|
title: "Books"
|
||||||
menu:
|
menu:
|
||||||
main:
|
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.
|
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.
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
title: "Docs"
|
title: "Docs"
|
||||||
menu:
|
menu:
|
||||||
main:
|
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.
|
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.
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
title: "Search"
|
title: "Search"
|
||||||
menu:
|
menu:
|
||||||
main:
|
main:
|
||||||
weight: 1
|
weight: 4
|
||||||
layout: single
|
layout: single
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,8 @@
|
||||||
{{- $header := resources.Get "header.css" -}}
|
{{- $header := resources.Get "header.css" -}}
|
||||||
{{- $home := resources.Get "home.css" -}}
|
{{- $home := resources.Get "home.css" -}}
|
||||||
{{- $pagination := resources.Get "pagination.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 }}">
|
<link rel="stylesheet" href="{{ $allCss.Permalink }}">
|
||||||
|
|
||||||
{{ range .AlternativeOutputFormats -}}
|
{{ range .AlternativeOutputFormats -}}
|
||||||
|
|
|
@ -15,7 +15,8 @@
|
||||||
{{- $header := resources.Get "header.css" -}}
|
{{- $header := resources.Get "header.css" -}}
|
||||||
{{- $home := resources.Get "home.css" -}}
|
{{- $home := resources.Get "home.css" -}}
|
||||||
{{- $pagination := resources.Get "pagination.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 }}">
|
<link rel="stylesheet" href="{{ $allCss.Permalink }}">
|
||||||
|
|
||||||
{{ range .AlternativeOutputFormats -}}
|
{{ range .AlternativeOutputFormats -}}
|
||||||
|
|
|
@ -1,29 +1,13 @@
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ol>
|
||||||
<li class="nav-menu-title{{if .IsHome}} nav-menu-active{{end}}"><a href="/">{{ .Site.Title }}</a></li>
|
<li id="title"{{if .IsHome}} class="nav-menu-active"{{end}}>
|
||||||
<li>
|
<a href="/">{{ .Site.Title }}</a>
|
||||||
<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>
|
</li>
|
||||||
|
</ol>
|
||||||
|
<ol id="nav-menu">
|
||||||
{{- $p := . -}}
|
{{- $p := . -}}
|
||||||
|
{{- range .Site.Menus.main.ByWeight -}}
|
||||||
{{- 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 -}}
|
|
||||||
{{- $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) -}}
|
{{- $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) -}}
|
||||||
{{- with .Page -}}
|
{{- with .Page -}}
|
||||||
{{- $active = or $active ( $.IsDescendant .) -}}
|
{{- $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>
|
<a href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}"{{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ .Name }}</a>
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ 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>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
Loading…
Add table
Reference in a new issue