Extract shared demo styles into src/demo.css

chapterjason · claude · chapterjason · commit 0b4928f210d9 · 2026-04-20T10:54:04.000Z
Hoists the overlapping nav/layout rules into one stylesheet and
themes via CSS variables switched by a body.theme-dark class, so
the two demo pages keep only the rules specific to their content
(textarea vs #term).

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/demo.css b/src/demo.css
@@ -0,0 +1,66 @@
+:root {
+  --nav-bg: #f3f4f6;
+  --nav-border: #e5e7eb;
+  --nav-link: #2563eb;
+  --body-bg: transparent;
+  --body-fg: inherit;
+}
+
+body.theme-dark {
+  --nav-bg: #111827;
+  --nav-border: #1f2937;
+  --nav-link: #93c5fd;
+  --body-bg: #0b1220;
+  --body-fg: #cbd5e1;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  font-family: system-ui, sans-serif;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  background: var(--body-bg);
+  color: var(--body-fg);
+}
+
+.nav {
+  padding: 10px 16px;
+  font-size: 14px;
+  background: var(--nav-bg);
+  border-bottom: 1px solid var(--nav-border);
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.nav a {
+  color: var(--nav-link);
+  text-decoration: none;
+}
+
+.nav a:hover {
+  text-decoration: underline;
+}
+
+.nav .status {
+  margin-left: auto;
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.demo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 12px;
+}
+
+virtual-keyboard {
+  flex: none;
+}
diff --git a/src/index.html b/src/index.html
@@ -5,18 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="mobile-web-app-capable" content="yes" />
     <title>Virtual Keyboard</title>
+    <link rel="stylesheet" href="./demo.css" />
     <style>
-      html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; }
-      body { display: flex; flex-direction: column; }
-      .nav { padding: 10px 16px; font-size: 14px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
-      .nav a { color: #2563eb; text-decoration: none; margin-right: 12px; }
-      .nav a:hover { text-decoration: underline; }
-      .demo { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+      .demo { padding: 16px; gap: 12px; }
       .demo textarea {
         flex: 1; min-height: 120px; padding: 12px; font-size: 16px;
         border: 1px solid #ccc; border-radius: 8px; resize: none;
       }
-      virtual-keyboard { flex: none; }
     </style>
   </head>
   <body>
diff --git a/src/linux.html b/src/linux.html
@@ -5,19 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="mobile-web-app-capable" content="yes" />
     <title>Virtual Keyboard — Linux (v86)</title>
+    <link rel="stylesheet" href="./demo.css" />
     <style>
-      html, body { height: 100%; margin: 0; background: #0b1220; color: #cbd5e1; font-family: system-ui, sans-serif; }
-      body { display: flex; flex-direction: column; }
-      .nav { padding: 10px 16px; font-size: 14px; background: #111827; border-bottom: 1px solid #1f2937; display: flex; gap: 12px; align-items: center; }
-      .nav a { color: #93c5fd; text-decoration: none; }
-      .nav a:hover { text-decoration: underline; }
-      .nav .status { margin-left: auto; color: #94a3b8; font-size: 12px; }
-      .demo { flex: 1; padding: 12px; display: flex; flex-direction: column; min-height: 0; }
       #term { flex: 1; min-height: 0; }
-      virtual-keyboard { flex: none; }
     </style>
   </head>
-  <body>
+  <body class="theme-dark">
     <div class="nav">
       <a href="./index.html">← Native</a>
       <span>Linux (busybox on v86 · x86 WASM)</span>
