PR Feedback: Adjust category header style, adjust bottom margin on library lists, use bespoke hero classes, adjust mobile hero size, use tokens for padding

Author: jlchilders11

static/css/v3/foundations.css

@@ -134,6 +134,6 @@ html.v3 code {
   max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
-  padding-left:.75rem;
-  padding-right:.75rem;
+  padding-left:var(--space-large);
+  padding-right:var(--space-large);
 }

static/css/v3/header.css

@@ -24,7 +24,7 @@
 
 @media (min-width: 1440px) {
   .header {
-    min-width: var(--header-width);
+    max-width: var(--header-width);
   }
 }
 

static/css/v3/library-page.css

@@ -1,38 +1,65 @@
-.library-page-hero .hero-home__block {
-    padding: 0;
-    height: fit-content;
+/*
+=============================================
+=            Hero Styling                   =
+=============================================
+*/
+
+.library-page-hero {
     margin-top: var(--space-xl);
     margin-bottom: var(--space-xl);
     position: relative;
-    min-height: fit-content;
-}
-
-.library-page-hero .hero-home__actions {
-    width: 100%;
+    display: grid;
+    grid-template-columns: 574px 1fr auto;
+    gap: var(--space-xl);
+    align-items: center;
+    grid-template-areas:
+        "a . c"
+        "b . c"
+    ;
 }
 
-.library-page-hero .hero-home__actions .field {
+.library-page-hero .hero-search-bar {
+    grid-area: b;
     width: 75%;
 }
 
-.library-page-hero .hero-home__content {
-    margin: 0;
+.library-page-hero .hero-image {
+    grid-area: c;
 }
 
-.library-page-hero .hero-library__image {
+.library-page-hero .hero-image,
+.library-page-hero .hero-image img {
     height: 160px;
     width: auto;
 }
 
-.library-page-hero .hero-home__headline {
+.library-page-hero .hero-title {
+    grid-area: a;
+    margin: 0;
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
     font-size: var(--font-size-2xl);
-    letter-spacing: -0.4px;
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
 }
 
+/*
+======================================
+=            List Styling            =
+======================================
+*/
+
 .library-item-list {
     border: 1px solid var(--color-stroke-weak);
     border-radius: var(--border-radius-xl);
     overflow: hidden;
+    margin-bottom: var(--space-xxl);
+}
+
+.library-item-card-grid {
+    margin-bottom: var(--space-xxl);
 }
 
 .library-item-list .library-item--list:last-child {
@@ -74,6 +101,12 @@
     letter-spacing: var(--letter-spacing-tight);
 }
 
+/*
+=================================================
+=           Category Display Styling            =
+=================================================
+*/
+
 .library-page__category-header {
     grid-column: 1 / -1;
     padding: var(--space-large);
@@ -82,6 +115,11 @@
     width: 100%;
     margin: 0;
     max-width: 1408px;
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-tight);
+    line-height: var(--line-height-tight);
+    font-size: var(--font-size-large);
+    font-family: var(--font-display);
     border-top-left-radius: var(--border-radius-xl);
     border-top-right-radius: var(--border-radius-xl);
     border: 1px solid var(--color-stroke-weak);
@@ -98,10 +136,20 @@
         display: none;
     }
 
-    .library-page-hero .hero-home__actions .field {
+    .library-page-hero .hero-search-bar {
         width: 100%;
     }
 
+    .library-page-hero {
+        grid-template-areas:
+            "c"
+            "a"
+            "b"
+        ;
+        grid-template-columns: 100%;
+        justify-items: start;
+    }
+
     .library-page__container {
         margin-left: var(--space-medium);
         margin-right: var(--space-medium);

templates/v3/library_page.html

@@ -18,19 +18,13 @@
 
 {% block content %}
   <div class="library-page__container">
-    <section class="library-page-hero hero-home hero-home--no-image" aria-label="Hero">
-      <div class="hero-home__block">
-        <div class="hero-home__content">
-          <h1 class="hero-home__headline">Find a battle-tested library for the problem you're solving right now.</h1>
-          <div class="hero-home__actions">
+    <section class="library-page-hero" aria-label="Hero">
+          <h1 class="hero-title">Find a battle-tested library for the problem you're solving right now.</h1>
+          <div class="hero-search-bar">
             {% include 'v3/includes/_field_text.html' with label='Search' name='ex_search' placeholder='Keyword, name, etc.' icon_left='search' submit_icon='arrow-right' %}
           </div>
-        </div>
-        <div class="hero-library__image">
-          <img alt="" class="hero-library__img" src="{% static 'img/v3/solo-images/beaver-black-and-white.png' %}" loading="lazy" decoding="async" />
-        </div>
-      </div>
-    </section>
+          <img alt="Excited Cartoon Mascot" class="hero-image" src="{% static 'img/v3/solo-images/beaver-black-and-white.png' %}" loading="lazy" decoding="async" />
+      </section>
     <form action="" method="get">
       <div id="library-page-filter-container" class="mb-xl">
         {% include 'v3/includes/_library_filter.html' with filter_id='library-page-filter' fields=library_filter_fields %}