This is certainly the html of all time

2024-08-15 03:46:31 +01:00 · 2024-08-15 03:46:31 +01:00 · 365a4e17a1
commit 365a4e17a1
parent ac677ff9f0
3 changed files with 152 additions and 6 deletions
--- a/index.html
+++ b/index.html
@ -1,6 +1,51 @@
-computer man<br>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="master.css">
+  <title>~floppy</title>
+</head>
+
+<body>
+  <div class="page-container">
+    <div class="grid">
+      <div>
+        <h1>~floppy</h1>
+      </div>
+      <div>
+        <p>
+          <em>Certified PHP User</em><br>
+          "My life is a living nightmare!"
+        </p>
+      </div>
+      <div><img src="profile-image.png" class="profile-image"></div>
+      <div>
        <ul>
-  <li><a href="//www.diskfloppy.me/">diskfloppy.me</a></li>
-  <li><a href="http://www.hyprcat.net">hyprcat.net (HTTP only)</a></li>
-  <li><a href="https://weh.moe">weh.moe</a></li>
+          <li>19 y/o, British</li>
+          <li>Theatre Technician</li>
+          <li>&quot;Web Developer&quot;</li>
+          <li>Part-time NixOS user</li>
+          <li>Self-taught programmer</li>
+          <li>Somewhat a weather nerd</li>
        </ul>
+        <p class="social-heading">Social:</p>
+        <ul class="social">
+          <li><strong>Forgejo:</strong> <a href="https://git.frzn.dev/fwoppydwisk/">@fwoppydwisk</a></li>
+          <li><strong>E-mail:</strong> <a href="mailto:floppydisk@hyprcat.net">floppydisk@hyprcat.net</a></li>
+          <li><strong>Mastodon:</strong> <a href="https://c.im/@floppydisk">@floppydisk@c.im</a></li>
+          <li><strong>Matrix:</strong> <a
+              href="https://matrix.to/#/@floppydisk:arcticfoxes.net">@floppydisk:arcticfoxes.net</a></li>
+        </ul>
+      </div>
+      <div><strong>Websites:</strong>
+        <a href="https://www.diskfloppy.me">diskfloppy.me</a> /
+        <a href="http://www.hyprcat.net">hyprcat.net</a> /
+        <a href="https://weh.moe">weh.moe</a>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
--- a/master.css
+++ b/master.css
@ -0,0 +1,101 @@
+:root {
+    --background: #11111b;
+    --foreground: #cdd6f4;
+    --drop-shadow-color: #cdd6f43c;
+    --drop-shadow-size: 8px 8px;
+    --links: #89b4fa;
+    --profile-image-size: 200px;
+    --page-width: 520px;
+}
+
+body {
+    color: var(--foreground);
+    background-color: var(--background);
+    font-family: monospace;
+}
+
+h1,
+p {
+    margin: 0;
+}
+
+a {
+    color: var(--links);
+    text-decoration: underline dotted;
+}
+
+a:hover {
+    text-decoration: underline solid;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: square;
+    list-style-position: inside;
+}
+
+ul.social {
+    list-style: none;
+}
+
+li {
+    padding-left: 0;
+    text-indent: 1em;
+}
+
+/* 
+li:before {
+    content: "-";
+    padding-right: 5px;
+} */
+
+
+div.page-container {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    text-align: center;
+    width: var(--page-width);
+}
+
+div.grid {
+    display: grid;
+    grid-template-columns: var(--profile-image-size) auto;
+    grid-template-rows: auto auto;
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    border: 1px solid var(--foreground);
+    background-color: var(--background);
+    padding: 10px;
+    filter: drop-shadow(var(--drop-shadow-size) var(--drop-shadow-color))
+}
+
+div.grid div:nth-child(2) {
+    margin: auto 0;
+    text-align: right;
+}
+
+div.grid div:nth-child(4) {
+    vertical-align: middle;
+    margin: auto 0;
+}
+
+div.grid div:last-child {
+    grid-column: span 2;
+}
+
+div.grid>div {
+    text-align: left;
+}
+
+img.profile-image {
+    width: var(--profile-image-size);
+    border: 2px solid var(--foreground)
+}
+
+p.social-heading {
+    margin-top: 0.75em;
+}
--- a/profile-image.png
+++ b/profile-image.png