docs: update sr-only utility to use clip-path inset(50%) (#2385)

This updates the sr-only documentation to match the current
implementation in Tailwind CSS, replacing the legacy clip property with
clip-path: inset(50%).

Author: redeltobias

package.json

@@ -22,21 +22,21 @@
     "feed": "^5.1.0",
     "framer-motion": "^12.20.0",
     "motion": "^12.20.0",
-    "next": "15.3.8",
+    "next": "15.3.4",
     "open-graph-scraper-lite": "^2.1.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "shiki": "^1.29.2",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/node": "^4.1.11",
     "@types/hast": "^3.0.4",
     "@types/mdx": "^2.0.13",
     "@types/node": "^22.15.33",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "0.6.13",

pnpm-lock.yaml

@@ -6,7 +6,7 @@
   --font-sans: var(--font-inter), system-ui;
   --font-source: var(--font-source-sans-pro), system-ui;
   --font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
-  --font-mono: var(--font-plex-mono), monospace;
+  --font-mono: var(--font-plex-mono);
   --font-mono--font-feature-settings: "ss02", "zero";
   --font-ubuntu-mono: var(--font-ubuntu-mono);
 }

src/app/globals.css

@@ -149,17 +149,16 @@ function FeaturedPartners() {
           <div className="border-l border-gray-950/5 max-xl:hidden dark:border-white/10"></div>
         </div>
         <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-3 xl:grid-cols-4">
-          {partners.map((company, index) => (
-            <li key={index} className="max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y">
-              <a
-                href={company.url}
-                target="_blank"
-                rel="noopener sponsored"
-                className="grid place-content-center transition-colors hover:bg-gray-950/2.5 sm:px-2 sm:py-4 dark:hover:bg-white/2.5"
-              >
-                <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
-              </a>
-            </li>
+          {partners.map((partner, index) => (
+            <a
+              key={index}
+              href={partner.url}
+              target="_blank"
+              rel="noopener sponsored"
+              className="grid place-content-center transition-colors hover:bg-gray-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y dark:hover:bg-white/2.5"
+            >
+              <partner.logo className="w-full max-w-80" aria-label={`${partner.name} logo`} />
+            </a>
           ))}
         </ul>
       </div>
@@ -770,62 +769,65 @@ function Sponsors() {
         </div>
         <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-3 xl:grid-cols-4">
           {partners.map((company, index) => (
-            <li key={index} className="max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y">
-              <a
-                href={company.url}
-                target="_blank"
-                rel="noopener sponsored"
-                className="grid place-content-center transition-colors hover:bg-gray-950/2.5 sm:px-2 sm:py-4 dark:hover:bg-white/2.5"
-              >
-                <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
-              </a>
-            </li>
+            <a
+              key={index}
+              href={company.url}
+              target="_blank"
+              rel="noopener sponsored"
+              className="grid place-content-center transition-colors hover:bg-gray-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y dark:hover:bg-white/2.5"
+            >
+              <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
+            </a>
           ))}
         </ul>
       </div>
       <h2 className="mt-16 px-4 text-2xl/10 font-medium tracking-tight sm:px-2">Ambassadors</h2>
       <div className="relative mt-4">
-        <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 gap-10 max-md:gap-5 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 gap-10 max-md:gap-5 lg:grid-cols-4 xl:grid-cols-6">
           <div className="border-r border-gray-950/5 dark:border-white/10"></div>
           <div className="border-l border-gray-950/5 lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden xl:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-xl:hidden dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-lg:hidden dark:border-white/10"></div>
         </div>
-        <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-3 xl:grid-cols-4">
+        <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-4 xl:grid-cols-6">
           {ambassadors.map((company, index) => (
-            <li key={index} className="max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y">
-              <a
-                href={company.url}
-                target="_blank"
-                rel="noopener sponsored"
-                className="grid place-content-center transition-colors hover:bg-gray-950/2.5 sm:px-2 sm:py-4 dark:hover:bg-white/2.5"
-              >
-                <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
-              </a>
-            </li>
+            <a
+              key={index}
+              href={company.url}
+              target="_blank"
+              rel="noopener sponsored"
+              className="grid place-content-center transition-colors hover:bg-gray-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[4n+1]:line-y xl:nth-[6n+1]:line-y dark:hover:bg-white/2.5"
+            >
+              <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
+            </a>
           ))}
         </ul>
       </div>
       <h2 className="mt-16 px-4 text-2xl/10 font-medium tracking-tight sm:px-2">Supporters</h2>
       <div className="relative mt-4">
-        <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 gap-10 max-md:gap-5 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 gap-10 max-md:gap-5 lg:grid-cols-6 xl:grid-cols-8">
           <div className="border-r border-gray-950/5 dark:border-white/10"></div>
           <div className="border-l border-gray-950/5 lg:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-lg:hidden xl:border-x dark:border-white/10"></div>
-          <div className="border-l border-gray-950/5 max-xl:hidden dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-lg:hidden lg:border-x dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-xl:hidden xl:border-x dark:border-white/10"></div>
+          <div className="border-l border-gray-950/5 max-lg:hidden dark:border-white/10"></div>
         </div>
-        <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-3 xl:grid-cols-4">
+        <ul className="grid grid-cols-2 gap-5 md:gap-10 lg:grid-cols-6 xl:grid-cols-8">
           {supporters.map((company, index) => (
-            <li key={index} className="max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y">
-              <a
-                href={company.url}
-                target="_blank"
-                rel="noopener sponsored"
-                className="grid place-content-center transition-colors hover:bg-gray-950/2.5 sm:px-2 sm:py-4 dark:hover:bg-white/2.5"
-              >
-                <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
-              </a>
-            </li>
+            <a
+              key={index}
+              href={company.url}
+              target="_blank"
+              rel="noopener sponsored"
+              className="grid place-content-center transition-colors hover:bg-gray-950/2.5 max-lg:nth-[2n+1]:line-y sm:px-2 sm:py-4 lg:max-xl:nth-[6n+1]:line-y xl:nth-[8n+1]:line-y dark:hover:bg-white/2.5"
+            >
+              <company.logo className="w-full max-w-80" aria-label={`${company.name} logo`} />
+            </a>
           ))}
         </ul>
       </div>