<div class="header large">
    <nav class="container page">
        <a href="/" class="logo"><span>Night</span><span class="drop">mares</span></a>
        <span class="spacer">|</span>
        <a href="/catalogue">Catalogue</a>
        <span class="spacer">|</span>
        <a href="{{ .Site.Params.PatreonLink }}">Support me on Patreon</a>
        <span class="spacer">|</span>
        <a href="/about">About</a>
    </nav>
</div>

<div class="header medium">
    <nav class="container page">
        <a href="/" class="logo"><span>Night</span><span class="drop">mares</span></a>
        <span class="spacer">|</span>
        <a href="/catalogue">Catalogue</a>
        <span class="spacer">|</span>
        <a href="{{ .Site.Params.PatreonLink }}">Patreon</a>
        <span class="spacer">|</span>
        <a href="/about">About</a>
    </nav>
</div>

<div class="header small">
    <div class="pos-f-t">
        <div class="collapse" id="header-small">
            <nav class="bg-dark p-4">
                <p>
                    <a href="/" class="logo"><span>Night</span><span class="drop">mares</span></a>
                </p>
                <p>
                    <a href="/catalogue">Catalogue</a>
                </p>
                <p>
                    <a href="{{ .Site.Params.PatreonLink }}">Support me on Patreon</a>
                </p>
                <p>
                    <a href="/about">About</a>
                </p>
            </nav>
        </div>
        <nav class="navbar navbar-dark bg-dark">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-small" aria-controls="header-small" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </nav>
    </div>
</div>