diff options
Diffstat (limited to 'internal/web/templates/layouts/blog.html')
| -rw-r--r-- | internal/web/templates/layouts/blog.html | 46 |
1 files changed, 37 insertions, 9 deletions
diff --git a/internal/web/templates/layouts/blog.html b/internal/web/templates/layouts/blog.html index 7ee0b54..d55512a 100644 --- a/internal/web/templates/layouts/blog.html +++ b/internal/web/templates/layouts/blog.html @@ -13,10 +13,7 @@ </head> {{$l := .Data.layout}} <body class="{{if $l.HasLeft}}has-left {{end}}{{if $l.HasRight}}has-right {{end}}{{.Data.theme.NavClass}}{{with .Data.theme.TitleRuleClass}} {{.}}{{end}}"> -{{if or $l.Header .Data.theme.HeaderImage}}{{if .Data.theme.HeaderOn}}<div class="site-header"> - {{if .Data.theme.HeaderImage}}<div class="header-image"><a href="/"><img src="/media/{{.Data.theme.HeaderImage}}" alt=""></a></div>{{end}} - {{range $l.Header}}{{template "module" (dict "m" . "root" $)}}{{end}} -</div>{{end}}{{end}} +{{if or $l.Header .Data.theme.HeaderImage}}{{if .Data.theme.HeaderOn}}{{template "siteheader" .}}{{end}}{{end}} <div class="wrap body-wrap cols"> {{$n := .Data.notices}} <div class="col col-main"><div class="content"> @@ -43,6 +40,37 @@ </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}} + {{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">☰</span><span class="nb-text">{{t "Menu"}}</span></label>{{end}} + {{define "notices"}}{{if .}}<div class="notices"> {{range .}}<aside class="notice notice-{{.Style}}{{if .Title}} headed{{end}}{{if .Width}} w-{{.Width}}{{end}}"> {{if .Title}}<h3 class="notice-title">{{.Title}}</h3>{{end}} @@ -53,14 +81,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}} -{{- 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"> +{{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"> <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)}}</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="/media/{{$t.Logo}}" alt="{{$r.Blog.Title}}"></a></div>{{template "rule" (dict "before" false "rc" $rc "theme" $t)}}</div> +</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="/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> {{else}}<div class="mod mod-logo"><a href="/"><img class="logo" src="/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"><div class="wrap nav-inner">{{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{{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}}<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> |