spacing for additional pages; fix tablet gutter

outofambit · outofambit · commit 28005b3f0747 · 2024-05-16T15:16:10.000-07:00
diff --git a/src/components/Footer/index.astro b/src/components/Footer/index.astro
@@ -7,7 +7,7 @@ const t = await getUiTranslator(currentLocale);
 ---
 
 <footer
-  class="text-body border-t border-black grid-cols-3 lg:grid-cols-4 grid gap-x-gutter-sm lg:gap-x-gutter-md pt-md pb-5 px-lg bg-accent-color text-accent-type-color content-start"
+  class="text-body border-t border-black grid-cols-3 lg:grid-cols-4 grid gap-x-gutter-sm md:gap-x-gutter-md pt-md pb-5 px-lg bg-accent-color text-accent-type-color content-start"
 >
   <div class="grid lg:row-span-2 grid-rows-subgrid">
     <div>
diff --git a/src/components/PageHeader/RootPage.astro b/src/components/PageHeader/RootPage.astro
@@ -12,7 +12,7 @@ const borderStyle = isFilterRoute ? "" : "border-b border-sidebar-type-color";
 ---
 
 <div
-  class=`grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm lg:gap-x-gutter-md min-h-[350px] h-[50vh] pt-5xl lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
+  class=`grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm md:gap-x-gutter-md min-h-[350px] h-[50vh] pt-5xl lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
 >
   <h1 class="whitespace-pre-line col-span-full mb-5">{title}</h1>
   <p class="text-h3 !mt-0 mb-3xl col-span-2">{subtitle}</p>
