still working on this but i updated a few things and don't know what specifically

_includes/layouts/admins/admins.njk

@@ -0,0 +1,23 @@
+<!-- synth.download admins -->
+<article id="admins" class="window">
+    <div class="header">
+        <div class="titlebar-icon" aria-hidden="true">
+            <span class="icon tabler--user-cog"></span>
+        </div>
+        <a href="#Admins">Admins</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><a href="#admins">Admins</a></h1>
+        <p>All known users on Synth.Download who have full access to the Synth.Download servers (also known as "admins") will be listed here.</p>
+        <p>If any sort of proper contact is required, or if you have any questions, please contact <span style="color:var(--link);">synth@synth.download</span> <small>(email)</small> instead.</p>
+        <hr class="solid">
+        {% include "layouts/admins/list.njk" %}
+    </section>
+</article>

_includes/layouts/admins/list.njk

@@ -0,0 +1,21 @@
+<div id="sneexy" class="card sneexy">
+    <h4><a href="#sneexy">Sneexy <small>(Ruben)</small></a></h4>
+    <p>Founder; Webmaster; Admin.</p>
+    <p class="button-container"><a class="button" href="/~sneexy"><span class="icon tabler--arrow-forward"></span> Page</a></p>
+    <img class="sona" loading="lazy" src="/assets/admins/sneexy.svg" alt="" />
+</div>
+<div id="senil" class="card senil">
+    <h4><a href="#senil">Senil</a></h4>
+    <p>Maintainer; Admin.</p>
+    <p class="button-container"><a class="button" href="https://senil.me"><span class="icon tabler--external-link"></span> Website</a></p>
+</div>
+<div id="unnick" class="card unnick">
+    <h4><a href="#unnick">unnick</a></h4>
+    <p>Maintainer; Admin.</p>
+    <p class="button-container"><a class="button" href="https://beepi.ng"><span class="icon tabler--external-link"></span> Website</a></p>
+</div>
+<div id="melontini" class="card melontini">
+    <h4><a href="#melontini">melontini</a></h4>
+    <p>Maintainer; Admin.</p>
+    <p class="button-container"><a class="button" href="https://melontini.me"><span class="icon tabler--external-link"></span> Website</a></p>
+</div>

_includes/layouts/fediverse/iceshrimp/intro.njk

@@ -14,7 +14,7 @@
         </div>
     </div>
     <section>
-        <h1 style="text-align:center;"><a href="https://iceshrimp.net" target="_blank" style="vertical-align:middle;"><img src="/assets/isnet.png" alt="Iceshrimp.NET source" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Icesynth!</h1>
+        <h1 style="text-align:center;"><a href="https://iceshrimp.net" target="_blank" style="vertical-align:middle;"><img src="/assets/fedi/isnet.png" alt="Iceshrimp.NET source" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Icesynth!</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="/sharkey">Sharkey</a> or <a href="/mastodon">Mastodon</a> instances.</small></p>
         <p style="text-align:center;"><a class="button" href="https://beeping.synth.download/login"><span class="icon tabler--login"></span> Log in</a> <a class="button" href="https://beeping.synth.download/register"><span class="icon tabler--user-plus"></span> Register</a></p>
         <p style="text-align:center;"><a class="button" href="#tips"><span class="icon tabler--bulb"></span> Tips & Tricks</a></p>

_includes/layouts/fediverse/mastodon/intro.njk

@@ -14,7 +14,7 @@
         </div>
     </div>
     <section>
-        <h1 style="text-align:center;"><a href="https://joinmastodon.org" target="_blank" style="vertical-align:middle;"><img src="/assets/mastodon.svg" alt="Mastodon's official website" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Merpstodon!</h1>
+        <h1 style="text-align:center;"><a href="https://joinmastodon.org" target="_blank" style="vertical-align:middle;"><img src="/assets/fedi/mastodon.svg" alt="Mastodon's official website" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Merpstodon!</h1>
         <p style="text-align:center;">Merp! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all. <small>Not to be confused with our <a href="/sharkey">Sharkey</a> or <a href="/iceshrimp">Iceshrimp</a> instances.</small></p>
         <p style="text-align:center;"><a class="button" href="https://merping.synth.download"><span class="icon tabler--external-link"></span> Visit</a> <a class="button" href="https://merping.synth.download/auth/sign_in"><span class="icon tabler--login"></span> Log in</a></p>
         <hr class="solid">

