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;
-}
@@ -3,16 +3,12 @@
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
-import { Inter } from "next/font/google";
 import Script from "next/script";
 import type { Metadata } from "next";
 import type { JSX, ReactNode } from "react";
 // eslint-disable-next-line import/no-unassigned-import -- Import global styles.
 import "./globals.css";

-// eslint-disable-next-line new-cap -- This is a function call.
-const inter = Inter({ subsets: [ "latin" ] });
-
 const metadata: Metadata = {
  description: "The personal musings of a transfem software engineer.",
  openGraph:   {
@@ -40,6 +36,14 @@ const RootLayout = ({
 }>): JSX.Element => {
  return (
    <html lang="en">
+      <head>
+        <link href="https://cdn.nhcarrigan.com/logo.png" rel="icon" sizes="any" />
+        <link
+          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"
+          precedence="default"
+          rel="stylesheet"
+        ></link>
+      </head>
      <Script
        async={true}
        defer={true}
@@ -47,12 +51,7 @@ const RootLayout = ({
        strategy={"afterInteractive"}
        type="text/javascript"
      ></Script>
-      <link href="https://cdn.nhcarrigan.com/logo.png" rel="icon" sizes="any" />
-      <link
-        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"
-        rel="stylesheet"
-      ></link>
-      <body className={inter.className}>{children}</body>
+      <body>{children}</body>
    </html>
  );
 };