erynwells.me/layouts/_default/baseof.html
2022-09-03 15:30:38 -07:00

48 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html lang="{{ site.LanguageCode }}">
{{ partial "head.html" . }}
<body>
{{ block "body" . }}
{{ block "header" . }}{{ end }}
<main>
{{ block "main" . }}{{ end }}
</main>
{{ block "footer" . }}{{ end }}
{{ end }}
</body>
<style>
@font-face {
font-family: "Museo_Slab";
src: url("{{ `/fonts/Museo_Slab_500.woff2` | absURL }}") format("woff2"),
url("{{ `/fonts/Museo_Slab_500.woff` | absURL }}") format("woff");
font-weight: normal;
font-style: normal;
}
</style>
{{ block "styles" . }}{{ end }}
{{ if not hugo.IsProduction }}
<link rel="stylesheet" as="style" href="/styles/development.css">
{{ end }}
{{ range .Resources.Match "*.css" }}
<link rel="stylesheet" as="style" href="{{ .Permalink }}">
{{ end }}
{{ block "scripts" . }}{{ end }}
<script>
const bodyClasses = document.body.classList;
const systemDarkModeMatch = window.matchMedia('(prefers-color-scheme: dark)');
const localStorageDarkMode = localStorage.getItem('dark');
const setDark = isDark => {
bodyClasses[isDark ? 'add' : 'remove']('dark');
localStorage.setItem('dark', isDark ? 'yes' : 'no');
};
setDark(localStorageDarkMode ? localStorageDarkMode === 'yes' : systemDarkModeMatch.matches);
requestAnimationFrame(() => bodyClasses.remove('not-ready'));
systemDarkModeMatch.addEventListener('change', (event) => setDark(event.matches));
</script>
</html>