_includes/layouts/fediverse/sharkey/intro.njk

@@ -14,7 +14,7 @@
         </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>
+        <h1 style="text-align:center;"><a href="https://joinsharkey.org" target="_blank" style="vertical-align:middle;"><img src="/assets/fedi/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> or <a href="/mastodon">Mastodon</a> instances.</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>

_includes/layouts/header.njk

@@ -6,6 +6,7 @@
         {% include "styles/footer.css" %}
         {% include "styles/icons.css" %}
         {% include "styles/navbar.css" %}
+        {% include "styles/pages/admins.css" %}
         {% include "styles/pages/home.css" %}
         {% include "styles/pages/notebook.css" %}
         {% include "styles/pages/services.css" %}
@@ -13,26 +14,24 @@
         {% include "styles/prism-a11y-dark.css" %}
         {% include "styles/windows.css" %}
 {% endset %}
-
 {% set js %}
         {% include "scripts/alt-popup.js" %}
         {% include "scripts/button.js" %}
         {% include "scripts/settings.js" %}
 {% endset %}
-
-        <meta charset="UTF-8">
-        <title>{{ title or metadata.title }} • synth download!</title>
-        <link rel="canonical" href="https://synth.download/">
-        <link rel="icon" type="image/png" href="/assets/synth.download/synth.png">
-        <link rel="me" href="https://beeping.synth.download/@sneexy">
-        <link rel="me" href="https://booping.synth.download/@sneexy">
-        <link rel="me" href="https://git.gay/sneexy">
-        <meta lang="en-US">
-        <meta name="description" content="{{ description or metadata.description }}">
-        <meta name="generator" content="{{ eleventy.generator }}">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta property="og:url" content="https://synth.download/">
-        <style>{{ css | cssmin | safe }}</style>
-        <script>{{ js | jsmin | safe }}</script>
-        <link rel="stylesheet" href="/pagefind/pagefind-ui.css">
-        <script src="/pagefind/pagefind-ui.js"></script>
+<meta charset="UTF-8">
+<title>{{ title or metadata.title }} • synth download!</title>
+<link rel="canonical" href="https://synth.download/">
+<link rel="icon" type="image/png" href="/assets/synth.download/synth.png">
+<link rel="me" href="https://beeping.synth.download/@sneexy">
+<link rel="me" href="https://booping.synth.download/@sneexy">
+<link rel="me" href="https://git.gay/sneexy">
+<meta lang="en-US">
+<meta name="description" content="{{ description or metadata.description }}">
+<meta name="generator" content="{{ eleventy.generator }}">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta property="og:url" content="https://synth.download/">
+<style>{{ css | cssmin | safe }}</style>
+<script>{{ js | jsmin | safe }}</script>
+<link rel="stylesheet" href="/pagefind/pagefind-ui.css">
+<script src="/pagefind/pagefind-ui.js"></script>

_includes/layouts/services/private.njk

