From 08bca8b55c4da6a6f3425994662ecbc76d2920ab Mon Sep 17 00:00:00 2001
From: Sam Therapy <sam@samtherapy.net>
Date: Sun, 6 Mar 2022 18:48:56 +0100
Subject: [PATCH] Make the site look less awful

Signed-off-by: Sam Therapy <sam@samtherapy.net>
---
 .well-known/host-meta.json |  21 +--
 404.html                   |  41 ++---
 index.html                 | 334 ++++++++++++++++++-------------------
 style.css                  |  51 +++---
 4 files changed, 224 insertions(+), 223 deletions(-)

diff --git a/.well-known/host-meta.json b/.well-known/host-meta.json
index 561af83..b8e8ed9 100644
--- a/.well-known/host-meta.json
+++ b/.well-known/host-meta.json
@@ -1,11 +1,12 @@
 {
-    "links": [{
-            "rel": "urn:xmpp:alt-connections:xbosh",
-            "href": "https://xmpp.samtherapy.net/http-bind"
-        },
-        {
-            "rel": "urn:xmpp:alt-connections:websocket",
-            "href": "wss://xmpp.samtherapy.net/xmpp-websocket"
-        }
-    ]
-}
\ No newline at end of file
+  "links": [
+    {
+      "rel": "urn:xmpp:alt-connections:xbosh",
+      "href": "https://xmpp.samtherapy.net/http-bind"
+    },
+    {
+      "rel": "urn:xmpp:alt-connections:websocket",
+      "href": "wss://xmpp.samtherapy.net/xmpp-websocket"
+    }
+  ]
+}
diff --git a/404.html b/404.html
index 92e1768..4c69ed8 100644
--- a/404.html
+++ b/404.html
@@ -1,34 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="utf-8" />
     <title>The Abyss</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" href="favicon.png" />
     <link rel="stylesheet" href="style.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div align="center">
-        <h1>404</h1>
-        <em>
-            You may ask yourself:
-            <strong>
-                well, how did I get here?
-            </strong>
-        </em>
-        <br />
-        <small>
-            <small>
-                By a bad link, probably
-            </small>
-        </small>
-        <br />
-        <br />
-        <a href="https://samtherapy.net">Go back home</a>
+      <h1>404</h1>
+      <em>
+        You may ask yourself:
+        <strong> well, how did I get here? </strong>
+      </em>
+      <br />
+      <small>
+        <small> By a bad link, probably </small>
+      </small>
+      <br />
+      <br />
+      <a href="https://samtherapy.net">Go back home</a>
     </div>
-</body>
-
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/index.html b/index.html
index 4f34467..219df3a 100644
--- a/index.html
+++ b/index.html
@@ -1,188 +1,186 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <title>Plain HTML is good</title>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
     <link rel="shortcut icon" href="favicon.png" />
     <link rel="stylesheet" href="style.css" />
-</head>
+  </head>
 
-<body>
-    <span class="header">
+  <body>
+    <div id="moi">
+      <span id="header">
         <h1>Just somebody on the internet</h1>
         <h2>Just a person on the internet too much.</h2>
-    </span>
-    <div class="splitscreen">
+        <br />
+        <br />
+      </span>
+      <div class="splitscreen">
         <div class="left">
-            <iframe allowfullscreen="allowfullscreen" sandbox="allow-top-navigation allow-scripts" width="400"
-                height="600"
-                src="https://fedifeed.com/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=pleroma&theme=pleroma&size=100&header=true&replies=false&boosts=true"></iframe>
-
+          <iframe
+            allowfullscreen
+            sandbox="allow-top-navigation allow-scripts"
+            width="400"
+            height="600"
+            src="https://fedifeed.com/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=&theme=pleroma&size=95&header=true&replies=false&boosts=false"
+          ></iframe>
         </div>
         <div class="right">
-            <table id="hosting">
-                <tr>
-                    <th>
-                        Things I host
-                    </th>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://froth.zone">Pleroma</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://git.froth.zone">Gitea</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://blog.froth.zone">Writefreely</a>
-                    </td>
-                </tr>
+          <table id="hosting">
+            <tr>
+              <th>Things I host</th>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://froth.zone">Pleroma</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://git.froth.zone">Gitea</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://blog.froth.zone">Writefreely</a>
+              </td>
+            </tr>
 
-                <tr>
-                    <td>
-                        <a href="https://mk.froth.zone">Misskey</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://funkwhale.samtherapy.net">Funkwhale</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://tube.froth.zone">Peertube</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://poopchan.org">Poopchan</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://cy.tube.froth.zone">Cytube</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://invidious.samtherapy.net">Invidious</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://nitter.bird.froth.zone">Nitter</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://bibliogram.froth.zone">Bibliogram</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://teddit.froth.zone">Teddit</a>
-                    </td>
-                </tr>
+            <tr>
+              <td>
+                <a href="https://mk.froth.zone">Misskey</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://funkwhale.samtherapy.net">Funkwhale</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://tube.froth.zone">Peertube</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://poopchan.org">Poopchan</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://cy.tube.froth.zone">Cytube</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://invidious.samtherapy.net">Invidious</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://nitter.bird.froth.zone">Nitter</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://bibliogram.froth.zone">Bibliogram</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://teddit.froth.zone">Teddit</a>
+              </td>
+            </tr>
 
