| 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 was 81px, with |
| 6 | a raw address, a blue "Settings" link and a Sign out button wrapping |
| 7 | under it. estilo's is 52px at every width, signed in or out, with the |
| 8 | account always last in the same corner. |
| 9 | |
| 10 | data-theme is written into the first bytes of the response, from the |
| 11 | Appearance cookie read server-side (chrome.Appearance), so there is |
| 12 | no flash. It is ABSENT for "system": theme.css's toggle is |
| 13 | :root[data-theme="light"|"dark"], and with no attribute the browser |
| 14 | follows the operating system. |
| 15 | |
| 16 | The <title> is built here and only here, "{part} · {part} · Calls", |
| 17 | so no handler can drift from the suite's separator (spec §10). |
| 18 | |
| 19 | <meta charset> comes first. The stylesheets are in the suite's fixed |
| 20 | order: tokens, theme, brand, then estilo's base, menu and chrome, |
| 21 | then the app's own; a page adds its own in "head", last. */}} |
| 22 | <html lang="{{block "lang" .}}en{{end}}" dir="{{block "dir" .}}ltr{{end}}"{{with .Frame.Theme}} data-theme="{{.}}"{{end}}> |
| 23 | <head> |
| 24 | <meta charset="utf-8"> |
| 25 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 26 | <title>{{range .Frame.TitleParts}}{{.}} · {{end}}{{.Frame.Chrome.App.Name}}</title> |
| 27 | <link rel="icon" type="image/png" sizes="32x32" href="{{asset "static/brand/icon-32.png"}}"> |
| 28 | <link rel="icon" type="image/svg+xml" href="{{asset "static/brand/icon.svg"}}"> |
| 29 | <link rel="apple-touch-icon" sizes="180x180" href="{{asset "static/brand/apple-touch-icon.png"}}"> |
| 30 | <link rel="stylesheet" href="/static/estilo/fonts/v1/fonts.css"> |
| 31 | <link rel="stylesheet" href="{{asset "static/tokens.css"}}"> |
| 32 | <link rel="stylesheet" href="{{asset "static/busy.css"}}"> |
| 33 | <link rel="stylesheet" href="{{asset "static/theme.css"}}"> |
| 34 | <link rel="stylesheet" href="{{asset "static/brand/brand.css"}}"> |
| 35 | <link rel="stylesheet" href="{{asset "static/estilo/base.css"}}"> |
| 36 | <link rel="stylesheet" href="{{asset "static/estilo/menu.css"}}"> |
| 37 | <link rel="stylesheet" href="{{asset "static/estilo/chrome.css"}}"> |
| 38 | <link rel="stylesheet" href="{{asset "static/estilo/sky.css"}}"> |
| 39 | <link rel="stylesheet" href="{{asset "static/callui.css"}}"> |
| 40 | <link rel="stylesheet" href="{{asset "static/calls-shell.css"}}"> |
| 41 | <script defer src="{{asset "static/rastrillo.js"}}"></script> |
| 42 | <script defer src="{{asset "static/busy.js"}}"></script> |
| 43 | <script defer src="{{asset "static/estilo/chrome.js"}}"></script> |
| 44 | {{iconAssets}} |
| 45 | <script defer src="{{asset "static/select.js"}}"></script> |
| 46 | {{block "head" .}}{{end}} |
| 47 | </head> |
| 48 | <body> |
| 49 | {{/* The page shell. The call room replaces it (room.html's "body"): a |
| 50 | call is one rounded window in the viewport, and its navigation moves |
| 51 | into the title's menu, in the account menu's words and order. */}} |
| 52 | {{block "body" .}} |
| 53 | <div estilo-shell> |
| 54 | <a rst-skip href="#main">{{.Frame.Chrome.Labels.Skip}}</a> |
| 55 | {{template "estilo-bar" .Frame.Chrome}} |
| 56 | <main rst-page id="main"> |
| 57 | {{template "content" .}} |
| 58 | </main> |
| 59 | </div> |
| 60 | {{end}} |
| 61 | </body> |
| 62 | </html> |
| 63 | {{end}} |
| 64 | |
amadan