@@ -0,0 +1,74 @@
+<section id="private">
+    <h2><a href="#private">Private</a></h2>
+    <p>Services that are private (require signup) mainly for close friends and other trusted individual. May still be publicly <i>accessible</i>, but not <i>usable</i>.</p>
+    <hr class="solid">
+    <h3 id="p-social"><a href="#p-social">Social</a></h3>
+    <section id="sharkey" class="card sharkey">
+        <h4><a href="#sharkey">Sharkey</a></h4>
+        <p>Advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), based on <a href="https://misskey-hub.net">Misskey</a> with <a href="https://docs.joinsharkey.org/docs/comparison/misskey">many improvements</a>.</p>
+        <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@booping.synth.download</span></p>
+        <p class="button-container"><a class="button" href="/sharkey"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://booping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </section>
+    <section id="iceshrimp" class="card iceshrimp">
+        <h4><a href="#iceshrimp">Iceshrimp</a></h4>
+        <p>Another advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), provided as an alternative for those who dislike the Misskey experience or prefer the Mastodon compatibility.</p>
+        <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@synth.download</span>, wherever supported.</p>
+        <p class="button-container"><a class="button" href="/iceshrimp"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://beeping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </section>
+    <section id="mastodon" class="card mastodon">
+        <h4><a href="#mastodon">Mastodon</a></h4>
+        <p>Calmer social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), it's Mastodon. Running a <a href="https://github.com/melontini/mastodon">light fork</a> of <a href="https://github.com/TheEssem/mastodon">Chuckya</a> which includes features such as emoji reactions.</p>
+        <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@merping.synth.download</span></p>
+        <p class="button-container"><a class="button" href="/mastodon"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://merping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </section>
+    <section id="pds" class="card pds">
+        <h4><a href="#pds">PDS</a></h4>
+        <p>Synth.download's <b>P</b>ersonal <b>D</b>ata <b>S</b>erver, to be used with the Atmosphere (<a href="https://atproto.com">ATProto</a>) and more specifically, <a href="https://bsky.app">Bluesky</a>.</p>
+        <p class="button-container"><a class="button" href="https://pds.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </section>
+    <hr class="solid">
+    <h3 id="p-chat"><a href="#p-chat">Chat</a></h3>
+    <section id="xmpp" class="card xmpp">
+        <h4><a href="#xmpp">XMPP</a></h4>
+        <p>Generic XMPP server ran by us, powered with ejabberd. Simply point your client to <code>synth.download</code>.</p>
+        <p style="margin-bottom:unset !important;"><a href="https://compliance.conversations.im/server/synth.download"><img src="https://compliance.conversations.im/badge/synth.download"></a></p>
+    </section>
+    <section id="email" class="card email">
+        <h4><a href="#email">Email</a></h4>
+        <p>A mailserver to get your own synth.download email. Mailserver run by us within a container, and probably blocked by Outlook. <small>Gmail <i>probably</i> works, though!... I hate email.</small></p>
+    </section>
+    <hr class="solid">
+    <h3 id="p-sharing"><a href="#p-sharing">Sharing</a></h3>
+    <section id="forgejo" class="card forgejo">
+        <h4><a href="#forgejo">Forgejo</a></h4>
+        <p>A home for all of your Git repositories.</p>
+        <p class="button-container"><a class="button" href="https://forged.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </section>
+    <hr class="solid">
+    <h3 id="p-fun"><a href="#p-fun">Fun</a></h3>
+    <section id="ask-js" class="card ask-js">
+        <h4><a href="#ask-js">Ask-js</a></h4>
+        <p>Platform for receiving and answering anonymous questions and answers.</p>
+        <p class="button-container"><a class="button" href="https://asking.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p></p>
+    </section>
+    <hr class="solid">
+    <h3 id="p-personal"><a href="#p-personal">Personal</a></h3>
+    <section id="vaultwarden" class="card vaultwarden">
+        <h4><a href="#vaultwarden">Vaultwarden</a></h4>
+        <p>Bitwarden-compatible password manager with 2FA support and all that good stuff.</p>
+        <p class="button-container"><a class="button" href="https://vault.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </section>
+    <section id="freshrss" class="card freshrss">
+        <h4><a href="#freshrss">FreshRSS</a></h4>
+        <p>Online RSS and Atom compatible feed reader.</p>
+        <p class="info-box warn"><span class="icon tabler--alert-triangle"></span> Log in through ZITADEL.</span></p>
+        <p class="button-container"><a class="button" href="https://rss.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </section>
+    <hr class="solid">
+    <h3 id="p-other"><a href="#p-other">Other</a></h3>
+    <section id="zitadel" class="card zitadel">
+        <h4><a href="#zitadel">ZITADEL</a></h4>
+        <p>Our authenticator to access multiple services using one account... or an attempt to. Currently only used for FreshRSS and Forgejo, and hoping to expand more with this.</p>
+        <p class="button-container"><a class="button" href="https://auth.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </section>
+</section>

_includes/layouts/services/public.njk

