Merge remote-tracking branch 'origin/dev'

collapse navbar on smaller screens. #9

Co-authored-by: Michael DiLeo <michael.dileo@oakstreethealth.com>
Reviewed-on: #14

public/about.html

@@ -68,30 +68,54 @@
         There will be a 3 month announcement in advance, in accordance with the <a href="https://joinmastodon.org/covenant" target="_blank">Mastodon Server Covenant</a>.</p>
         <p><strong>Funding</strong> - 
         Keyboard Mastodon is currently funded by the admin, for a cost of ~$40 - $45 per month. Donations may be opened in the future, but have not been set up at this time.</p>
+        
+        <section>
         <h1>The Dirty Technicals</h1>
         <p>If you're not a mega-nerd, turn back now.</p>
         <p>I warned you.</p>
         <p>Keyboard Vagabond is run on a 3 node Kubernetes cluster running on 3x Arm VPSs hosted by NetCup in Amsterdam. I chose Amsterdam because I thought that Europe would be more centrally located for people who are traveling the world.</p>
+        </section>
+        <section>
         <h4>The Specs</h4>
-        <p><strong>Servers</strong> - 3x 10 ARM vCPUs, 16GB Ram, 500GB (~50GB for Talos and the rest for Longhorn) storage running <a href="https://www.talos.dev" target="_blank">Talos</a> and Kubernetes.
-        <p><strong>Storage</strong> - Longhorn ensures that there are at least 2 copies across the nodes.</p>
-        <p><strong>Backups and Content</strong> - Backups and content are stored in S3 storage hosted by BackBlaze with CloudFlare providing CDN. I've already run through disaster recovery and restored database backups from S3.</p>
-        <p><strong>CDN</strong> - CloudFlare provides CDN and special rules have been set up to be sure that as much as possible is cached.</p>
-        <p><strong>Security</strong> - ports are closed off to the world and secured with CloudFlare tunnels and TailScale as the only means of access outside of website access.</p>
-        <p><strong>Observability and Logging</strong> - OpenObserve dashboards and log aggregation.</p>
-        <p><strong>Domain</strong> - domain is provided by CloudFlare</p>
-        <p><strong>Services</strong> - Typical arrangement for services is that web services get 2 instances and workers get 1 instance with autoscaling. Web pods scale horizontally and workers scale vertically, then horizontally.</p>
-        <p><strong>Source Code</strong> - If I get the source code to where I'm comfortable sharing, I'll post a link here. And if you're experienced in k8s, I'd always appreciate a review.  :)</p>
-        <p><strong>Costs</strong><br />
-        VPS servers - 3x ~$13 / mth = $40/mth<br />
-        Domain name - $12/year<br />
-        Backblaze - $6/TB/mth = ~$2/mth<br />
-        Total: ~$45/mth</p>
+        <dl>
+        <dt><strong>Servers</strong></dt>
+        <dd>3x 10 ARM vCPUs, 16GB Ram, 500GB (~50GB for Talos and the rest for Longhorn) storage running <a href="https://www.talos.dev">Talos</a> and Kubernetespan.</dd>
+        <dt><strong>Storage</strong></dt>
+        <dd>Longhorn ensures that there are at least 2 copies across the nodes.</dd>
+        <dt><strong>Backups and Content</strong></dt>
+        <dd>Stored in S3 storage hosted by BackBlaze with CloudFlare providing CDN. I've already run through disaster recovery and restored database backups from S3.</dd>
+        <dt><strong>CDN</strong></dt>
+        <dd>CloudFlare provides CDN and special rules have been set up to be sure that as much as possible is cached.</dd>
+        <dt><strong>Security</strong></dt>
+        <dd>Ports are closed off to the world and secured with CloudFlare tunnels and TailScale as the only means of access outside of website access.</dd>
+        <dt><strong>Observability and Logging</strong></dt>
+        <dd>OpenObserve dashboards and log aggregation.</dd>
+        <dt><strong>Domain</strong></dt>
+        <dd>Domain is provided by CloudFlare</dd>
+        <dt><strong>Services</strong></dt>
+        <dd>Typical arrangement for services is that web services get 2 instances and workers get 1 instance with autoscaling. Web pods scale horizontally and workers scale vertically, then horizontally.</dd>
+        <dt><strong>Source Code</strong></dt>
+        <dd>If I get the source code to where I'm comfortable sharing, I'll post a link here. And if you're experienced in k8s, I'd always appreciate a review.  :)</dd>
+        </dl>
+    </section>
+
+        <p>
+        <span><strong>Costs</strong></span><br />
+        
+            <span>
+            VPS servers - 3x ~$13 / mth = $40/mth<br />
+            Domain name - $12/year<br />
+            Backblaze - $6/TB/mth = ~$2/mth<br />
+            Total: ~$45/mth
+            </span>
+        </p>
     </main>
 
     <footer class="container">
-        <p>Contact: <a href="mailto:sysadmin@mailkeyboardvagabond.com">sysadmin@mail.keyboardvagabond.com</a>, any of the @sysadmin accounts on the instances</p>
-        <p>Copyright 2025 Keyboard Vagabond</p>
+        <p>
+            <span>Contact: <a href="mailto:admin@keyboardvagabond.com">admin@keyboardvagabond.com</a>, any of the @sysadmin accounts on the instances</span></br>
+            <span>Copyright 2025 Keyboard Vagabond</span>
+        </p>
     </footer>
 
     <script src="scripts/bundle.js"></script>

public/index.html

@@ -76,8 +76,7 @@
                 with <a href="https://join-lemmy.org">Lemmy</a>, but with extra features for topics and communities.
                 Both are an alternative to Reddit. See more at <a href="https://join-lemmy.org">join-lemmy.org</a> and
                 <a href="https://join.piefed.social/try/">join.piefed.social</a>.</li>
-            <li><strong><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong> - An alternative to
-                instagram, where you can share your photos, albums, and create stories. See more at <a
+            <li><strong><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong> - Like old instagram, where you can share your photos, albums, and create stories. See more at <a
                     href="https://pixelfed.org/servers">pixelfed.org</a>.</li>
             <li><strong><a href="https://mastodon.keyboardvagabond.com">Mastodon</a></strong> - An alternative to
                 twitter. Create your timeline by following users and hashtags. See more at <a