1 files changed, 93 insertions, 13 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index c66092b..2b8cbde 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -7,6 +7,7 @@
   --bg: #060b10;
   --bg2: #0c1520;
   --surface: #101e2d;
+  --surface-rgb: 16, 30, 45;
   --border: #182840;
   --accent: #a855f7;
   --accent2: #00ff88;
@@ -14,6 +15,12 @@
   --text: #c4d6e8;
   --text-dim: #7a9bb8;
   --muted: #304860;
+  /* Article type colors - dark */
+  --type-tech: #a855f7;
+  --type-life: #f59e0b;
+  --type-quote: #00ff88;
+  --type-link: #38bdf8;
+  --type-photo: #ec4899;
 }
 
 /* Light theme overrides */
@@ -21,6 +28,7 @@ html.theme-light {
   --bg: #ffffff;
   --bg2: #f8f9fa;
   --surface: #f0f3f7;
+  --surface-rgb: 240, 243, 247;
   --border: #d9dfe8;
   --accent: #9333ea;
   --accent2: #10b981;
@@ -28,6 +36,34 @@ html.theme-light {
   --text: #1f2937;
   --text-dim: #374151;
   --muted: #d1d5db;
+  /* Article type colors - light */
+  --type-tech: #7c3aed;
+  --type-life: #d97706;
+  --type-quote: #008f5a;
+  --type-link: #0284c7;
+  --type-photo: #be185d;
+}
+
+/* No-JS fallback: prefers-color-scheme light */
+@media (prefers-color-scheme: light) {
+  html:not(.theme-dark) {
+    --bg: #ffffff;
+    --bg2: #f8f9fa;
+    --surface: #f0f3f7;
+    --surface-rgb: 240, 243, 247;
+    --border: #d9dfe8;
+    --accent: #9333ea;
+    --accent2: #10b981;
+    --accent-glow: rgba(147, 51, 234, 0.1);
+    --text: #1f2937;
+    --text-dim: #374151;
+    --muted: #d1d5db;
+    --type-tech: #7c3aed;
+    --type-life: #d97706;
+    --type-quote: #008f5a;
+    --type-link: #0284c7;
+    --type-photo: #be185d;
+  }
 }
 
 @layer base {
@@ -66,19 +102,15 @@ html.theme-light {
   }
 
   pre {
-    background-color: rgba(16, 30, 45, 0.8);
+    background-color: rgba(var(--surface-rgb), 0.8);
     @apply p-4 rounded border border-border overflow-x-auto;
   }
 
-  html.theme-light pre {
-    background-color: rgba(240, 243, 247, 0.8);
-  }
-
   pre code {
     @apply bg-transparent border-0 p-0 text-text;
   }
 
-  *:focus {
+  *:focus-visible {
     @apply ring-2 ring-accent ring-offset-2;
     ring-offset-color: var(--bg);
   }
@@ -144,6 +176,41 @@ html.theme-light {
   .glow-accent {
     box-shadow: 0 0 20px var(--accent-glow);
   }
+
+  /* Article type badge styles */
+  .type-tech {
+    color: var(--type-tech);
+    background-color: rgba(168, 85, 247, 0.1);
+  }
+
+  .type-life {
+    color: var(--type-life);
+    background-color: rgba(245, 158, 11, 0.1);
+  }
+
+  .type-quote {
+    color: var(--type-quote);
+    background-color: rgba(0, 255, 136, 0.1);
+  }
+
+  .type-link {
+    color: var(--type-link);
+    background-color: rgba(56, 189, 248, 0.1);
+  }
+
+  .type-photo {
+    color: var(--type-photo);
+    background-color: rgba(236, 72, 153, 0.1);
+  }
+
+  /* Hero typography with fluid sizing */
+  .hero-title {
+    font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
+  }
+
+  .section-title {
+    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
+  }
 }
 
 /* Prose overrides for light theme */
@@ -194,15 +261,28 @@ html.theme-light .prose-invert blockquote {
   border-left-color: var(--accent);
 }
 
-/* Responsive utilities */
-@media (max-width: 768px) {
-  .sm\:container {
-    @apply max-w-full px-4;
+/* Responsive container utilities - mobile-first */
+.container {
+  @apply max-w-full px-4;
+}
+
+@media (min-width: 768px) {
+  .container {
+    @apply max-w-4xl px-6;
+  }
+}
+
+@media (min-width: 1060px) {
+  .container {
+    @apply max-w-5xl px-8;
   }
 }
 
-@media (min-width: 769px) {
-  .md\:container {
-    @apply max-w-4xl;
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
 }