From e9608f825bc28750ba69bb03b5532fd1a405fd41 Mon Sep 17 00:00:00 2001
From: Sam Therapy <sam@samtherapy.net>
Date: Mon, 7 Feb 2022 14:46:09 -0600
Subject: [PATCH] actually format website

Signed-off-by: Sam Therapy <sam@samtherapy.net>
---
 index.html | 253 +++++++++++++++++++++++++++++++++++------------------
 style.css  |  55 +++++++++++-
 2 files changed, 219 insertions(+), 89 deletions(-)

diff --git a/index.html b/index.html
index b968303..6787358 100644
--- a/index.html
+++ b/index.html
@@ -1,95 +1,178 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <title>Plain HTML is good</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>
- <meta charset="utf-8" />
- <title>Plain HTML is good</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>
+    <body>
+        <span class="header">
+            <h1>Just somebody on the internet</h1>
+            <h2>Just a person on the internet too much.</h2>
+        </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=&theme=pleroma&size=100&header=true&replies=false&boosts=true"></iframe>
 
-<body>
-	<h2>Just somebody on the internet</h2>
+            </div>
+            <div class="right">
+                <table id="hosting">
+                    <tr>
+                        <th>
+                            How about a list of 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">Blog</a>
+                        </td>
+                    </tr>
 
-	<p>
-		Just a person on the internet too much.
-	</p>
-<div class="splitscreen">
-    <div class = "left">
-        <table>
-	<tr>
-		<th>
-			How about a list of things I host?
-		</th>
-	</tr>
-	<tr align="center">
-		<td>
-			<a href="https://froth.zone">Pleroma</a>
-		</td>
-	</tr>
-	<tr align="center">
-		<td>
-			<a href="https://blog.froth.zone">Blog</a>
-		</td>
-	</tr>
-	<tr align="center">
-		<td>
-			<a href="https://funkwhale.samtherapy.net">Funkwhale</a>
-		</td>
-	</tr>
-	<tr align="center">
-		<td>
-			<a href="https://tube.froth.zone">Peertube</a>
-		</td>
-	</tr>
-	<tr align="center">
-		<td>
-			<a href="https://cy.tube.froth.zone">Cytube</a>
-		</td>
-	</tr>
-	<tr align="center">
-		<td>
-			<a href="https://invidious.samtherapy.net">Invidious</a>
-		</td>
-	</tr>
-	<tr align="center">
-		<td>
-			<a href="https://nitter.bird.froth.zone">Nitter</a>
-		</td>
-	</tr>
-		<tr align="center">
-		<td>
-			<a href="https://bibliogram.froth.zone">Bibliogram</a>
-		</td>
-	</tr>
-        </table>
-    </div>
-    <div  class = "right">
-        <iframe allowfullscreen sandbox="allow-top-navigation allow-scripts" width="400" height="800" src="https://fedifeed.com/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=&theme=pleroma&size=100&header=true&replies=false&boosts=false"></iframe>
-    </div> 
-</div>
+                    <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>
 
-	<p>
-		I don't know what else to put here. 
-	</p>
+                </table>
+                <br/><br/>
+                <table id="comms">
+                    <tr>
+                        <th>
+                            Where to find me, I guess
+                        </th>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="https://froth.zone/users/sam">Where I shitpost</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="https://mk.froth.zone/@samme">Where I shitpost, less often</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="https://git.froth.zone/Sam">Where my terrible code lies</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <a href="https://blog.froth.zone/sam/">My blog</a>
+                        </td>
+                    </tr>
 
-	<details>
-		<summary>
-			Contact details
-		</summary>
-		Maybe my <a href="/PGP.asc">PGP key</a> if you want to shoot me an email?<br />
-	<small>
-		The fingerprint is 31EC 437B 458E 29B4 2F76 4409 4D8B 07C1 8F31 ACBD <br />
-		 <small>
-			 the email is sam @ this website <br />
-			</small> 
-		 	<small>
-				 or on XMPP, same address<br />
-				</small>
-		</small>
-	</details>
-</body>
+                </table>
+            </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>
+                        Want to contact me, eh?
+                        <br/><br/>
+                        Maybe my
+                        <a href="/PGP.asc">PGP key</a>
+                        if you want to shoot me an email?<br/>
+                        <small>
+                            The fingerprint is 31EC 437B 458E 29B4 2F76 4409 4D8B 07C1 8F31 ACBD
+                            <br/>
+                            <small>
+                                the email is sam @ this website
+                                <br/>
+                            </small>
+                            <small>
+                                or on XMPP, same address<br/>
+                            </small>
+                        </small>
+                    </details>
 
+                </div>
+                <div class="right">
+                    <br/>
+                    <br/>
+                    <em>Other cool sites
+                        <div id="frens">
+                            <a href="https://8777.ch/">8777.ch</a>
+                            |
+                            <a href="https://grumbulon.xyz/">grumbulon.xyz</a>
+                            |
+                            <a href="https://newblue.life/">newblue.life</a>
+                        </div>
+                    </em>
+                </div>
+            </div>
+        </footer>
+    </body>
 </html>
diff --git a/style.css b/style.css
index 310b689..aca2bd1 100644
--- a/style.css
+++ b/style.css
@@ -1,10 +1,57 @@
-a { color:blue } /* Globally */
+a {
+    color: rgba(200, 200, 200, 0.8);
+}
+
+/* Globally */
 .splitscreen {
-    display:flex;
+    display: flex;
 }
+
 .splitscreen .left {
-    flex: 1;
+    flex: 0 1 auto;
 }
+
 .splitscreen .right {
-    flex: 1;
+    flex: 0 1 auto;
+}
+
+.footer-split {
+    display: flex;
+}
+
+.footer-split .left {
+    text-align: left;
+    flex: 0 1 23em;
+}
+
+.footer-split .right {
+    flex: 0 1 auto;
+    text-align: right;
+}
+
+#hosting a {
+    color: green;
+}
+
+#comms a {
+    color: red;
+}
+
+#hosting,
+#comms {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+#frens {
+    text-justify: auto;
+}
+
+body {
+    background-color: #000000;
+    color: rgba(255, 255, 255, 1);
 }
\ No newline at end of file
