diff options
Diffstat (limited to 'src/templates/-base.html.tmpl')
| -rw-r--r-- | src/templates/-base.html.tmpl | 60 |
1 files changed, 39 insertions, 21 deletions
diff --git a/src/templates/-base.html.tmpl b/src/templates/-base.html.tmpl index 2a33cc3..2e78a7c 100644 --- a/src/templates/-base.html.tmpl +++ b/src/templates/-base.html.tmpl @@ -1,42 +1,60 @@ <!DOCTYPE html> -<html lang={{ .Printer.Locale.Bcp }}> +<html lang="{{ .Printer.Bcp }}"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + {{ if .Debugp }} + <link href="/style-2.css" type="text/css" rel="stylesheet"> + {{ else }} <link href="/style.min.css" type="text/css" rel="stylesheet"> - <title>{{ .T "Euro Cash" }}</title> + {{ end }} + <title>{{ .Get "Euro Cash Wiki" }}</title> <script type="text/javascript"> const $ = q => document.querySelector(q); const $$ = q => document.querySelectorAll(q); - const validate = theme => - ["light", "dark"].includes(theme) ? theme : "light"; - const toggle = theme => - theme == "light" ? "dark" : "light"; + (() => { + document.addEventListener("DOMContentLoaded", _ => { + const root = $("html"); + const icons = { + light: $("#nav-icon-theme-light"), + dark: $("#nav-icon-theme-dark"), + }; - const setTheme = theme => { - localStorage.setItem("theme", theme); - $("html").setAttribute("data-theme", theme); - $(`#nav-icon-theme-${theme}`).style.display = ""; - $(`#nav-icon-theme-${toggle(theme)}`).style.display = "none"; - }; + const toggle = theme => + theme === "light" ? "dark" : "light" - document.addEventListener("DOMContentLoaded", _ => { - $("#theme-button").onclick = () => - setTheme(toggle(validate(localStorage.getItem("theme")))); - setTheme(validate(localStorage.getItem("theme"))); - }); + const setTheme = theme => { + localStorage.setItem("theme", theme); + root.setAttribute("data-theme", theme); + icons[theme].style.display = ""; + icons[toggle(theme)].style.display = "none"; + }; + + /* Double toggle to handle invalid theme */ + setTheme(toggle(toggle(localStorage.getItem("theme")))); + $("#theme-button").onclick = () => { + const theme = toggle(localStorage.getItem("theme")); + if (document.startViewTransition) + document.startViewTransition(() => setTheme(theme)); + else + setTheme(theme); + }; + }); + })(); </script> + + {{ template "header" . }} </head> <body> {{ template "content" . }} - <footer> + <footer class="container"> <p> <small> - {{ .T "Found a mistake or want to contribute missing information?" }} - <a href="/about">{{ .T "Feel free to contact us!" }}</a> + {{ .Get "Found a mistake or want to contribute missing information?" }} + <a href="/about">{{ .Get "Feel free to contact us!" }}</a> </small> </p> </footer> </body> -</html> +</html>
\ No newline at end of file |