Visual regression fixes and improvements (#3407)

Author: josh-collinsworth

_components/Base.tsx

@@ -11,9 +11,7 @@ export default function Base(
           parts={data.breadcrumbs_ctx.parts}
           hasSubNav={false}
         />
-        <main id="content" tabindex={-1}>
-          {children}
-        </main>
+        {children}
       </div>
     </>
   );

_components/CopyPage.tsx

@@ -9,11 +9,11 @@ export default function CopyPage({ file }: { file: string | undefined }) {
   }`;
 
   return (
-    <div class="copy-page-split inline-flex shrink-0 rounded-full border-2 border-foreground-primary dark:border-background-tertiary">
+    <div className="copy-page-split inline-flex shrink-0 rounded-full border border-foreground-primary dark:border-background-tertiary">
       {/* Primary: directly copies the URL */}
       <button
         type="button"
-        class="copy-page-main-btn flex items-center gap-2 px-4 py-2 text-sm font-semibold text-foreground-primary bg-transparent hover:bg-header-highlight dark:hover:text-background-primary rounded-l-full transition-colors cursor-pointer select-none"
+        className="copy-page-main-btn flex items-center gap-2 pl-3 pr-2 py-1 text-xs font-semibold text-foreground-primary bg-transparent hover:bg-header-highlight dark:hover:text-background-primary rounded-l-full transition-colors cursor-pointer select-none"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -26,26 +26,26 @@ export default function CopyPage({ file }: { file: string | undefined }) {
           <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z" />
           <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
         </svg>
-        <span class="copy-page-main-label">Copy page</span>
+        <span className="copy-page-main-label">Copy page</span>
       </button>
 
       {/* Visual divider between the two halves */}
       <span
-        class="self-stretch w-0.5 bg-foreground-primary dark:bg-background-tertiary shrink-0"
+        className="self-stretch w-px bg-foreground-primary dark:bg-background-tertiary shrink-0"
         aria-hidden="true"
       >
       </span>
 
       {/* Chevron: opens the popover panel */}
       <button
         type="button"
-        class="copy-page-toggle-btn flex items-center px-3 py-2 text-foreground-primary bg-transparent hover:bg-header-highlight dark:hover:text-background-primary rounded-r-full transition-colors cursor-pointer select-none"
+        className="copy-page-toggle-btn flex items-center pl-1.5 pr-2  text-foreground-primary bg-transparent hover:bg-header-highlight dark:hover:text-background-primary rounded-r-full transition-colors cursor-pointer select-none"
         popovertarget="copy-page-menu"
         aria-label="More copy options"
         aria-haspopup="menu"
       >
         <svg
-          class="copy-page-chevron transition-transform duration-200"
+          className="copy-page-chevron transition-transform duration-200"
           xmlns="http://www.w3.org/2000/svg"
           aria-hidden="true"
           fill="currentColor"
@@ -58,11 +58,11 @@ export default function CopyPage({ file }: { file: string | undefined }) {
       </button>
 
       {/* Popover panel — positioned via CSS anchor positioning, JS fallback */}
-      <div id="copy-page-menu" popover="auto" class="copy-page-panel">
+      <div id="copy-page-menu" popover="auto" className="copy-page-panel">
         <a
           href={file}
           target="_blank"
-          class="no-underline flex items-start gap-3 px-4 py-3 hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
+          className="no-underline flex items-start gap-3 px-4 py-3 hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -71,21 +71,23 @@ export default function CopyPage({ file }: { file: string | undefined }) {
             width="16"
             height="16"
             viewBox="0 0 16 16"
-            class="mt-0.5 shrink-0"
+            className="mt-0.5 shrink-0"
           >
             <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z" />
           </svg>
           <span>
-            <span class="block text-sm font-medium">View Page as Markdown</span>
-            <span class="block text-xs text-foreground-secondary mt-0.5">
+            <span className="block text-sm font-medium">
+              View Page as Markdown
+            </span>
+            <span className="block text-xs text-foreground-secondary mt-0.5">
               Open the Markdown file in a new tab
             </span>
           </span>
         </a>
         <a
           href={claudeUrl}
           target="_blank"
-          class="no-underline flex items-start gap-3 px-4 py-3 border-t border-foreground-tertiary hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
+          className="no-underline flex items-start gap-3 px-4 py-3 border-t border-foreground-tertiary hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -94,21 +96,21 @@ export default function CopyPage({ file }: { file: string | undefined }) {
             width="16"
             height="16"
             viewBox="0 0 24 24"
-            class="mt-0.5 shrink-0"
+            className="mt-0.5 shrink-0"
           >
             <path d="M12 0C12 0 10.5 10.5 0 12C10.5 12 12 24 12 24C12 24 13.5 13.5 24 12C13.5 12 12 0 12 0Z" />
           </svg>
           <span>
-            <span class="block text-sm font-medium">Open in Claude</span>
-            <span class="block text-xs text-foreground-secondary mt-0.5">
+            <span className="block text-sm font-medium">Open in Claude</span>
+            <span className="block text-xs text-foreground-secondary mt-0.5">
               Ask Claude about this page
             </span>
           </span>
         </a>
         <a
           href="/llms.txt"
           target="_blank"
-          class="no-underline flex items-start gap-3 px-4 py-3 border-t border-foreground-tertiary hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
+          className="no-underline flex items-start gap-3 px-4 py-3 border-t border-foreground-tertiary hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -117,13 +119,13 @@ export default function CopyPage({ file }: { file: string | undefined }) {
             width="16"
             height="16"
             viewBox="0 0 16 16"
-            class="mt-0.5 shrink-0"
+            className="mt-0.5 shrink-0"
           >
             <path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z" />
           </svg>
           <span>
-            <span class="block text-sm font-medium">llms.txt</span>
-            <span class="block text-xs text-foreground-secondary mt-0.5">
+            <span className="block text-sm font-medium">llms.txt</span>
+            <span className="block text-xs text-foreground-secondary mt-0.5">
               Machine-readable index of these docs for AI tools
             </span>
           </span>

_components/Feedback.tsx

@@ -7,7 +7,7 @@ export default function Feedback({ file }: { file: string | undefined }) {
     return (
       <section
         id="feedback-section"
-        class="mt-10 pt-6 border-t border-t-foreground-tertiary"
+        class="mt-16 pt-6 border-t border-t-foreground-tertiary"
       >
         <form aria-live="polite" id="feedback-form">
           <div

_components/Footer.tsx

@@ -1,13 +1,13 @@
 export default function Footer_new() {
   return (
-    <footer className="text-smaller bg-gray-50 dark:bg-gray-950 p-4 pt-12 sm:px-8 border-t border-t-foreground-tertiary">
-      <nav className="flex flex-col gap-x-4 gap-y-12 max-w-[var(--layout-max-width)] md:flex-row md:flex-wrap md:justify-between md:w-full md:gap-y-8 md:mx-auto">
+    <footer className="text-smaller bg-gray-50 dark:bg-gray-950 p-4 pt-12 border-t border-t-foreground-tertiary">
+      <nav className="flex flex-col gap-x-4 gap-y-12 w-max max-w-full md:flex-row md:flex-wrap md:justify-between md:gap-16 lg:gap-24">
         {data.map((category) => (
           <section className="flex-auto">
             <h3 className="mb-2 uppercase font-bold text-foreground-primary whitespace-pre">
               {category.title}
             </h3>
-            <ul className="m-0 p-0 pl-3 border-l border-l-background-tertiary list-none">
+            <ul className="m-0 p-0 pl-3 border-l border-l-sidebar-line list-none">
               {category.items.map((item) => (
                 <li>
                   <a
@@ -21,7 +21,7 @@ export default function Footer_new() {
           </section>
         ))}
       </nav>
-      <p className="m-0 mt-16 mx-auto text-center text-xs text-foreground-secondary">
+      <p className="m-0 mt-16 mx-auto text-xs text-foreground-secondary">
         Copyright © {new Date().getFullYear()} the Deno authors.
       </p>
     </footer>

_components/Header.tsx

@@ -18,26 +18,24 @@ export default function (
 
   return (
     <header
-      class={`w-full h-auto sticky top-0 z-[100] bg-background-raw ${
-        hasSubNav ? "" : "border-b border-b-foreground-tertiary"
-      }`}
+      className={`w-full h-auto sticky top-0 z-100 bg-background-raw border-b border-b-foreground-tertiary`}
     >
-      <div class="grid grid-cols-[auto_1fr] md:grid-cols-[auto_auto_1fr] h-[var(--header-height)] gap-x-4 items-center justify-between px-4 w-full max-w-[var(--layout-max-width)] mx-auto xlplus:px-0">
+      <div className="grid grid-cols-[auto_1fr] md:grid-cols-[auto_auto_1fr] h-(--header-height) gap-x-4 items-center justify-between px-4 w-full mx-auto">
         <a
           href="https://deno.com"
           title="Deno main website"
-          className="block h-8 w-8 xs:w-auto md:h-10 md:mr-auto overflow-hidden"
+          className="block h-8 w-8 xs:w-auto md:h-10 md:mr-auto md:w-10 lg:w-auto overflow-hidden"
         >
           <data.comp.DenoLogo />
         </a>
         <nav
           id="main-nav"
-          class="flex h-full items-center row-start-2 col-span-2 md:row-auto md:col-auto -mx-4 md:mx-0 overflow-x-auto md:overflow-clip"
+          className="flex h-full items-center row-start-2 col-span-2 md:row-auto md:col-auto -mx-4 md:mx-0 overflow-x-auto md:overflow-clip"
         >
           {data.navigation.map((nav: NavData) => (
             <a
               href={nav.href}
-              className={`font-[clamp(0.8rem,1.5vw,1rem)] whitespace-nowrap relative py-0 px-4 h-full flex justify-center items-center text-foreground-primary hover:text-gray-800 transition-colors duration-200 ${
+              className={`text-sm md:text-base whitespace-nowrap relative py-0 px-4 md:px-3 lg:px-4 h-full flex justify-center items-center text-foreground-primary hover:text-gray-800 transition-colors duration-200 ${
                 hrefIsInCurrentSection(nav.href, currentSection)
                   ? "font-bold text-gray-800 bg-header-highlight"
                   : ""
@@ -49,7 +47,7 @@ export default function (
               {hrefIsInCurrentSection(nav.href, currentSection) && (
                 <div
                   id="current-nav-item"
-                  class="absolute inset-0 bg-header-highlight -z-10 transition-transform duration-200 easing-[cubic-bezier(0.5,0,0.5,1)] origin-left"
+                  className="absolute inset-0 bg-header-highlight -z-10 transition-transform duration-200 easing-[cubic-bezier(0.5,0,0.5,1)] origin-left"
                   style="--left: 0px; --scaleX: 1; transform: translateX(var(--left)) scaleX(var(--scaleX));"
                 />
               )}

_components/LandingPage.tsx

@@ -45,7 +45,7 @@ export default function LandingPage(
 
   return (
     <>
-      <main id="content">
+      <div>
         <div className="flex flex-col md:flex-row w-full mb-8 max-w-screen-xl justify-between">
           <div className="max-w-prose mb-8">
             <h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
@@ -105,7 +105,7 @@ export default function LandingPage(
               <a
                 key={item.href}
                 href={item.href}
-                className="group relative flex flex-col gap-1 p-4 pr-12 rounded-lg border border-foreground-tertiary bg-background-secondary !no-underline hover:border-primary transition-colors duration-150"
+                className="group relative flex flex-col gap-2 p-4 pr-12 rounded-lg border border-background-tertiary bg-background-raw dark:bg-background-primary no-underline! hover:border-primary transition-colors duration-150"
               >
                 <span
                   className="absolute top-4 right-4"
@@ -114,18 +114,18 @@ export default function LandingPage(
                 >
                   <TypeIcon type={item.type} />
                 </span>
-                <span className="font-semibold !text-foreground-primary group-hover:underline underline-offset-4 decoration-primary">
+                <span className="leading-none font-semibold !text-foreground-primary group-hover:underline underline-offset-4 decoration-primary">
                   <FeaturedStar /> {item.title}
                 </span>
-                <span className="text-sm text-foreground-secondary">
+                <span className="text-xs text-foreground-secondary">
                   {item.description}
                 </span>
               </a>
             ))}
           </div>
         </section>
 
-        <section className="flex flex-col gap-4 w-full mb-8 p-4 border border-blue-100 dark:border-background-tertiary bg-blue-50 dark:bg-background-secondary rounded md:flex-wrap md:justify-start md:items-center md:flex-row">
+        <section className="flex flex-col gap-4 w-full mb-4 mt-16 p-4 border border-blue-100 dark:border-background-tertiary bg-blue-50 dark:bg-background-secondary rounded md:flex-wrap md:justify-start md:items-center md:flex-row">
           <h2 className="font-semibold">
             Filter by type:
           </h2>
@@ -159,35 +159,36 @@ export default function LandingPage(
             </span>
           </label>
 
-          <label for="video" className="flex gap-2 items-center mr-4">
-            <VideoIcon size="1.5rem" />
-            <span>Videos ({counts.video})</span>
-            <span className="switch">
-              <input
-                type="checkbox"
-                id="video"
-                value="Videos"
-                className="filter mr-2"
-                checked
-              />
-              <span className="slider"></span>
-            </span>
-          </label>
-
+          {counts.video > 0 && (
+            <label for="video" className="flex gap-2 items-center mr-4">
+              <VideoIcon size="1.5rem" />
+              <span>Videos ({counts.video})</span>
+              <span className="switch">
+                <input
+                  type="checkbox"
+                  id="video"
+                  value="Videos"
+                  className="filter mr-2"
+                  checked
+                />
+                <span className="slider"></span>
+              </span>
+            </label>
+          )}
           <span className="md:ml-auto text-sm text-foreground-secondary">
             {total} items total
           </span>
         </section>
 
         <nav
-          className="flex flex-wrap gap-2 mb-10"
+          className="flex flex-wrap gap-1 mb-10"
           aria-label="Example categories"
         >
           {sidebar.map((category: { title: string }) => (
             <a
               key={category.title}
               href={`#${category.title.toLowerCase().replace(/\s+/g, "-")}`}
-              className="px-3 py-1 rounded-full border border-foreground-tertiary text-sm !no-underline text-foreground-secondary hover:border-primary hover:text-primary transition-colors duration-150"
+              className="px-2 py-1 rounded-full border border-foreground-tertiary text-xs !no-underline text-foreground-secondary hover:border-primary hover:text-primary transition-colors duration-150"
             >
               {category.title}
             </a>
@@ -209,7 +210,7 @@ export default function LandingPage(
             alt="sad Deno with a grad cap"
           />
         </div>
-      </main>
+      </div>
     </>
   );
 }

_components/Navigation.tsx

@@ -15,7 +15,7 @@ export default function (
   return (
     <>
       <aside
-        className={`fixed transition-all duration-200 md:duration-0 easing-[cubic-bezier(0.165,0.84,0.44,1)] -translate-x-full z-50 w-full bg-background-raw opacity-0 p-4 pb-8 overflow-auto text-smaller md:sticky md:overflow-y-auto md:[scrollbar-width:thin] md:z-10 md:!translate-x-0 md:!opacity-100 md:p-0 md:pb-16 lg:border-r lg:border-r-foreground-tertiary lg:w-full sidebar-open:translate-x-0 sidebar-open:opacity-100
+        className={`fixed transition-all duration-200 md:duration-0 easing-[cubic-bezier(0.165,0.84,0.44,1)] -translate-x-full z-50 w-full bg-background-raw opacity-0 p-4 pb-8 overflow-auto text-smaller md:sticky md:overflow-y-auto md:[scrollbar-width:thin] md:z-10 md:!translate-x-0 md:!opacity-100 md:p-0 md:pt-4 md:pb-16 lg:border-r lg:border-r-foreground-tertiary lg:w-full sidebar-open:translate-x-0 sidebar-open:opacity-100
          ${
           hasSubNav
             ? "top-header-plus-subnav h-screen-minus-both"

_components/SearchInput.tsx

@@ -8,7 +8,7 @@ export default function SearchInput() {
           placeholder="Search"
           id="orama-search-input"
           className="w-full min-w-24 rounded-lg placeholder:text-sm text-base leading-normal p-1 pl-8 border transition-all duration-150
-          text-foreground-primary border-foreground-secondary hover:bg-background-secondary focus:bg-background-secondary focus:outline-offset-1"
+          text-foreground-primary border-foreground-tertiary hover:bg-background-secondary focus:bg-background-secondary focus:outline-offset-1"
           style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1.25em; background-color: var(--color-background-raw);"
         />
         <kbd