chore: update dependencies and fix blog styling (#24)

## Summary ### Dependency Updates - Pin all dependencies to exact versions - Bump minor/patch versions across all packages - Upgrade **Next.js** 15 → 16.1.6 (async params/cookies already handled) - Upgrade **react-markdown** 9 → 10.1.0 (no breaking changes in use) - Upgrade **@types/node** 20 → 24.10.13 (aligns with Node 24 runtime) - Upgrade **Tailwind CSS** 3 → 4.2.0 (CSS-first config with `@tailwindcss/postcss`) ### Style Fixes - Replace Inter font import with CDN-based global font settings - Fix blockquote dark mode text visibility using `.is-dark` selector - Replace full dotted blockquote border with left-only accent border - Move `<link>` elements into proper `<head>` to resolve React hydration error - Add `precedence="default"` to highlight.js stylesheet link - Wrap global element rules in `@layer base` to restore Tailwind v4 utility precedence Closes #8 Closes #9 Closes #10 Closes #11 Closes #12 Closes #13 Closes #14 Closes #15 Closes #16 Closes #17 Closes #18 Closes #19 Closes #20 Closes #21 Closes #22 Closes #23 ✨ This PR was created with help from Hikari~ 🌸 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Reviewed-on: #24 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
2026-03-03 19:37:59 -08:00
parent 30415c5e7e
commit 7fc742d199
13 changed files with 1991 additions and 1353 deletions
@@ -1,46 +1,87 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

-* {
-  font-family: "Vampyr", monospace;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }

-h1 {
-  @apply text-4xl;
+@layer base {
+  h1 {
+    @apply text-4xl;
+  }
+
+  h2 {
+    @apply text-2xl;
+  }
+
+  a {
+    @apply underline;
+  }
+
+  li {
+    @apply list-disc;
+    @apply list-inside;
+    @apply text-left;
+  }
+
+  p {
+    @apply text-justify;
+    @apply mb-2;
+  }
+
+  img {
+    @apply mx-auto;
+  }
+
+  blockquote,
+  blockquote p {
+    @apply text-center;
+  }
+
+  blockquote {
+    border-left: 5px solid var(--accent);
+    box-shadow: inset 4px 0 10px -4px var(--accent);
+    padding-left: 1rem;
+    margin: 1rem;
+  }
+
+  figcaption {
+    @apply text-sm;
+    @apply text-center;
+    @apply italic;
+  }
+
+  pre {
+    @apply text-left;
+    @apply bg-gray-100;
+    @apply p-2;
+    @apply rounded-md;
+    @apply border;
+    @apply border-gray-300;
+    @apply overflow-x-auto;
+    @apply whitespace-pre-wrap;
+    @apply break-words;
+    @apply text-sm;
+    @apply font-mono;
+  }
+
+  code:not(pre code) {
+    @apply text-sm;
+    @apply font-mono;
+    @apply bg-gray-100;
+    @apply p-1;
+    @apply rounded-md;
+    @apply border;
+    @apply border-gray-300;
+    @apply overflow-x-auto;
+    @apply whitespace-pre-wrap;
+    @apply break-words;
+  }
 }

-h2 {
-  @apply text-2xl;
-}
-
-a {
-  @apply underline;
-}
-
-li {
-  @apply list-disc;
-  @apply list-inside;
-  @apply text-left;
-}
-
-p {
-  @apply text-justify;
-  @apply mb-2;
-}
-
-img {
-  @apply mx-auto;
-}
-
-blockquote,
-blockquote p {
-  @apply text-center;
-}
-
-blockquote {
-  border: 2px dotted;
-  margin: 1rem;
+.is-dark blockquote,
+.is-dark blockquote p {
+  color: var(--foreground);
 }

@layer utilities {
@@ -48,36 +89,3 @@ blockquote {
    text-wrap: balance;
  }
 }
-
-figcaption {
-  @apply text-sm;
-  @apply text-center;
-  @apply italic;
-}
-
-pre {
-  @apply text-left;
-  @apply bg-gray-100;
-  @apply p-2;
-  @apply rounded-md;
-  @apply border;
-  @apply border-gray-300;
-  @apply overflow-x-auto;
-  @apply whitespace-pre-wrap;
-  @apply break-words;
-  @apply text-sm;
-  @apply font-mono;
-}
-
-code:not(pre code) {
-  @apply text-sm;
-  @apply font-mono;
-  @apply bg-gray-100;
-  @apply p-1;
-  @apply rounded-md;
-  @apply border;
-  @apply border-gray-300;
-  @apply overflow-x-auto;
-  @apply whitespace-pre-wrap;
-  @apply break-words;
-}