site/_includes/layouts/sneexy/intro.njk

<!-- simple introduction -->
<article id="sneexy" class="window">
    <div class="header">
        <titlebar-icon aria-hidden="true">
            <icon-tabler user></icon-tabler>
        </titlebar-icon>
        <a href="#sneexy">Sneexy info</a>
        <window-controls aria-hidden="true">
            <icon-tabler minimize></icon-tabler>
            <icon-tabler maximize></icon-tabler>
            <close-button aria-hidden="true">
                <icon-tabler x></icon-tabler>
            </close-button>
        </window-controls>
    </div>
    <section>
        <img id="logo" loading="lazy" src="/assets/sneexy/sneexy.webp" alt="Sneexy" /> <br>
        <audio controls loop src="/assets/sneexy/ASimpleMachine.mp3"></audio> <br>
        <small>Theme song by <a href="https://yeen.town/@ChalkLlate">ChalkLlate</a>!</small>
        <h1><a href="./ruben"><img loading="lazy" id="pfp" src="/assets/sneexy/synth tpose spin.gif" alt="3D Low poly model of my synth character. He's a pretty chubby synth with a belly and chest made entirely out of goo, his frame is mostly made with shades of grey with lime/pastel green accents."></a> Hey, I'm <span class="rainbow">Ruben!</span></h1>
        <small>Cheesed to meet ya.</small>
        <p style="margin-bottom: -2px;">Big fat gooey synth who is constantly tired.</p>
        <small style="font-size: 0.575rem;">...or <i>eepy</i>, but definitely more tired.</small>
        <div class="selfinfo">
            <div style="grid-area: pronouns;">
                <p>Pronouns</p>
                <ul>
                    <li style="color: var(--green);"><span class="icon tabler--thumb-up" alt="Preferred!"></span> He/Him</li>
                    <li style="color: var(--green);"><span class="icon tabler--thumb-up" alt="Preferred!"></span> It/Its</li>
                    <li><span class="icon tabler--thumb-up" alt="Acceptable,"></span> They/Them</li>
                    <li style="color: var(--red);"><small><span class="icon tabler--thumb-down" alt="Unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> Anything else</small></li>
                </ul>
            </div>
            <div style="grid-area: names;">
                <p>Names</p>
                <ul>
                    <li style="color: var(--green);"><span class="icon tabler--thumb-up" alt="Preferred!"></span> Ruben</li>
                    <li><span class="icon tabler--thumb-up" alt="Acceptable,"></span> Sneexy, Sneex*</li>
                    <li style="color: var(--yellow);"><small><span class="icon tabler--user-heart" alt="Only if we're close friends!" style="transform: scale(.9) translateY(.2rem);"></span> Rube, Rubie (Ruby)</small></li>
                    <li style="color: var(--red);"><small><span class="icon tabler--thumb-down" alt="Unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> Variations/Anything else</small></li>
                </ul>
            </div>
        </div>
    </section>
</article>