feat(site): fix dropdown, dark mode and updated comparisons

Author: Vheissu

content/comparisons.md

@@ -15,6 +15,7 @@
     "concurrently": "^9.1.0",
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
+    "postcss-nesting": "^13.0.2",
     "tailwindcss": "^4.0.0-beta.7"
   }
 }

package-lock.json

@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    "postcss-nesting": {},
     "@tailwindcss/postcss": {},
+    "autoprefixer": {},
   },
 };

package.json

@@ -1,24 +1,31 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+@theme {
+  --color-aurelia: #ed2b88;
+  --color-aurelia-light: #ff4da1;
+  --color-aurelia-blue: #003f8c;
+  --color-aurelia-blue-light: #0066cc;
+
+  --animation-float-slow: float 8s ease-in-out infinite;
+  --animation-float-delayed: float 6s ease-in-out infinite 2s;
+  --animation-grid: grid 20s linear infinite;
+  --animation-pulse: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animation-pulse-slow: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animation-pulse-slower: pulse 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animation-pulse-delayed: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite 2s;
+}
+
+@variant dark (.dark &);
+
 @layer base {
   :root {
     --nav-height: 5rem;
   }
 
-  :root[data-theme="light"] {
-    background-color: #f7fafc;
-    color: #1a202c;
-  }
-  
-  :root[data-theme="dark"] {
-    background-color: #1a202c;
-    color: #f7fafc;
-  }
-
   /* Code block styling */
   .code-block {
-    @apply bg-gray-50 rounded-lg p-1;
+    @apply bg-gray-50 dark:bg-gray-800 rounded-lg p-1;
   }
 
   .code-block .highlight {
@@ -31,57 +38,42 @@
 
   /* Syntax highlighting colors */
   .highlight {
-    @apply bg-gray-50;
+    @apply bg-gray-50 dark:bg-gray-800;
   }
 
   .highlight .nx {
-    @apply text-violet-700;
+    @apply text-violet-700 dark:text-violet-400;
   }
 
   .highlight .s1, .highlight .s2 {
-    @apply text-green-600;
+    @apply text-green-600 dark:text-green-400;
   }
 
   .highlight .k, .highlight .kd {
-    @apply text-purple-600;
+    @apply text-purple-600 dark:text-purple-400;
   }
 
   .highlight .c1, .highlight .cm {
-    @apply text-gray-500;
+    @apply text-gray-500 dark:text-gray-400;
   }
 
   .highlight .p {
-    @apply text-gray-700;
+    @apply text-gray-700 dark:text-gray-300;
   }
 
   .highlight .o {
-    @apply text-gray-900;
+    @apply text-gray-900 dark:text-gray-100;
   }
 
   .highlight .nt {
-    @apply text-violet-600;
+    @apply text-violet-600 dark:text-violet-400;
   }
 
   .highlight .na {
-    @apply text-amber-600;
+    @apply text-amber-600 dark:text-amber-400;
   }
 }
 
-@theme {
-  --color-aurelia: #ed2b88;
-  --color-aurelia-light: #ff4da1;
-  --color-aurelia-blue: #003f8c;
-  --color-aurelia-blue-light: #0066cc;
-
-  --animation-float-slow: float 8s ease-in-out infinite;
-  --animation-float-delayed: float 6s ease-in-out infinite 2s;
-  --animation-grid: grid 20s linear infinite;
-  --animation-pulse: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animation-pulse-slow: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animation-pulse-slower: pulse 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animation-pulse-delayed: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite 2s;
-}
-
 @layer keyframes {
   @keyframes float {
     0%,
@@ -151,6 +143,17 @@
   .oklch {
     color: unset;
   }
+
+  /* Dropdown menu styles */
+  .dropdown-open {
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: translateY(0) !important;
+  }
+
+  .dropdown-active .dropdown-chevron {
+    transform: rotate(180deg);
+  }
 }
 
 html {