is built here and only here, "{part} · {part} · Slides", so no handler can drift from the suite's separator (spec §10). <meta charset> comes first, before anything that could be read as text. The stylesheets are in the suite's fixed order: tokens, theme, brand, then estilo's base, menu and chrome, then the page's own (page-head). */}} <html lang="{{block "lang" .}}en{{end}}" dir="{{block "dir" .}}ltr{{end}}"{{with .Frame.Theme}} data-theme="{{.}}"{{end}}> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{range .Frame.TitleParts}}{{.}}

. The bar is estilo's (chrome.Bar, built once per request in chrome.go), in place of rastrillo's topbar shell: that bar was 45px signed out and 51px signed in, because the Account summary was taller than the bar and only existed once signed in, so signing in, and every hop between an error page and any other page, moved the whole page down 6px. estilo's is 52px at every width, signed in or out, with the account always last in the same corner. Bare pages (the presenting screens: the projector surface, the presenter view, the remote and the pairing page) have no bar at all. They are addressed by a capability and shown on a projector, a lectern or a phone; a bar there was chrome nobody could use, and a signed-in presenter was shown "Account → Sign in" in it. data-theme is written into the first bytes of the response, from the Appearance cookie read server-side (chrome.Appearance), so there is no flash. It is ABSENT for "system", and that is the mechanism: theme.css's toggle is :root[data-theme="light"|"dark"], and with no attribute the browser follows the operating system. The is built here and only here, "{part} · {part} · Slides", so no handler can drift from the suite's separator (spec §10). <meta charset> comes first, before anything that could be read as text. The stylesheets are in the suite's fixed order: tokens, theme, brand, then estilo's base, menu and chrome, then the page's own (page-head). */}} <html lang="{{block "lang" .}}en{{end}}" dir="{{block "dir" .}}ltr{{end}}"{{with .Frame.Theme}} data-theme="{{.}}"{{end}}> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{range .Frame.TitleParts}}{{.}} · {{end}}{{.Frame.Chrome.App.Name}} {{iconAssets}} {{/* page-head is a page's own slot in : one more stylesheet, a module, a meta tag. Last, so a page's own CSS wins. */}} {{block "page-head" .}}{{end}} {{/* [estilo-shell] wraps every page and has no styling of its own. The "main" block lets a page supply its own

(the projector surface, which is the whole viewport and not a column). */}}

{{- if not .Frame.Bare}} {{.Frame.Chrome.Labels.Skip}} {{template "estilo-bar" .Frame.Chrome}} {{- end}} {{block "main" .}}