site/_includes/layouts/fediverse/sharkey/intro.njk

<!-- sharkey introduction -->
<div id="sharkey" class="window">
    <div class="header">
        <div class="titlebar-icon" aria-hidden="true">
            <span class="icon tabler--universe"></span>
        </div>
        <a href="#sharkey">Beepkey!</a>
        <div class="window-buttons" aria-hidden="true">
            <span class="icon tabler--minimize"></span>
            <span class="icon tabler--maximize"></span>
        </div>
        <div class="close-button" aria-hidden="true">
            <span class="icon tabler--x"></span>
        </div>
    </div>
    <section>
        <h1 style="text-align:center;"><a href="https://joinsharkey.org" target="_blank" style="vertical-align:middle;"><img src="/assets/sharkey_sh.svg" alt="Sharkey's website" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Beepkey!</h1>
        <p style="text-align:center;">Beep! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all. <small>Not to be confused with our <a href="/iceshrimp">Iceshrimp</a> instance.</small></p>
        <p style="text-align:center;"><a class="button" href="https://booping.synth.download"><span class="icon tabler--external-link"></span> Visit</a></p>
        <p style="text-align:center;"><a class="button" href="https://github.com/poppingmoon/aria#aria"><span class="icon tabler--device-mobile"></span> Aria</a> <a class="button" href="#tips"><span class="icon tabler--bulb"></span> Tips & Tricks</a></p>
        <p style="text-align:center;margin-bottom:-1rem;opacity:.8;"><small><b>Note:</b> Mastodon-based clients are noted to be unstable with Sharkey.</small></p>
        <p style="text-align:center;"><a class="button" href="https://masto.booping.synth.download"><span class="icon tabler--brand-mastodon"></span> Mastodon-FE</a> <a class="button" href="https://phanpy.booping.synth.download"><span class="icon tabler--external-link"></span> Phanpy</a> <a class="button" href="https://pl-fe.booping.synth.download"><span class="icon tabler--external-link"></span> pl-fe</a></p>
        <hr class="solid">
        {% include "layouts/fediverse/buttons.njk" %}
        <details class="styled" style="margin-top:2rem;">
            <summary><span class="icon tabler--list-tree"></span>Table-of-Contents <span class="icon tabler--arrow-autofit-height"></span></summary>
            <section>
                <ul>
                    <li>
                        <a href="#information">Instance information</a>
                    </li>
                    <li>
                        <a href="#features">Features</a>
                    </li>
                    <li>
                        <a href="#rules">Rules</a>
                    </li>
                    <li>
                        <a href="#tips">Tips & Tricks</a>
                    </li>
                    <li>
                        <a href="#bubble">Bubble timeline</a>
                    </li>
                    <li>
                        <a href="#moderation">Moderation</a>
                    </li>
                </ul>
            </section>
        </details>
    </section>
</div>