Rewrite globals.css with spacing, dark‑mode, and focus styles

2026-06-28 20:34:44 -05:00
parent ebfa8dcdb0
commit d8dcd7eadb
1 changed files with 66 additions and 0 deletions
@@ -0,0 +1,66 @@
+/* 1. Add spacing vars
+   Added for consistent responsive spacing
+*/
+:root {
+  --sp-base: 0.5rem;
+  --sp-sm: 1rem;
+  --sp-md: 1.5rem;
+  --sp-lg: 3rem;
+}
+
+/* Existing color vars remain */
+:root {
+  --gold: #E8A849;
+  --cream: #f5f0e8;
+  --navy: #001321;
+  --ink: #1a1a1a;
+  --warm: #a6683c;
+  --bg: #FAF7F0;
+  --surface: #e8eff3;
+}
+
+/* 2. Responsive adjustments */
+@media (min-width: 640px) {
+  .navbar {
+    padding: var(--sp-sm) var(--sp-lg);
+  }
+}
+
+/* 3. Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111;
+    --ink: #faf7f0;
+  }
+}
+
+/* 4. Focus visible */
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--gold);
+  outline-offset: 2px;
+}
+
+/* 5. Navbar link reuse */
+.navbar-link {
+  display: inline-block;
+  color: rgba(245, 240, 232, 0.85);
+  text-decoration: none;
+  font-size: 14px;
+  padding: 6px 0;
+  border-bottom: 1.5px solid transparent;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.navbar-link.active {
+  color: var(--gold);
+  border-color: var(--gold);
+}
+
+.navbar-link:hover {
+  color: var(--cream);
+}
+
+/* 6. Typography helpers */
+h1 { font-size: 2.5rem; font-weight: 700; }
+h2 { font-size: 2rem; font-weight: 600; }