af/pages/colophon.vue

<template><NuxtLayout name="default">
    <template #headline>{{ headline }}</template>
    <template #tagline>{{ tagline }}</template>

    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
        <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
            <h2>Colophon</h2>
            <section class="col-span-1 sm:col-span-2">
                <p class="noindent">Funny little word derived from Greek <span class="greek">κολοφων</span>, historically meaning a statement at the end of a publication, providing information about it. Think of metadata with a thick layer of dust on top.</p>
            </section>
            <section>
                <h3>Author</h3>
                <figure class="center">
                    <picture alt="This guy here.">
                        <source srcset="/images/colopic.jpg 1x, /images/colopic-2x.jpg 2x" />
                        <img class="rounded" srcset="/images/colopic.jpg" alt="This guy here." />
                    </picture>
                    <figcaption><span>This guy here, portrayed by <a href="https://www.flickr.com/photos/xalira">Elena</a></span></figcaption>
                </figure>
                <p class="noindent">I am the sole author of this website's content, unless otherwise specified, and it's licensed as <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.</p>
            </section>
            <section class="col-span-1 sm:col-start-2">
                <h3>Tech bits</h3>
                <p class="noindent">For a whole bunch of reasons that I'm <strong>not</strong> about to explain,
                    this website is lovingly crafted in <a href="https://en.wikipedia.org/wiki/HTML5">HTML5</a>,
                    with a little help from <a href="https://nuxtjs.org">NuxtJS</a> and <a href="https://threejs.org">Three.js</a>.
                    I'm using <a href="https://code.visualstudio.com/">Visual Studio Code</a> to edit the code.
                    The styling is provided by <a href="https://tailwindcss.com/">Tailwind CSS</a> to make it look beautiful… and responsive!</p>
                <h3>Fonts</h3>
                <p class="noindent">I'm using a number of fonts:</p>
                <ul>
                    <li>body and footer: <a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a></li>
                    <li>headers: <a href="https://www.google.com/fonts/specimen/Oswald">Oswald</a></li>
                    <li>icons: <a href="https://fontawesome.com">Font Awesome</a></li>
                </ul>
            </section>
        </article>
    </div>
</NuxtLayout></template>

<script lang="ts" setup>
definePageMeta({
    layout: false
});

const headline = "About this site";
const tagline = "";

const title = `${headline} ••• Andrea Franceschini, PhD`;

useState('pageClasses', () => ['colophon', 'page']);
useHead({
    title
});
</script>