nav fixes, aligning headings

beta/src/components/Layout/Page.tsx

@@ -97,8 +97,8 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
           section === 'blog' && 'max-w-5xl mx-auto'
         )}>
         {showSidebar && (
-          <div className="lg:-mt-20">
-            <div className="lg:pt-20 fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none">
+          <div className="lg:-mt-16">
+            <div className="lg:pt-16 fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none">
               <SidebarNav
                 key={section}
                 routeTree={routeTree}
@@ -116,7 +116,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
             <Footer hideSurvey={isHomePage || isBlogIndex} />
           </main>
         </Suspense>
-        <div className="-mt-20 hidden lg:max-w-xs 2xl:block">
+        <div className="-mt-16 hidden lg:max-w-xs 2xl:block">
           {showToc && toc.length > 0 && <Toc headings={toc} key={asPath} />}
         </div>
       </div>

beta/src/components/Layout/Toc.tsx

@@ -13,7 +13,7 @@ export function Toc({headings}: {headings: Toc}) {
   // Select the max TOC item we have here for now, but remove this after the fix.
   const selectedIndex = Math.min(currentIndex, headings.length - 1);
   return (
-    <nav role="navigation" className="pt-24 sticky top-0 right-0">
+    <nav role="navigation" className="pt-20 sticky top-0 right-0">
       {headings.length > 0 && (
         <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
           On this page

beta/src/components/Layout/TopNav/TopNav.tsx

@@ -131,9 +131,10 @@ function NavItem({url, isActive, children}: any) {
       <Link
         href={url}
         className={cn(
-          'outline-link p-2 rounded-lg capitalize',
+          'outline-link py-2 px-3 rounded-lg capitalize',
           !isActive && 'hover:bg-card hover:dark:bg-card-dark',
-          isActive && 'bg-highlight dark:bg-highlight-dark text-link'
+          isActive &&
+            'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'
         )}>
         {children}
       </Link>
@@ -247,10 +248,10 @@ export default function TopNav({
       )}>
       <nav
         className={cn(
-          'max-h-20 backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 py-3 px-1.5 lg:px-5 lg:pr-5 z-50',
+          'backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 px-1.5 lg:px-5 lg:pr-5 z-50',
           {'dark:shadow-nav-dark shadow-nav': isScrolled || isOpen}
         )}>
-        <div className="w-full gap-0 sm:gap-2.5 flex justify-center items-center justify-between">
+        <div className="h-16 w-full gap-0 sm:gap-2.5 flex justify-center items-center justify-between">
           <div className="3xl:flex-1 flex flex-row -space-x-1.5">
             <button
               type="button"
@@ -276,8 +277,8 @@ export default function TopNav({
           <div className="hidden md:flex flex-1 justify-center items-center w-full 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
             <Search />
           </div>
-          <div className="text-base justify-center items-center flex 3xl:flex-1 flex-row 3xl:justify-end">
-            <div className="ml-2.5 mr-5 hidden lg:flex gap-5">
+          <div className="text-base justify-center items-center gap-2.5 flex 3xl:flex-1 flex-row 3xl:justify-end">
+            <div className="mx-2.5 gap-2.5 hidden lg:flex">
               <NavItem isActive={section === 'learn'} url="/learn">
                 Learn
               </NavItem>
@@ -377,7 +378,7 @@ export default function TopNav({
             <nav
               role="navigation"
               style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
-              className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-6 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+              className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
               {/* No fallback UI so need to be careful not to suspend directly inside. */}
               <Suspense fallback={null}>
                 <div className="block ml-3 flex flex-row gap-2 lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
@@ -431,7 +432,7 @@ export default function TopNav({
                   isForceExpanded={isOpen}
                 />
               </Suspense>
-              <div className="h-20" />
+              <div className="h-16" />
             </nav>
             <div className="fixed bottom-0 hidden lg:block">
               <Feedback />

beta/src/components/PageHeading.tsx

@@ -23,7 +23,7 @@ function PageHeading({
   breadcrumbs,
 }: PageHeadingProps) {
   return (
-    <div className="px-5 sm:px-12 pt-8 sm:pt-7 lg:pt-2">
+    <div className="px-5 sm:px-12 pt-8 lg:pt-4">
       <div className="max-w-4xl ml-0 2xl:mx-auto">
         {breadcrumbs ? <Breadcrumbs breadcrumbs={breadcrumbs} /> : null}
         <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5 break-words">