refactor: css cleanup and style tweaks

astro.config.mjs

@@ -5,7 +5,6 @@ import swup from "@swup/astro";
 import Compress from "astro-compress";
 import icon from "astro-icon";
 import { defineConfig } from "astro/config";
-import Color from "colorjs.io";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeComponents from "rehype-components"; /* Render the custom directive content */
 import rehypeKatex from "rehype-katex";
@@ -19,23 +18,17 @@ import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js";
 import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
 import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
 
-const oklchToHex = (str) => {
-  const DEFAULT_HUE = 250;
-  const regex = /-?\d+(\.\d+)?/g;
-  const matches = str.string.match(regex);
-  const lch = [matches[0], matches[1], DEFAULT_HUE];
-  return new Color("oklch", lch).to("srgb").toString({
-    format: "hex",
-  });
-};
-
 // https://astro.build/config
 export default defineConfig({
   site: "https://fuwari.vercel.app/",
   base: "/",
   trailingSlash: "always",
   integrations: [
-    tailwind(),
+    tailwind(
+        {
+          nesting: true,
+        }
+    ),
     swup({
       theme: false,
       animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
@@ -133,14 +126,5 @@ export default defineConfig({
         },
       },
     },
-    css: {
-      preprocessorOptions: {
-        stylus: {
-          define: {
-            oklchToHex: oklchToHex,
-          },
-        },
-      },
-    },
   },
 });

package.json

@@ -33,7 +33,6 @@
     "astro": "^4.16.13",
     "astro-compress": "^2.3.5",
     "astro-icon": "^1.1.1",
-    "colorjs.io": "^0.5.2",
     "hastscript": "^9.0.0",
     "markdown-it": "^14.1.0",
     "mdast-util-to-string": "^4.0.0",
@@ -50,7 +49,6 @@
     "remark-github-admonitions-to-directives": "^1.0.5",
     "remark-math": "^6.0.0",
     "sanitize-html": "^2.13.1",
-    "sass": "^1.80.4",
     "sharp": "^0.33.5",
     "stylus": "^0.63.0",
     "svelte": "^5.2.2",
@@ -64,7 +62,9 @@
     "@rollup/plugin-yaml": "^4.1.2",
     "@types/markdown-it": "^14.1.2",
     "@types/mdast": "^4.0.4",
-    "@types/sanitize-html": "^2.13.0"
+    "@types/sanitize-html": "^2.13.0",
+    "postcss-import": "^16.1.0",
+    "postcss-nesting": "^13.0.1"
   },
   "packageManager": "[email protected]"
 }

postcss.config.mjs

@@ -0,0 +1,11 @@
+import postcssImport from 'postcss-import';
+import postcssNesting from 'tailwindcss/nesting/index.js';
+import tailwindcss from 'tailwindcss';
+
+export default {
+    plugins: {
+        'postcss-import': postcssImport,          // to combine multiple css files
+        'tailwindcss/nesting': postcssNesting,
+        tailwindcss: tailwindcss,
+    }
+};

src/components/ArchivePanel.astro

@@ -79,7 +79,7 @@ function formatTag(tag: string[]) {
                 {group.posts.map(post => (
                     <a href={getPostUrlBySlug(post.slug)}
                        aria-label={post.data.title}
-                       class="group btn-plain block h-10 w-full rounded-lg hover:text-[initial]"
+                       class="group btn-plain !block h-10 w-full rounded-lg hover:text-[initial]"
                     >
                         <div class="flex flex-row justify-start items-center h-full">
                             <!-- date -->