<!doctype html>
<html lang="{{ metadata.language }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ metadata.title }} | {{ title }}</title>
        <meta name="description" content="{{ description or subtitle }}">
        <meta property="og:title" content="{{ metadata.title }} | {{ title }}">
        <meta property="og:description" content="{{ description or subtitle }}">
        <meta property="og:image" content="{{ metadata.url + preview_image }}">
        <link rel="alternate" href="/blog/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
        <link rel="alternate" href="/blog/feed.json" type="application/json" title="{{ metadata.title }}">
        <meta name="generator" content="{{ eleventy.generator }}">
        <link rel="stylesheet" href="/xkcd.css">
        <link rel="stylesheet" href="/index.css">
        <link rel="stylesheet" href="{% getBundleFileUrl 'css' %}">
        <script defer src="/light-toggle.js"></script>
    </head>
    <body>
        <a href="#skip" class="visually-hidden">Skip to main content</a>

        <header>
            <nav>
                <ul>
                    <li><a href="/">home</a></li>
                    <li>
                        <a href="/blog">blog</a>
                        <a href="/blog/feed.xml" style="text-decoration:none;">
                            <svg width=".8em" height=".8em">
                                <use href="/a/rss.svg#img"></use>
                            </svg>
                        </a>
                    </li>
                    <li><a href="/p">piles</a></li>
                    <!--<li>toons?</li>-->
                    <!--<li>games?</li>-->
                    <li><a href="/characters">characters</a></li>
                    <li><a href="/cookbook">cookbook</a></li>
                    <li><a href="/stickers">stickers</a></li>
                    <li><a href="javascript:void(0);" class="theme-toggle">toggle theme</a></li>
                </ul>
            </nav>
        </header>

        <main id="skip">
            <h1>{{ title }}</h1>
            <p><em>{{ subtitle }}</em></p>
            {{ content | safe }}
        </main>

        <footer></footer>

        <!-- This page `{{ page.url | htmlBaseUrl }}` was built on {% currentBuildDate %} -->
    </body>
</html>
