From 1e96855c1884cfc7212f1aa6d952741e7f29e9fb Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Fri, 4 Jul 2025 05:12:50 -0500
Subject: [PATCH] add services page, add mastodon page

---
 _includes/layouts/donate/donate.njk           |   4 +-
 _includes/layouts/error.njk                   |   5 +-
 .../layouts/fediverse/iceshrimp/bubble.njk    |   4 +-
 _includes/layouts/fediverse/iceshrimp/fe.njk  |   4 +-
 .../layouts/fediverse/iceshrimp/features.njk  |   4 +-
 .../layouts/fediverse/iceshrimp/info.njk      |   6 +-
 .../layouts/fediverse/iceshrimp/intro.njk     |   6 +-
 .../layouts/fediverse/iceshrimp/tips.njk      |   4 +-
 .../layouts/fediverse/mastodon/features.njk   |  31 ++++
 _includes/layouts/fediverse/mastodon/info.njk |  27 +++
 .../layouts/fediverse/mastodon/intro.njk      |  45 +++++
 _includes/layouts/fediverse/moderation.njk    |   4 +-
 _includes/layouts/fediverse/rules.njk         |   4 +-
 .../layouts/fediverse/sharkey/bubble.njk      |   4 +-
 .../layouts/fediverse/sharkey/features.njk    |   4 +-
 _includes/layouts/fediverse/sharkey/info.njk  |   6 +-
 _includes/layouts/fediverse/sharkey/intro.njk |   6 +-
 _includes/layouts/fediverse/sharkey/tips.njk  |   4 +-
 _includes/layouts/header.njk                  |   1 +
 _includes/layouts/home/intro.njk              |  69 +------
 _includes/layouts/navbar.njk                  |   6 +-
 _includes/layouts/services/services.njk       | 172 ++++++++++++++++++
 _includes/layouts/sneexy/about.njk            |   4 +-
 _includes/layouts/sneexy/buttons.njk          |   4 +-
 _includes/layouts/sneexy/funfacts.njk         |   4 +-
 _includes/layouts/sneexy/intro.njk            |   4 +-
 _includes/layouts/sneexy/notebook.njk         |   4 +-
 _includes/layouts/sneexy/ruben/features.njk   |   4 +-
 _includes/layouts/sneexy/ruben/intro.njk      |   4 +-
 .../layouts/sneexy/ruben/personality.njk      |   4 +-
 _includes/layouts/sneexy/socials.njk          |   4 +-
 _includes/styles/base.css                     |  41 ++++-
 _includes/styles/icons.css                    |   2 +
 _includes/styles/navbar.css                   |  30 +++
 _includes/styles/pages/services.css           |  39 ++++
 assets/mastodon.svg                           |  10 +
 mastodon.md                                   |  17 ++
 services.md                                   |   7 +
 38 files changed, 471 insertions(+), 131 deletions(-)
 create mode 100644 _includes/layouts/fediverse/mastodon/features.njk
 create mode 100644 _includes/layouts/fediverse/mastodon/info.njk
 create mode 100644 _includes/layouts/fediverse/mastodon/intro.njk
 create mode 100644 _includes/layouts/services/services.njk
 create mode 100644 _includes/styles/pages/services.css
 create mode 100644 assets/mastodon.svg
 create mode 100644 mastodon.md
 create mode 100644 services.md

diff --git a/_includes/layouts/donate/donate.njk b/_includes/layouts/donate/donate.njk
index a2efa1d..05e9a13 100644
--- a/_includes/layouts/donate/donate.njk
+++ b/_includes/layouts/donate/donate.njk
@@ -1,5 +1,5 @@
 <!-- donation window -->
-<div id="donate" class="window">
+<article id="donate" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--message-chatbot"></span>
@@ -19,4 +19,4 @@
         <stripe-buy-button buy-button-id="buy_btn_1R9UrrGPbe5QWVnnm6jC3XUf" publishable-key="pk_live_51QFpvEGPbe5QWVnnCUUlT1nEYhVy2F4z30BVaG3LHD8o4qNc7IL67QcPUzBUeptEYpFOtYs6Jc1GvM3ujqsFltYb00oUvMTDMM"></stripe-buy-button>
         <p>Please don't feel like you need to donate. Currently, I am able to pay things on my own, but donations do help. <span aria-hidden="true">^^</span></p>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/error.njk b/_includes/layouts/error.njk
index 5347429..e879b77 100644
--- a/_includes/layouts/error.njk
+++ b/_includes/layouts/error.njk
@@ -4,7 +4,7 @@ layout: "layouts/base.njk"
 ---
 
 <!-- error window -->
-<details open id="404" class="window error">
+<article open id="404" class="window error">
     <summary>
         <div aria-hidden="true">
             <span class="icon tabler--mood-sad-dizzy"></span>
@@ -18,9 +18,8 @@ layout: "layouts/base.njk"
             <span class="icon tabler--x"></span>
         </div>
     </summary>
-
     <section>
         <h1 style="color: var(--accent);">404</h1>
         <p>Whatever it is, isn't here.</p>
     </section>
-</details>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/iceshrimp/bubble.njk b/_includes/layouts/fediverse/iceshrimp/bubble.njk
index b5ffc44..ee0c428 100644
--- a/_includes/layouts/fediverse/iceshrimp/bubble.njk
+++ b/_includes/layouts/fediverse/iceshrimp/bubble.njk
@@ -1,5 +1,5 @@
 <!-- bubble timeline -->
-<div id="bubble" class="window">
+<article id="bubble" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -145,4 +145,4 @@
             </li>
         </ul>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/iceshrimp/fe.njk b/_includes/layouts/fediverse/iceshrimp/fe.njk
