1
0
Fork 0
hugo-paper/layouts/partials/header.html

61 lines
1.6 KiB
HTML
Raw Normal View History

2021-08-23 21:59:02 +02:00
<header class="header">
{{ if .IsHome }}
<h1 class="logo">
<a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-theme"></a>
</h1>
{{ else }}
<p class="logo">
<a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-theme"></a>
</p>
{{ end }}
<script>
let bodyClass = document.body.classList;
let buttonDark = document.querySelector('.btn-theme');
let schemeDark = window.matchMedia('(prefers-color-scheme: dark)');
let setDark = () => {
bodyClass.add('dark');
localStorage.setItem('dark', 'true');
};
let setLight = () => {
bodyClass.remove('dark');
localStorage.removeItem('dark');
};
if (schemeDark.matches || localStorage.getItem('dark')) setDark();
requestAnimationFrame(() => {
bodyClass.remove('not-ready');
});
buttonDark.addEventListener('click', () => {
bodyClass.contains('dark') ? setLight() : setDark();
});
schemeDark.addEventListener('change', event => {
event.matches ? setDark() : setLight();
});
</script>
{{ $url := .RelPermalink }}<!---->
{{ with site.Menus.main }}
<nav class="menu">
{{ range . }}
<a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
2021-08-22 02:36:17 +02:00
{{ end }}
2021-08-23 21:59:02 +02:00
</nav>
{{ end }}<!---->
{{ with $.Scratch.Get "social-map" }}
<nav class="social">
{{ range $key, $val := . }}
<a
class="{{ $key }}"
style="--img: url(./{{ printf `%s.svg` $key }})"
href="https://{{ $key }}.com/{{ $val }}"
target="_blank"
></a>
2021-08-20 13:21:20 +02:00
{{ end }}
2021-08-23 21:59:02 +02:00
</nav>
{{ end }}
</header>