consolidate grid css

outofambit · outofambit · commit 005ae44636a1 · 2024-05-16T15:37:38.000-07:00
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 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}`
+  class=`content-grid-simple 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/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 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="content-grid-simple relative -top-[75px] h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
           <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
@@ -25,9 +25,7 @@ const { title, items, class: className } = Astro.props;
   <hr />
   <section class={className}>
     <h2>{title}</h2>
-    <ul
-      class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md"
-    >
+    <ul class="content-grid-simple">
       {
         items.map((i) => {
           if (isCurationResponse(i)) {
diff --git a/src/layouts/CommunityLayout.astro b/src/layouts/CommunityLayout.astro
@@ -46,9 +46,7 @@ setJumpToState({
 <BaseLayout title="Community">
   <section>
     <h2>{t("Sketches")}<a id="sketches"></a></h2>
-    <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <ul class="content-grid-simple">
       {
         sketches.map((sk, i) => (
           <li
@@ -66,9 +64,7 @@ setJumpToState({
         ))
       }
     </ul>
-    <div
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <div class="content-grid-simple">
       <LinkButton url="/sketches" variant="link" class="mt-lg col-span-1 w-full"
         >{t("All Sketches")}</LinkButton
       >
@@ -77,9 +73,7 @@ setJumpToState({
 
   <section>
     <h2>{t("Libraries")}<a id="libraries"></a></h2>
-    <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <ul class="content-grid-simple">
       {
         libraries.map((lib) => (
           <li>
@@ -88,9 +82,7 @@ setJumpToState({
         ))
       }
     </ul>
-    <div
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <div class="content-grid-simple">
       <LinkButton
         url="/libraries"
         variant="link"
@@ -101,9 +93,7 @@ setJumpToState({
 
   <section>
     <h2>{t("Events")}<a id="events"></a></h2>
-    <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <ul class="content-grid-simple">
       {
         events.map((event, i) => (
           <li
@@ -119,9 +109,7 @@ setJumpToState({
         ))
       }
     </ul>
-    <div
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <div class="content-grid-simple">
       <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
@@ -69,9 +69,7 @@ setJumpToState({
         {t("contributePage", "Statement")}
       </p>
     </div>
-    <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <ul class="content-grid-simple">
       {
         entries.map((entry) => (
           <li>
@@ -83,9 +81,7 @@ setJumpToState({
   </section>
   <section>
     <h2 id="donate">{t("Donate")}</h2>
-    <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <ul class="content-grid-simple">
       {
         // This is the same markup as in ContributorDocItem
         donateSectionItems.map((it) => (
diff --git a/src/layouts/EventsLayout.astro b/src/layouts/EventsLayout.astro
@@ -24,9 +24,7 @@ setJumpToState(null);
 
 <BaseLayout title="Events" variant="item" topic="community">
   <section>
-    <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <ul class="content-grid-simple">
       {entries.map((entry) => <GridItemEvent item={entry} />)}
     </ul>
     <PaginationNav
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 md:gap-x-gutter-md">
+        <ul class="col-span-full content-grid-simple">
           {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
@@ -36,9 +36,7 @@ setJumpToState(null);
 />
 
 <BaseLayout title="" variant="homepage" homepageConfig={config}>
-  <div
-    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="content-grid-simple mb-xl">
     <div
       class="col-span-2 lg:col-span-3 order-1 grid grid-cols-subgrid content-start"
     >
@@ -63,9 +61,7 @@ setJumpToState(null);
     </div>
   </div>
 
-  <div
-    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="content-grid-simple 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>
       <LinkButton class="col-span-1 w-full" variant="link" url="/community"
@@ -84,9 +80,7 @@ setJumpToState(null);
     </div>
   </div>
 
-  <div
-    class="grid grid-cols-2 lg:grid-cols-4 gap-lg gap-x-gutter-sm md:gap-x-gutter-md mb-xl"
-  >
+  <div class="content-grid-simple 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>
       <div class="col-span-1">
diff --git a/src/layouts/LibrariesLayout.astro b/src/layouts/LibrariesLayout.astro
@@ -70,7 +70,7 @@ setJumpToState({
     sections.map(({ slug, name, sectionEntries }) => (
       <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">
+        <ul class="content-grid-simple">
           {sectionEntries.map((entry: LibraryEntry) => (
             <li>
               <GridItemLibrary item={entry} />
diff --git a/src/layouts/PeopleLayout.astro b/src/layouts/PeopleLayout.astro
@@ -98,9 +98,7 @@ setJumpToState(null);
 
   <section>
     <h2>{contributorEntries.label}</h2>
-    <ul
-      class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm md:gap-x-gutter-md"
-    >
+    <ul class="content-grid-simple">
       {
         lodash.shuffle(contributorEntries.members).map((person) => (
           <li class="col-span-1">
diff --git a/src/layouts/SketchesLayout.astro b/src/layouts/SketchesLayout.astro
@@ -25,9 +25,7 @@ const { entries, totalNumSketches, currentPage } = Astro.props;
 
 <BaseLayout title="Sketches" variant="item" topic="community">
   <section>
-    <ul
-      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm md:gap-x-gutter-md lg:grid-cols-4"
-    >
+    <ul class="content-grid-simple">
       {entries.map((entry) => <GridItemSketch item={entry} />)}
     </ul>
     <PaginationNav
diff --git a/styles/global.scss b/styles/global.scss
@@ -360,6 +360,8 @@ pre.code-box {
   }
 }
 
+// Grid that switches from 2 to 3 to 4 columns as screen gets bigger
+// Usually used with items that have a column width of 3
 .content-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
@@ -379,6 +381,23 @@ pre.code-box {
   }
 }
 
+// Grid that switches from 2 to 4 columns as screen gets bigger
+// Usually used with items that have a column width of 1
+.content-grid-simple {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--gutter-sm);
+  row-gap: var(--gutter-md);
+
+  @media (min-width: $breakpoint-tablet) {
+    gap: var(--gutter-md);
+  }
+
+  @media (min-width: $breakpoint-desktop) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 td,
 th {
   padding: var(--spacing-xs);

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 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}`
	`15`	+ class=`content-grid-simple 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>`