index 7576b24..10a6053 100644
--- a/_includes/layouts/fediverse/iceshrimp/fe.njk
+++ b/_includes/layouts/fediverse/iceshrimp/fe.njk
@@ -1,5 +1,5 @@
 <!-- alternative frontends -->
-<div id="frontends" class="window">
+<article id="frontends" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -43,4 +43,4 @@
             </li>
         </ul>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/iceshrimp/features.njk b/_includes/layouts/fediverse/iceshrimp/features.njk
index 14013c2..3a876c0 100644
--- a/_includes/layouts/fediverse/iceshrimp/features.njk
+++ b/_includes/layouts/fediverse/iceshrimp/features.njk
@@ -1,5 +1,5 @@
 <!-- instance features -->
-<div id="features" class="window">
+<article id="features" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -34,4 +34,4 @@
             </li>
         </ul>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/iceshrimp/info.njk b/_includes/layouts/fediverse/iceshrimp/info.njk
index ffca072..4064a28 100644
--- a/_includes/layouts/fediverse/iceshrimp/info.njk
+++ b/_includes/layouts/fediverse/iceshrimp/info.njk
@@ -1,5 +1,5 @@
 <!-- information -->
-<div id="information" class="window">
+<article id="information" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -15,7 +15,7 @@
     </div>
     <section>
         <h2><a href="#information">Instance information</a></h2>
-        <p>This is our Iceshrimp.NET instance, managed by <a href="https://booping.synth.download/@sneexy">@sneexy</a>. This is our general information page about our instance, most info here is shared with our <a href="/sharkey">Sharkey</a> instance. <small>You're most likely here because you've attempted to visit <a href="https://beeping.synth.download">beeping.synth.download</a> without an account/signed out. Try logging in, then go back to access the Iceshrimp frontend!</small></p>
+        <p>This is our Iceshrimp.NET instance, managed by <a href="https://booping.synth.download/@sneexy">@sneexy</a>. This is our general information page about our instance, most info here is shared with our other instances. <small>You're most likely here because you've attempted to visit <a href="https://beeping.synth.download">beeping.synth.download</a> without an account/signed out. Try logging in, then go back to access the Iceshrimp frontend!</small></p>
         <hr class="solid">
         <p>Iceshrimp is a "microblogging"-based social networking software that connects over <a href="https://activitypub.rocks">ActivityPub</a> to federate over the internet with other AP-based software and instances in the world such as <a href="https://joinmastodon.org">Mastodon</a>. Iceshrimp mostly follows the footsteps of <a href="https://misskey-hub.net">Misskey</a>, and supports most features that Misskey and other software chooses to implement - Quote posts, Emoji reactions and all.</p>
         <p>We have a sibling <a href="/sharkey">Sharkey</a> instance running over at <a href="https://booping.synth.download">booping.synth.download</a> if a full Misskey based experience is more your speed.</p>
@@ -25,4 +25,4 @@
         <hr class="solid">
         <p>We have a <a href="https://signal.group/#CjQKIGETy9DaJ_wF3iIun-uBSD4T1ZqrJbnXhkqZZdtUdX5LEhD7RbDqEm2gfLZsCINNwVc2">Signal group chat</a> for general, random discussion as well as having direct contact with instance admins, and to serve as a place for any direct or maintenance announcements.</p>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/iceshrimp/intro.njk b/_includes/layouts/fediverse/iceshrimp/intro.njk
index 4b843e4..cb4df07 100644
--- a/_includes/layouts/fediverse/iceshrimp/intro.njk
+++ b/_includes/layouts/fediverse/iceshrimp/intro.njk
@@ -1,5 +1,5 @@
 <!-- iceshrimp introduction -->
-<div id="iceshrimp" class="window">
+<article id="iceshrimp" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--universe"></span>
@@ -15,7 +15,7 @@
     </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>
-        <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> instance.</small></p>
+        <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>
         <p style="text-align:center;"><a class="button" href="https://masto.beeping.synth.download"><span class="icon tabler--brand-mastodon"></span> Mastodon-FE</a> <a class="button" href="https://akko.beeping.synth.download"><span class="icon tabler--external-link"></span> Akkoma-FE</a> <a class="button" href="https://phanpy.beeping.synth.download"><span class="icon tabler--external-link"></span> Phanpy</a> <a class="button" href="https://pl-fe.beeping.synth.download"><span class="icon tabler--external-link"></span> pl-fe</a></p>
@@ -50,4 +50,4 @@
             </section>
         </details>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/iceshrimp/tips.njk b/_includes/layouts/fediverse/iceshrimp/tips.njk
index 79549d0..a2a1777 100644
--- a/_includes/layouts/fediverse/iceshrimp/tips.njk
+++ b/_includes/layouts/fediverse/iceshrimp/tips.njk
@@ -1,5 +1,5 @@
 <!-- iceshrimp tips & tricks -->
-<div id="tips" class="window">
+<article id="tips" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -51,4 +51,4 @@
             </section>
         </details>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/mastodon/features.njk b/_includes/layouts/fediverse/mastodon/features.njk
