feat: use smaller description text for page header without byline (#216)

Author: jawinn

blocks/ideas/ideas-functions.js

@@ -22,7 +22,7 @@ import { getCurrentFiltersArray } from "../filter-group/filter-group-utils.js";
  * Create markup for ideas feature section from data/content, and return it.
  * Title text is required.
  * @param {IdeasFeatureContent} featureContent
- * @returns {HTMLDivElement|null} Markup of feature, or null if missing required content.
+ * @returns {HTMLElement|null} Markup of feature, or null if missing required content.
  */
 export const buildIdeasFeature = (featureContent) => {
   // Check for required content.
@@ -32,7 +32,7 @@ export const buildIdeasFeature = (featureContent) => {
 
   // Create markup.
   // This element is both a grid item for the larger page layout, and a grid container for its children.
-  const feature = document.createElement("div");
+  const feature = document.createElement("aside");
   feature.classList.add("grid-item", "grid-item--100", "ideas__feature");
 
   // Content side which contains text elements and button.

blocks/page-header/page-header.css

@@ -43,13 +43,17 @@
   }
 
   .page-header__description {
-    font-weight: var(--spectrum-medium-font-weight);
+    font-weight: var(--spectrum-body-font-weight);
     line-height: 1.5;
   }
 
+  .page-header__description--with-byline {
+    font-weight: var(--spectrum-medium-font-weight);
+  }
+
   .page-header__description,
   .page-header__byline {
-    margin-block-end: 1.25rem;
+    margin-block: 0 1.25rem;
 
     @media (min-width: 48rem) {
       margin-block-end: 1.875rem;
@@ -95,7 +99,7 @@
     }
 
     .page-header__description {
-      font-size: var(--body-size-l);
+      font-size: var(--body-size-m);
     }
 
     .page-header__description--with-byline {
@@ -109,9 +113,11 @@
       & h1 {
         font-size: var(--spectrum-font-size-1100);
       }
+
       .page-header__description--with-byline {
         font-size: var(--title-size-m);
       }
+
       .page-header-byline__author {
         font-size: var(--title-size-s);
       }
@@ -123,10 +129,6 @@
       font-size: var(--heading-size-xl);
     }
 
-    .page-header__description {
-      font-size: var(--body-size-xl);
-    }
-
     .page-header__description--with-byline {
       font-size: var(--title-size-xl);
     }

blocks/page-header/page-header.js

@@ -26,7 +26,7 @@ export default async function decorate(block) {
 
   // if there is a description, add it as an h2
   if (pageHeaderData.description) {
-    const pageDescription = document.createElement("div");
+    const pageDescription = document.createElement("p");
     pageDescription.classList.add("page-header__description");
 
     // if there is a byline, the description uses