@@ -0,0 +1,21 @@
+<section id="public">
+    <h2><a href="#public">Public</a></h2>
+    <p>All services that are publicly accessible to everyone and doesn't require any registration/has restrictions to use.</p>
+    <hr class="solid">
+    <h3 id="alternative-frontends"><a href="#alternative-frontends">Alternative frontends</h3>
+    <div id="redlib" class="card redlib">
+        <h4><a href="#redlib">Redlib</a></h4>
+        <p>A simple alternative frontend for accessing <a href="https://reddit.com">Reddit</a> content.</p>
+        <p class="button-container"><a class="button" href="https://reddit.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </div>
+    <h3 id="games"><a href="#games">Games</a></h3>
+    <div id="dark-room" class="card dark-room">
+        <h4><a href="#dark-room">A Dark Room</a></h4>
+        <p>Just a mirror of <a href="https://adarkroom.doublespeakgames.com">A Dark Room</a>, a minimalist and dark text adventure-like game</p>
+        <p class="button-container"><a class="button" href="https://adarkroom.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
+    </div>
+    <hr class="solid">
+    <div class="card last">
+        <p>More soon.</p>
+    </div>
+</section>

_includes/layouts/services/services.njk

@@ -16,157 +16,11 @@
     <section>
         <h1><a href="#services">Services</a></h1>
         <p>All of our services that we host on Synth.download will be listed here. If you have a suggestion for a service to possibly look into hosting, feel free to poke at <a href="/~sneexy">~sneexy</a>!</p>
-        <details class="styled" style="margin-top:2rem;margin-bottom:1rem;">
-            <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="#public">Public</a>
-                    </li>
-                        <ul>
-                            <li><a href="#alternative-frontends">Alternative frontends</a></li>
-                            <ul>
-                                <li><a href="#redlib">Redlib</a></li>
-                            </ul>
-                            <li><a href="#games">Games</a></li>
-                            <ul>
-                                <li><a href="#dark-room">A Dark Room</a></li>
-                            </ul>
-                        </ul>
-                    <li>
-                        <a href="#private">Private</a>
-                    </li>
-                        <ul>
-                            <li><a href="#p-social">Social</a></li>
-                            <ul>
-                                <li><a href="#sharkey">Sharkey</a></li>
-                                <li><a href="#iceshrimp">Iceshrimp</a></li>
-                                <li><a href="#mastodon">Mastodon</a></li>
-                                <li><a href="#pds">PDS</a></li>
-                            </ul>
-                            <li><a href="#p-chat">Chat</a></li>
-                            <ul>
-                                <li><a href="#xmpp">XMPP</a></li>
-                                <li><a href="#email">Email</a></li>
-                            </ul>
-                            <li><a href="#p-sharing">Sharing</a></li>
-                            <ul>
-                                <li><a href="#forgejo">Forgejo</a></li>
-                            </ul>
-                            <li><a href="#p-fun">Fun</a></li>
-                            <ul>
-                                <li><a href="#ask-js">Ask-js</a></li>
-                            </ul>
-                            <li><a href="#p-personal">Personal</a></li>
-                            <ul>
-                                <li><a href="#vaultwarden">Vaultwarden</a></li>
-                                <li><a href="#freshrss">FreshRSS</a></li>
-                            </ul>
-                            <li><a href="#p-other">Other</a></li>
-                            <ul>
-                                <li><a href="#zitadel">ZITADEL</a></li>
-                            </ul>
-                        </ul>
-                </ul>
-            </section>
-        </details>
+        {% include "layouts/services/toc.njk" %}
         <div class="flex-container">
-            <section id="public">
-                <h2><a href="#public">Public</a></h2>
-                <p>All services that are publicly accessible to everyone and doesn't require any registration/has restrictions to use.</p>
-                <hr class="solid">
-                <h3 id="alternative-frontends"><a href="#alternative-frontends">Alternative frontends</h3>
-                <div id="redlib" class="card redlib">
-                    <h4><a href="#redlib">Redlib</a></h4>
-                    <p>A simple alternative frontend for accessing <a href="https://reddit.com">Reddit</a> content.</p>
-                    <p class="button-container"><a class="button" href="https://reddit.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </div>
-                <h3 id="games"><a href="#games">Games</a></h3>
-                <div id="dark-room" class="card dark-room">
-                    <h4><a href="#dark-room">A Dark Room</a></h4>
-                    <p>Just a mirror of <a href="https://adarkroom.doublespeakgames.com">A Dark Room</a>, a minimalist and dark text adventure-like game</p>
-                    <p class="button-container"><a class="button" href="https://adarkroom.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </div>
-                <hr class="solid">
-                <div class="card last">
-                    <p>More soon.</p>
-                </div>
-            </section>
+            {% include "layouts/services/public.njk" %}
             <hr class="solid">