new file mode 100644
index 0000000..a2c72ab
--- /dev/null
+++ b/_includes/layouts/fediverse/mastodon/features.njk
@@ -0,0 +1,31 @@
+<!-- instance features -->
+<article id="features" class="window">
+    <div class="header">
+        <div class="titlebar-icon" aria-hidden="true">
+            <span class="icon tabler--info-circle"></span>
+        </div>
+        <a href="#features">Features</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>
+        <h2><a href="#features">Features</a></h2>
+        <p>What users receive in terms of differences from, for example here, the average Mastodon instance:</p>
+        <ul>
+            <li>
+                Emoji reactions
+            </li>
+            <li>
+                100,000 character limit
+            </li>
+            <li>
+                200 megabyte upload limit, per file
+            </li>
+        </ul>
+    </section>
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/mastodon/info.njk b/_includes/layouts/fediverse/mastodon/info.njk
new file mode 100644
index 0000000..4610d64
--- /dev/null
+++ b/_includes/layouts/fediverse/mastodon/info.njk
@@ -0,0 +1,27 @@
+<!-- information -->
+<article id="information" class="window">
+    <div class="header">
+        <div class="titlebar-icon" aria-hidden="true">
+            <span class="icon tabler--info-circle"></span>
+        </div>
+        <a href="#information">Instance information</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>
+        <h2><a href="#information">Instance information</a></h2>
+        <p>This is our Mastodon instance, while hosted by <a href="https://booping.synth.download/@sneexy">@sneexy</a>, is mainly managed by <a href="https://merping.synth.download/@m">@m</a>. This is our general information page about our instance, most info here is shared with our other instances.</p>
+        <hr class="solid">
+        <p>Mastodon is a "microblogging"-based social networking software that connects over <a href="https://activitypub.rocks">ActivityPub</a> to federate over the internet with other AP-based software and instances in the world such as other instance of itself. We maintain our <a href="https://github.com/melontini/mastodon">own minor fork</a> of Mastodon of <a href="https://github.com/TheEssem/mastodon">another fork</a> that implements features such as emoji reactions.</p>
+        <hr class="solid">
+        <p>This instance is <i>invite only</i> to ensure that things don't get out of control here, in terms of both becoming a moderation hassle and requiring heavy maintenance, as well as ensuring this instance continues to run smoothly and for the foreseeable future.</p>
+        <p><b>If you would like to register, and are a well-known creature of, please go beep at <a href="https://booping.synth.download/@sneexy">@sneexy</a> or <a href="https://merping.synth.download/@m">@m</a>!</b> You may also ask anyone else on this instance to vouch for you. <small>Invite codes/Acceptance is not always guaranteed, but feel free to ask. Please don't let this be discouragement for asking.</small></p>
+        <hr class="solid">
+        <p>We have a <a href="https://signal.group/#CjQKIGETy9DaJ_wF3iIun-uBSD4T1ZqrJbnXhkqZZdtUdX5LEhD7RbDqEm2gfLZsCINNwVc2">Signal group chat</a> for general, random discussion as well as having direct contact with instance admins, and to serve as a place for any direct or maintenance announcements.</p>
+    </section>
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/mastodon/intro.njk b/_includes/layouts/fediverse/mastodon/intro.njk
new file mode 100644
index 0000000..d9cbb1d
--- /dev/null
+++ b/_includes/layouts/fediverse/mastodon/intro.njk
@@ -0,0 +1,45 @@
+<!-- iceshrimp introduction -->
+<article id="iceshrimp" class="window">
+    <div class="header">
+        <div class="titlebar-icon" aria-hidden="true">
+            <span class="icon tabler--universe"></span>
+        </div>
+        <a href="#iceshrimp">Icesynth!</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://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>
+        <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">
+        {% 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="#bubble">Bubble timeline</a>
+                    </li>
+                    <li>
+                        <a href="#moderation">Moderation</a>
+                    </li>
+                </ul>
+            </section>
+        </details>
+    </section>
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/moderation.njk b/_includes/layouts/fediverse/moderation.njk
index 50f0798..91f5bb4 100644
--- a/_includes/layouts/fediverse/moderation.njk
+++ b/_includes/layouts/fediverse/moderation.njk
@@ -1,5 +1,5 @@
 <!-- moderation-->
-<div id="moderation" class="window">
+<article id="moderation" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -80,4 +80,4 @@
             </ul>
         </ul>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/rules.njk b/_includes/layouts/fediverse/rules.njk
index fc97842..66b98fa 100644
--- a/_includes/layouts/fediverse/rules.njk
+++ b/_includes/layouts/fediverse/rules.njk
@@ -1,5 +1,5 @@
 <!-- instance rules -->
-<div id="rules" class="window">
+<article id="rules" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -43,4 +43,4 @@
             </li>
         </ul>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/sharkey/bubble.njk b/_includes/layouts/fediverse/sharkey/bubble.njk
index eb409ba..c4e1a00 100644
--- a/_includes/layouts/fediverse/sharkey/bubble.njk
+++ b/_includes/layouts/fediverse/sharkey/bubble.njk
@@ -1,5 +1,5 @@
 <!-- bubble timeline -->
-<div id="bubble" class="window">
+<article id="bubble" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -145,4 +145,4 @@
             </li>
         </ul>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/sharkey/features.njk b/_includes/layouts/fediverse/sharkey/features.njk
index f227228..417ac23 100644
--- a/_includes/layouts/fediverse/sharkey/features.njk
+++ b/_includes/layouts/fediverse/sharkey/features.njk
@@ -1,5 +1,5 @@
 <!-- instance features -->
-<div id="features" class="window">
+<article id="features" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -34,4 +34,4 @@
             </li>
         </ul>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/sharkey/info.njk b/_includes/layouts/fediverse/sharkey/info.njk
index 1f4edd6..6df764b 100644
--- a/_includes/layouts/fediverse/sharkey/info.njk
+++ b/_includes/layouts/fediverse/sharkey/info.njk
@@ -1,5 +1,5 @@
 <!-- information -->
-<div id="information" class="window">
+<article id="information" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -15,7 +15,7 @@
     </div>
     <section>
         <h2><a href="#information">Instance information</a></h2>
-        <p>This is our Sharkey instance, managed by <a href="https://booping.synth.download/@sneexy">@sneexy</a>. This is our general information page about our instance, most info here is shared with our <a href="/iceshrimp">Iceshrimp</a> instance.</p>
+        <p>This is our Sharkey instance, managed by <a href="https://booping.synth.download/@sneexy">@sneexy</a>. This is our general information page about our instance, most info here is shared with our other instances.</p>
         <hr class="solid">
         <p>Sharkey is a "microblogging"-based social networking software that connects over <a href="https://activitypub.rocks">ActivityPub</a> to federate over the internet with other AP-based software and instances in the world such as <a href="https://joinmastodon.org">Mastodon</a>. Sharkey itself is a soft-fork of <a href="https://misskey-hub.net">Misskey</a>, so you recieve all of the features Misskey has, such as quote posts and emoji reactions, with extra features and fixes Sharkey puts on top.</p>
         <p>We have a sibling <a href="/iceshrimp">Iceshrimp</a> instance running over at <a href="https://beeping.synth.download">beeping.synth.download</a> if a more "traditional", Mastodon-compatible based experience is more your speed.</p>
@@ -26,4 +26,4 @@
         <p>We have a <a href="https://signal.group/#CjQKIGETy9DaJ_wF3iIun-uBSD4T1ZqrJbnXhkqZZdtUdX5LEhD7RbDqEm2gfLZsCINNwVc2">Signal group chat</a> for general, random discussion as well as having direct contact with instance admins, and to serve as a place for any direct or maintenance announcements.</p>
         <p><small><b>For the record:</b> We are running <i>stock</i>, upstream Sharkey. We are <i>not</i> running/maintaining a fork! Any and all modifications and shenanigans we do on here are either served through our reverse proxy or done via Sharkey's <code>customHtml</code> configuration and <a href="https://forged.synth.download/synth.download/site/src/branch/main/assets/synth.download/sharkey" target="_blank">custom CSS</a>.</small></p>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/sharkey/intro.njk b/_includes/layouts/fediverse/sharkey/intro.njk
index ca19871..baf7ea8 100644
--- a/_includes/layouts/fediverse/sharkey/intro.njk
+++ b/_includes/layouts/fediverse/sharkey/intro.njk
@@ -1,5 +1,5 @@
 <!-- sharkey introduction -->
-<div id="sharkey" class="window">
+<article id="sharkey" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--universe"></span>
@@ -15,7 +15,7 @@
     </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;">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>
         <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>
@@ -48,4 +48,4 @@
             </section>
         </details>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/fediverse/sharkey/tips.njk b/_includes/layouts/fediverse/sharkey/tips.njk
index a4eb052..dbb1837 100644
--- a/_includes/layouts/fediverse/sharkey/tips.njk
+++ b/_includes/layouts/fediverse/sharkey/tips.njk
@@ -1,5 +1,5 @@
 <!-- iceshrimp tips & tricks -->
-<div id="tips" class="window">
+<article id="tips" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -61,4 +61,4 @@
             </section>
         </details>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/header.njk b/_includes/layouts/header.njk
index 690116a..bc8527c 100644
--- a/_includes/layouts/header.njk
+++ b/_includes/layouts/header.njk
@@ -8,6 +8,7 @@
         {% include "styles/navbar.css" %}
         {% include "styles/pages/home.css" %}
         {% include "styles/pages/notebook.css" %}
+        {% include "styles/pages/services.css" %}
         {% include "styles/pages/sneexy.css" %}
         {% include "styles/prism-a11y-dark.css" %}
         {% include "styles/windows.css" %}
diff --git a/_includes/layouts/home/intro.njk b/_includes/layouts/home/intro.njk
index 243c6c8..eba7c6a 100644
--- a/_includes/layouts/home/intro.njk
+++ b/_includes/layouts/home/intro.njk
@@ -1,5 +1,5 @@
 <!-- simple site introduction -->
-<div id="site" class="window home">
+<article id="site" class="window home">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--message-chatbot"></span>
@@ -32,71 +32,6 @@
                 </div>
             </section>
         </details>
-        <details class="styled">
-            <summary><span class="icon tabler--planet"></span> Services <span class="icon tabler--arrow-autofit-height"></span></summary>
-            <section>
-                <div class="card redlib">
-                    <h2><a href="https://reddit.synth.download">Redlib</a> <small>(Public)</small></h2>
-                    <p>A simple alternative frontend for accessing <a href="https://reddit.com">Reddit</a> content.</p>
-                    <a class="button" href="https://reddit.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a>
-                </div>
-                <div class="card sharkey">
-                    <h2><a href="https://booping.synth.download">Sharkey</a></h2>
-                    <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><i>Accounts from this instance shall be reached via @booping.synth.download</i></p>
-                    <a class="button" href="https://booping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a>
-                </div>
-                <div class="card iceshrimp">
-                    <h2><a href="https://beeping.synth.download">Iceshrimp</a></h2>
-                    <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><i>Accounts from this instance shall be reached via @synth.download</i></p>
-                    <a class="button" href="https://beeping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a>
-                </div>
-                <div class="card ask-js">
-                    <h2><a href="https://asking.synth.download">Ask-js</a></h2>
-                    <p>Platform for receiving and answering anonymous questions and answers.</p>
-                    <a class="button" href="https://asking.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a>
-                </div>
-                <div class="card forgejo">
-                    <h2><a href="https://forged.synth.download">Forgejo</a></h2>
-                    <p>A home for Git repositories.</p>
-                    <a class="button" href="https://forged.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a>
-                </div>
-                <div class="card pds">
-                    <h2>PDS</h2>
-                    <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>
-                </div>
-                <div class="card xmpp">
-                    <h2>XMPP</h2>
-                    <p>A traditional yet feature-full and stable chat protocol, server powered with Ejabberd.</p>
-                    <p><a href="https://compliance.conversations.im/server/synth.download"><img src="https://compliance.conversations.im/badge/synth.download"></a></p>
-                </div>
-                <div class="card email">
-                    <h2>Email</h2>
-                    <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>
-                </div>
-                <div class="card freshrss">
-                    <h2><a href="https://rss.synth.download">FreshRSS</a></h2>
-                    <p>Online RSS and Atom compatible feed reader.</p>
-                    <a class="button" href="https://rss.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a>
-                </div>
-                <div class="card vaultwarden">
-                    <h2><a href="https://vault.synth.download">Vaultwarden</a></h2>
-                    <p>Bitwarden-compatible password manager with 2FA support and all that good stuff.</p>
-                    <a class="button" href="https://vault.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a>
-                </div>
-                <div class="card zitadel">
-                    <h2><a href="https://auth.synth.download">ZITADEL</a></h2>
-                    <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>
-                    <a class="button" href="https://auth.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a>
-                </div>
-                <div class="card last dark-room">
-                    <h2><a href="https://adarkroom.synth.download">A Dark Room</a></h2>
-                    <p>Just a fun mirror of <a href="https://adarkroom.doublespeakgames.com">A Dark Room</a>, a minimalist and dark text adventure-like game.</p>
-                    <a class="button" href="https://adarkroom.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a>
-                </div>
-            </section>
-        </details>
         <details class="styled last">
             <summary><span class="icon tabler--help"></span> Questions & Answers <span class="icon tabler--arrow-autofit-height"></span></summary>
             <section>
@@ -147,4 +82,4 @@
             </section>
         </details>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/navbar.njk b/_includes/layouts/navbar.njk
index 5b52b1b..2bfc6d2 100644
--- a/_includes/layouts/navbar.njk
+++ b/_includes/layouts/navbar.njk
@@ -10,6 +10,9 @@
             <li class="nav-home">
                 <a href="/"><span class="icon tabler--home"></span> <span class="text">Home</span></a>
             </li>
+            <li class="nav-services">
+                <a href="/"><span class="icon tabler--server-cog"></span> <span class="text">Services</span></a>
+            </li>
             <li class="nav-webmaster">
                 <a href="/~sneexy"><span class="icon tabler--user"></span> <span class="text">The webmaster</span></a>
             </li>
@@ -19,9 +22,10 @@
         </ul>
     </div>
     <a class="nav-base nav-left nav-links nav-home" href="/"><span class="icon tabler--home"></span> <span class="text">Home</span></a>
+    <a class="nav-base nav-left nav-links nav-services" href="/services"><span class="icon tabler--server-cog"></span> <span class="text">Services</span></a>
     <a class="nav-base nav-left nav-links nav-webmaster" href="/~sneexy"><span class="icon tabler--user"></span> <span class="text">The webmaster</span></a>
     <a class="nav-base nav-left nav-links nav-donate" href="/donate"><span class="icon tabler--currency-dollar"></span> <span class="text">Donate</span></a>
-    <div class="nav-base nav-right nav-settings">
+    <div class="nav-base nav-right nav-settings" aria-roledescription="Settings Menu">
         <input type="checkbox" id="nav-settings-menu" value="" name="nav-settings-menu">
         <label aria-label="Settings" for="nav-settings-menu" data-toggle="nav-settings">
             <span class="icon tabler--settings">
diff --git a/_includes/layouts/services/services.njk b/_includes/layouts/services/services.njk
new file mode 100644
index 0000000..8ad708d
--- /dev/null
+++ b/_includes/layouts/services/services.njk
@@ -0,0 +1,172 @@
+<!-- publics & private services -->
+<article id="services" class="window">
+    <div class="header">
+        <div class="titlebar-icon" aria-hidden="true">
+            <span class="icon tabler--server-cog"></span>
+        </div>
+        <a href="#services">Services</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="#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>
+        <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>
+            <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>
+        </div>
+    </section>
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/sneexy/about.njk b/_includes/layouts/sneexy/about.njk
index aef5863..5131e41 100644
--- a/_includes/layouts/sneexy/about.njk
+++ b/_includes/layouts/sneexy/about.njk
@@ -1,5 +1,5 @@
 <!-- about me -->
-<div id="about-me" class="window">
+<article id="about-me" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--info-circle"></span>
@@ -27,4 +27,4 @@
         <p>I'm usually pretty much both mentally and physically tired all of the time, while also usually being full of ideas that I try to execute and tire myself even more, making things even worse in the end.</p>
         <p>With this, I do sometimes make things, but honestly don't expect much from me. <small>I'll make some type of gallery page soon for the things I <i>do</i> make and the things others do for me, I promise.</small></p>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/sneexy/buttons.njk b/_includes/layouts/sneexy/buttons.njk
index 9a63012..374a844 100644
--- a/_includes/layouts/sneexy/buttons.njk
+++ b/_includes/layouts/sneexy/buttons.njk
@@ -1,5 +1,5 @@
 <!-- buttons -->
-<div id="buttons" class="window home">
+<article id="buttons" class="window home">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--link"></span>
@@ -120,4 +120,4 @@
             </button>
         </div>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/sneexy/funfacts.njk b/_includes/layouts/sneexy/funfacts.njk
index 9217e1d..8aecf35 100644
--- a/_includes/layouts/sneexy/funfacts.njk
+++ b/_includes/layouts/sneexy/funfacts.njk
@@ -1,5 +1,5 @@
 <!-- "fun" facts -->
-<div id="fun-facts" class="window">
+<article id="fun-facts" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--mood-empty"></span>
@@ -24,4 +24,4 @@
             <li>I am <b><i>terrible</i></b> at spelling.</li>
         </ul>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/sneexy/intro.njk b/_includes/layouts/sneexy/intro.njk
index 6fb4690..676a1e3 100644
--- a/_includes/layouts/sneexy/intro.njk
+++ b/_includes/layouts/sneexy/intro.njk
@@ -1,5 +1,5 @@
 <!-- simple introduction -->
-<div id="sneexy" class="window">
+<article id="sneexy" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--user"></span>
@@ -42,4 +42,4 @@
             </div>
         </div>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/sneexy/notebook.njk b/_includes/layouts/sneexy/notebook.njk
index 8d76767..52de595 100644
--- a/_includes/layouts/sneexy/notebook.njk
+++ b/_includes/layouts/sneexy/notebook.njk
@@ -7,7 +7,7 @@ permalink: "/notebook/"
 {% set postslist = collections.post %}
 
 <!-- notebook index -->
-<div id="notebook" class="window">
+<article id="notebook" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--article"></span>
@@ -53,7 +53,7 @@ permalink: "/notebook/"
             </div>
         </details>
     </section>
-</div>
+</article>
 
 <!-- pagefind -->
 <script>
diff --git a/_includes/layouts/sneexy/ruben/features.njk b/_includes/layouts/sneexy/ruben/features.njk
index 38e62cc..a2c0670 100644
--- a/_includes/layouts/sneexy/ruben/features.njk
+++ b/_includes/layouts/sneexy/ruben/features.njk
@@ -1,5 +1,5 @@
 <!-- features -->
-<div id="features" class="window">
+<article id="features" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--notes"></span>
@@ -57,4 +57,4 @@
         <p>the goo has an activated thin outside layer that prevents itself from dripping or allowing things to simply get sucked into it. it gets lost if he is under intense feelings/emotions or simply starts losing energy to keep it activated.</p>
         <p>the goo itself is known to have <i>many</i> more features, although most are experimental and best to leave disabled. a notable one is to be able to use the goo as expandable, dynamic storage, however this is not stable and is prone to easy data loss. <small>although ruben likes to keep it enabled for <i>other</i> reasons. :)</small></p>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/sneexy/ruben/intro.njk b/_includes/layouts/sneexy/ruben/intro.njk
