standardize grid gutters

outofambit · outofambit · commit 9c9f52cc597e · 2024-05-16T12:01:13.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-[40px] 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 lg: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-[40px] 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 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}`
 >
   <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
@@ -117,10 +117,10 @@ export const ReferenceDirectoryWithFilter = ({
             id={subcat.name}
             href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}`}
           >
-            <h3 className="m-0 py-[40px]">{subcat.name}</h3>
+            <h3 className="py-gutter-md m-0">{subcat.name}</h3>
           </a>
         ) : (
-          <h3 className="m-0 py-[40px]" id={subcat.name}>
+          <h3 className="py-gutter-md m-0" id={subcat.name}>
             {subcat.name}
           </h3>
         )}
@@ -157,7 +157,7 @@ export const ReferenceDirectoryWithFilter = ({
   return (
     <div>
       <div class="h-0 overflow-visible">
-        <div class="relative -top-[75px] grid h-[75px] grid-cols-2 gap-x-[40px] 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 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="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,7 +25,9 @@ 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-[40px]">
+    <ul
+      class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md"
+    >
       {
         items.map((i) => {
           if (isCurationResponse(i)) {
diff --git a/src/components/SearchForm/index.astro b/src/components/SearchForm/index.astro
@@ -20,7 +20,7 @@ const t = await getUiTranslator(currentLocale);
     type="search"
     placeholder={t("Search") as string}
     name="term"
-    class="placeholder-accent-type-color bg-transparent pl-[40px] py-[6px] md:py-[4px] lg:py-[8px] w-full rounded-[20px] focus:outline-0 peer"
+    class="placeholder-accent-type-color bg-transparent pl-gutter-md py-[6px] md:py-[4px] lg:py-[8px] w-full rounded-[20px] focus:outline-0 peer"
     aria-label="Search through site content"
     required
   />
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
@@ -81,7 +81,9 @@ 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-[40px] mt-xl">
+    <div
+      class="text-2xl grid grid-cols-6 lg:grid-cols-9 gap-x-gutter-sm lg: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
@@ -46,7 +46,9 @@ setJumpToState({
 <BaseLayout title="Community">
   <section>
     <h2>{t("Sketches")}<a id="sketches"></a></h2>
-    <ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+    <ul
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+    >
       {
         sketches.map((sk, i) => (
           <li
@@ -64,7 +66,9 @@ setJumpToState({
         ))
       }
     </ul>
-    <div class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+    <div
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg: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
       >
@@ -73,7 +77,9 @@ setJumpToState({
 
   <section>
     <h2>{t("Libraries")}<a id="libraries"></a></h2>
-    <ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+    <ul
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+    >
       {
         libraries.map((lib) => (
           <li>
@@ -82,7 +88,9 @@ setJumpToState({
         ))
       }
     </ul>
-    <div class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+    <div
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+    >
       <LinkButton
         url="/libraries"
         variant="link"
@@ -93,7 +101,9 @@ setJumpToState({
 
   <section>
     <h2>{t("Events")}<a id="events"></a></h2>
-    <ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+    <ul
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+    >
       {
         events.map((event, i) => (
           <li
@@ -109,7 +119,9 @@ setJumpToState({
         ))
       }
     </ul>
-    <div class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+    <div
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg: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
@@ -53,7 +53,9 @@ setJumpToState({
 <BaseLayout title="Contribute">
   <section>
     <h2 id="docs">{t("Contributor Docs")}</h2>
-    <div class="mb-md grid grid-cols-1 gap-x-[40px] lg:grid-cols-2">
+    <div
+      class="mb-md grid grid-cols-1 gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-2"
+    >
       <div>
         <Image
           src={ContributeImage}
@@ -67,7 +69,9 @@ setJumpToState({
         {t("contributePage", "Statement")}
       </p>
     </div>
-    <ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+    <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) => (
           <li>
@@ -79,7 +83,9 @@ setJumpToState({
   </section>
   <section>
     <h2 id="donate">{t("Donate")}</h2>
-    <ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+    <ul
+      class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4"
+    >
       {
         // This is the same markup as in ContributorDocItem
         donateSectionItems.map((it) => (
diff --git a/src/layouts/EventsLayout.astro b/src/layouts/EventsLayout.astro
@@ -23,7 +23,9 @@ 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-[40px] lg:grid-cols-4">
+  <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
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-x-[20px] gap-y-[40px] lg:gap-x-[40px]">
+        <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">
           {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,7 +36,9 @@ setJumpToState(null);
 />
 
 <BaseLayout title="" variant="homepage" homepageConfig={config}>
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-[40px] gap-y-xl mb-xl">
+  <div
+    class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm lg: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"
     >
@@ -61,7 +63,9 @@ setJumpToState(null);
     </div>
   </div>
 
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-[40px] gap-y-xl mb-xl">
+  <div
+    class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm lg: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>
       <LinkButton class="col-span-1 w-full" variant="link" url="/community"
@@ -80,7 +84,9 @@ setJumpToState(null);
     </div>
   </div>
 
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg gap-x-[40px] mb-xl">
+  <div
+    class="grid grid-cols-2 lg:grid-cols-4 gap-lg gap-x-gutter-sm lg: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>
       <div class="col-span-1">
diff --git a/src/layouts/LibrariesLayout.astro b/src/layouts/LibrariesLayout.astro
@@ -73,7 +73,7 @@ setJumpToState({
         <h2 id={slug} class="mb-lg mt-sm lg:mt-md">
           {name}
         </h2>
-        <ul class="grid grid-cols-2 gap-y-xl gap-x-[40px] lg:grid-cols-4">
+        <ul class="grid grid-cols-2 gap-y-xl gap-x-gutter-sm lg:gap-x-gutter-md lg:grid-cols-4">
           {sectionEntries.map((entry: LibraryEntry) => (
             <li>
               <GridItemLibrary item={entry} />
diff --git a/src/layouts/PeopleLayout.astro b/src/layouts/PeopleLayout.astro
@@ -98,7 +98,9 @@ setJumpToState(null);
 
   <section>
     <h2>{contributorEntries.label}</h2>
-    <ul class="grid grid-cols-2 lg:grid-cols-4 gap-x-[40px]">
+    <ul
+      class="grid grid-cols-2 lg:grid-cols-4 gap-x-gutter-sm lg:gap-x-gutter-md"
+    >
       {
         lodash.shuffle(contributorEntries.members).map((person) => (
           <li class="col-span-1">
diff --git a/src/layouts/ReferenceItemLayout.astro b/src/layouts/ReferenceItemLayout.astro
@@ -127,7 +127,7 @@ const seenParams: Record<string, true> = {};
               <h2 class="mb-md text-h3">{t("Parameters")}</h2>
               {entry.data.params &&
                 entry.data.params.map((param: ReferenceParam) => (
-                  <div class="grid grid-cols-6 gap-[40px] text-body">
+                  <div class="grid grid-cols-6 gap-gutter-md text-body">
                     <span class="col-span-1 text-body">{param.name}</span>
                     <span
                       class="col-span-5 [&_p]:m-0 [&_a]:underline"
@@ -141,7 +141,7 @@ const seenParams: Record<string, true> = {};
                     if (seenParams[param.name]) return <></>;
                     seenParams[param.name] = true;
                     return (
-                      <div class="grid grid-cols-6 gap-[40px] text-body">
+                      <div class="grid grid-cols-6 gap-gutter-md text-body">
                         <h4 class="col-span-1">{param.name}</h4>
                         <div
                           class="col-span-5 [&_p]:m-0 [&_p]:inline [&_a]:underline"
diff --git a/src/layouts/SketchesLayout.astro b/src/layouts/SketchesLayout.astro
@@ -24,7 +24,9 @@ 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-[40px] lg:grid-cols-4">
+  <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
diff --git a/src/layouts/TutorialsLayout.astro b/src/layouts/TutorialsLayout.astro
@@ -50,7 +50,7 @@ setJumpToState({
   {
     sections.map(({ slug, name, sectionEntries }) => (
       <section>
-        <h2 id={slug} class="mb-[40px] mt-0">
+        <h2 id={slug} class="mb-gutter-md mt-0">
           {name}
         </h2>
         <ul class="content-grid border-b border-sidebar-type-color last:border-0">
@@ -64,7 +64,7 @@ setJumpToState({
     ))
   }
   <section>
-    <h2 class="mb-[40px] mt-0">
+    <h2 class="mb-gutter-md mt-0">
       {t("tutorialsPage", "education-resources")}<a id="education-resources"
       ></a>
     </h2>
diff --git a/styles/global.scss b/styles/global.scss
@@ -205,24 +205,24 @@ section,
 .section {
   border-bottom-width: 1px;
   border-color: var(--type-color);
-  padding-bottom: 80px;
+  padding-bottom: var(--gutter-lg);
 
   &:last-child {
     border-width: 0px;
   }
 
   h2,
   .text-h2 {
-    padding-top: 20px;
+    padding-top: var(--gutter-sm);
     margin-top: 0px;
-    margin-bottom: 40px;
+    margin-bottom: var(--gutter-md);
   }
 
   h2,
   .text-h2,
   h3,
   text-h3 {
-    scroll-margin-top: 40px;
+    scroll-margin-top: var(--gutter-md);
     @media (min-width: $breakpoint-tablet) {
       scroll-margin-top: 0;
     }
@@ -360,7 +360,12 @@ pre.code-box {
 .content-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 40px;
+  column-gap: var(--gutter-sm);
+  row-gap: var(--gutter-md);
+
+  @media (min-width: $breakpoint-tablet) {
+    gap: var(--gutter-md);
+  }
 
   @media (min-width: $breakpoint-laptop) {
     grid-template-columns: repeat(9, minmax(0, 1fr));
diff --git a/styles/variables.scss b/styles/variables.scss
@@ -59,6 +59,11 @@ html {
   /* Settings container */
   --settings-container-height-laptop: 40px;
   --settings-container-height-touch: 35px;
+
+  /** Common gutter widths */
+  --gutter-sm: 20px;
+  --gutter-md: 40px;
+  --gutter-lg: 80px;
 }
 
 .home {
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -55,6 +55,10 @@ export default {
         "3xl": "var(--spacing-3xl)",
         "4xl": "var(--spacing-4xl)",
         "5xl": "var(--spacing-5xl)",
+        gutter: "var(--gutter)",
+        "gutter-sm": "var(--gutter-sm)",
+        "gutter-md": "var(--gutter-md)",
+        "gutter-lg": "var(--gutter-lg)",
       },
       animation: {
         "spin-slow": "spin 7s linear infinite",

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-[40px] 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 lg: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-[40px] 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 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}`
`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>`