about page seperation, replace bg with svg

_includes/layouts/pages/about/about.njk

@@ -16,6 +16,8 @@
     <window-contents>
         <h1><a href="#about">About</a></h1>
         <p>Synth.Download is a project managed by serveral synths <small><s>and protogens</s></small> to provide a collection of (some public, some private) privacy respecting frontends and web services. We strive to create a safe community for ourselves and for those who accept us.</p>
+        <h2 id="contact"><a href="#contact">Contact</a></h2>
+        <p>Synth.Download is maintained by <a href="/admins">several administrators</a>, although <a href="https://sneexy.synth.download">Sneexy</a> is the one who mainly manages everything. Contact <span link-color>synth@synth.download</span> for reports or suggestions.</p>
         <h2 id="history"><a href="#history">History</a></h2>
         <p><small>This section is written by <a href="https://sneexy.synth.download">Sneexy.</a></small></p>
         <p>Synth.Download is a project started in October of 2024 by <a href="https://sneexy.synth.download">Sneexy</a>, buying the domain <code>synth.download</code> as it was available, and as I am a Synth. Initially, the domain was used to only used to serve a <small>much, <i>much</i></small> older iteration of this site that was used to only provide information about myself, and ran about a handful of services only for personal usage.</p>
@@ -23,12 +25,5 @@
         <p>Later on, as time progressed, I started running more services that I figured would be more useful, the next thing run after Iceshrimp would be our own <a href="https://beeping.synth.download">Sharkey</a> instance <small>(I <i>swear</i> we don't only just run Fediverse instances here, Iceshrimp.NET was just <i>too</i> beta for our tastes)</small>, which as far as I can tell is probably our most popular service as of now.</p>
         <p>Synth.Download has went through many server migrations between different Netcup VPS'es <small>before <i>finally</i> getting off them</small> along with various site and services improvements, and overall has started to shape into what I am proud to call as a proper community rather than being a silly site on the indie web (although, deep down, we all know it's still that).</p>
         <p>Thank you all for being here, both users and administrators. It means a lot to me. 💚</p>
-        <h2 id="servers"><a href="#servers">Servers</a></h2>
-        <p>The servers that are responsible for housing Synth.Download are proudly hosted and provided by <a href="https://foxgirl.dev">Lua</a>, and are located in Canada. All services on Synth.Download are containerized within Docker containers.</p>
-        <p>Services are split between two KVM's on two different servers, namely <code>phosphorus</code>, which has more breathing room and handles running our more advanced and heavier services, such as our Fediverse instances, and <code>neptunium</code>, which handles all web traffic and our more lighter services, such as this site you're looking at right now.</p>
-        <p>Backups are taken nightly and stored off-site.</p>
-        <p>For those curious about our server configurations and setups, we publicly provide them <a href="https://forged.synth.download/sd/synth.download">at our Git repository</a>.</p>
-        <h2 id="contact"><a href="#contact">Contact</a></h2>
-        <p>Synth.Download is maintained by <a href="/admins">several administrators</a>, although <a href="https://sneexy.synth.download">Sneexy</a> is the one who mainly manages everything. Contact <span link-color>synth@synth.download</span> for reports or suggestions.</p>
     </window-contents>
 </article>

_includes/layouts/pages/about/servers.njk

@@ -0,0 +1,23 @@
+<!-- synth.download servers -->
+<article window id="servers">
+    <div class="header">
+        <titlebar-icon aria-hidden="true">
+            <icon-tabler server></icon-tabler>
+        </titlebar-icon>
+        <a href="#servers">Servers</a>
+        <window-controls aria-hidden="true">
+            <icon-tabler minimize></icon-tabler>
+            <icon-tabler maximize></icon-tabler>
+            <close-button aria-hidden="true">
+                <icon-tabler x></icon-tabler>
+            </close-button>
+        </window-controls>
+    </div>
+    <window-contents>
+        <h2 id="servers"><a href="#servers">Servers</a></h2>
+        <p>The servers that are responsible for housing Synth.Download are proudly hosted and provided by <a href="https://foxgirl.dev">Lua</a>, and are located in Canada. All services on Synth.Download are containerized within Docker containers.</p>
+        <p>Services are split between two KVM's on two different servers, namely <code>phosphorus</code>, which has more breathing room and handles running our more advanced and heavier services, such as our Fediverse instances, and <code>neptunium</code>, which handles all web traffic and our more lighter services, such as this site you're looking at right now.</p>
+        <p>Backups are taken nightly and stored off-site.</p>
+        <p>For those curious about our server configurations and setups, we publicly provide them <a href="https://forged.synth.download/sd/synth.download">at our Git repository</a>.</p>
+    </window-contents>
+</article>

_includes/styles/base/base.css

@@ -42,7 +42,7 @@ bg-image {
     opacity: .6;
     background-repeat: repeat;
     background-size: auto;
-    background-image: url(/assets/bg.png);
+    background-image: url(/assets/bg.svg);
     inset: 0 !important;
     width: 100% !important;
     height: 100% !important;

about.md

@@ -4,4 +4,6 @@ layout: "layouts/base/base.njk"
 permalink: "/about/"
 ---
 
-{% include "layouts/pages/about/about.njk" %}
+{% include "layouts/pages/about/about.njk" %}
+
+{% include "layouts/pages/about/servers.njk" %}