60 lines
1.6 KiB
HTML
60 lines
1.6 KiB
HTML
<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>
|
|
{{ end }}
|
|
</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>
|
|
{{ end }}
|
|
</nav>
|
|
{{ end }}
|
|
</header>
|