style: add CSS variables and base typography

diff --git a/assets/css/main.css b/assets/css/main.css
index 6c0b66090683f496420f79ee2e8cabe7e9101134..dedab3d59916fc25bccc437d57f83b412033ffe5 100644 (file)
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,15 +1,137 @@
-@import "components/header.css";
-@import "components/footer.css";
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300&family=Oxanium:wght@700;800&display=swap');
+
+@import 'variables.css';
+
+/* Base Styles */
+html {
+  font-size: 17px;
+  scroll-behavior: smooth;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
 body {
-  color: #222;
-  font-family: sans-serif;
-  line-height: 1.5;
-  margin: 1rem;
-  max-width: 768px;
+  background-color: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  line-height: 1.95;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+/* Typography */
+h1 {
+  font-family: var(--font-head);
+  font-size: var(--fs-h2);
+  font-weight: 800;
+  line-height: 1.1;
+  margin-bottom: 0.5rem;
+}
+
+h2 {
+  font-family: var(--font-head);
+  font-size: var(--fs-h2);
+  font-weight: 800;
+  line-height: 1.1;
+  margin: 2rem 0 1rem;
+}
+
+h3 {
+  font-family: var(--font-head);
+  font-size: var(--fs-h3);
+  font-weight: 800;
+  line-height: 1.2;
+  margin: 1.5rem 0 0.75rem;
+}
+
+h4, h5, h6 {
+  font-family: var(--font-head);
+  font-weight: 800;
+  margin: 1rem 0 0.5rem;
+}
+
+p {
+  margin-bottom: 1rem;
 }
 
 a {
-  color: #00e;
+  color: var(--accent);
   text-decoration: none;
+  transition: var(--transition);
+}
+
+a:hover {
+  color: var(--accent2);
+}
+
+/* Utilities */
+.container {
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+.container-narrow {
+  max-width: var(--container-narrow);
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+main {
+  min-height: calc(100vh - 200px);
+}
+
+/* Lists */
+ul, ol {
+  margin-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+code {
+  font-family: var(--font-mono);
+  background: var(--surface);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+pre {
+  margin-bottom: 1rem;
+  overflow-x: auto;
+}
+
+pre code {
+  padding: 0;
+  background: none;
+  border-radius: 0;
+}
+
+/* Focus styles for accessibility */
+:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+button:focus,
+a:focus {
+  outline: 2px dashed var(--accent);
+  outline-offset: 4px;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }

diff --git a/assets/css/variables.css b/assets/css/variables.css
new file mode 100644 (file)
index 0000000..74e4c86
--- /dev/null
+++ b/assets/css/variables.css
@@ -0,0 +1,90 @@
+/* variables.css */
+
+:root {
+  /* Dark theme colors (default) */
+  --bg:          #060b10;
+  --bg2:         #0c1520;
+  --surface:     #101e2d;
+  --border:      #182840;
+  --accent:      #a855f7;
+  --accent2:     #00ff88;
+  --text:        #c4d6e8;
+  --text-dim:    #7a9bb8;
+  --muted:       #304860;
+
+  /* Type colors */
+  --color-tech:   #a855f7;  /* purple */
+  --color-life:   #f59e0b;  /* amber */
+  --color-quote:  #00ff88;  /* green */
+  --color-link:   #38bdf8;  /* cyan */
+  --color-photo:  #ec4899;  /* pink */
+
+  /* Typography */
+  --font-body:  'IBM Plex Sans', system-ui, sans-serif;
+  --font-mono:  'JetBrains Mono', 'Courier New', monospace;
+  --font-head:  'Oxanium', sans-serif;
+
+  /* Font sizes (base: 17px on html) */
+  --fs-body:    0.95rem;
+  --fs-nav:     0.8rem;
+  --fs-badge:   0.7rem;
+  --fs-btn:     0.8rem;
+  --fs-h3:      1.5rem;
+  --fs-h2:      clamp(1.7rem, 6vw, 3rem);
+
+  /* Layout */
+  --container-max: 1080px;
+  --container-narrow: 768px;
+  --gap-sm:     0.5rem;
+  --gap-md:     1.5rem;
+  --gap-lg:     2.5rem;
+  --gap-xl:     4rem;
+
+  /* Spacing */
+  --section-py-mobile:   4rem;
+  --section-py-desktop:  6rem;
+  --card-px-mobile:      1.5rem;
+  --card-px-desktop:     2rem;
+
+  /* Transitions */
+  --transition: all 0.2s ease;
+  --transition-slow: all 0.75s cubic-bezier(0.16,1,0.3,1);
+}
+
+html.theme-light {
+  /* Light theme */
+  --bg:          #f0f4f8;
+  --bg2:         #e2eaf4;
+  --surface:     #d4dff0;
+  --border:      #a8bdd8;
+  --accent:      #7c3aed;
+  --accent2:     #008f5a;
+  --text:        #0d1b2a;
+  --text-dim:    #2e4a6a;
+  --muted:       #6888a8;
+}
+
+/* Breakpoints as CSS variables for reference */
+@media (max-width: 479px) {
+  :root {
+    --bp: "mobile";
+  }
+}
+
+@media (min-width: 480px) {
+  :root {
+    --bp: "sm";
+  }
+}
+
+@media (min-width: 768px) {
+  :root {
+    --bp: "md";
+  }
+}
+
+@media (min-width: 1200px) {
+  :root {
+    --bp: "lg";
+  }
+}