-            <section id="private">
-                <h2><a href="#private">Private</a></h2>
-                <p>Services that are private (require signup) mainly for close friends and other trusted individual. May still be publicly <i>accessible</i>, but not <i>usable</i>.</p>
-                <hr class="solid">
-                <h3 id="p-social"><a href="#p-social">Social</a></h3>
-                <section id="sharkey" class="card sharkey">
-                    <h4><a href="#sharkey">Sharkey</a></h4>
-                    <p>Advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), based on <a href="https://misskey-hub.net">Misskey</a> with <a href="https://docs.joinsharkey.org/docs/comparison/misskey">many improvements</a>.</p>
-                    <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@booping.synth.download</span></p>
-                    <p class="button-container"><a class="button" href="/sharkey"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://booping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </section>
-                <section id="iceshrimp" class="card iceshrimp">
-                    <h4><a href="#iceshrimp">Iceshrimp</a></h4>
-                    <p>Another advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), provided as an alternative for those who dislike the Misskey experience or prefer the Mastodon compatibility.</p>
-                    <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@synth.download</span>, wherever supported.</p>
-                    <p class="button-container"><a class="button" href="/iceshrimp"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://beeping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </section>
-                <section id="mastodon" class="card mastodon">
-                    <h4><a href="#mastodon">Mastodon</a></h4>
-                    <p>Calmer social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), it's Mastodon. Running a <a href="https://github.com/melontini/mastodon">light fork</a> of <a href="https://github.com/TheEssem/mastodon">Chuckya</a> which includes features such as emoji reactions.</p>
-                    <p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@merping.synth.download</span></p>
-                    <p class="button-container"><a class="button" href="/mastodon"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://merping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </section>
-                <section id="pds" class="card pds">
-                    <h4><a href="#pds">PDS</a></h4>
-                    <p>Synth.download's <b>P</b>ersonal <b>D</b>ata <b>S</b>erver, to be used with the Atmosphere (<a href="https://atproto.com">ATProto</a>) and more specifically, <a href="https://bsky.app">Bluesky</a>.</p>
-                    <p class="button-container"><a class="button" href="https://pds.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </section>
-                <hr class="solid">
-                <h3 id="p-chat"><a href="#p-chat">Chat</a></h3>
-                <section id="xmpp" class="card xmpp">
-                    <h4><a href="#xmpp">XMPP</a></h4>
-                    <p>Generic XMPP server ran by us, powered with ejabberd. Simply point your client to <code>synth.download</code>.</p>
-                    <p style="margin-bottom:unset !important;"><a href="https://compliance.conversations.im/server/synth.download"><img src="https://compliance.conversations.im/badge/synth.download"></a></p>
-                </section>
-                <section id="email" class="card email">
-                    <h4><a href="#email">Email</a></h4>
-                    <p>A mailserver to get your own synth.download email. Mailserver run by us within a container, and probably blocked by Outlook. <small>Gmail <i>probably</i> works, though!... I hate email.</small></p>
-                </section>
-                <hr class="solid">
-                <h3 id="p-sharing"><a href="#p-sharing">Sharing</a></h3>
-                <section id="forgejo" class="card forgejo">
-                    <h4><a href="#forgejo">Forgejo</a></h4>
-                    <p>A home for all of your Git repositories.</p>
-                    <p class="button-container"><a class="button" href="https://forged.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </section>
-                <hr class="solid">
-                <h3 id="p-fun"><a href="#p-fun">Fun</a></h3>
-                <section id="ask-js" class="card ask-js">
-                    <h4><a href="#ask-js">Ask-js</a></h4>
-                    <p>Platform for receiving and answering anonymous questions and answers.</p>
-                    <p class="button-container"><a class="button" href="https://asking.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p></p>
-                </section>
-                <hr class="solid">
-                <h3 id="p-personal"><a href="#p-personal">Personal</a></h3>
-                <section id="vaultwarden" class="card vaultwarden">
-                    <h4><a href="#vaultwarden">Vaultwarden</a></h4>
-                    <p>Bitwarden-compatible password manager with 2FA support and all that good stuff.</p>
-                    <p class="button-container"><a class="button" href="https://vault.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </section>
-                <section id="freshrss" class="card freshrss">
-                    <h4><a href="#freshrss">FreshRSS</a></h4>
-                    <p>Online RSS and Atom compatible feed reader.</p>
-                    <p class="info-box warn"><span class="icon tabler--alert-triangle"></span> Log in through ZITADEL.</span></p>
-                    <p class="button-container"><a class="button" href="https://rss.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </section>
-                <hr class="solid">
-                <h3 id="p-other"><a href="#p-other">Other</a></h3>
-                <section id="zitadel" class="card zitadel">
-                    <h4><a href="#zitadel">ZITADEL</a></h4>
-                    <p>Our authenticator to access multiple services using one account... or an attempt to. Currently only used for FreshRSS and Forgejo, and hoping to expand more with this.</p>
-                    <p class="button-container"><a class="button" href="https://auth.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
-                </section>
-            </section>
+            {% include "layouts/services/private.njk" %}
         </div>
     </section>
 </article>

