diff options
Diffstat (limited to 'vrsite/templates/layout.tmpl')
| -rw-r--r-- | vrsite/templates/layout.tmpl | 30 |
1 files changed, 24 insertions, 6 deletions
diff --git a/vrsite/templates/layout.tmpl b/vrsite/templates/layout.tmpl index 9bc9ddd..268b5b6 100644 --- a/vrsite/templates/layout.tmpl +++ b/vrsite/templates/layout.tmpl @@ -4,12 +4,20 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{.Title}}</title> +<link rel="stylesheet" href="{{.Href "asset" "style.css"}}"> <script> +// the theme is worn before the first paint. A theme that is not one of the +// two the site was built with lives in themes.css, so pull that in too — +// from here, after style.css, so its :root block is the one that wins. {const d = document.documentElement, t = localStorage.getItem("vrsite-theme"); if (t && t !== "system") d.dataset.theme = t; + if (t && !/^(system|dark|light)$/.test(t)) { + const l = document.createElement("link"); + l.rel = "stylesheet"; l.id = "themescss"; l.href = "{{.Href "asset" "themes.css"}}"; + document.head.append(l); + } d.dataset.mode = localStorage.getItem("vrsite-mode") || "trace";} </script> -<link rel="stylesheet" href="{{.Href "asset" "style.css"}}"> {{if .Live}}<script src="{{.Href "asset" "htmx.min.js"}}"></script>{{end}} <script src="{{.Href "asset" "app.js"}}" defer></script> </head> @@ -35,11 +43,20 @@ <a href="{{.Href "files"}}">files</a>{{if .Live}} · <a href="{{.Href "jj"}}">jj</a>{{end}} </span> - <select id="themesel" aria-label="color scheme"> - <option value="system">system</option> - <option value="dark">dark</option> - <option value="light">light</option> - </select> + <div class="themepick" id="themepick" + data-js="{{.Href "asset" "themes.js"}}" data-css="{{.Href "asset" "themes.css"}}" + data-dark="{{.Site.Theme.Name}}" data-light="{{.Site.Light.Name}}" + data-darkid="{{.Site.Theme.ID}}" data-lightid="{{.Site.Light.ID}}"> + <button type="button" id="themebtn" aria-haspopup="listbox" aria-expanded="false" + title="theme — every one installed here (T)">theme</button> + <div class="thememenu" id="thememenu" hidden> + <input id="themefind" type="search" placeholder="filter themes…" aria-label="filter themes" + role="combobox" aria-controls="themelist" aria-autocomplete="list" + autocomplete="off" spellcheck="false"> + <ul id="themelist" role="listbox" aria-label="themes"></ul> + <p class="meta hint">↑↓ preview · enter keeps · esc puts it back</p> + </div> + </div> </footer> </nav> @@ -47,6 +64,7 @@ {{if .Err}}<p class="err">{{.Err}}</p>{{end}} {{if eq .Kind "file"}}{{template "page-file" .}} {{else if eq .Kind "notes"}}{{template "page-notes" .}} +{{else if eq .Kind "note"}}{{template "page-note" .}} {{else if eq .Kind "files"}}{{template "page-files" .}} {{else if eq .Kind "jj"}}{{template "page-jj" .}} {{else if eq .Kind "change"}}{{template "page-change" .}} |