-                <tr>
-                    <td>
-                        <a href="https://f.ruina.exposed">linx-server</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://fedifeed.com/">Fedifeed</a>
-                        <br />(pictured to the left)
-                    </td>
-                </tr>
-
-            </table>
-            <br /><br />
-            <table id="comms">
-                <tr>
-                    <th>
-                        Find me
-                    </th>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://froth.zone/users/sam">Shitpost</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://mk.froth.zone/@samme">Shitposting, maybe</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://git.froth.zone/Sam">Code</a>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <a href="https://blog.froth.zone/sam/">Blog</a>
-                    </td>
-                </tr>
-
-            </table>
+            <tr>
+              <td>
+                <a href="https://f.ruina.exposed">linx-server</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://fedifeed.com/">Fedifeed</a>
+                <br />(left)
+              </td>
+            </tr>
+          </table>
+          <br /><br />
+          <table id="comms">
+            <tr>
+              <th>Find me if you want to</th>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://froth.zone/users/sam">Shitpost</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://mk.froth.zone/@samme">Misskey alt</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://git.froth.zone/Sam">Code</a>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <a href="https://blog.froth.zone/sam/">Blog</a>
+              </td>
+            </tr>
+          </table>
         </div>
+      </div>
     </div>
     <footer>
-        <div class="footer-split">
-            <div class="left">
-                <p>
-                    I don't know what else to put here.
-                </p>
-                <details>
-                    <summary>
-                        Contact details
-                    </summary>
-                    <br />
-                    Maybe my
-                    <a href="/PGP.asc">PGP key</a>
-                    if you want to shoot me an email?<br /><br />
-                    <small>
-                        The fingerprint is 31EC 437B 458E 29B4 2F76 4409 4D8B 07C1 8F31 ACBD
-                        <br /><br />
-                        <small>
-                            the email is sam @ this website
-                            <br />
-                        </small>
-                        <small>
-                            or on XMPP, same address<br />
-                        </small>
-                    </small>
-                </details>
-
-            </div>
-            <div class="right">
+      <div class="footer-split">
+        <div class="left">
+          <br />
+          <br />
+          <details>
+            <summary>Contact details</summary>
+            <br />
+            Maybe my
+            <a href="/PGP.asc">PGP key</a>
+            if you want to shoot me an email?<br /><br />
+            <small>
+              The fingerprint is 31EC 437B 458E 29B4 2F76 4409 4D8B 07C1 8F31
+              ACBD
+              <br /><br />
+              <small>
+                the email is sam @ this website
                 <br />
-                <br />
-                <em>cool people's corner
-                    <div id="frens">
-                        <a href="https://8777.ch/">8777.ch</a>
-                        |
-                        <a href="https://coy.neocities.org/~coy/">coy.neocities.org</a>
-                        <br />
-                        <a href="https://grumbulon.xyz/">grumbulon.xyz</a>
-                        |
-                        <a href="https://nekobit.net/">nekobit.net</a>
-                        <br />
-                        <a href="https://newblue.life/">newblue.life</a>
-                        |
-                        <a href="https://the.waifuism.life">the.waifuism.life</a>
-                    </div>
-                </em>
-            </div>
+              </small>
+              <small> or on XMPP, same address<br /> </small>
+            </small>
+          </details>
         </div>
+        <div class="right">
+          <br />
+          <br />
+          <em>
+            cool people's corner
+            <div id="frens">
+              <a href="https://8777.ch/">8777.ch</a>
+              |
+              <a href="https://coy.neocities.org/~coy/">coy.neocities.org</a>
+              <br />
+              <a href="https://grumbulon.xyz/">grumbulon.xyz</a>
+              |
+              <a href="https://nekobit.net/">nekobit.net</a>
+              <br />
+              <a href="https://newblue.life/">newblue.life</a>
+              |
+              <a href="https://the.waifuism.life">the.waifuism.life</a>
+            </div>
+          </em>
+        </div>
+      </div>
     </footer>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/style.css b/style.css
index d80dc30..5546e3c 100644
--- a/style.css
+++ b/style.css
@@ -1,50 +1,59 @@
 a {
-    color: rgba(200, 200, 200, 0.8);
+  color: rgba(200, 200, 200, 0.8);
 }
 
 footer a {
-    color: rgba(200, 200, 200, 0.4);
+  color: rgba(200, 200, 200, 0.4);
 }
 
-/* Globally */
-.splitscreen, .footer-split {
-    display: flex;
+.splitscreen,
+.footer-split {
+  display: flex;
 }
 
 .splitscreen .left {
-    flex: 0 1 30em;
+  flex: 0 1 auto;
 }
 
 .splitscreen .right {
-    flex: 0 1 auto;
+  flex: 0 1 auto;
 }
 
 .footer-split .left {
-    text-align: left;
-    flex: 0 1 26em
+  text-align: left;
+  flex: 0 1 79%;
 }
 
 .footer-split .right {
-    flex: 0 1 auto;
-    text-align: right;
+  flex: 0 1 auto;
+  text-align: right;
 }
 
+#header {
+  text-align: center;
+}
+
+#moi {
+  width: 70%;
+  margin: 0 auto;
+}
 
 #hosting,
 #comms {
-    display: flex;
-    flex-direction: column-reverse;
-    flex-wrap: wrap;
-    justify-content: right;
-    align-items: right;
-    text-align: center;
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+  justify-content: right;
+  align-items: right;
+  text-align: center;
+  font-size: larger;
 }
 
 #frens {
-    text-justify: auto;
+  text-justify: auto;
 }
 
 body {
-    background-color: #000000;
-    color: rgba(255, 255, 255, 1);
-}
\ No newline at end of file
+  background-color: #000000;
+  color: rgba(255, 255, 255, 1);
+}
