aboutsummaryrefslogtreecommitdiffstats
path: root/internal/web/templates/layouts/blog.html
diff options
context:
space:
mode:
authorgrm <grm@eyesin.space>2026-09-19 00:04:08 +0300
committergrm <grm@eyesin.space>2026-09-19 00:04:08 +0300
commitc42c56108ebac6673ec5c86f9f0d51f31e8eb2bd (patch)
tree61e20aa8973a3ef628f62063da65245c62ac23af /internal/web/templates/layouts/blog.html
parent96336d8bacd2bdf81acf9a18e2fe57be9d4e9b4f (diff)
downloadblogspace-c42c56108ebac6673ec5c86f9f0d51f31e8eb2bd.tar.gz
blogspace-c42c56108ebac6673ec5c86f9f0d51f31e8eb2bd.tar.bz2
blogspace-c42c56108ebac6673ec5c86f9f0d51f31e8eb2bd.zip
Remove the menu fold
The header menu no longer folds into a ☰ button: the nav_fold and nav_fold_label options, Layout.Fold/BurgerAt, the burger markup and its checkbox, the fold rules in blog.css and the measuring script on the public page are gone, and the Design tab's preview only sizes its frame again. The public page runs no script of its own once more. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A
Diffstat (limited to 'internal/web/templates/layouts/blog.html')
-rw-r--r--internal/web/templates/layouts/blog.html44
1 files changed, 10 insertions, 34 deletions
diff --git a/internal/web/templates/layouts/blog.html b/internal/web/templates/layouts/blog.html
index 71a62b0..99bb13a 100644
--- a/internal/web/templates/layouts/blog.html
+++ b/internal/web/templates/layouts/blog.html
@@ -40,36 +40,12 @@
</body>
</html>{{end}}
-{{/* The header: the banner, then its modules in order. With the menu folding
- (Layout.Fold) a hidden checkbox comes first: it is the open/closed state,
- so the burger label toggles the menu with no script and in old browsers
- (`:checked ~` reaches every block after it). Folding itself is decided by
- the script below — any link on a second line means the menu does not fit —
- which drops nav-auto, the no-script fallback blog.css folds on phones. */}}
-{{define "siteheader"}}{{$l := .Data.layout}}{{$t := .Data.theme}}<div class="site-header{{if $l.Fold}} nav-fold nav-auto{{end}}{{if eq $t.HeaderAlign "center"}} header-center{{end}}">
- {{if $l.Fold}}<input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="{{t "Menu"}}">{{end}}
+{{/* The header: the banner, then its modules in order. On its own so the
+ design page's preview can render it alone. */}}
+{{define "siteheader"}}{{$t := .Data.theme}}<div class="site-header">
{{if $t.HeaderImage}}<div class="header-image"><a href="/"><img src="{{$.Media}}/{{$t.HeaderImage}}" alt=""></a></div>{{end}}
- {{range $i, $m := $l.Header}}{{template "module" (dict "m" $m "root" $ "burger" (and $l.Fold (eq $i $l.BurgerAt)))}}{{end}}
-</div>{{if $l.Fold}}<script>(function () {
- var h = document.querySelector && document.querySelector(".site-header.nav-fold"), cb = document.getElementById("nav-toggle");
- if (!h || !h.classList || !window.addEventListener) return; // old browsers keep the phone-only fallback
- var nav = h.querySelector(".site-nav .nav-inner"), links = nav && nav.getElementsByTagName("a"), timer;
- if (!links || !links.length) return;
- h.classList.remove("nav-auto");
- function fit() { // unfold, look, refold before anything is painted
- h.classList.remove("nav-folded");
- var top = links[0].offsetTop, wrapped = false;
- for (var i = 1; i < links.length && !wrapped; i++) wrapped = links[i].offsetTop !== top;
- if (wrapped) h.classList.add("nav-folded");
- }
- fit();
- window.addEventListener("load", fit); // web fonts change the widths
- window.addEventListener("resize", function () { clearTimeout(timer); timer = setTimeout(fit, 100); });
- if (cb) cb.addEventListener("change", function () { cb.setAttribute("aria-expanded", cb.checked ? "true" : "false"); });
-})();</script>{{end}}{{end}}
-
-{{/* The fold button, a label for the checkbox above. */}}
-{{define "burger"}}<label for="nav-toggle" class="nav-burger burger-{{.NavFoldLabel}}"><span class="nb-icon" aria-hidden="true">&#9776;</span><span class="nb-text">{{t "Menu"}}</span></label>{{end}}
+ {{range .Data.layout.Header}}{{template "module" (dict "m" . "root" $)}}{{end}}
+</div>{{end}}
{{define "notices"}}{{if .}}<div class="notices">
{{range .}}<aside class="notice notice-{{.Style}}{{if .Title}} headed{{end}}{{if .Width}} w-{{.Width}}{{end}}">
@@ -81,14 +57,14 @@
{{/* One layout module. .m is the store.Module, .root the page data; the same
kind renders differently in the header (big blocks) and elsewhere (boxes). */}}
-{{define "module"}}{{$m := .m}}{{$r := .root}}{{$t := $r.Data.theme}}{{$rc := $t.RuleClass}}{{$b := .burger}}
-{{- if eq $m.Kind "title"}}<div class="wrap header-text{{with $rc}} {{.}}{{end}}{{if $b}} has-burger{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand">
+{{define "module"}}{{$m := .m}}{{$r := .root}}{{$t := $r.Data.theme}}{{$rc := $t.RuleClass}}
+{{- if eq $m.Kind "title"}}<div class="wrap header-text{{with $rc}} {{.}}{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand">
<h1 class="site-title"><a href="/">{{$r.Blog.Title}}</a></h1>
{{if $r.Blog.Tagline}}<p class="tagline">{{$r.Blog.Tagline}}</p>{{end}}
-</div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}{{if $b}}{{template "burger" $t}}{{end}}</div>
-{{- else if eq $m.Kind "logo"}}{{if $t.Logo}}{{if eq $m.Area "header"}}<div class="wrap header-logo{{with $rc}} {{.}}{{end}}{{if $b}} has-burger{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand"><a href="/"><img class="logo" src="{{$r.Media}}/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}{{if $b}}{{template "burger" $t}}{{end}}</div>
+</div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}</div>
+{{- else if eq $m.Kind "logo"}}{{if $t.Logo}}{{if eq $m.Area "header"}}<div class="wrap header-logo{{with $rc}} {{.}}{{end}}">{{template "rule" (dict "before" true "rc" $rc "theme" $t)}}<div class="brand"><a href="/"><img class="logo" src="{{$r.Media}}/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}</div>
{{else}}<div class="mod mod-logo"><a href="/"><img class="logo" src="{{$r.Media}}/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>{{end}}{{end}}
-{{- else if eq $m.Kind "menu"}}{{if eq $m.Area "header"}}<div class="site-nav{{if $b}} has-burger{{end}}"><div class="wrap nav-inner">{{if $b}}{{template "burger" $t}}{{end}}{{if $r.Data.layout.HeaderSearch}}{{template "searchform" $r}}{{end}}{{template "menulinks" $r}}</div></div>
+{{- else if eq $m.Kind "menu"}}{{if eq $m.Area "header"}}<div class="site-nav"><div class="wrap nav-inner">{{if $r.Data.layout.HeaderSearch}}{{template "searchform" $r}}{{end}}{{template "menulinks" $r}}</div></div>
{{else}}<div class="mod site-nav mod-menu">{{template "modtitle" $m}}<div class="nav-inner">{{template "menulinks" $r}}</div></div>{{end}}
{{- else if eq $m.Kind "recent"}}<div class="mod mod-recent">{{template "modtitle" $m}}
<ul>{{range $i, $p := $r.Data.recent}}{{if lt $i $m.Count}}<li><a href="/{{$p.PageSlug}}/{{$p.Slug}}">{{$p.Title}}</a></li>{{end}}{{end}}</ul>