Merge pull request #354 from processing/ui-fixes

UI fixes

Author: outofambit

src/components/Footer/index.astro

@@ -11,7 +11,7 @@ const t = await getUiTranslator(currentLocale);
 >
   <div class="grid lg:row-span-2 grid-rows-subgrid">
     <div>
-      <div class="mb-md">p5.js</div>
+      <div class="mb-5">p5.js</div>
     </div>
     <div
       class="self-end w-28 max-w-full lg:w-32 text-accent-type-color lg:-top-2 relative"
@@ -20,7 +20,7 @@ const t = await getUiTranslator(currentLocale);
     </div>
   </div>
   <div>
-    <div class="mb-md" id="resources-footer-category">{t("Resources")}</div>
+    <div class="mb-5" id="resources-footer-category">{t("Resources")}</div>
     <ul aria-labelledby="resources-footer-category">
       <li><a href="/reference">{t("Reference")}</a></li>
       <li><a href="/tutorials">{t("Tutorials")}</a></li>
@@ -34,7 +34,7 @@ const t = await getUiTranslator(currentLocale);
   </div>
   <div class="lg:col-span-2 grid grid-cols-subgrid">
     <div>
-      <div class="mb-md" id="info-footer-category">{t("Information")}</div>
+      <div class="mb-5" id="info-footer-category">{t("Information")}</div>
       <ul aria-labelledby="info-footer-category">
         <li><a href="/download">{t("Download")}</a></li>
         <li><a href="/contact">{t("Contact")}</a></li>
@@ -44,7 +44,7 @@ const t = await getUiTranslator(currentLocale);
       </ul>
     </div>
     <div class="lg:col-start-2 mt-xl lg:mt-0">
-      <div class="mb-md" id="socials-footer-category">{t("Socials")}</div>
+      <div class="mb-5" id="socials-footer-category">{t("Socials")}</div>
       <ul aria-labelledby="socials-footer-category">
         <li><a href="https://github.com/processing/p5.js">GitHub</a></li>
         <li><a href="https://www.instagram.com/p5xjs/">Instagram</a></li>

src/components/GridItem/ContributorDoc.astro

@@ -14,7 +14,7 @@ const { item } = Astro.props;
   href={`/contribute/${removeLocaleAndExtension(item.slug)}`}
 >
   <div
-    class="grid place-content-center mt-xs bg-accent-color text-accent-type-color aspect-photo p-4 mb-2"
+    class="grid place-content-center bg-accent-color text-accent-type-color aspect-photo p-4"
   >
     <span
       class="text-lg text-center align-middle line-clamp-3 text-pretty group-hover:underline"

src/components/Nav/styles.module.scss

@@ -33,7 +33,9 @@
     justify-content: space-between;
     height: 35px;
     width: 100%;
-    padding: var(--spacing-xs) 0;
+    a {
+      height: 25px;
+    }
   }
 
   &:global(.open) {
@@ -67,6 +69,9 @@
       gap: var(--spacing-xs);
       padding: 0;
       margin-bottom: 10px;
+      a {
+        height: unset;
+      }
     }
 
     .toggle {
@@ -97,7 +102,7 @@
 
     svg {
       height: 1rem;
-      width: 1rem;
+      width: 1.25rem;
     }
     @media (min-width: $breakpoint-tablet) {
       display: none !important;
@@ -108,7 +113,7 @@
     display: none;
     @media (min-width: $breakpoint-tablet) {
       display: block;
-      margin-top: 5px;
+      margin-top: 7.5px;
     }
   }
 

src/components/PageHeader/RootPage.astro

@@ -15,5 +15,5 @@ const borderStyle = isFilterRoute ? "" : "border-b border-sidebar-type-color";
   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}`
 >
   <h1 class="whitespace-pre-line col-span-full mb-5">{title}</h1>
-  <p class="text-h3 !mt-0 mb-3xl col-span-3">{subtitle}</p>
+  <p class="text-h3 !mt-0 mb-3xl col-span-2">{subtitle}</p>
 </div>

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -77,29 +77,30 @@ export const ReferenceDirectoryWithFilter = ({
     }, []);
   }, [categoryData, searchKeyword]);
 
-  const renderEntries = (entries: ReferenceDirectoryEntry[]) => (
-    <div class="content-grid">
-      {entries.map((entry) => (
-        <div class="col-span-3 w-full overflow-hidden" key={entry.id}>
-          <a
-            href={`/reference/${entry.data.path}`}
-            class="group hover:no-underline"
-            aria-label={entry.data.title}
-            aria-describedby={`${entry.data.title}-description`}
-          >
-            <span
-              class="text-body-mono group-hover:underline"
-              dangerouslySetInnerHTML={{ __html: entry.data.title }}
-            />
-            <p
-              class="mt-1 text-sm"
-              id={`${entry.data.title}-description`}
-            >{`${getOneLineDescription(entry.data.description)}`}</p>
-          </a>
-        </div>
-      ))}
-    </div>
-  );
+  const renderEntries = (entries: ReferenceDirectoryEntry[]) =>
+    entries.length === 0 ? null : (
+      <div class="content-grid">
+        {entries.map((entry) => (
+          <div class="col-span-3 w-full overflow-hidden" key={entry.id}>
+            <a
+              href={`/reference/${entry.data.path}`}
+              class="group hover:no-underline"
+              aria-label={entry.data.title}
+              aria-describedby={`${entry.data.title}-description`}
+            >
+              <span
+                class="text-body-mono group-hover:underline"
+                dangerouslySetInnerHTML={{ __html: entry.data.title }}
+              />
+              <p
+                class="mt-1 text-sm"
+                id={`${entry.data.title}-description`}
+              >{`${getOneLineDescription(entry.data.description)}`}</p>
+            </a>
+          </div>
+        ))}
+      </div>
+    );
 
   const getSubcatHeading = (
     subcat: { name: string },
@@ -110,21 +111,20 @@ export const ReferenceDirectoryWithFilter = ({
     }
 
     return (
-      <div class="my-lg">
+      <>
         {subcat.name.includes("p5.") ? (
           <a
             id={subcat.name}
             href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}`}
           >
