<template>
    <footer class="container mx-auto max-w-screen-lg sm:px-6 px-2">
        <div class="text-white grid grid-cols-3 py-6">
            <div class="col-start-1 col-span-3 sm:col-span-1">
                <p><a href="/colophon"><client-only><fa-icon icon="fa-regular fa-circle-question" class="pr-2" /></client-only>About this site…</a></p>
                <p class="hidden"><a rel="me" href="https://livellosegreto.it/@morpheu5">Me on Mastodon</a></p>
            </div>
            <div class="col-start-1 col-span-2 sm:col-start-2 sm:col-span-2">
                <p class="mt-2 sm:mt-0 sm:text-right"><client-only><fa-icon icon="fa-regular fa-copyright" class="pr-2" alt="Copyright" /></client-only>Unless otherwise specified, the content of this site is licensed as <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.</p>
            </div>
        </div>
    </footer>
</template>

<style lang="pcss" scoped>
@reference '../assets/css/main.css';

* {
    color: theme(colors.slate.400);
    /* font-family: "Open Sans"; */
}

a {
    color: theme(colors.slate.100);
    text-decoration: underline white;
}
</style>