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; } +}