Make site not look like shit

Signed-off-by: Sam Therapy <sam@samtherapy.net>
This commit is contained in:
Sam Therapy 2022-03-20 18:49:09 +01:00
parent f0aa7f1f43
commit e1d44f5658
Signed by: sam
GPG Key ID: 4D8B07C18F31ACBD
2 changed files with 223 additions and 204 deletions

View File

@ -1,195 +1,189 @@
<!DOCTYPE html>
<html lang="en">
<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"
/>
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="moi">
<span id="header">
<h1>Just somebody on the internet</h1>
<h2>Just a person on the internet too much.</h2>
<br />
<br />
</span>
<div class="splitscreen">
<div class="left">
<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>
<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" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" href="style.css" />
</head>
<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://scribe.froth.zone">Scribe</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 />(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>
<tr>
<td>
<a href="https://pixelfed.froth.zone/sam/">Images, possibly</a>
</td>
</tr>
</table>
</div>
<body>
<span id="header">
<h1>Just somebody on the internet</h1>
<h2>Just a person on the internet too much.</h2>
<br />
<br />
</span>
<div id="grid">
<div class="top">
<div class="left">
<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>
<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://scribe.froth.zone">Scribe</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 />(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>
<tr>
<td>
<a href="https://pixelfed.froth.zone/sam/">Images, possibly</a>
</td>
</tr>
</table>
</div>
</div>
<footer>
<div class="footer-split">
<div class="left">
<div class="bottom">
<div class="left">
<br />
<br />
<details>
<summary>Contact details</summary>
<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 />
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 /><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 />
or on XMPP, same address
</small>
the email is sam @ this website
<br />
or on XMPP, same address
</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>
</small>
</details>
</div>
</footer>
</body>
</html>
<div class="right">
<br />
<br />
<em>
cool people's secrtion
<div id="frens">
<a href="https://8777.ch/">8777.ch</a>
|
<a href="https://coy.neocities.org/~coy/">coy.neocities.org</a>
|
<a href="https://grumbulon.xyz/">grumbulon.xyz</a>
|
<a href="https://nekobit.net/">nekobit.net</a>
|
<a href="https://newblue.life/">newblue.life</a>
|
<a href="https://the.waifuism.life">the.waifuism.life</a>
</div>
</em>
</div>
</div>
</div>
</footer>
</body>
</html>

View File

@ -2,41 +2,54 @@ a {
color: rgba(200, 200, 200, 0.8);
}
footer a {
color: rgba(200, 200, 200, 0.4);
a:hover {
color: rgba(200, 200, 200, 1);
}
.splitscreen,
.footer-split {
display: flex;
#frens a {
color: rgba(250, 250, 250, 0.4);
}
.splitscreen .left {
flex: 0 1 auto;
#frens a:hover {
color: rgba(200, 200, 200, 0.6);
}
.splitscreen .right {
flex: 0 1 auto;
.top, .bottom {
display: grid;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 5%;
grid-auto-rows: minmax(100px, auto);
}
.footer-split .left {
text-align: left;
flex: 0 1 79%;
.top {
grid-template-rows: 0fr;
}
.footer-split .right {
flex: 0 1 auto;
text-align: right;
.bottom {
align-items: center;
position: relative;
}
.top .left {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.top .right {
grid-row: 1 / 2;
grid-column: 2 / 2;
white-space: nowrap;
}
bottom .right {
position: absolute;
}
#header {
text-align: center;
}
#moi {
width: 70%;
margin: 0 auto;
}
#hosting,
#comms {
@ -56,4 +69,16 @@ footer a {
body {
background-color: #000000;
color: rgba(255, 255, 255, 1);
max-width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}