Replace placeholder index with contact and keys page

index.html

@@ -1,15 +1,74 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>boson.party</title>
-  <link rel="stylesheet" href="/style.css">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>druid520</title>
+<meta name="description" content="Contact details and public keys for druid520.">
+<style>
+  :root {
+    --bg: #fafafa; --fg: #1a1a1a; --muted: #666; --line: #ddd;
+    --code-bg: #f0f0f0; --link: #0b5cad;
+    color-scheme: light dark;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root { --bg: #111; --fg: #e6e6e6; --muted: #999; --line: #333; --code-bg: #1c1c1c; --link: #7ab7ff; }
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0; background: var(--bg); color: var(--fg);
+    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  }
+  main { max-width: 42rem; margin: 0 auto; padding: 3rem 1.25rem; }
+  h1 { font-size: 1.75rem; margin: 0 0 2rem; }
+  h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 2.5rem 0 .75rem; }
+  a { color: var(--link); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; }
+  dt { color: var(--muted); }
+  dd { margin: 0; overflow-wrap: anywhere; }
+  .key { margin: 0 0 1.25rem; }
+  .key p { margin: 0 0 .35rem; color: var(--muted); font-size: .9rem; }
+  pre {
+    margin: 0; padding: .75rem 1rem; background: var(--code-bg); border: 1px solid var(--line);
+    border-radius: 6px; overflow-x: auto;
+    font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+  @media (max-width: 30rem) { dl { grid-template-columns: 1fr; gap: 0 0; } dd { margin-bottom: .75rem; } }
+</style>
 </head>
 <body>
-  <main>
-    <h1>boson.party</h1>
-    <p>Auto-synced at 03:39:14 — no manual redeploy needed.
-  </main>
+<main>
+  <h1>druid520</h1>
+
+  <h2>Contact</h2>
+  <dl>
+    <dt>Email</dt>      <dd><a href="mailto:druid520@tutanota.de">druid520@tutanota.de</a></dd>
+    <dt>Wikidot</dt>    <dd><a href="https://www.wikidot.com/user:info/druid520">druid520</a></dd>
+    <dt>Ergo IRC</dt>   <dd><a href="ircs://ergo.chat:6697/druid520">druid520</a> on ergo.chat</dd>
+    <dt>SCP IRC</dt>    <dd><a href="ircs://irc.scpwiki.com:6697/druid520">druid520</a> on irc.scpwiki.com</dd>
+  </dl>
+
+  <h2>Signify</h2>
+  <div class="key">
+    <p>Public key</p>
+<pre>untrusted comment: signify public key
+RWR/DHZvrZuKlk2CHsPx1phI2m5UUHGYev8gcqwInxR8SQHaxWDyUWYi</pre>
+  </div>
+  <div class="key">
+    <p>Key ID</p>
+<pre>7f0c766fad9b8a96</pre>
+  </div>
+
+  <h2>SSH signing</h2>
+  <div class="key">
+    <p>Public key</p>
+<pre>ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIEyEN+vzZ336AbGaRjT5tAjCqr7vJeqpEjSTE3/axqNu signing</pre>
+  </div>
+  <div class="key">
+    <p>Fingerprint</p>
+<pre>SHA256:nMNk7c6lbSMaWm1ihCP6awNgR0cTVLMLtwzs36InbAs</pre>
+  </div>
+</main>
 </body>
 </html>