Update something

package.json

@@ -15,6 +15,9 @@
   "dependencies": {
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
+    "@fontsource-variable/red-hat-mono": "^5.2.5",
+    "@fontsource/fira-mono": "^5.2.5",
+    "@fontsource/ibm-plex-mono": "^5.2.5",
     "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/vite": "^4.0.12",
     "astro": "^5.4.2",

pnpm-lock.yaml

@@ -14,6 +14,15 @@ importers:
       '@astrojs/sitemap':
         specifier: ^3.2.1
         version: 3.2.1
+      '@fontsource-variable/red-hat-mono':
+        specifier: ^5.2.5
+        version: 5.2.5
+      '@fontsource/fira-mono':
+        specifier: ^5.2.5
+        version: 5.2.5
+      '@fontsource/ibm-plex-mono':
+        specifier: ^5.2.5
+        version: 5.2.5
       '@resvg/resvg-js':
         specifier: ^2.6.2
         version: 2.6.2
@@ -360,6 +369,15 @@ packages:
     resolution: {integrity: sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@fontsource-variable/red-hat-mono@5.2.5':
+    resolution: {integrity: sha512-BP2zCfaBvjvx/+ijLYH6joqQ7aZyM5XecNuXSPUQ3G05fjU3q2MfEPT8CjIQ6LgsSpCxWOmrdlxOofDb/8pp2g==}
+
+  '@fontsource/fira-mono@5.2.5':
+    resolution: {integrity: sha512-rujrs+J+w2Nmqd6zsNQTzT7eYLKrSQWdF7SuAdjjXVs+Si06Ag6etOYFmF3Mzb0NufmEIPCDUS2ppt6hxX+SLg==}
+
+  '@fontsource/ibm-plex-mono@5.2.5':
+    resolution: {integrity: sha512-G09N3GfuT9qj3Ax2FDZvKqZttzM3v+cco2l8uXamhKyXLdmlaUDH5o88/C3vtTHj2oT7yRKsvxz9F+BXbWKMYA==}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -2975,6 +2993,12 @@ snapshots:
       '@eslint/core': 0.12.0
       levn: 0.4.1
 
+  '@fontsource-variable/red-hat-mono@5.2.5': {}
+
+  '@fontsource/fira-mono@5.2.5': {}
+
+  '@fontsource/ibm-plex-mono@5.2.5': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':

src/components/Header.astro

@@ -28,7 +28,7 @@ const isActive = (path: string) => {
   <a
     id="skip-to-content"
     href="#main-content"
-    class="absolute -top-full left-16 z-50 bg-background px-3 py-2 text-accent backdrop-blur-lg transition-all focus:top-4"
+    class="bg-background text-accent absolute -top-full left-16 z-50 px-3 py-2 backdrop-blur-lg transition-all focus:top-4"
   >
     Skip to content
   </a>
@@ -38,13 +38,13 @@ const isActive = (path: string) => {
   >
     <div
       id="top-nav-wrap"
-      class="relative flex w-full items-start justify-between bg-background p-4 sm:py-6"
+      class="bg-background relative flex w-full items-start justify-between p-4 sm:py-6"
     >
       <a
         href="/"
-        class="absolute py-1 text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
+        class="relative py-1 text-2xl leading-7 font-semibold whitespace-nowrap sm:static"
       >
-        <Logo class="scale-75 dark:invert" />
+        <Logo class="translate-5 scale-75" />
       </a>
       <nav
         id="nav-menu"
@@ -64,7 +64,7 @@ const isActive = (path: string) => {
           id="menu-items"
           class:list={[
             "mt-4 grid w-44 grid-cols-2 place-content-center gap-2",
-            "[&>li>a]:block [&>li>a]:px-4 [&>li>a]:py-3 [&>li>a]:text-center [&>li>a]:font-medium [&>li>a]:hover:text-accent sm:[&>li>a]:px-2 sm:[&>li>a]:py-1",
+            "[&>li>a]:hover:text-accent [&>li>a]:block [&>li>a]:px-4 [&>li>a]:py-3 [&>li>a]:text-center [&>li>a]:font-medium sm:[&>li>a]:px-2 sm:[&>li>a]:py-1",
             "hidden",
             "sm:mt-0 sm:ml-0 sm:flex sm:w-auto sm:gap-x-5 sm:gap-y-0",
           ]}
@@ -123,7 +123,7 @@ const isActive = (path: string) => {
               <li class="col-span-1 flex items-center justify-center">
                 <button
                   id="theme-btn"
-                  class="focus-outline relative size-12 p-4 sm:size-8 hover:[&>svg]:stroke-accent"
+                  class="focus-outline hover:[&>svg]:stroke-accent relative size-12 p-4 sm:size-8"
                   title="Toggles light & dark"
                   aria-label="auto"
                   aria-live="polite"

src/layouts/Layout.astro

@@ -3,7 +3,9 @@ import { ClientRouter } from "astro:transitions";
 import { SITE } from "@/config";
 import { LOCALE } from "@/constants";
 import "@/styles/global.css";
-
+import "@fontsource/fira-mono";
+import "@fontsource/ibm-plex-mono/300.css";
+import "@fontsource/ibm-plex-mono/400.css";
 const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;
 
 export interface Props {
@@ -144,5 +146,7 @@ const structuredData = {
     margin: 0;
     width: 100%;
     height: 100%;
+    font-family: "Red Hat Mono Variable", monospace;
+    font-weight: 400;
   }
 </style>

src/styles/global.css

@@ -40,7 +40,7 @@ html[data-theme="dark"] {
   }
 
   body {
-    @apply flex min-h-svh flex-col bg-background font-mono text-foreground selection:bg-accent/75 selection:text-background;
+    @apply flex min-h-svh flex-col bg-background text-foreground selection:bg-accent/75 selection:text-background;
   }
 
   a,

src/styles/typography.css

@@ -1,5 +1,10 @@
 @plugin '@tailwindcss/typography';
 
+/* html {
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-weight: 300;
+} */
+
 @layer base {
   .prose {
     @apply prose-headings:!mb-3 prose-headings:!text-foreground prose-h3:italic prose-p:!text-foreground prose-a:!text-foreground prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-accent prose-blockquote:!border-l-accent/50 prose-blockquote:opacity-80 prose-figcaption:!text-foreground prose-figcaption:opacity-70 prose-strong:!text-foreground prose-code:rounded prose-code:bg-muted/75 prose-code:p-1 prose-code:!text-foreground prose-code:before:!content-none prose-code:after:!content-none prose-ol:!text-foreground prose-ul:overflow-x-clip prose-ul:!text-foreground prose-li:marker:!text-accent prose-table:text-foreground prose-th:border prose-th:border-border prose-td:border prose-td:border-border prose-img:mx-auto prose-img:!my-2 prose-img:border-2 prose-img:border-border prose-hr:!border-border;

tailwind.config.cjs

@@ -1,81 +0,0 @@
-function withOpacity(variableName) {
-  return ({ opacityValue }) => {
-    if (opacityValue !== undefined) {
-      return `rgba(var(${variableName}), ${opacityValue})`;
-    }
-    return `rgb(var(${variableName}))`;
-  };
-}
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["selector", "[data-theme='dark']"],
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,css}"],
-  theme: {
-    // Remove the following screen breakpoint or add other breakpoints
-    // if one breakpoint is not enough for you
-    screens: {
-      sm: "640px",
-    },
-
-    extend: {
-      textColor: {
-        skin: {
-          base: withOpacity("--color-text-base"),
-          accent: withOpacity("--color-accent"),
-          inverted: withOpacity("--color-fill"),
-        },
-      },
-      backgroundColor: {
-        skin: {
-          fill: withOpacity("--color-fill"),
-          accent: withOpacity("--color-accent"),
-          inverted: withOpacity("--color-text-base"),
-          card: withOpacity("--color-card"),
-          "card-muted": withOpacity("--color-card-muted"),
-        },
-      },
-      outlineColor: {
-        skin: {
-          fill: withOpacity("--color-accent"),
-        },
-      },
-      borderColor: {
-        skin: {
-          line: withOpacity("--color-border"),
-          fill: withOpacity("--color-text-base"),
-          accent: withOpacity("--color-accent"),
-        },
-      },
-      fill: {
-        skin: {
-          base: withOpacity("--color-text-base"),
-          accent: withOpacity("--color-accent"),
-        },
-        transparent: "transparent",
-      },
-      stroke: {
-        skin: {
-          accent: withOpacity("--color-accent"),
-        },
-      },
-      fontFamily: {
-        mono: ["IBM Plex Mono", "monospace"],
-      },
-
-      typography: {
-        DEFAULT: {
-          css: {
-            pre: {
-              color: false,
-            },
-            code: {
-              color: false,
-            },
-          },
-        },
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/typography")],
-};