| 1 | {{define "layout"}}<!doctype html> |
| 2 | {{/* layout — every page's document: the head, the estilo bar and <main>. |
| 3 | |
| 4 | The bar is estilo's (chrome.Bar, built once per request in |
| 5 | chrome.go), in place of rastrillo's topbar shell: that bar was 45px |
| 6 | signed out and 51px signed in, because the Account summary was |
| 7 | taller than the bar and only existed once signed in, so signing in, |
| 8 | and every hop between an error page and any other page, moved the |
| 9 | whole page down 6px. estilo's is 52px at every width, signed in or |
| 10 | out, with the account always last in the same corner. |
| 11 | |
| 12 | Bare pages (the presenting screens: the projector surface, the |
| 13 | presenter view, the remote and the pairing page) have no bar at all. |
| 14 | They are addressed by a capability and shown on a projector, a |
| 15 | lectern or a phone; a bar there was chrome nobody could use, and a |
| 16 | signed-in presenter was shown "Account → Sign in" in it. |
| 17 | |
| 18 | data-theme is written into the first bytes of the response, from |
| 19 | the Appearance cookie read server-side (chrome.Appearance), so there |
| 20 | is no flash. It is ABSENT for "system", and that is the mechanism: |
| 21 | theme.css's toggle is :root[data-theme="light"|"dark"], and with no |
| 22 | attribute the browser follows the operating system. |
| 23 | |
| 24 | The <title> is built here and only here, "{part} · {part} · Slides", |
| 25 | so no handler can drift from the suite's separator (spec §10). |
| 26 | |
| 27 | <meta charset> comes first, before anything that could be read as |
| 28 | text. The stylesheets are in the suite's fixed order: tokens, theme, |
| 29 | brand, then estilo's base, menu and chrome, then the page's own |
| 30 | (page-head). */}} |
| 31 | <html lang="{{block "lang" .}}en{{end}}" dir="{{block "dir" .}}ltr{{end}}"{{with .Frame.Theme}} data-theme="{{.}}"{{end}}> |
| 32 | <head> |
| 33 | <meta charset="utf-8"> |
| 34 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 35 | <title>{{range .Frame.TitleParts}}{{.}} · {{end}}{{.Frame.Chrome.App.Name}}</title> |
| 36 | <link rel="icon" type="image/png" sizes="32x32" href="{{asset "static/brand/icon-32.png"}}"> |
| 37 | <link rel="icon" type="image/svg+xml" href="{{asset "static/brand/icon.svg"}}"> |
| 38 | <link rel="apple-touch-icon" sizes="180x180" href="{{asset "static/brand/apple-touch-icon.png"}}"> |
| 39 | <link rel="stylesheet" href="/static/estilo/fonts/v1/fonts.css"> |
| 40 | <link rel="stylesheet" href="{{asset "static/tokens.css"}}"> |
| 41 | <link rel="stylesheet" href="{{asset "static/busy.css"}}"> |
| 42 | <link rel="stylesheet" href="{{asset "static/theme.css"}}"> |
| 43 | <link rel="stylesheet" href="{{asset "static/brand/brand.css"}}"> |
| 44 | <link rel="stylesheet" href="{{asset "static/estilo/base.css"}}"> |
| 45 | <link rel="stylesheet" href="{{asset "static/estilo/menu.css"}}"> |
| 46 | <link rel="stylesheet" href="{{asset "static/estilo/chrome.css"}}"> |
| 47 | <link rel="stylesheet" href="{{asset "static/estilo/sky.css"}}"> |
| 48 | <script defer src="{{asset "static/rastrillo.js"}}"></script> |
| 49 | <script defer src="{{asset "static/busy.js"}}"></script> |
| 50 | <script defer src="{{asset "static/estilo/chrome.js"}}"></script> |
| 51 | {{iconAssets}} |
| 52 | <script defer src="{{asset "static/select.js"}}"></script> |
| 53 | <script defer src="{{asset "static/calendar.js"}}"></script> |
| 54 | <script defer src="{{asset "static/datetime.js"}}"></script> |
| 55 | {{/* page-head is a page's own slot in <head>: one more stylesheet, a |
| 56 | module, a meta tag. Last, so a page's own CSS wins. */}} |
| 57 | {{block "page-head" .}}{{end}} |
| 58 | </head> |
| 59 | <body> |
| 60 | {{/* [estilo-shell] wraps every page and has no styling of its own. The |
| 61 | "main" block lets a page supply its own <main> (the projector |
| 62 | surface, which is the whole viewport and not a column). */}} |
| 63 | <div estilo-shell> |
| 64 | {{- if not .Frame.Bare}} |
| 65 | <a rst-skip href="#main">{{.Frame.Chrome.Labels.Skip}}</a> |
| 66 | {{template "estilo-bar" .Frame.Chrome}} |
| 67 | {{- end}} |
| 68 | {{block "main" .}}<main rst-page id="main"> |
| 69 | {{template "content" .}} |
| 70 | </main>{{end}} |
| 71 | </div> |
| 72 | </body> |
| 73 | </html> |
| 74 | {{end}} |
| 75 | |
amadan