_includes/layouts/services/toc.njk

@@ -0,0 +1,59 @@
+<details class="styled" style="margin-top: 2rem; margin-bottom: 1rem">
+    <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="#public">Public</a>
+            </li>
+            <ul>
+                <li>
+                    <a href="#alternative-frontends">Alternative frontends</a>
+                </li>
+                <ul>
+                    <li><a href="#redlib">Redlib</a></li>
+                </ul>
+                <li><a href="#games">Games</a></li>
+                <ul>
+                    <li><a href="#dark-room">A Dark Room</a></li>
+                </ul>
+            </ul>
+            <li>
+                <a href="#private">Private</a>
+            </li>
+            <ul>
+                <li><a href="#p-social">Social</a></li>
+                <ul>
+                    <li><a href="#sharkey">Sharkey</a></li>
+                    <li><a href="#iceshrimp">Iceshrimp</a></li>
+                    <li><a href="#mastodon">Mastodon</a></li>
+                    <li><a href="#pds">PDS</a></li>
+                </ul>
+                <li><a href="#p-chat">Chat</a></li>
+                <ul>
+                    <li><a href="#xmpp">XMPP</a></li>
+                    <li><a href="#email">Email</a></li>
+                </ul>
+                <li><a href="#p-sharing">Sharing</a></li>
+                <ul>
+                    <li><a href="#forgejo">Forgejo</a></li>
+                </ul>
+                <li><a href="#p-fun">Fun</a></li>
+                <ul>
+                    <li><a href="#ask-js">Ask-js</a></li>
+                </ul>
+                <li><a href="#p-personal">Personal</a></li>
+                <ul>
+                    <li><a href="#vaultwarden">Vaultwarden</a></li>
+                    <li><a href="#freshrss">FreshRSS</a></li>
+                </ul>
+                <li><a href="#p-other">Other</a></li>
+                <ul>
+                    <li><a href="#zitadel">ZITADEL</a></li>
+                </ul>
+            </ul>
+        </ul>
+    </section>
+</details>

_includes/layouts/sneexy/buttons.njk

@@ -50,6 +50,7 @@
             <a href="https://micro.pages.gay"><img src="/assets/buttons/friends/micro.png" alt="micro"></a>
             <a href="https://neil.cyrneko.eu"><img src="/assets/buttons/friends/neil.png" alt="Nelson & Neil"></a>
             <a href="https://notfire.cc"><img src="/assets/buttons/friends/notfire.gif" alt="notfire"></a>
