Add prettier-plugin-css and update header border

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "plugins": ["prettier-plugin-astro"],
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
   "overrides": [
     {
       "files": "*.astro",

package-lock.json

@@ -17,10 +17,11 @@
       },
       "devDependencies": {
         "@tailwindcss/typography": "0.5.16",
-        "@types/markdown-it": "^14.1.2",
+        "@types/markdown-it": "14.1.2",
-        "@types/sanitize-html": "^2.15.0",
+        "@types/sanitize-html": "2.15.0",
         "prettier": "3.5.3",
-        "prettier-plugin-astro": "0.14.1"
+        "prettier-plugin-astro": "0.14.1",
+        "prettier-plugin-tailwindcss": "0.6.11"
       }
     },
     "node_modules/@astrojs/compiler": {
@@ -4486,6 +4487,85 @@
         "node": "^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+      "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.30.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",

package.json

@@ -19,9 +19,10 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "0.5.16",
-    "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it": "14.1.2",
-    "@types/sanitize-html": "^2.15.0",
+    "@types/sanitize-html": "2.15.0",
     "prettier": "3.5.3",
-    "prettier-plugin-astro": "0.14.1"
+    "prettier-plugin-astro": "0.14.1",
+    "prettier-plugin-tailwindcss": "0.6.11"
   }
 }

src/components/Footer.astro

@@ -1,5 +1,5 @@
 <footer
-  class="flex flex-col items-center p-4 bg-neutral-100 dark:bg-neutral-900 prose prose-neutral dark:prose-invert max-w-none prose-a:text-blue-800 prose-a:dark:text-blue-300 prose-a:hover:no-underline"
+  class="prose prose-neutral dark:prose-invert prose-a:text-blue-800 prose-a:dark:text-blue-300 prose-a:hover:no-underline flex max-w-none flex-col items-center border-t border-dashed border-neutral-300 bg-white p-4 dark:border-neutral-600 dark:bg-neutral-800"
 >
   <p class="mb-2">&copy; 2025 Thilo Hohlt</p>
   <div class="flex gap-4">

src/components/Header.astro

@@ -13,7 +13,7 @@ const { title, pubDate, modDate, slug } = Astro.props;
 
 <header class="bg-white dark:bg-neutral-800">
   <div
-    class="prose prose-neutral dark:prose-invert mx-auto px-4 py-8 border-b border-neutral-200 dark:border-neutral-700 prose-h1:font-bold"
+    class="prose prose-neutral dark:prose-invert prose-h1:font-bold relative mx-auto px-4 py-8 before:absolute before:start-4 before:end-4 before:bottom-0 before:border-b before:border-neutral-300 before:content-[''] dark:before:border-neutral-600"
   >
     {
       pubDate ? (
@@ -27,7 +27,7 @@ const { title, pubDate, modDate, slug } = Astro.props;
           </p>
           <a
             href={`https://github.com/thiloho/thiloho.github.io/edit/main/src/content/blog/${slug}/index.md`}
-            class="text-blue-800 dark:text-blue-300 inline-flex items-center gap-1 hover:no-underline"
+            class="inline-flex items-center gap-1 text-blue-800 hover:no-underline dark:text-blue-300"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"

src/components/Nav.astro

@@ -4,9 +4,9 @@ import Logo from "../img/TH.svg";
 const routes = ["blog"];
 ---
 
-<nav class="max-w-none bg-neutral-100 dark:bg-neutral-900 sticky top-0 z-10">
+<nav class="sticky top-0 z-10 max-w-none bg-neutral-100 dark:bg-neutral-900">
   <div
-    class="text-neutral-700 dark:text-neutral-300 flex items-center justify-between max-w-screen-lg mx-auto ps-4 pe-2"
+    class="mx-auto flex max-w-screen-lg items-center justify-between ps-4 pe-2 text-neutral-700 dark:text-neutral-300"
   >
     <a href="/" title="Home">
       <Logo width={42} height={42} />
@@ -15,7 +15,7 @@ const routes = ["blog"];
       {
         routes.map((route) => (
           <a
-            class="inline-block p-2 border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
+            class="inline-block border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
             href={`/${route}`}
           >
             {route
@@ -26,7 +26,7 @@ const routes = ["blog"];
         ))
       }
       <button
-        class="theme-toggle p-2 cursor-pointer border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
+        class="theme-toggle cursor-pointer border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
         title="Toggle dark mode"
       >
         <!-- Moon -->
@@ -47,7 +47,7 @@ const routes = ["blog"];
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
-          class="size-5 hidden dark:block"
+          class="hidden size-5 dark:block"
         >
           <path
             d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z"
@@ -55,7 +55,7 @@ const routes = ["blog"];
         </svg>
       </button>
       <a
-        class="inline-grid place-content-center p-2 cursor-pointer border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
+        class="inline-grid cursor-pointer place-content-center border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
         title="RSS feed"
         href="/rss.xml"
       >

src/layouts/PageLayout.astro

@@ -17,7 +17,7 @@ const { title, description, pubDate, modDate, slug } = Astro.props;
 
 <html lang="en" class="light">
   <Head {title} {description} />
-  <body class="min-h-screen flex flex-col">
+  <body class="flex min-h-screen flex-col">
     <Nav />
     <Header {title} {pubDate} {modDate} {slug} />
     <main class="flex-1 bg-white dark:bg-neutral-800">

src/pages/blog/[slug].astro

@@ -30,7 +30,7 @@ const { Content, headings } = await render(article);
   <details class="toc sticky top-0 z-20">
     <summary
       title="Table of contents"
-      class="flex mx-auto w-fit cursor-pointer list-none px-2 py-2.5 border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
+      class="mx-auto flex w-fit cursor-pointer list-none border-b-2 border-transparent px-2 py-2.5 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -44,7 +44,7 @@ const { Content, headings } = await render(article);
       </svg>
     </summary>
     <div
-      class="not-prose border border-neutral-400 dark:border-neutral-600 bg-white dark:bg-neutral-800 p-2 max-h-[calc(100vh-4rem)] overflow-y-scroll"
+      class="not-prose max-h-[calc(100vh-4rem)] overflow-y-scroll border border-neutral-300 bg-white p-2 dark:border-neutral-600 dark:bg-neutral-800"
     >
       <p class="text-center">
         <strong class="text-sm">Table of Contents</strong>
@@ -56,7 +56,7 @@ const { Content, headings } = await render(article);
             .map((heading) => (
               <li>
                 <a
-                  class="text-center text-blue-800 dark:text-blue-300 block py-1 px-2 hover:underline"
+                  class="block px-2 py-1 text-center text-blue-800 hover:underline dark:text-blue-300"
                   href={`#${heading.slug}`}
                   aria-labelledby={`Section: ${heading.slug}`}
                 >