fix various hover styles

app/contact/page.tsx

@@ -31,7 +31,7 @@ const Page = () => {
         You can grab my public key here:{" "}
         <Link
           href="https://jrvs.io/pgp"
-          className="bg-muted relative rounded-sm px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium tracking-wider [word-spacing:-0.3em]"
+          className="bg-muted relative rounded-sm px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium tracking-wider [word-spacing:-0.25em]"
         >
           6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39
         </Link>

app/page.tsx

@@ -196,10 +196,10 @@ const Page = () => {
             href="https://jrvs.io/pgp"
             rel="pgpkey"
             title="My Public Key"
-            className="text-muted-foreground hover:decoration-muted-foreground/40 text-nowrap hover:decoration-1 hover:underline-offset-4"
+            className="text-nowrap decoration-1 [--primary:var(--muted-foreground)]"
           >
             <LockIcon className="mr-0.5 inline size-3 align-text-top" />
-            <code className="mx-0.5 tracking-wider text-wrap [word-spacing:-0.4em]">2B0C 9CF2 51E6 9A39</code>
+            <code className="mx-0.5 tracking-wider text-wrap [word-spacing:-0.25em]">2B0C 9CF2 51E6 9A39</code>
           </Link>
         </sup>
         ,{" "}

components/code-block.tsx

@@ -41,15 +41,15 @@ const CodeBlock = async ({
         className={cn(
           "grid max-h-[500px] w-full overflow-x-auto p-4 **:bg-transparent! md:max-h-[650px] dark:**:text-[var(--shiki-dark)]! [&_pre]:whitespace-normal",
           "[&_.line]:inline-block [&_.line]:min-w-full [&_.line]:py-1 [&_.line]:leading-none [&_.line]:whitespace-pre [&_.line]:after:hidden",
-          lineNumbers &&
+          "data-line-numbers:[&_.line]:before:text-muted-foreground data-line-numbers:[counter-reset:line] data-line-numbers:[&_.line]:[counter-increment:line] data-line-numbers:[&_.line]:before:mr-5 data-line-numbers:[&_.line]:before:inline-block data-line-numbers:[&_.line]:before:w-5 data-line-numbers:[&_.line]:before:text-right data-line-numbers:[&_.line]:before:content-[counter(line)]"
-            "[&_.line]:before:text-muted-foreground [counter-reset:line] [&_.line]:before:mr-5 [&_.line]:before:inline-block [&_.line]:before:w-5 [&_.line]:before:text-right [&_.line]:before:content-[counter(line)] [&_.line]:before:[counter-increment:line]"
         )}
         data-language={lang}
+        data-line-numbers={lineNumbers || undefined}
         dangerouslySetInnerHTML={{ __html: codeHighlighted }}
       />
       <CopyButton
         source={codeString}
-        className="text-foreground/85 hover:text-primary bg-muted/10 absolute top-0 right-0 size-10 rounded-tr-lg rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-xs *:[svg]:my-auto *:[svg]:inline-block *:[svg]:size-4.5 *:[svg]:align-text-bottom"
+        className="text-foreground/85 hover:text-primary bg-muted/10 absolute top-0 right-0 size-10 rounded-tr-lg rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-xs [&_svg]:my-auto [&_svg]:inline-block [&_svg]:size-4.5 [&_svg]:align-text-bottom"
       />
     </div>
   );

components/layout/menu-item.tsx

@@ -32,8 +32,7 @@ const MenuItem = ({
         aria-label={text}
         data-current={current || undefined}
         className={cn(
-          "text-foreground/85 hover:border-ring -mb-[3px] inline-flex items-center p-2.5 hover:border-b-[3px] hover:no-underline",
+          "text-foreground/85 hover:border-ring data-current:border-primary/40! -mb-[3px] inline-flex items-center p-2.5 hover:border-b-[3px] hover:no-underline data-current:border-b-[3px]",
-          current && "border-primary/40 hover:border-primary/40 border-b-[3px]",
           className
         )}
         {...rest}

components/layout/theme-toggle.tsx

@@ -13,7 +13,7 @@ const ThemeToggle = ({ ...rest }: ComponentPropsWithoutRef<LucideIcon>) => {
     <button
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       aria-label="Toggle theme"
-      className="hover:*: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 cursor-pointer bg-transparent p-2.5 not-dark:[&_.lucide-moon]:hidden dark:[&_.lucide-sun]:hidden"
     >
       <SunIcon {...rest} />
       <MoonIcon {...rest} />

components/link.tsx

@@ -23,7 +23,7 @@ const Link = ({
     target: target || (isExternal ? "_blank" : undefined),
     rel: `${rel ? `${rel} ` : ""}${target === "_blank" || isExternal ? "noopener noreferrer" : ""}`.trim() || undefined,
     className: cn(
-      "text-primary hover:decoration-primary/40 hover:underline hover:decoration-2 hover:underline-offset-4",
+      "text-primary decoration-primary/40 no-underline decoration-2 underline-offset-4 hover:underline",
       className
     ),
     ...rest,

components/marquee.tsx

@@ -3,8 +3,6 @@ import type { ComponentPropsWithoutRef } from "react";
 
 // https://magicui.design/docs/components/marquee
 const Marquee = ({
-  reverse = false,
-  pauseOnHover = false,
   repeat = 3,
   className,
   children,
@@ -19,14 +17,7 @@ const Marquee = ({
       {Array(repeat)
         .fill(0)
         .map((_, i) => (
-          <div
+          <div key={i} className="motion-safe:animate-marquee flex shrink-0 flex-row justify-around [gap:var(--gap)]">
-            key={i}
-            className={cn(
-              "motion-safe:animate-marquee flex shrink-0 flex-row justify-around [gap:var(--gap)]",
-              pauseOnHover && "group-hover:[animation-play-state:paused]",
-              reverse && "[animation-direction:reverse]"
-            )}
-          >
             {children}
           </div>
         ))}