+            <a href="https://nytpu.com" class="generic" style="border-color:#1172D0;" aria-label="nytpu">nytpu</a>
             <a href="https://odoben.space"><img src="/assets/buttons/friends/odoben.png" alt="Odoben"></a>
             <a href="https://ofplayers.net"><img src="/assets/buttons/friends/millions.png" alt="Millions"></a>
             <a href="https://ottr.uk"><img src="/assets/buttons/friends/outofshape.gif" alt="The Otterspace!"></a>

_includes/layouts/sneexy/intro.njk

@@ -14,10 +14,10 @@
         </div>
     </div>
     <section>
-        <img id="logo" loading="lazy" src="/assets/sneexy.webp" alt="Sneexy" /> <br>
-        <audio controls loop src="/assets/ASimpleMachine.mp3"></audio> <br>
+        <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/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>
+        <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>

_includes/styles/base.css

@@ -483,18 +483,36 @@ summary {
 
 /* image-button grid */
 .img-buttons {
-    text-align: center;
-    font-size: 0px;
+    align-items: normal;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0 !important;
+    gap: 5px;
+    justify-content: center;
+    margin-inline: auto;
 
     img {
-        margin-right: 5px;
-        image-rendering: auto;
-        image-rendering: crisp-edges;
-        image-rendering: pixelated;
+        width: 88px;
+        height: 31px;
+        margin: unset !important;
+        image-rendering: pixelated !important;
         transition: transform 0.2s;
     }
 
-    img:hover {
+    .generic {
+        align-content: center;
+        background-color: color-mix(in srgb, var(--background) 90%, white);
+        font-size: .95rem !important;
+        height: 31px;
+        text-align: center;
+        transition: transform 0.2s;
+        width: 88px;
+        box-sizing: border-box;
+        border: solid .15rem;
+        color: var(--foreground);
+    }
+
+    .generic:hover, img:hover {
         transform: scale(2);
     }
 }

_includes/styles/icons.css

@@ -74,6 +74,7 @@
 .tabler--thumb-up { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1za4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E"); }
 .tabler--universe { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M7.027 11.477a5 5 0 1 0 5.496-4.45a4.95 4.95 0 0 0-3.088.681'/%3E%3Cpath d='M5.636 5.636a9 9 0 1 0 3.555-2.188'/%3E%3Cpath d='M17 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-3 4a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); }
 .tabler--user { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
+.tabler--user-cog { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h2.5m4.501 4a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E"); }
 .tabler--user-heart { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h.5m7.5 7l3.35-3.284a2.143 2.143 0 0 0 .005-3.071a2.24 2.24 0 0 0-3.129-.006l-.224.22l-.223-.22a2.24 2.24 0 0 0-3.128-.006a2.143 2.143 0 0 0-.006 3.071z'/%3E%3C/svg%3E"); }
 .tabler--user-plus { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E"); }
 .tabler--volume { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z'/%3E%3C/svg%3E"); }

_includes/styles/pages/admins.css

@@ -0,0 +1,43 @@
+/* ╭─────────────────────────────────────╮
+/  │            _           _            │
+/  │   __ _  __| |_ __ ___ (_)_ __  ___  │
+/  │  / _` |/ _` | '_ ` _ \| | '_ \/ __| │
+/  │ | (_| | (_| | | | | | | | | | \__ \ │
+/  │  \__,_|\__,_|_| |_| |_|_|_| |_|___/ │
+/  ╰─────────────────────────────────────╯
+/  admins - styling the admin cards on the admins page (admin.md) */
+
+#admins section .card {
+    overflow: hidden;
+    position: relative;
+
+    .sona {
+        bottom: -3rem;
+        max-width: 15rem;
+        opacity: .5;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        transform: rotate(16deg);
+    }
+
+    &.sneexy {
+        --accent: #65ff88;
+    }
+
+    &.senil {
+        --accent: #008E54;
+
+        .button-container .button:hover {
+            color: white !important;
+        }
+    }
+
+    &.unnick {
+        --accent: #0094FF;
+
+        .button-container .button:hover {
+            color: white !important;
+        }
+    }
+}

admins.md

@@ -0,0 +1,7 @@
+---
+title: admins
+layout: "layouts/base.njk"
+permalink: "/admins/"
+---
+
+{% include "layouts/admins/admins.njk" %}