vrifox/website
vrifox/website
1
0
Fork 0
Code Issues 3 Pull requests Activity

separated main menu and external links more clearly

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/partials/_footer.scss
View file

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

57
assets/partials/_nav.scss
View file

@ -19,8 +19,11 @@ nav {
} }
} }
} }
.website-nav { .seperator {
margin-left: auto; display: block;
padding: 20px;
}
.website-mainmenu {
ul { ul {
display: flex; display: flex;
margin: 0; margin: 0;
@ -37,6 +40,27 @@ nav {
background: rgb(50, 50, 75); 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 { .seperator {
display: block; display: block;
padding: 20px 10px; padding: 20px 10px;
@ -46,12 +70,33 @@ nav {
} }
} }
} }
@media (max-width: 600px) { @media (max-width: 1140px) {
nav { nav {
.container { .container {
max-width: none; margin: 0;
.website-nav { width: 100%;
padding: 0 20px; }
}
}
@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;
}
}
}
} }
} }
} }

2
config.yaml
View file

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

34
layouts/partials/nav.html
View file

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