1 files changed, 138 insertions, 27 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 3ab93b7..858df86 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -631,7 +631,7 @@ code {
 }
 
 pre {
-  background-color: rgba(16, 30, 45, 0.8);
+  background-color: rgba(var(--surface-rgb), 0.8);
   overflow-x: auto;
   border-radius: 0.25rem;
   border-width: 1px;
@@ -639,10 +639,6 @@ pre {
   padding: 1rem;
 }
 
-html.theme-light pre {
-  background-color: rgba(240, 243, 247, 0.8);
-}
-
 pre code {
   border-width: 0px;
   background-color: transparent;
@@ -650,7 +646,7 @@ pre code {
   color: var(--text);
 }
 
-*:focus {
+*:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
@@ -684,9 +680,9 @@ button,
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1060px) {
   .container {
-    max-width: 1024px;
+    max-width: 1060px;
   }
 }
 
@@ -1268,6 +1264,22 @@ button,
 
 /* Glow effect utility */
 
+/* Article type badge styles */
+
+/* Hero typography with fluid sizing */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1556,6 +1568,10 @@ button,
   border-top-width: 1px;
 }
 
+.border-\[--type-quote\] {
+  border-color: var(--type-quote);
+}
+
 .border-accent {
   border-color: var(--accent);
 }
@@ -1812,6 +1828,7 @@ button,
   --bg: #060b10;
   --bg2: #0c1520;
   --surface: #101e2d;
+  --surface-rgb: 16, 30, 45;
   --border: #182840;
   --accent: #a855f7;
   --accent2: #00ff88;
@@ -1819,6 +1836,12 @@ button,
   --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 */
@@ -1827,6 +1850,7 @@ html.theme-light {
   --bg: #ffffff;
   --bg2: #f8f9fa;
   --surface: #f0f3f7;
+  --surface-rgb: 240, 243, 247;
   --border: #d9dfe8;
   --accent: #9333ea;
   --accent2: #10b981;
@@ -1834,6 +1858,35 @@ 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;
+  }
 }
 
 /* Prose overrides for light theme */
@@ -1885,19 +1938,37 @@ html.theme-light .prose-invert blockquote {
   border-left-color: var(--accent);
 }
 
-/* Responsive utilities */
+/* Responsive container utilities - mobile-first */
 
-@media (max-width: 768px) {
-  .sm\:container {
-    max-width: 100%;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
+.container {
+  max-width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
-@media (min-width: 769px) {
-  .md\:container {
+@media (min-width: 768px) {
+  .container {
     max-width: 56rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1060px) {
+  .container {
+    max-width: 64rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+/* 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;
   }
 }
 
@@ -1929,10 +2000,60 @@ html.theme-light .prose-invert blockquote {
   opacity: 0.9;
 }
 
+.focus\:not-sr-only:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+.focus\:fixed:focus {
+  position: fixed;
+}
+
+.focus\:left-4:focus {
+  left: 1rem;
+}
+
+.focus\:top-4:focus {
+  top: 1rem;
+}
+
+.focus\:z-50:focus {
+  z-index: 50;
+}
+
+.focus\:rounded:focus {
+  border-radius: 0.25rem;
+}
+
 .focus\:border-accent:focus {
   border-color: var(--accent);
 }
 
+.focus\:bg-accent:focus {
+  background-color: var(--accent);
+}
+
+.focus\:px-4:focus {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.focus\:py-2:focus {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.focus\:text-white:focus {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2016,13 +2137,3 @@ html.theme-light .prose-invert blockquote {
     line-height: 1;
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  .dark\:block {
-    display: block;
-  }
-
-  .dark\:hidden {
-    display: none;
-  }
-}