erynwells.me/layouts/_default/baseof.html

42 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html lang="{{ site.LanguageCode }}">
{{ partial "head.html" . }}
<body class="not-ready" data-menu="{{ isset site.Menus `main` }}">
{{ partial "header.html" . }}
<main class="main">
{{ block "main" . }}{{ end }}
</main>
{{ partial "footer.html" . }}
</body>
{{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
<script defer type="module" src="{{ `scripts/railroad.js` | absURL }}"></script>
<script defer type="module" src="{{ `scripts/railroad-utils.js` | absURL }}"></script>
{{ end }}
{{ if and .IsPage (.Page.Scratch.Get "includes_p5_sketch") }}
<script defer src="{{ `scripts/p5-1.4.1.min.js` | absURL }}"></script>
<script defer src="{{ `scripts/sketch-utils.js` | absURL }}"></script>
{{ end }}
{{ range $script := .Resources.Match "*.js" }}
{{ $isModule := default true $script.Params.is_module }}
<script defer {{ if $isModule }}type="module"{{ end }} src="{{ $script.Permalink | relURL }}"></script>
{{ 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>