index d154e51..95b170e 100644
--- a/_includes/layouts/sneexy/ruben/intro.njk
+++ b/_includes/layouts/sneexy/ruben/intro.njk
@@ -1,5 +1,5 @@
 <!-- intro -->
-<div id="intro" class="window">
+<article id="intro" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--robot-face"></span>
@@ -35,4 +35,4 @@
         </ul>
         <p style="text-align: end;">download the <a href="/pub/shared/synth.zip">blockbench model</a> here!</p>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/sneexy/ruben/personality.njk b/_includes/layouts/sneexy/ruben/personality.njk
index 3ae1a1d..30a3389 100644
--- a/_includes/layouts/sneexy/ruben/personality.njk
+++ b/_includes/layouts/sneexy/ruben/personality.njk
@@ -1,5 +1,5 @@
 <!-- personality -->
-<div id="personality" class="window">
+<article id="personality" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--mood-look-up"></span>
@@ -22,4 +22,4 @@
         <p><i>VERY</i> affectionate. all types of (positive) teasing, love, kindness or anything related to that is enough to make him blush and beep. also tends to nuzzle and cuddle friends at random whenever he wants.</p>
         <p>mostly lazy. sometimes may try to do something else and is well known for slacking off and doing other things that aren't important and avoiding the things that are important.</p>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/layouts/sneexy/socials.njk b/_includes/layouts/sneexy/socials.njk
