site/_includes/layouts/pages/sneexy/socials.njk

<!-- socials -->
<article window id="links">
    <div class="header">
        <titlebar-icon aria-hidden="true">
            <icon-tabler link></icon-tabler>
        </titlebar-icon>
        <a href="#links">links</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>
    <window-contents>
        <h2><a href="#links">Links</a></h2>
        <p>My links to all of my public facing socials and contacts. If I know you well, you may ask me for anything more private, like Signal or Matrix, etc. <small>The fastest way to get this is by checking my <i>followers only</i> pinned post if you follow me/we're mutuals on the Fediverse.</small></span></p>
        <div class="socials-contacts-list">
            <a class="fedi-icon" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--orange) 25%, transparent); color: var(--orange);" aria-label="Fediverse/Mastodon"><span class="icon tabler--universe" style="pointer-events: none;"></span></a>
            <a class="fedi-icon-2" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--teal) 25%, transparent); color: var(--teal);" aria-label="Fediverse/Mastodon" aria-hidden="true"><span class="icon tabler--brand-mastodon" style="pointer-events: none;"></span></a>
            <a href="mailto:&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" aria-label="Email"><span class="icon tabler--mail" style="pointer-events: none;"></span></a>
            <a href="https://listenbrainz.org/user/Sneexy" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" aria-label="ListenBraniz"><span class="icon tabler--brand-metabrainz" style="pointer-events: none;"></span></a>
            <a href="https://www.last.fm/user/sneexy_is_gay" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" aria-label="Last.fm"><span class="icon tabler--brand-lastfm" style="pointer-events: none;"></span></a>
            <a href="https://git.gay/sneexy" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" aria-label="Git"><span class="icon tabler--brand-git" style="pointer-events: none;"></span></a>
            <a href="https://github.com/sneexy-boi" style="background-color: color-mix(in srgb, var(--lavender) 25%, transparent); color: var(--lavender);" aria-label="GitHub"><span class="icon tabler--brand-github" style="pointer-events: none;"></span></a>
            <a href="https://archive.org/details/@sneexy" style="background-color: color-mix(in srgb, var(--foreground) 25%, transparent); color: var(--foreground);" aria-label="Internet Archive"><span class="icon tabler--building-bank" style="pointer-events: none;"></span></a>
        </div>
        <p><span class="icon tabler--corner-down-right"></span> You may observe my Fediverse activity below:</p>
        <script defer src="https://booping.synth.download/embed.js"></script>
        <iframe aria-hidden="true" src="https://booping.synth.download/embed/user-timeline/9zy33jqk7ljg0001?header=false&maxHeight=800&rounded=false&border=false" data-misskey-embed-id="v1_902c0e81-d9d7-4c03-af0e-a6e71c21e95b" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
    </window-contents>
</article>