-            <h3>{subcat.name}</h3>
+            <h3 className="m-0 py-[40px]">{subcat.name}</h3>
           </a>
         ) : (
-          <h3>
+          <h3 className="m-0 py-[40px]" id={subcat.name}>
             {subcat.name}
-            <a id={subcat.name} />
           </h3>
         )}
-      </div>
+      </>
     );
   };
 
@@ -133,21 +133,17 @@ export const ReferenceDirectoryWithFilter = ({
       return <div class="mt-lg">{uiTranslations["No Results"]}</div>;
     }
     return filteredEntries.map((category) => (
-      <div
-        class="my-md border-b border-type-color pb-2xl last:!border-0"
-        key={category.name}
-      >
-        <h2>
+      <section key={category.name}>
+        <h2 class="mb-0" id={category.name}>
           {category.name}
-          <a id={category.name} />
         </h2>
         {category.subcats.map((subcat) => (
           <div key={subcat.name}>
             {getSubcatHeading(subcat, category)}
             {renderEntries(subcat.entries)}
           </div>
         ))}
-      </div>
+      </section>
     ));
   };
 
@@ -162,12 +158,12 @@ export const ReferenceDirectoryWithFilter = ({
     <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="text-body col-span-3 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
+          <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"
               id="search"
               ref={inputRef}
-              class="w-full  bg-transparent py-xs text-accent-type-color placeholder:text-accent-type-color"
+              class="w-full bg-transparent py-xs text-accent-type-color placeholder:text-accent-type-color focus:outline-0"
               placeholder="Filter by keyword"
               onKeyUp={(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
                 const target = e.target as HTMLInputElement;

src/components/RelatedItems/index.astro

@@ -21,24 +21,26 @@ interface Props {
 const { title, items, class: className } = Astro.props;
 ---
 
-<div class={className}>
+<div>
   <hr />
-  <h2 class="mt-md mb-lg">{title}</h2>
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-[40px]">
-    {
-      items.map((i) => {
-        if (isCurationResponse(i)) {
-          return <GridItemSketch item={i} />;
-        }
-        switch (i.collection) {
-          case "reference":
-            return <GridItemReference item={i} />;
-          case "examples":
-            return <GridItemExample item={i} />;
-          case "events":
-            return <GridItemEvent item={i} />;
-        }
-      })
-    }
-  </div>
+  <section class={className}>
+    <h2>{title}</h2>
+    <ul class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-[40px]">
+      {
+        items.map((i) => {
+          if (isCurationResponse(i)) {
+            return <GridItemSketch item={i} />;
+          }
+          switch (i.collection) {
+            case "reference":
+              return <GridItemReference item={i} />;
+            case "examples":
+              return <GridItemExample item={i} />;
+            case "events":
+              return <GridItemEvent item={i} />;
+          }
+        })
+      }
+    </ul>
+  </section>
 </div>

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] peer"
+    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"
     aria-label="Search through site content"
     required
   />

src/components/SearchResults/index.tsx

@@ -116,7 +116,7 @@ const SearchResults = ({
               onSearchChange(e);
             }
           }}
-          class="h-fit w-full appearance-none bg-transparent px-md text-4xl placeholder-sidebar-type-color"
+          class="h-fit w-full appearance-none bg-transparent px-md text-4xl placeholder-sidebar-type-color focus:outline-0"
           aria-label="Search through site content"
           required
         />

src/layouts/AboutLayout.astro

@@ -59,13 +59,13 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
 <Head title="About" locale={currentLocale} />
 
 <BaseLayout title="About" variant="root">
-  <section class="mt-md pb-xs rendered-markdown">
+  <section class="rendered-markdown">
     <Content />
   </section>
-  <hr />
-  <section class="pb-2xl lg:pb-xl">
+
+  <section>
     <h2 id="people">{t("People")}</h2>
-    <ul class="content-grid my-xl">
+    <ul class="content-grid">
       {
         displayedFeaturedPeople.map((fp) => (
           <li class="col-span-2">
@@ -74,12 +74,12 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
         ))
       }
     </ul>
-    <LinkButton variant="link" url="/people" class="my-md min-w-[220px]"
+    <LinkButton variant="link" url="/people" class="mt-md min-w-[220px]"
       >{t("All People")}</LinkButton
     >
   </section>
-  <hr />
-  <section class="pb-3xl lg:pb-2xl">
+
+  <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="col-span-2 lg:col-span-3">Email</div><div
@@ -100,7 +100,6 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
       </div>
     </div>
   </section>
-  <hr />
   <section>
     <h2 id="processing-foundation">Processing Foundation</h2>
     <ul class="text-2xl mt-xl">
@@ -121,7 +120,4 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
   a {
     @apply text-type-magenta-dark;
   }
-  h2 {
-    @apply mt-sm;
-  }
 </style>

src/layouts/BaseLayout.astro

@@ -26,7 +26,7 @@ const {
   subtitle,
   className = "",
   variant = "root",
-  mainContentParentClass = "mx-5 md:mx-lg pb-4xl mt-md",
+  mainContentParentClass = "mx-5 md:mx-lg mt-md",
   homepageConfig,
 } = Astro.props;
 const currentLocale = getCurrentLocale(Astro.url.pathname);