Make the navbar hitboxes larger

Author: hasparus

src/components/navbar/navbar.tsx

@@ -25,7 +25,7 @@ export interface NavBarProps {
 }
 
 const linkClasses =
-  "typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2"
+  "typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2 md:py-5"
 
 function NavbarMenu({
   menu,
@@ -171,7 +171,7 @@ export function Navbar({ items }: NavBarProps): ReactElement {
             <NavigationMenu.Positioner
               side="bottom"
               align="start"
-              sideOffset={21}
+              sideOffset={4}
               alignOffset={-8}
             >
               <NavigationMenu.Popup className="data-[closed]:animate-fade-out data-[open]:animate-fade-in">

src/pages/_meta.tsx

@@ -96,7 +96,7 @@ export default {
 
 function Emphasis({ children }: { children: React.ReactNode }) {
   return (
-    <span className="[a:has(>&)]:[a:has(>&)]:border [a:has(>&)]:border [a:has(>&)]:border-current [a:has(>&)]:text-pri-base dark:[a:has(>&)]:text-pri-light [a:hover:has(>&)]:border-transparent [a:hover:has(>&)]:no-underline">
+    <span className="relative block before:absolute before:-inset-x-3 before:-inset-y-1 before:border before:border-current [a:has(>&)]:text-pri-base dark:[a:has(>&)]:text-pri-light [a:hover:has(>&)]:no-underline [a:hover_&]:before:border-transparent">
       {children}
     </span>
   )