Upgrade styling

diff --git a/index.html b/index.html
index 1a892a57e7b1d0a4a2376992b717eaece3a01c7d..e64e5cca8b02b52df349e6b16615e3af354310b2 100644 (file)
--- a/index.html
+++ b/index.html
@@ -12,14 +12,28 @@
   <link rel="icon" href="data:,">
   <title>Minimal CREATE2</title>
   <style>
+    :root {
+      color-scheme: light;
+      --bg: hsl(216 100% 97%);
+      --surface: hsl(0 0% 100%);
+      --text: hsl(216 40% 12%);
+      --muted: hsl(216 15% 35%);
+      --border: hsl(216 20% 65%);
+      --accent: hsl(216 75% 32%);
+      --accent-hover: hsl(216 75% 25%);
+      --focus: hsl(216 100% 45%);
+      --radius: 6px;
+      --transition: 150ms ease;
+    }
+
     * {
       box-sizing: border-box;
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-      background: hsl(216deg 100% 95%);
-      color: hsl(216deg 100% 5%);
+      font-family: system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
       display: grid;
       place-items: center;
       block-size: 100dvb;
@@ -32,7 +46,7 @@
       flex-direction: column;
       align-items: center;
       gap: 8px;
-      inline-size: min(80ch, 100dvi - 32px);
+      inline-size: min(80ch, calc(100dvi - 32px));
     }
 
     h1,
@@ -40,38 +54,79 @@
       margin: 0;
     }
 
-    a {
-      font-weight: 700;
-      color: hsl(216deg 50% 40%);
-      text-decoration: none;
+    label,
+    button {
+      align-self: start;
+    }
+
+    label {
+      font-size: 1.1rem;
+      font-weight: 600;
     }
 
-    a:hover,
-    a:focus {
+    a {
+      color: var(--accent);
+      font-weight: 600;
       text-decoration: underline;
+      text-decoration-color: transparent;
+      text-underline-offset: 0.2em;
+      text-decoration-thickness: 2px;
+      transition: text-decoration-color var(--transition);
     }
 
-    label,
-    button {
-      align-self: start;
+    a:hover {
+      color: var(--accent-hover);
+      text-decoration-color: currentColor;
     }
 
     input {
-      font-size: 1rem;
       inline-size: 100%;
-      padding: 4px;
-      border-radius: 4px;
-      border: hsl(216deg 100% 5%);
+      padding: 10px 12px;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      background: var(--surface);
+      color: var(--text);
+      font: inherit;
+      transition: border-color var(--transition), box-shadow var(--transition);
+    }
+
+    input:hover {
+      border-color: var(--muted);
+    }
+
+    input:focus-visible {
+      border-color: var(--focus);
+      outline: 2px solid var(--focus);
     }
 
     button {
-      font-size: 1rem;
-      padding: 4px 8px;
+      min-block-size: 44px;
+      padding: 10px 16px;
+      border: 1px solid var(--accent);
+      border-radius: var(--radius);
+      background: var(--accent);
+      color: white;
+      font: inherit;
+      font-weight: 600;
+      line-height: 1.4;
       cursor: pointer;
+      transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
+    }
+
+    button:hover {
+      background: var(--accent-hover);
+      border-color: var(--accent-hover);
+    }
+
+    button:focus-visible,
+    a:focus-visible {
+      outline: 2px solid var(--focus);
     }
 
     output {
       inline-size: 100%;
+      color: var(--text);
+      line-height: 1.5;
     }
   </style>
 </head>