Tweak code annotations

Author: adamwathan

src/components/home/build-anything-section.tsx

@@ -22,7 +22,10 @@ import CategoryHeader from "./category-header";
 export default function BuildAnythingSection() {
   return (
     <div className="relative max-w-full">
-      <div className="h-6 max-w-screen items-end px-2 font-mono text-xs/6 whitespace-pre text-black/10 max-sm:px-4 2xl:flex dark:text-white/15">
+      <div
+        aria-hidden="true"
+        className="max-w-screen h-6 items-end whitespace-pre px-2 font-mono text-xs/6 text-black/20 max-sm:px-4 2xl:flex dark:text-white/25"
+      >
         text-4xl <span className="inline dark:hidden">text-gray-950</span>
         <span className="hidden dark:inline">text-white</span> tracking-tighter
       </div>
@@ -32,12 +35,12 @@ export default function BuildAnythingSection() {
       </GridContainer>
 
       <GridContainer>
-        <h2 className="max-w-lg px-2 text-[2.5rem]/10 font-medium tracking-tighter text-balance max-sm:px-4">
+        <h2 className="max-w-lg text-balance px-2 text-[2.5rem]/10 font-medium tracking-tighter max-sm:px-4">
           Build whatever you want, without touching your CSS file.
         </h2>
       </GridContainer>
 
-      <div className="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/10 max-sm:px-4 sm:h-10 dark:text-white/15">
+      <div className="flex h-6 items-end whitespace-pre px-2 font-mono text-xs/6 text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25">
         text-base <span className="inline dark:hidden">text-gray-950</span>
         <span className="hidden dark:inline">text-white</span>
       </div>
@@ -51,7 +54,7 @@ export default function BuildAnythingSection() {
 
       <GridContainer className="mt-18">
         <div className="h-auto bg-gray-950/5 p-2 dark:bg-white/10">
-          <BentoItem className="flex h-full flex-row overflow-hidden p-0!">
+          <BentoItem className="p-0! flex h-full flex-row overflow-hidden">
             <div className="hidden flex-col gap-2 lg:flex">
               <a
                 href="https://openai.com/"
@@ -206,7 +209,7 @@ export default function BuildAnythingSection() {
 
 function ExternalLinkLabel({ children }: { children: React.ReactNode }) {
   return (
-    <div className="absolute top-1/2 left-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-sm/6 font-medium text-white opacity-0 inset-ring inset-ring-white/10 transition-opacity group-hover:flex group-hover:opacity-100">
+    <div className="inset-ring inset-ring-white/10 absolute left-1/2 top-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 transform flex-row items-center gap-[calc(1rem/16*7)] rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pb-1 pl-3 pr-2 text-center font-mono text-sm/6 font-medium text-white opacity-0 transition-opacity group-hover:flex group-hover:opacity-100">
       {children}
       <svg viewBox="0 0 16 16" fill="currentColor" className="size-4">
         <path

src/components/home/explainer-section.tsx

@@ -102,7 +102,10 @@ export default function ExplainerSection() {
 
   return (
     <div className="relative max-w-full">
-      <div className="hidden h-4 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/10 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/15">
+      <div
+        aria-hidden="true"
+        className="hidden h-4 items-end whitespace-pre px-2 font-mono text-xs/6 text-black/20 max-sm:px-4 2xl:visible 2xl:flex dark:text-white/25"
+      >
         text-4xl <span className="inline dark:hidden">text-gray-950</span>
         <span className="hidden dark:inline">text-white</span> tracking-tighter text-balance
       </div>
@@ -117,7 +120,7 @@ export default function ExplainerSection() {
         </h2>
       </GridContainer>
 
-      <div className="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/10 max-sm:px-4 sm:h-10 dark:text-white/15">
+      <div className="flex h-6 items-end whitespace-pre px-2 font-mono text-xs/6 text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25">
         text-base <span className="inline dark:hidden">text-gray-950</span>
         <span className="hidden dark:inline">text-white</span>
       </div>
@@ -133,10 +136,10 @@ export default function ExplainerSection() {
       <GridContainer className="mt-16">
         <div className="w-full bg-gray-950/5 p-2 dark:bg-white/10">
           <div className="not-prose">
-            <div className="@container rounded-xl bg-gray-950 in-[figure]:-mx-1 in-[figure]:-mb-1">
+            <div className="@container in-[figure]:-mx-1 in-[figure]:-mb-1 rounded-xl bg-gray-950">
               <div
                 className={clsx(
-                  "rounded-xl p-1 text-sm scheme-dark dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10",
+                  "scheme-dark dark:inset-ring dark:inset-ring-white/10 rounded-xl p-1 text-sm dark:bg-white/5",
                 )}
               >
                 <EditorAnimation timeline={timeline}>
@@ -146,16 +149,16 @@ export default function ExplainerSection() {
                         className={clsx(
                           "inline-flex size-1.5 items-center justify-center rounded-full bg-white/20",
                           "transition-opacity duration-300 ease-in",
-                          "opacity-0 group-data-modified:opacity-100 group-data-modified:duration-100 group-data-modified:ease-linear",
+                          "group-data-modified:opacity-100 group-data-modified:duration-100 group-data-modified:ease-linear opacity-0",
                         )}
                       ></span>
                     </span>
                     <span className="size-3 rounded-full bg-white/20"></span>
                     <span className="size-3 rounded-full bg-white/20"></span>
                   </div>
-                  <div className="flex w-full flex-col gap-1 lg:h-132.5 lg:flex-row">
-                    <div className="flex flex-col gap-1 lg:w-1/2 xl:w-5/8">
-                      <Panel className="min-h-0 flex-1 max-lg:max-h-76" aria-label="panel, HTML editor, animated">
+                  <div className="lg:h-132.5 flex w-full flex-col gap-1 lg:flex-row">
+                    <div className="xl:w-5/8 flex flex-col gap-1 lg:w-1/2">
+                      <Panel className="max-lg:max-h-76 min-h-0 flex-1" aria-label="panel, HTML editor, animated">
                         <Tabs>
                           <Tab selected className="group-data-modified:italic">
                             index.html
@@ -165,14 +168,14 @@ export default function ExplainerSection() {
                         </Tabs>
                         <HtmlFile className="with-line-numbers" />
                       </Panel>
-                      <Panel className="h-32 shrink-0 lg:h-46" aria-label="panel, terminal, animated">
+                      <Panel className="lg:h-46 h-32 shrink-0" aria-label="panel, terminal, animated">
                         <Tabs>
                           <Tab selected>Terminal</Tab>
                         </Tabs>
                         <Terminal />
                       </Panel>
                     </div>
-                    <div className="flex h-66 flex-col gap-2.5 lg:h-auto lg:w-1/2 xl:w-3/8">
+                    <div className="h-66 xl:w-3/8 flex flex-col gap-2.5 lg:h-auto lg:w-1/2">
                       <Panel className="h-full" aria-label="panel, built CSS, animated">
                         <Tabs>
                           <Tab selected>build.css</Tab>
@@ -224,7 +227,7 @@ function HtmlFile({ className }: { className?: string }) {
               <span {...props}>
                 {'"'}
                 <TypingAnimation />
-                <span className="transition-opacity duration-300 group-data-finished:opacity-0 after:absolute after:mt-1.5 after:inline-block after:h-[1.2em] after:w-px after:border-r-2 after:border-sky-400 after:bg-transparent after:content-['']"></span>
+                <span className="group-data-finished:opacity-0 transition-opacity duration-300 after:absolute after:mt-1.5 after:inline-block after:h-[1.2em] after:w-px after:border-r-2 after:border-sky-400 after:bg-transparent after:content-['']"></span>
                 {'"'}
               </span>
             );
@@ -264,7 +267,7 @@ async function BuiltCss({ className, timeline }: { className?: string; timeline:
     <HighlightedCode
       aria-label="editor, readonly, built CSS"
       className={clsx(
-        "opacity-0 group-data-finished:opacity-100 group-data-running:opacity-100",
+        "group-data-finished:opacity-100 group-data-running:opacity-100 opacity-0",
         "*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:rounded-lg *:px-4 *:py-2",
         "**:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh]",
         "**:[code]:pr-4",
@@ -422,7 +425,7 @@ function Panel({
 function Tabs({ children }: { children: React.ReactNode }) {
   return (
     <div
-      className="sticky top-0 left-0 z-10 col-start-1 row-start-1 mb-px flex items-center gap-2 border-b border-b-white/5 bg-white/2.5 bg-clip-padding p-1 text-white backdrop-blur-lg"
+      className="bg-white/2.5 sticky left-0 top-0 z-10 col-start-1 row-start-1 mb-px flex items-center gap-2 border-b border-b-white/5 bg-clip-padding p-1 text-white backdrop-blur-lg"
       role="presentation"
       aria-label="Tab Bar"
     >
@@ -435,7 +438,7 @@ function Tab({ className, selected, children }: { className?: string; selected?:
   return (
     <button
       className={clsx(
-        "isolate rounded-sm px-2 py-1 text-xs/5 text-white inset-ring-white/5 hover:bg-white/10 aria-selected:bg-white/10 aria-selected:inset-ring",
+        "inset-ring-white/5 aria-selected:inset-ring isolate rounded-sm px-2 py-1 text-xs/5 text-white hover:bg-white/10 aria-selected:bg-white/10",
         className,
       )}
       role="presentation"

src/components/home/hero.tsx

@@ -49,7 +49,10 @@ const Hero: React.FC = () => {
 
   return (
     <div>
-      <div className="flex h-16 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/10 max-sm:px-4 sm:h-24 dark:text-white/15">
+      <div
+        aria-hidden="true"
+        className="flex h-16 items-end whitespace-pre px-2 font-mono text-xs/6 text-black/20 max-sm:px-4 sm:h-24 dark:text-white/25"
+      >
         <span className="hidden max-sm:inline">text-4xl </span>
         <span className="hidden sm:max-md:inline">text-5xl </span>
         <span className="hidden lg:max-xl:inline">text-6xl </span>
@@ -59,11 +62,14 @@ const Hero: React.FC = () => {
         <span className="max-sm:hidden">text-balance</span>
       </div>
       <GridContainer>
-        <h1 className="px-2 text-4xl tracking-tighter text-balance max-lg:font-medium max-sm:px-4 sm:text-5xl lg:text-6xl xl:text-8xl">
+        <h1 className="text-balance px-2 text-4xl tracking-tighter max-lg:font-medium max-sm:px-4 sm:text-5xl lg:text-6xl xl:text-8xl">
           Rapidly build modern websites without ever leaving your HTML.
         </h1>
       </GridContainer>
-      <div className="flex h-6 items-end px-2 font-mono text-xs/6 whitespace-pre text-black/10 max-sm:px-4 sm:h-10 dark:text-white/15">
+      <div
+        aria-hidden="true"
+        className="flex h-6 items-end whitespace-pre px-2 font-mono text-xs/6 text-black/20 max-sm:px-4 sm:h-10 dark:text-white/25"
+      >
         text-lg <span className="inline dark:hidden">text-gray-950</span>
         <span className="hidden dark:inline">text-white</span> font-medium
       </div>
@@ -87,7 +93,7 @@ const Hero: React.FC = () => {
           <LinkButton href="docs/installation" className="z-1 max-sm:hidden">
             Get started
           </LinkButton>
-          <SearchButton className="grid w-full grid-cols-[auto_1fr_auto] items-center gap-1 rounded-full px-4 py-2 text-left text-sm/6 text-gray-950/50 outline -outline-offset-1 outline-gray-950/8 sm:w-80 dark:bg-white/5 dark:text-white/50 dark:outline-white/15">
+          <SearchButton className="outline-gray-950/8 grid w-full grid-cols-[auto_1fr_auto] items-center gap-1 rounded-full px-4 py-2 text-left text-sm/6 text-gray-950/50 outline -outline-offset-1 sm:w-80 dark:bg-white/5 dark:text-white/50 dark:outline-white/15">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 16 16"
@@ -103,7 +109,7 @@ const Hero: React.FC = () => {
             <kbd className="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&]:block">
               <span className="opacity-60">⌘</span>K
             </kbd>
-            <kbd className="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&]:block dark:text-gray-400">
+            <kbd className="not-[.os-macos_&]:block hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400">
               <span className="opacity-60">Ctrl</span>&nbsp;K
             </kbd>
           </SearchButton>
@@ -115,7 +121,7 @@ const Hero: React.FC = () => {
             <Editor>
               <div
                 className={clsx(
-                  "*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5!",
+                  "*:bg-white/10! dark:*:bg-white/5! *:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:p-5",
                   "**:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh]",
                   "*:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5",
                 )}
@@ -347,7 +353,7 @@ const Hero: React.FC = () => {
               </div>
             </Editor>
           </div>
-          <div className="relative border-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-black)]/5 max-lg:h-66 max-lg:border-t lg:border-l dark:[--pattern-fg:var(--color-white)]/10">
+          <div className="border-(--pattern-fg) [--pattern-fg:var(--color-black)]/5 max-lg:h-66 dark:[--pattern-fg:var(--color-white)]/10 relative bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed max-lg:border-t lg:border-l">
             <div className="absolute right-1/2 max-lg:bottom-8 max-md:translate-x-1/2 md:right-16 lg:top-1/2 lg:-translate-y-1/2 2xl:right-1/2 2xl:translate-x-[calc(50%-3rem)]">
               <Example step={step} />
             </div>
@@ -389,7 +395,7 @@ function Example({ step }: { step: number }) {
             key={step}
             layout={true}
             className={clsx(
-              "pointer-events-none absolute top-1/2 right-auto left-0 z-1 -mt-4 mr-0 -ml-4 rounded-full text-black",
+              "z-1 pointer-events-none absolute left-0 right-auto top-1/2 -ml-4 -mt-4 mr-0 rounded-full text-black",
             )}
             initial={{ opacity: 0 }}
             animate={{ opacity: [0, 1, 0] }}
@@ -413,7 +419,7 @@ function Example({ step }: { step: number }) {
           layout="position"
           transition={TRANSITION}
           className={clsx(
-            "size-48 shadow-xl transition-[border-radius] duration-350 dark:outline-1 dark:-outline-offset-1 dark:outline-white/10",
+            "duration-350 size-48 shadow-xl transition-[border-radius] dark:outline-1 dark:-outline-offset-1 dark:outline-white/10",
             step > 1 ? "rounded-md" : null,
           )}
           src={cover.src}
@@ -429,7 +435,7 @@ function Example({ step }: { step: number }) {
             layout="position"
             transition={TRANSITION}
             className={clsx(
-              "text-gray-950 transition-[font-size] duration-350 dark:text-white",
+              "duration-350 text-gray-950 transition-[font-size] dark:text-white",
               step > 2 ? "text-2xl font-medium" : null,
             )}
           >
@@ -439,8 +445,8 @@ function Example({ step }: { step: number }) {
             transition={TRANSITION}
             layout="position"
             className={clsx(
-              "text-gray-950 transition-colors duration-350 dark:text-white",
-              step > 3 ? "font-medium text-sky-500!" : null,
+              "duration-350 text-gray-950 transition-colors dark:text-white",
+              step > 3 ? "text-sky-500! font-medium" : null,
             )}
           >
             The Anti-Patterns
@@ -449,8 +455,8 @@ function Example({ step }: { step: number }) {
             layout="position"
             transition={TRANSITION}
             className={clsx(
-              "flex text-gray-950 transition-colors duration-350 dark:text-white",
-              step > 4 ? "gap-2 font-medium text-gray-600! dark:text-gray-400!" : null,
+              "duration-350 flex text-gray-950 transition-colors dark:text-white",
+              step > 4 ? "text-gray-600! dark:text-gray-400! gap-2 font-medium" : null,
             )}
           >
             <motion.span layout="position" transition={TRANSITION}>