The page shell
The frame every page shares. render.ts fills each {{slot}} with the page's own
parts, and says what goes in each.
A slot can hold a whole attribute, and an empty one takes the space before it away with it. An
inline script fills a slot of its own, <script> tags included, since formatting would read a
slot inside a <script> as code.
<!doctype html>
<html lang="en" {{accent}}>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The browser's own bar takes the paper's colour, as style.css sets it. -->
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="oklch(0.975 0.006 85)"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="oklch(0.215 0.006 70)" />
<title>{{title}}</title>
<link rel="icon" href="{{favicon}}" />
<link rel="stylesheet" href="{{style}}" />
<script defer src="{{script}}"></script>
{{live-script}} {{mode-script}}
</head>
<body data-path="{{path}}" {{rendered}}>
<!-- A capital, since markz's heading ids never have one, so the id can't take a heading's. -->
<a class="skip" href="#Text">Skip to the text</a>
<div class="shell">
<header class="bar">
<a class="project" href="/">{{project}}</a>{{nav}}
<div class="bar-mode">{{mode}}</div>
<input type="checkbox" id="dock" class="ctl" aria-label="Hide the file tree" />
<label class="rail-toggle dock" for="dock" title="Files">{{icon}}</label>
<button
type="button"
class="rail-toggle pop"
popovertarget="rail"
title="Files"
aria-label="Files"
>
{{icon}}
</button>
</header>
<div class="layout">
<div class="page">
<main id="Text" {{main-class}}>
<div class="where">
<nav class="crumbs">{{crumbs}}</nav>
{{editor}}
</div>
{{toc}}{{body}}
</main>
</div>
{{rail}} {{rail-script}}
</div>
</div>
{{speculation}}
</body>
</html>