{% extends "layouts/base.html" %}

{% block content %}
<div class="flex flex-wrap justify-center gap-2">
    {% for section_path in section.subsections %}
    {% set section = get_section(path=section_path) %}
    <div class="flex flex-col bg-background-50 p-2 rounded-xl hover:bg-background-100 transition-colors">
        <div class="max-w-[240px]">
            <figure>
                <img src="/img/240x135-placeholder.svg"/>
            </figure>
            <a class="font-semibold text-secondary-400 px-1 pt-1 hover:underline" href={{ section.permalink }}>{{ section.title }}</a>
            <p class="px-2">{{ section.description }}</p>
        </div>
    </div>
    {% endfor %}
</div>
<div class="flex justify-center pt-12">
    <div class="flex flex-col max-w-2xl gap-2">
        <p class="text-sm">
            This is not everything I've made, more is available
            <a class="text-secondary-500 font-semibold hover:underline" rel="noopener" target="_blank" href="https://git.src.quest/~liljamo/">on Source Quest</a>!
            <br/>
            Though I cannot guarantee anything for projects not listed here. Be it quality, does it work, is it sane, does it serve any purpose, etc, etc.
        </p>
        <p class="text-sm">
            If you'd like to know more about me, head over to
            <a class="text-secondary-500 font-semibold hover:underline" rel="noopener" target="_blank" href="https://liljamo.com">liljamo.com</a>
        </p>
        <p class="text-sm">
            This page uses
            <a data-umami-event="privacy-umami.is" class="font-semibold hover:underline text-sky-400" href="https://umami.is" target="_blank">umami</a>
            for analytics, and they are available publicly
            <a data-umami-event="privacy-share" class="font-semibold text-amber-400 hover:underline"
                href="https://umami.liljamo.dev/share/PYobxQHOgCy1sS2y/liljamo.dev" target="_blank">here</a>.
        </p>
    </div>
</div>
{% endblock content %}