some more arguably unnecessary refactoring

components/layout/footer.tsx

@@ -25,13 +25,13 @@ const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => {
 
       <div>
         Made with{" "}
-        <HeartIcon className="animate-heartbeat stroke-destructive fill-destructive mx-[1px] inline size-[16px] align-text-top" />{" "}
+        <HeartIcon className="animate-heartbeat stroke-destructive fill-destructive mx-0.5 inline size-4 align-text-top" />{" "}
         and{" "}
         <Link
           href="https://nextjs.org/"
           title="Powered by Next.js"
           aria-label="Next.js"
-          className="text-foreground/85 hover:text-muted-foreground/60 hover:no-underline"
+          className="text-foreground/85 hover:text-foreground/60 hover:no-underline"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -39,7 +39,7 @@ const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => {
             stroke="currentColor"
             strokeWidth="0"
             viewBox="0 0 24 24"
-            className="mx-[1px] inline size-[16px] align-text-top"
+            className="mx-0.5 inline size-4 align-text-top"
           >
             <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
           </svg>
@@ -48,7 +48,7 @@ const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => {
         <Link
           href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
           title="View Source on GitHub"
-          className="border-muted-foreground text-foreground/85 hover:border-muted-foreground/60 border-b-2 pb-0.5 hover:no-underline"
+          className="border-muted-foreground text-foreground/85 hover:border-muted-foreground/60 border-b-1 pb-0.5 hover:no-underline"
         >
           View source.
         </Link>

components/layout/menu-item.tsx

@@ -1,7 +1,7 @@
 import Link from "@/components/link";
 import { cn } from "@/lib/utils";
 import type { ComponentPropsWithoutRef } from "react";
-import type { LucideIcon } from "lucide-react";
+import type { MenuItemConfig } from "@/lib/config/menu";
 
 const MenuItem = ({
   text,
@@ -10,17 +10,15 @@ const MenuItem = ({
   current,
   className,
   ...rest
-}: Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
-  text?: string;
-  href?: string;
-  icon?: LucideIcon;
-  current?: boolean;
-}) => {
+}: Omit<ComponentPropsWithoutRef<typeof Link>, "href"> &
+  MenuItemConfig & {
+    current?: boolean;
+  }) => {
   const Icon = icon;
 
   const item = (
     <>
-      {Icon && <Icon className="stroke-foreground/85 block size-[28px] md:size-[20px]" />}
+      {Icon && <Icon className="stroke-foreground/85 block h-7 w-7 md:h-5 md:w-5" />}
       {text && <span className="ml-3 text-sm leading-none font-medium tracking-wide max-md:sr-only">{text}</span>}
     </>
   );

components/layout/menu.tsx

@@ -11,18 +11,21 @@ const Menu = ({ className, ...rest }: ComponentPropsWithoutRef<"ul">) => {
   const segment = useSelectedLayoutSegment() || "";
 
   return (
-    <ul className={cn("flex max-w-2/3 flex-row justify-between md:max-w-none md:justify-end", className)} {...rest}>
+    <ul
+      className={cn("flex max-w-2/3 flex-row justify-between md:max-w-none md:justify-end md:space-x-4", className)}
+      {...rest}
+    >
       {menuItems.map((item) => {
-        const isCurrent = item.href === `/${segment}`;
+        const isCurrent = item.href?.split("/")[1] === segment;
 
         return (
-          <li className="max-sm:first-of-type:hidden md:ml-4" key={item.href}>
+          <li className="inline-block max-sm:first-of-type:hidden" key={item.href}>
             <MenuItem {...item} current={isCurrent} />
           </li>
         );
       })}
 
-      <li className="-mr-2.5 md:ml-4">
+      <li className="-mr-2.5 inline-block">
         <MenuItem
           // @ts-ignore
           icon={ThemeToggle}

components/layout/page-title.tsx

@@ -0,0 +1,25 @@
+import Link from "@/components/link";
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+
+const PageTitle = ({
+  canonical,
+  className,
+  children,
+  ...rest
+}: ComponentPropsWithoutRef<"h1"> & {
+  canonical: string;
+}) => {
+  return (
+    <h1 className={cn("mt-0 mb-6 text-left text-3xl font-medium -tracking-[0.015em] lowercase", className)} {...rest}>
+      <Link
+        href={canonical}
+        className="before:text-muted-foreground before:-mr-0.5 before:tracking-widest before:content-['\002E\002F'] hover:no-underline"
+      >
+        {children}
+      </Link>
+    </h1>
+  );
+};
+
+export default PageTitle;

components/layout/theme-toggle.tsx

@@ -13,10 +13,10 @@ const ThemeToggle = ({ ...rest }: ComponentPropsWithoutRef<LucideIcon>) => {
     <button
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       aria-label="Toggle Theme"
-      className="hover:[&_svg]:stroke-warning block bg-transparent p-2.5 hover:cursor-pointer not-dark:[&_.lucide-moon]:hidden dark:[&_.lucide-sun]:hidden"
+      className="hover:*:stroke-warning block bg-transparent p-2.5 hover:cursor-pointer not-dark:[&_.lucide-moon]:hidden dark:[&_.lucide-sun]:hidden"
     >
-      <SunIcon {...rest} />
-      <MoonIcon {...rest} />
+      <SunIcon aria-label="Light Mode" {...rest} />
+      <MoonIcon aria-label="Dark Mode" {...rest} />
     </button>
   );
 };