add output.css

.gitignore

@@ -8,5 +8,4 @@ package-lock.json
 dist
 .temp
 public
-static/css
 tailwindcss

package.json

@@ -5,9 +5,11 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:css": "tailwindcss build ./sass/main.scss -o ./static/css/main.css",
+    "build:output": "tailwindcss build ./sass/main.scss -o ./static/css/output.css",
     "watch:css": "tailwindcss build ./sass/main.scss -o ./static/css/main.css --watch",
-    "build": "npm run build:css && zola build",
+    "watch:output": "tailwindcss build ./sass/main.scss -o ./static/css/output.css --watch",
-    "dev": "concurrently \"npm run watch:css\" \"zola serve\""
+    "build": "npm run build:css && npm run build:output && zola build",
+    "dev": "concurrently \"npm run watch:css\" \"npm run watch:output\" \"zola serve\""
   },
   "keywords": [],
   "author": "",

static/css/dark-mode.css

@@ -0,0 +1,52 @@
+/* Dark mode styles */
+.dark .prose {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.dark .prose h1,
+.dark .prose h2,
+.dark .prose h3,
+.dark .prose h4,
+.dark .prose h5,
+.dark .prose h6 {
+  color: white;
+}
+
+.dark .prose a {
+  color: #3b82f6;
+}
+
+.dark .prose strong {
+  color: white;
+}
+
+.dark .prose code {
+  color: white;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.dark .prose blockquote {
+  color: rgba(255, 255, 255, 0.8);
+  border-left-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark .prose hr {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark .prose table th {
+  color: white;
+}
+
+.dark .prose table td {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Transition effects for theme switching */
+html.transition,
+html.transition *,
+html.transition *:before,
+html.transition *:after {
+  transition: all 0.3s ease-in-out !important;
+  transition-delay: 0 !important;
+}

static/css/output.css

@@ -0,0 +1,57 @@
+/* Tailwind CSS output file */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles */
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+/* Transition effects */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Additional utility classes */
+.text-shadow {
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.hover-grow {
+  transition: transform 0.3s ease;
+}
+
+.hover-grow:hover {
+  transform: scale(1.05);
+}