{{ layout "layouts/base.vto" }}
    <main class="min-h-screen text-text justify-self-center w-full lg:w-1/2 h-card">
        <h1 class="my-8 text-5xl text-bold text-mauve">
            About
            <span class="p-name p-nickname inline">
                dish
            </span>
        </h1>

        <div class="text-lg h-entry">
            {{ content }}
        </div>

        <h2 class="mt-8 mb-1 text-mauve text-2xl">Webrings!</h2>
        <p class="text-text text-lg mb-4">
            We're a big fan of old-school web discovery. Here's the
            <a href="https://en.wikipedia.org/wiki/Webring" class="text-blue underline">webrings</a>
            we're part of:
        </p>
        <ul>
            {{ for ring of webrings.rings }}
                {{ await comp.webring({"ring": ring}) }}
            {{ /for }}
        </ul>

        <h2 class="mt-8 text-mauve text-2xl">About This Site</h2>
        <p class="text-text text-lg">I've used the following to build this site:</p>
        <ul>
            {{ for tech of about.techs }}
                {{ await comp.about.technology_item({"tech": tech}) }}
            {{ /for }}
        </ul>
    </main>
{{ /layout }}