separated main menu and external links more clearly

This commit is contained in:
Vrifox 2020-09-30 20:37:20 +02:00
parent bfa8a24e8d
commit c8698d8c80
4 changed files with 71 additions and 24 deletions

View file

@ -31,7 +31,7 @@ footer {
color: rgb(200, 200, 230);
&:hover {
text-decoration: none;
border-bottom: 2px solid;
border-bottom: 1px solid;
}
}
}

View file

@ -19,8 +19,11 @@ nav {
}
}
}
.website-nav {
margin-left: auto;
.seperator {
display: block;
padding: 20px;
}
.website-mainmenu {
ul {
display: flex;
margin: 0;
@ -37,6 +40,27 @@ nav {
background: rgb(50, 50, 75);
}
}
}
}
}
.website-externallinks {
margin-left: auto;
ul {
display: flex;
margin: 0;
padding: 0;
li {
list-style-type: none;
a {
color: rgb(245, 245, 255);
display: block;
text-decoration: none;
transition: background .2s;
padding: 20px 30px;
&:hover {
background: rgb(50, 50, 75);
}
}
.seperator {
display: block;
padding: 20px 10px;
@ -46,12 +70,33 @@ nav {
}
}
}
@media (max-width: 600px) {
@media (max-width: 1140px) {
nav {
.container {
max-width: none;
.website-nav {
padding: 0 20px;
margin: 0;
width: 100%;
}
}
}
@media (max-width: 800px) {
nav {
.container {
.website-externallinks {
ul {
li {
a {
color: rgb(215, 215, 225);
background: rgb(50, 50, 75);
&:hover {
background: rgb(40, 40, 60);
}
}
.seperator {
display: block;
padding: 20px 10px;
}
}
}
}
}
}

View file

@ -16,7 +16,7 @@ menu:
title: projects
url: /projects
weight: 2
links:
externallinks:
- identifier: mastodon
name: mastodon
title: mastodon

View file

@ -3,27 +3,29 @@
<section class="website-name">
<a href="{{ .Site.BaseURL }}">{{ .Site.Params.menuname }}</a>
</section>
<section class="website-nav">
<span class="seperator">/</span>
<section class="website-mainmenu">
<ul>
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li>
<a href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{ end }}
<li>
<span class="seperator">&middot;</span>
<a href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{ end }}
</ul>
</section>
<section class="website-externallinks">
<ul>
{{ range .Site.Menus.externallinks }}
<li>
<a title="{{ .URL }}" href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{ range .Site.Menus.links }}
<li>
<a href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{ end }}
</ul>
</section>