index 4025985..132ca03 100644
--- a/_includes/layouts/sneexy/socials.njk
+++ b/_includes/layouts/sneexy/socials.njk
@@ -1,5 +1,5 @@
 <!-- socials -->
-<div id="links" class="window">
+<article id="links" class="window">
     <div class="header">
         <div class="titlebar-icon" aria-hidden="true">
             <span class="icon tabler--link"></span>
@@ -29,4 +29,4 @@
         <p><span class="icon tabler--corner-down-right"></span> You may observe my Fediverse activity below:</p>
         <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>
     </section>
-</div>
\ No newline at end of file
+</article>
\ No newline at end of file
diff --git a/_includes/styles/base.css b/_includes/styles/base.css
index 8282077..bad3a98 100644
--- a/_includes/styles/base.css
+++ b/_includes/styles/base.css
@@ -248,16 +248,14 @@ h1 a {
     font-size: 2rem;
 }
 
-/* apparently having more than one h1 is against web standards
-but i prefer how it looks so i just use the same styling again */
 h2,
 h2 a {
-    font-size: 2rem;
+    font-size: 1.8rem;
 }
 
-h3,
-h3 a {
-    font-size: 1.6rem;
+h3, h4,
+h3 a, h4 a {
+    font-size: 1.4rem;
 }
 
 /* text */
@@ -370,15 +368,15 @@ details.styled[open] {
 
 /* card styling */
 .card {
-    background-color: var(--background);
+    background-color: color-mix(in srgb, var(--background) 95%, white);
     border-radius: 1rem;
-    border: .1rem solid var(--border);
+    border: .2rem solid var(--border);
     gap: .5rem;
     margin-bottom: 1.4rem;
     padding: 1rem;
 
-    h2 {
-        margin-top: 0rem !important;
+    h4 {
+        margin-top: unset !important;
         margin-bottom: .4rem !important;
     }
 }
@@ -420,6 +418,25 @@ hr.rounded {
     border-radius: 5px;
 }
 
+/* text formatting, like github kinda */
+.info-box {
+    padding: .5rem;
+    border: .1rem solid;
+    border-radius: .4rem;
+
+    &.info {
+        background-color: color-mix(in srgb, var(--blue) 10%, transparent);
+        border-color: var(--blue);
+        .icon { color: var(--blue); }
+    }
+
+    &.warn {
+        background-color: color-mix(in srgb, var(--orange) 10%, transparent);
+        border-color: var(--orange);
+        .icon { color: var(--orange); }
+    }
+}
+
 /* audio */
 audio {
     border-radius: 3rem;
@@ -453,6 +470,10 @@ summary {
     transition: all .2s;
 }
 
+.button-container {
+    margin-bottom: unset !important;
+}
+
 /* focus styling */
 :focus-visible {
     outline: .4rem solid var(--ui-purple) !important;
diff --git a/_includes/styles/icons.css b/_includes/styles/icons.css
index 8cfdc7c..fc8a61e 100644
--- a/_includes/styles/icons.css
+++ b/_includes/styles/icons.css
@@ -22,6 +22,7 @@
 }
 
 .tabler--accessible { --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='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m10 16.5l2-3l2 3m-2-3v-2l3-1m-6 0l3 1'/%3E%3Ccircle cx='12' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); }
+.tabler--alert-triangle { --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='M12 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E"); }
 .tabler--arrow-autofit-height { --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='M12 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6m6 10v7m0-18v7m-3 8l3 3l3-3M15 6l3-3l3 3'/%3E%3C/svg%3E"); }
 .tabler--arrow-forward { --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 11l4 4l-4 4m4-4H8a4 4 0 0 1 0-8h1'/%3E%3C/svg%3E"); }
 .tabler--arrow-left { --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='M5 12h14M5 12l6 6m-6-6l6-6'/%3E%3C/svg%3E"); }
@@ -66,6 +67,7 @@
 .tabler--planet { --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='M18.816 13.58c2.292 2.138 3.546 4 3.092 4.9c-.745 1.46-5.783-.259-11.255-3.838c-5.47-3.579-9.304-7.664-8.56-9.123c.464-.91 2.926-.444 5.803.805'/%3E%3Cpath d='M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0'/%3E%3C/g%3E%3C/svg%3E"); }
 .tabler--robot-face { --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='M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2'/%3E%3Cpath d='M9 16q1.5 1 3 1c1.5 0 2-.333 3-1M9 7L8 3m7 4l1-4m-7 9v-1m6 1v-1'/%3E%3C/g%3E%3C/svg%3E"); }
 .tabler--rss { --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='M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9'/%3E%3C/svg%3E"); }
+.tabler--server-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='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01'/%3E%3C/svg%3E"); }
 .tabler--settings { --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='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E"); }
 .tabler--text-size { --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='M3 7V5h13v2m-6-2v14m2 0H8m7-6v-1h6v1m-3-1v7m-1 0h2'/%3E%3C/svg%3E"); }
 .tabler--thumb-down { --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 13V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1za4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2-2l-1-5a2 3 0 0 0-2-2h-7a3 3 0 0 0-3 3'/%3E%3C/svg%3E"); }
diff --git a/_includes/styles/navbar.css b/_includes/styles/navbar.css
index a68266b..0501cd7 100644
--- a/_includes/styles/navbar.css
+++ b/_includes/styles/navbar.css
@@ -126,6 +126,16 @@
         }
     }
 
+    .nav-services:hover, .nav-services:focus-visible {
+        background-color: color-mix(in srgb, var(--blue) 20%, var(--background));
+        color: var(--foreground);
+        outline-color: color-mix(in srgb, var(--blue) 60%, transparent);
+
+        .text {
+            transform: scale(1.5) translateX(0rem);
+        }
+    }
+
     .nav-webmaster:hover, .nav-webmaster:focus-visible {
         background-color: color-mix(in srgb, var(--green) 20%, var(--background));
         color: var(--foreground);
@@ -277,6 +287,10 @@ html:not([data-theme="light"]) {
                 background-color: var(--purple);
                 color: var(--background);
             }
+            .nav-services:hover, .nav-services:focus-visible {
+                background-color: var(--blue);
+                color: var(--background);
+            }
             .nav-webmaster:hover, .nav-webmaster:focus-visible {
                 background-color: var(--green);
                 color: var(--background);
@@ -299,6 +313,10 @@ html[data-theme="dark"] {
             background-color: var(--purple);
             color: var(--background);
         }
+        .nav-services:hover, .nav-services:focus-visible {
+            background-color: var(--blue);
+            color: var(--background);
+        }
         .nav-webmaster:hover, .nav-webmaster:focus-visible {
             background-color: var(--green);
             color: var(--background);
@@ -411,6 +429,12 @@ html[data-theme="dark"] {
                         color: var(--foreground);
                     }
                 }
+                .nav-services:hover, .nav-services:focus-visible {
+                    background-color: color-mix(in srgb, var(--blue) 20%, transparent);
+                    a {
+                        color: var(--foreground);
+                    }
+                }
                 .nav-webmaster:hover, .nav-home:focus-visible {
                     background-color: color-mix(in srgb, var(--green) 20%, transparent);
                     a {
@@ -454,6 +478,9 @@ html[data-theme="dark"] {
                 .nav-notebook:hover a, .nav-notebook:focus-visible a {
                     color: var(--purple);
                 }
+                .nav-services:hover a, .nav-services:focus-visible a {
+                    color: var(--blue);
+                }
                 .nav-webmaster:hover a, .nav-webmaster:focus-visible a {
                     color: var(--green);
                 }
@@ -472,6 +499,9 @@ html[data-theme="dark"] {
             .nav-notebook:hover a, .nav-notebook:focus-visible a {
                 color: var(--purple);
             }
+            .nav-services:hover a, .nav-services:focus-visible a {
+                color: var(--blue);
+            }
             .nav-webmaster:hover a, .nav-webmaster:focus-visible a {
                 color: var(--green);
             }
diff --git a/_includes/styles/pages/services.css b/_includes/styles/pages/services.css
new file mode 100644
index 0000000..3c8d895
--- /dev/null
+++ b/_includes/styles/pages/services.css
@@ -0,0 +1,39 @@
+/* ╭───────────────────────────────────────╮
+/  │                      _                │
+/  │  ___  ___ _ ____   _(_) ___ ___  ___  │
+/  │ / __|/ _ \ '__\ \ / / |/ __/ _ \/ __| │
+/  │ \__ \  __/ |   \ V /| | (_|  __/\__ \ │
+/  │ |___/\___|_|    \_/ |_|\___\___||___/ │
+/  ╰───────────────────────────────────────╯
+/  services - styling for managing the services page */
+
+#services.window {
+    .flex-container {
+        display: flex;
+        flex-direction: row;
+        
+        section {
+            flex: 1;
+        }
+
+        #public {
+            padding: 0 .8rem 0 0;
+        }
+
+        #private {
+            padding: 0 0 0 .8rem;
+        }
+    }
+}
+
+@media screen and (max-width: 59em) {
+    #services.window {
+        .flex-container {
+            flex-direction: column !important;
+
+            #public, #private {
+                padding: unset !important;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/assets/mastodon.svg b/assets/mastodon.svg
new file mode 100644
index 0000000..0f8baeb
--- /dev/null
+++ b/assets/mastodon.svg
@@ -0,0 +1,10 @@
+<svg width="75" height="79" viewBox="0 0 75 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M73.8393 17.4898C72.6973 9.00165 65.2994 2.31235 56.5296 1.01614C55.05 0.797115 49.4441 0 36.4582 0H36.3612C23.3717 0 20.585 0.797115 19.1054 1.01614C10.5798 2.27644 2.79399 8.28712 0.904997 16.8758C-0.00358524 21.1056 -0.100549 25.7949 0.0682394 30.0965C0.308852 36.2651 0.355538 42.423 0.91577 48.5665C1.30307 52.6474 1.97872 56.6957 2.93763 60.6812C4.73325 68.042 12.0019 74.1676 19.1233 76.6666C26.7478 79.2728 34.9474 79.7055 42.8039 77.9162C43.6682 77.7151 44.5217 77.4817 45.3645 77.216C47.275 76.6092 49.5123 75.9305 51.1571 74.7385C51.1797 74.7217 51.1982 74.7001 51.2112 74.6753C51.2243 74.6504 51.2316 74.6229 51.2325 74.5948V68.6416C51.2321 68.6154 51.2259 68.5896 51.2142 68.5661C51.2025 68.5426 51.1858 68.522 51.1651 68.5058C51.1444 68.4896 51.1204 68.4783 51.0948 68.4726C51.0692 68.4669 51.0426 68.467 51.0171 68.4729C45.9835 69.675 40.8254 70.2777 35.6502 70.2682C26.7439 70.2682 24.3486 66.042 23.6626 64.2826C23.1113 62.762 22.7612 61.1759 22.6212 59.5646C22.6197 59.5375 22.6247 59.5105 22.6357 59.4857C22.6466 59.4609 22.6633 59.4391 22.6843 59.422C22.7053 59.4048 22.73 59.3929 22.7565 59.3871C22.783 59.3813 22.8104 59.3818 22.8367 59.3886C27.7864 60.5826 32.8604 61.1853 37.9522 61.1839C39.1768 61.1839 40.3978 61.1839 41.6224 61.1516C46.7435 61.008 52.1411 60.7459 57.1796 59.7621C57.3053 59.7369 57.431 59.7154 57.5387 59.6831C65.4861 58.157 73.0493 53.3672 73.8178 41.2381C73.8465 40.7606 73.9184 36.2364 73.9184 35.7409C73.9219 34.0569 74.4606 23.7949 73.8393 17.4898Z" fill="url(#paint0_linear_549_34)"/>
+<path d="M61.2484 27.0263V48.114H52.8916V27.6475C52.8916 23.3388 51.096 21.1413 47.4437 21.1413C43.4287 21.1413 41.4177 23.7409 41.4177 28.8755V40.0782H33.1111V28.8755C33.1111 23.7409 31.0965 21.1413 27.0815 21.1413C23.4507 21.1413 21.6371 23.3388 21.6371 27.6475V48.114H13.2839V27.0263C13.2839 22.7176 14.384 19.2946 16.5843 16.7572C18.8539 14.2258 21.8311 12.926 25.5264 12.926C29.8036 12.926 33.0357 14.5705 35.1905 17.8559L37.2698 21.346L39.3527 17.8559C41.5074 14.5705 44.7395 12.926 49.0095 12.926C52.7013 12.926 55.6784 14.2258 57.9553 16.7572C60.1531 19.2922 61.2508 22.7152 61.2484 27.0263Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_549_34" x1="37.0692" y1="0" x2="37.0692" y2="79" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6364FF"/>
+<stop offset="1" stop-color="#563ACC"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/mastodon.md b/mastodon.md
new file mode 100644
index 0000000..addc6b4
--- /dev/null
+++ b/mastodon.md
@@ -0,0 +1,17 @@
+---
+title: merpstodon!
+layout: "layouts/base.njk"
+permalink: "/mastodon/"
+---
+
+{% include "layouts/fediverse/mastodon/intro.njk" %}
+
+{% include "layouts/fediverse/mastodon/info.njk" %}
+
+{% include "layouts/fediverse/mastodon/features.njk" %}
+
+{% include "layouts/fediverse/rules.njk" %}
+
+{% include "layouts/fediverse/iceshrimp/bubble.njk" %}
+
+{% include "layouts/fediverse/moderation.njk" %}
\ No newline at end of file
diff --git a/services.md b/services.md
new file mode 100644
index 0000000..04537a7
--- /dev/null
+++ b/services.md
@@ -0,0 +1,7 @@
+---
+title: services
+layout: "layouts/base.njk"
+permalink: "/services/"
+---
+
+{% include "layouts/services/services.njk" %}
\ No newline at end of file