_layouts/default.html

---
layout: compress
---
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- metadata -->
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name=description content="{{ site.bio }}">
    <meta name=author content="{{ site.name }}">
    {% seo %}
    {% include favicon.html %}
    <link rel="canonical" href="{{ site.url }}{{ page.url | replace:'index.html','' }}">
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}{{ "/feed.xml" }}" />

    <!-- iA Fonts: https://github.com/iaolo/iA-Fonts -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codex-src/iA-Fonts@master/iA%20Writer%20Duo/Webfonts/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codex-src/iA-Fonts@master/iA%20Writer%20Quattro/Webfonts/index.css">

    <!-- base stuff -->
    <script>
        /* set a flag for mobile devices, see https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device */
        var isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

        /* dark mode */
        var prefersDark = false;
        function setDarkMode(isDark) {
            const theme = `theme-${isDark ? 'dark' : 'light'}`;
            document.querySelector('html').dataset.theme = theme;
            prefersDark = isDark;
            console.log(`Set ${theme}`);
        }
        const prefersDarkMatch = window.matchMedia('(prefers-color-scheme: dark)');
        setDarkMode(prefersDarkMatch.matches);

        prefersDarkMatch.addEventListener('change', (e) => setDarkMode(e.matches));
        console.info(`Call 'setDarkMode(${!prefersDark})' to ${prefersDark ? 'disable' : 'enable'} dark mode`);
    </script>
    <style>
        {% capture scss_sheet %}{% include style.scss %}{% endcapture %}
        {{ scss_sheet | scssify }}
    </style>

    <!-- charting stuff -->
    <script src="https://cdn.jsdelivr.net/npm/roughjs@3.1.0/dist/rough.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js" integrity="sha256-+9Mf3cAVmxxudDsr1XwXUeRZFtvdWVYdq5/vcgiYyNU=" crossorigin="anonymous"></script>

    <!-- updates/messaging stuff -->
    <link href="/assets/scripts/noty/noty.css" rel="stylesheet">
    <script src="/assets/scripts/noty/noty.min.js" type="text/javascript"></script>

    <!-- set up defaults for various plugins -->
    <script>
        /* refer to https://ned.im/noty/#/options */
        Noty.overrideDefaults({
            theme: 'sunset',
            layout: 'bottomRight',
            closeWith: ['click', 'button'],
            sounds: { volume: 0 },
        });
    </script>
</head>

<body>

    <div class="wrapper-{% if site.width == "normal" %}normal{% elsif site.width == "large" %}large{% endif %}">
        {% if page.tag %}
            <div class="post">
        {% else %}
            {% if showHeader != true %}
                <div class="page {{ page.title | downcase | replace: ' ', '-' }}">
            {% else %}
                <div class="{{ page.title | downcase }}">
            {% endif %}
        {% endif %}

        {{ content }}
        </div>
    </div>

    {% include icons.html %}

    {% include analytics-google.html %}

</body>

</html>