Merge pull request #352 from processing/spacing-tweaks

Spacing tweaks

Author: outofambit

src/components/GridItem/Person.astro

@@ -17,10 +17,8 @@ const { item: person } = Astro.props;
   />
 </div>
 <a
-  class="text-body mt-xs"
   href={person.data.url}
   aria-label={`Link to ${person.data.name}'s personal website'`}
->
-  {person.data.name}
+  ><p class="text-body mt-xs">{person.data.name}</p>
 </a>
 <p class="text-body-caption mt-xxs">{person.data.role}</p>

src/components/Nav/JumpToLinks.tsx

@@ -27,7 +27,7 @@ export const JumpToLinks = ({
       >
         <span>{heading}</span>
         <div class="pt-[6px]">
-          <Icon kind={isOpen ? "chevron-up" : "chevron-down"} />
+          <Icon kind={isOpen ? "chevron-down" : "chevron-up"} />
         </div>
       </button>
       {isOpen && (

src/components/Nav/MainNavLinks.tsx

@@ -42,7 +42,12 @@ export const MainNavLinks = ({
         <Logo />
       </a>
 
-      <button onClick={handleToggle} aria-hidden="true" tabIndex={-1}>
+      <button
+        class={styles.toggle}
+        onClick={handleToggle}
+        aria-hidden="true"
+        tabIndex={-1}
+      >
         <div class={styles.mobileMenuLabel}>
           {isOpen ? (
             <Icon kind="close" />

src/components/Nav/styles.module.scss

@@ -69,6 +69,10 @@
       margin-bottom: 10px;
     }
 
+    .toggle {
+      display: grid;
+    }
+
     ul {
       grid-column: 1 / 2;
       font-size: 1.25rem;
@@ -104,6 +108,7 @@
     display: none;
     @media (min-width: $breakpoint-tablet) {
       display: block;
+      margin-top: 5px;
     }
   }
 
@@ -141,7 +146,7 @@
     overflow-x: hidden;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    padding: var(--spacing-sm) 1.25rem;
+    padding: 0 1.25rem var(--spacing-sm);
     font-size: 1.5rem;
     line-height: 1.167;
     -webkit-text-stroke-width: 0.15px;
@@ -156,10 +161,6 @@
     // Firefox
     -ms-overflow-styles: none;
     scrollbar-width: none;
-
-    li {
-      padding-bottom: var(--spacing-xxs);
-    }
   }
 
   .toggle {
@@ -170,14 +171,19 @@
   }
 
   @media (min-width: $breakpoint-tablet) {
-    height: 80px;
+    height: fit-content;
     border-top-width: 1px;
     margin-top: auto;
 
     &:global(.open) {
       height: 100%;
       overflow-y: scroll;
     }
+
+    .toggle {
+      padding: 20px;
+    }
+
     ul {
       padding-bottom: var(--spacing-md);
       display: inline-block;
@@ -189,10 +195,6 @@
   }
 }
 
-:global(.reference-item) .jumpto ul {
-  grid-template-columns: 1fr;
-}
-
 .buttonlink {
   display: flex;
   width: 100%;
@@ -223,23 +225,38 @@
   }
 
   &:not(:global(.small)) {
+    // text-h3
     font-size: 1.5rem;
     line-height: 1.167;
     -webkit-text-stroke-width: 0.15px;
   }
   &:global(.small) {
-    @extend .text-body;
+    // text-body
+    font-size: 1rem;
+    line-height: 1.25;
+    -webkit-text-stroke-width: 0.05px;
   }
 
   @media (min-width: $breakpoint-tablet) {
+    &:global(.small) {
+      // text-body-caption
+      font-size: 0.875rem;
+      line-height: 1.42;
+      -webkit-text-stroke-width: 0.1px;
+    }
     &:not(&:global(.small)) {
+      // text-body-large
       font-size: 1.25rem;
       line-height: 1.2;
       -webkit-text-stroke-width: 0.15px;
     }
   }
 }
 
+.linklabel:not(:global(.small)) + .linklabel:global(.small) {
+  margin-top: 4px;
+}
+
 /* Interaction */
 
 .jumpto:global(.open) {
@@ -255,3 +272,16 @@
     }
   }
 }
+
+/* Page-specific modifications */
+:global(.reference-item) .jumpto ul {
+  grid-template-columns: 1fr;
+}
+
+:global(.contribute),
+:global(.tutorials),
+:global(.about) {
+  .jumpto ul li.linklabel:not(:global(.small), :first-child) {
+    margin-top: 10px;
+  }
+}

src/components/PageHeader/RootPage.astro

@@ -12,8 +12,8 @@ const borderStyle = isFilterRoute ? "" : "border-b border-sidebar-type-color";
 ---
 
 <div
-  class=`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-[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">{title}</h1>
-  <p class="text-h3 mt-0 mb-3xl">{subtitle}</p>
+  <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>
 </div>

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -161,8 +161,8 @@ export const ReferenceDirectoryWithFilter = ({
   return (
     <div>
       <div class="h-0 overflow-visible">
-        <div class="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 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
+        <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">
             <input
               type="text"
               id="search"

src/components/RelatedItems/index.astro

@@ -24,9 +24,7 @@ const { title, items, class: className } = Astro.props;
 <div class={className}>
   <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] lg:gap-x-10"
-  >
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-y-xl gap-x-[40px]">
     {
       items.map((i) => {
         if (isCurationResponse(i)) {

src/components/Settings/styles.module.scss

@@ -16,7 +16,8 @@
   padding: var(--spacing-sm) 1.25rem;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   grid-template-rows: repeat(2, var(--settings-container-height-touch));
-  gap: 20px;
+  row-gap: 20px;
+  column-gap: 40px;
 
   @media (min-width: $breakpoint-tablet) {
     width: calc(100% - var(--nav-offset-x));

src/content/text-detail/en/about.mdx

@@ -13,7 +13,7 @@ p5.js prioritizes accessibility, inclusivity, community, and joy. It makes sketc
 p5.js encourages iterative coding for creative expression. We value open source and access for all. Our community provides inspiration and support to learn, create, imagine, design, share, and code freely.
 </div>
 
-<hr/>
+<hr class='full-bleed'/>
 
 ## Community Statement
 

src/content/text-detail/es/about.mdx

@@ -13,6 +13,8 @@ p5.js prioriza la accesibilidad, la inclusión, la comunidad y la alegría. Hace
 p5.js fomenta la programación iterativa para la expresión creativa. Valoramos el código abierto y el acceso para todos. Nuestra comunidad proporciona inspiración y apoyo para aprender, crear, imaginar, diseñar, compartir y programar libremente.
 </div>
 
+<hr class='full-bleed'/>
+
 ## Declaración de la comunidad
 
 <div class='text-body-large'>