diff --git a/403.html b/403.html
index a2f61fd..41fab77 100644
--- a/403.html
+++ b/403.html
@@ -1,16 +1,17 @@
-
+
-
-
- 403 — Forbidden
-
+
+
+Forbidden · druid520
+
-
- 403
- You do not have permission to access this resource.
- Return home
-
+
+ Error 403
+ Forbidden
+ You don't have access to this page.
+ Back to druid520
+
diff --git a/404.html b/404.html
index dcb1880..177e017 100644
--- a/404.html
+++ b/404.html
@@ -1,16 +1,17 @@
-
+
-
-
- 404 — Not Found
-
+
+
+Not found · druid520
+
-
- 404
- The page you are looking for does not exist.
- Return home
-
+
+ Error 404
+ Not found
+ There's nothing at this address.
+ Back to druid520
+
diff --git a/index.html b/index.html
index 9d03766..966043d 100644
--- a/index.html
+++ b/index.html
@@ -5,37 +5,7 @@
druid520
-
+
diff --git a/style.css b/style.css
index d35d19b..fe78d48 100644
--- a/style.css
+++ b/style.css
@@ -1,48 +1,82 @@
:root {
- --bg: #0b1020;
- --fg: #e6e8ef;
- --accent: #6ea8fe;
- --muted: #9aa4bf;
+ --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; }
-html, body {
- margin: 0;
- padding: 0;
- min-height: 100%;
-}
-
body {
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
+ margin: 0;
background: var(--bg);
color: var(--fg);
- font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
- line-height: 1.6;
+ font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main {
max-width: 42rem;
- padding: 2rem;
- text-align: center;
+ margin: 0 auto;
+ padding: 3rem 1.25rem;
}
-h1 {
- font-size: clamp(2rem, 6vw, 3.5rem);
- margin: 0 0 0.5rem;
- letter-spacing: -0.02em;
+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;
}
-main.error h1 {
- color: var(--accent);
- font-size: clamp(4rem, 18vw, 9rem);
+a { color: var(--link); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* Contact list */
+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; }
-p { color: var(--muted); margin: 0.5rem 0; }
+/* Key blocks */
+.key { margin: 0 0 1.25rem; }
+.key p { margin: 0 0 .35rem; color: var(--muted); font-size: .9rem; }
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
+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;
+}
+
+/* Error pages (403/404) */
+main.error h2 { margin-top: 0; }
+main.error h1 { margin-bottom: .75rem; }
+main.error p { color: var(--muted); margin: 0 0 2rem; }
+
+@media (max-width: 30rem) {
+ dl { grid-template-columns: 1fr; gap: 0; }
+ dd { margin-bottom: .75rem; }
+}