diff --git a/src/components/PaginationNav/index.astro b/src/components/PaginationNav/index.astro
@@ -17,7 +17,7 @@ const numPages = getPaginationMax(itemsPerPage, maxNumItems);
 
 {
   numPages > 1 && (
-    <ul class="flex gap-xs my-sm">
+    <ul class="flex gap-xs mt-gutter-md">
       {Array.from({ length: numPages }).map((_, i) => (
         <li>
           <CircleButton
diff --git a/src/components/ReferenceDirectoryWithFilter/index.tsx b/src/components/ReferenceDirectoryWithFilter/index.tsx
@@ -157,7 +157,7 @@ export const ReferenceDirectoryWithFilter = ({
   return (
     <div>
       <div class="h-0 overflow-visible">
-        <div class="gap-x-gutter-sm lg:gap-x-gutter-md relative -top-[75px] grid h-[75px] grid-cols-2 border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg lg:grid-cols-4">
+        <div class="gap-x-gutter-sm md:gap-x-gutter-md relative -top-[75px] grid h-[75px] grid-cols-2 border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg lg:grid-cols-4">
           <div class="text-body col-span-2 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
             <input
               type="text"
diff --git a/src/components/RelatedItems/index.astro b/src/components/RelatedItems/index.astro
@@ -26,7 +26,7 @@ const { title, items, class: className } = Astro.props;
   <section class={className}>
     <h2>{title}</h2>
     <ul
-      class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md"
+      class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md"
     >
       {
         items.map((i) => {
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
@@ -82,7 +82,7 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
   <section>
     <h2 id="contact">{t("Contact")}</h2>
     <div
-      class="text-2xl grid grid-cols-6 lg:grid-cols-9 gap-x-gutter-sm lg:gap-x-gutter-md mt-xl"
+      class="text-2xl grid grid-cols-6 lg:grid-cols-9 gap-x-gutter-sm md:gap-x-gutter-md mt-xl"
     >
       <div class="col-span-2 lg:col-span-3">Email</div><div
         class="col-span-4 lg:col-span-6"
diff --git a/src/layouts/CommunityLayout.astro b/src/layouts/CommunityLayout.astro
@@ -47,7 +47,7 @@ setJumpToState({
   <section>
     <h2>{t("Sketches")}<a id="sketches"></a></h2>
     <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
     >
       {
         sketches.map((sk, i) => (
@@ -67,7 +67,7 @@ setJumpToState({
       }
     </ul>
     <div
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
     >
       <LinkButton url="/sketches" variant="link" class="mt-lg col-span-1 w-full"
         >{t("All Sketches")}</LinkButton
@@ -78,7 +78,7 @@ setJumpToState({
   <section>
     <h2>{t("Libraries")}<a id="libraries"></a></h2>
     <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
     >
       {
         libraries.map((lib) => (
@@ -89,7 +89,7 @@ setJumpToState({
       }
     </ul>
     <div
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
     >
       <LinkButton
         url="/libraries"
@@ -102,7 +102,7 @@ setJumpToState({
   <section>
     <h2>{t("Events")}<a id="events"></a></h2>
     <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
     >
       {
         events.map((event, i) => (
@@ -120,7 +120,7 @@ setJumpToState({
       }
     </ul>
     <div
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
     >
       <LinkButton url="/events" variant="link" class="mt-lg col-span-1 w-full"
         >{t("All Events")}</LinkButton
diff --git a/src/layouts/ContributeLayout.astro b/src/layouts/ContributeLayout.astro
@@ -54,7 +54,7 @@ setJumpToState({
   <section>
     <h2 id="docs">{t("Contributor Docs")}</h2>
     <div
-      class="mb-md grid grid-cols-1 gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-2"
+      class="mb-md grid grid-cols-1 gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-2"
     >
       <div>
         <Image
@@ -70,7 +70,7 @@ setJumpToState({
       </p>
     </div>
     <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
     >
       {
         entries.map((entry) => (
@@ -84,7 +84,7 @@ setJumpToState({
   <section>
     <h2 id="donate">{t("Donate")}</h2>
     <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
     >
       {
         // This is the same markup as in ContributorDocItem
diff --git a/src/layouts/ContributorDocLayout.astro b/src/layouts/ContributorDocLayout.astro
@@ -43,7 +43,7 @@ setJumpToState(jumpToState);
   topic="contribute"
   className="contribute"
 >
-  <div class="rendered-markdown">
+  <section class="rendered-markdown">
     <Content />
-  </div>
+  </section>
 </BaseLayout>
diff --git a/src/layouts/EventsLayout.astro b/src/layouts/EventsLayout.astro
@@ -23,15 +23,17 @@ setJumpToState(null);
 <Head title={"Events"} locale={currentLocale} />
 
 <BaseLayout title="Events" variant="item" topic="community">
-  <ul
-    class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
-  >
-    {entries.map((entry) => <GridItemEvent item={entry} />)}
-  </ul>
-  <PaginationNav
-    maxNumItems={totalNumEvents}
-    itemsPerPage={eventsPerPage}
-    currentPage={currentPage}
-    sectionUrlPrefix="/events"
-  />
+  <section>
+    <ul
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
+    >
+      {entries.map((entry) => <GridItemEvent item={entry} />)}
+    </ul>
+    <PaginationNav
+      maxNumItems={totalNumEvents}
+      itemsPerPage={eventsPerPage}
+      currentPage={currentPage}
+      sectionUrlPrefix="/events"
+    />
+  </section>
 </BaseLayout>
diff --git a/src/layouts/ExamplesLayout.astro b/src/layouts/ExamplesLayout.astro
@@ -61,7 +61,7 @@ setJumpToState(jumpToState);
         <h2 class="col-span-full">
           {category.name} <a id={category.name.toLowerCase()} />
         </h2>
-        <ul class="col-span-full grid grid-cols-2 lg:grid-cols-4 gap-y-gutter-md gap-x-gutter-sm lg:gap-x-gutter-md">
+        <ul class="col-span-full grid grid-cols-2 lg:grid-cols-4 gap-y-gutter-md gap-x-gutter-sm md:gap-x-gutter-md">
           {category.examples.map((exampleEntry, i) => (
             <li class="col-span-1">
               {<GridItemExample item={exampleEntry} lazyLoad={i <= 4} />}
diff --git a/src/layouts/HomepageLayout.astro b/src/layouts/HomepageLayout.astro
@@ -37,7 +37,7 @@ setJumpToState(null);
 
 <BaseLayout title="" variant="homepage" homepageConfig={config}>
   <div
-    class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm lg:gap-x-gutter-md gap-y-xl mb-xl"
+    class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm md:gap-x-gutter-md gap-y-xl mb-xl"
   >
     <div
       class="col-span-2 lg:col-span-3 order-1 grid grid-cols-subgrid content-start"
@@ -64,7 +64,7 @@ setJumpToState(null);
   </div>
 
   <div
-    class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm lg:gap-x-gutter-md gap-y-xl mb-xl"
+    class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm md:gap-x-gutter-md gap-y-xl mb-xl"
   >
     <div class="col-span-2 lg:col-span-3 grid grid-cols-subgrid content-start">
       <h2 class="col-span-3">{data.communityHeaderText}</h2>
@@ -85,7 +85,7 @@ setJumpToState(null);
   </div>
 
   <div
-    class="grid grid-cols-2 lg:grid-cols-4 gap-lg gap-x-gutter-sm lg:gap-x-gutter-md mb-xl"
+    class="grid grid-cols-2 lg:grid-cols-4 gap-lg gap-x-gutter-sm md:gap-x-gutter-md mb-xl"
   >
     <div class="grid grid-cols-subgrid col-span-1 lg:col-span-2">
       <h2 class="col-span-2">{t("Donate to p5.js")}</h2>
diff --git a/src/layouts/LibrariesLayout.astro b/src/layouts/LibrariesLayout.astro
@@ -68,19 +68,16 @@ setJumpToState({
 
   {
     sections.map(({ slug, name, sectionEntries }) => (
-      <div class="mb-lg">
-        <hr />
-        <h2 id={slug} class="mb-lg mt-sm lg:mt-md">
-          {name}
-        </h2>
-        <ul class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4">
+      <section>
+        <h2 id={slug}>{name}</h2>
+        <ul class="grid grid-cols-2 gap-y-gutter-md gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4">
           {sectionEntries.map((entry: LibraryEntry) => (
             <li>
               <GridItemLibrary item={entry} />
             </li>
           ))}
         </ul>
-      </div>
+      </section>
     ))
   }
 </BaseLayout>
diff --git a/src/layouts/PeopleLayout.astro b/src/layouts/PeopleLayout.astro
@@ -99,7 +99,7 @@ setJumpToState(null);
   <section>
     <h2>{contributorEntries.label}</h2>
     <ul
-      class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm lg:gap-x-gutter-md"
+      class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm md:gap-x-gutter-md"
     >
       {
         lodash.shuffle(contributorEntries.members).map((person) => (
diff --git a/src/layouts/SketchesLayout.astro b/src/layouts/SketchesLayout.astro
@@ -24,15 +24,17 @@ const { entries, totalNumSketches, currentPage } = Astro.props;
 <Head title="Sketches" locale={currentLocale} />
 
 <BaseLayout title="Sketches" variant="item" topic="community">
-  <ul
-    class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
-  >
-    {entries.map((entry) => <GridItemSketch item={entry} />)}
-  </ul>
-  <PaginationNav
-    maxNumItems={totalNumSketches}
-    itemsPerPage={sketchesPerPage}
-    sectionUrlPrefix="/sketches"
-    currentPage={currentPage}
-  />
+  <section>
+    <ul
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
+    >
+      {entries.map((entry) => <GridItemSketch item={entry} />)}
+    </ul>
+    <PaginationNav
+      maxNumItems={totalNumSketches}
+      itemsPerPage={sketchesPerPage}
+      sectionUrlPrefix="/sketches"
+      currentPage={currentPage}
+    />
+  </section>
 </BaseLayout>

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ const t = await getUiTranslator(currentLocale);`
`7`	`7`	`---`
`8`	`8`
`9`	`9`	`<footer`
`10`		`- class="text-body border-t border-black grid-cols-3 lg:grid-cols-4 grid gap-x-gutter-sm lg:gap-x-gutter-md pt-md pb-5 px-lg bg-accent-color text-accent-type-color content-start"`
	`10`	`+ class="text-body border-t border-black grid-cols-3 lg:grid-cols-4 grid gap-x-gutter-sm md:gap-x-gutter-md pt-md pb-5 px-lg bg-accent-color text-accent-type-color content-start"`
`11`	`11`	`>`
`12`	`12`	`<div class="grid lg:row-span-2 grid-rows-subgrid">`
`13`	`13`	`<div>`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ const borderStyle = isFilterRoute ? "" : "border-b border-sidebar-type-color";`
`12`	`12`	`---`
`13`	`13`
`14`	`14`	`<div`
`15`		- class=`grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm lg:gap-x-gutter-md min-h-[350px] h-[50vh] pt-5xl lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
	`15`	+ class=`grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm md:gap-x-gutter-md min-h-[350px] h-[50vh] pt-5xl lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
`16`	`16`	`>`
`17`	`17`	`<h1 class="whitespace-pre-line col-span-full mb-5">{title}</h1>`
`18`	`18`	`<p class="text-h3 !mt-0 mb-3xl col-span-2">{subtitle}</p>`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ const numPages = getPaginationMax(itemsPerPage, maxNumItems);`
`17`	`17`
`18`	`18`	`{`
`19`	`19`	`numPages > 1 && (`
`20`		`- <ul class="flex gap-xs my-sm">`
	`20`	`+ <ul class="flex gap-xs mt-gutter-md">`
`21`	`21`	`{Array.from({ length: numPages }).map((_, i) => (`
`22`	`22`	`<li>`
`23`	`23`	`<CircleButton`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ const { title, items, class: className } = Astro.props;`
`26`	`26`	`<section class={className}>`
`27`	`27`	`<h2>{title}</h2>`
`28`	`28`	`<ul`
`29`		`- class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md"`
	`29`	`+ class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md"`
`30`	`30`	`>`
`31`	`31`	`{`
`32`	`32`	`items.map((i) => {`
Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);`
`82`	`82`	`<section>`
`83`	`83`	`<h2 id="contact">{t("Contact")}</h2>`
`84`	`84`	`<div`
`85`		`- class="text-2xl grid grid-cols-6 lg:grid-cols-9 gap-x-gutter-sm lg:gap-x-gutter-md mt-xl"`
	`85`	`+ class="text-2xl grid grid-cols-6 lg:grid-cols-9 gap-x-gutter-sm md:gap-x-gutter-md mt-xl"`
`86`	`86`	`>`
`87`	`87`	`<div class="col-span-2 lg:col-span-3">Email</div><div`
`88`	`88`	`class="col-span-4 lg:col-span-6"`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ setJumpToState({`
`47`	`47`	`<section>`
`48`	`48`	`<h2>{t("Sketches")}<a id="sketches"></a></h2>`
`49`	`49`	`<ul`
`50`		`- class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"`
	`50`	`+ class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"`
`51`	`51`	`>`
`52`	`52`	`{`
`53`	`53`	`sketches.map((sk, i) => (`
`@@ -67,7 +67,7 @@ setJumpToState({`
`67`	`67`	`}`
`68`	`68`	`</ul>`
`69`	`69`	`<div`
`70`		`- class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"`
	`70`	`+ class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"`
`71`	`71`	`>`
`72`	`72`	`<LinkButton url="/sketches" variant="link" class="mt-lg col-span-1 w-full"`
`73`	`73`	`>{t("All Sketches")}</LinkButton`
`@@ -78,7 +78,7 @@ setJumpToState({`
`78`	`78`	`<section>`
`79`	`79`	`<h2>{t("Libraries")}<a id="libraries"></a></h2>`
`80`	`80`	`<ul`
`81`		`- class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"`
	`81`	`+ class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"`
`82`	`82`	`>`
`83`	`83`	`{`
`84`	`84`	`libraries.map((lib) => (`
`@@ -89,7 +89,7 @@ setJumpToState({`
`89`	`89`	`}`
`90`	`90`	`</ul>`
`91`	`91`	`<div`
`92`		`- class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"`
	`92`	`+ class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"`
`93`	`93`	`>`
`94`	`94`	`<LinkButton`
`95`	`95`	`url="/libraries"`
`@@ -102,7 +102,7 @@ setJumpToState({`
`102`	`102`	`<section>`
`103`	`103`	`<h2>{t("Events")}<a id="events"></a></h2>`
`104`	`104`	`<ul`
`105`		`- class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"`
	`105`	`+ class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"`
`106`	`106`	`>`
`107`	`107`	`{`
`108`	`108`	`events.map((event, i) => (`
`@@ -120,7 +120,7 @@ setJumpToState({`
`120`	`120`	`}`
`121`	`121`	`</ul>`
`122`	`122`	`<div`
`123`		`- class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"`
	`123`	`+ class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"`
`124`	`124`	`>`
`125`	`125`	`<LinkButton url="/events" variant="link" class="mt-lg col-span-1 w-full"`
`126`	`126`	`>{t("All Events")}</LinkButton`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ setJumpToState({`
`54`	`54`	`<section>`
`55`	`55`	`<h2 id="docs">{t("Contributor Docs")}</h2>`
`56`	`56`	`<div`
`57`		`- class="mb-md grid grid-cols-1 gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-2"`
	`57`	`+ class="mb-md grid grid-cols-1 gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-2"`
`58`	`58`	`>`
`59`	`59`	`<div>`
`60`	`60`	`<Image`
`@@ -70,7 +70,7 @@ setJumpToState({`
`70`	`70`	`</p>`
`71`	`71`	`</div>`
`72`	`72`	`<ul`
`73`		`- class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"`
	`73`	`+ class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"`
`74`	`74`	`>`
`75`	`75`	`{`
`76`	`76`	`entries.map((entry) => (`
`@@ -84,7 +84,7 @@ setJumpToState({`
`84`	`84`	`<section>`
`85`	`85`	`<h2 id="donate">{t("Donate")}</h2>`
`86`	`86`	`<ul`
`87`		`- class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"`
	`87`	`+ class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"`
`88`	`88`	`>`
`89`	`89`	`{`
`90`	`90`	`// This is the same markup as in ContributorDocItem`