Merge branch 'main' into 5-header

blocks/columns/columns.css

@@ -19,7 +19,7 @@
   display: block;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 768px) {
   .columns > div {
     align-items: center;
     flex-direction: unset;

blocks/footer/footer.css

@@ -6,16 +6,11 @@ footer {
 
 footer .footer > div {
   margin: auto;
-  max-width: 1200px;
-  padding: 40px 24px 24px;
+  max-width: var(--content-max-width);
+  padding-block: 40px;
+  padding-inline: var(--content-padding-inline);
 }
 
 footer .footer p {
   margin: 0;
 }
-
-@media (min-width: 900px) {
-  footer .footer > div {
-    padding: 40px 32px 24px;
-  }
-}

blocks/header/header.css

@@ -24,9 +24,9 @@ nav {
   align-items: center;
   gap: 0 24px;
   margin: auto;
-  max-width: 1248px;
+  max-width: var(--content-max-width);
   height: var(--nav-height);
-  padding: 0 24px;
+  padding-inline: var(--content-padding-inline);
   font-family: var(--body-font-family);
 
   &[aria-expanded='true'] {
@@ -47,8 +47,6 @@ nav {
     display: flex;
     justify-content: space-between;
     gap: 0 32px;
-    max-width: 1264px;
-    padding: 0 32px;
   }
 
   p {

blocks/header/header.js

@@ -1,7 +1,7 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
-// media query match that indicates mobile/tablet width
+// media query match that indicates desktop width
 const isDesktop = window.matchMedia('(min-width: 1280px)');
 
 function closeOnEscape(e) {

blocks/hero/hero.css

@@ -5,12 +5,13 @@
 
 .hero {
   position: relative;
-  padding: 40px 24px;
+  padding-block: 40px;
+  padding-inline: var(--content-padding-inline);
   min-height: 300px;
 }
 
 .hero h1 {
-  max-width: 1200px;
+  max-width: var(--content-max-width);
   margin-left: auto;
   margin-right: auto;
   color: var(--background-color);
@@ -29,9 +30,3 @@
   width: 100%;
   height: 100%;
 }
-
-@media (min-width: 900px) {
-  .hero {
-    padding: 40px 32px;
-  }
-}

scripts/aem.js

@@ -403,7 +403,7 @@ function decorateButtons(element) {
           && twoup.childNodes.length === 1
           && twoup.tagName === 'P'
         ) {
-          a.className = 'button primary';
+          a.className = 'button button--secondary';
           twoup.classList.add('button-container');
         }
         if (
@@ -412,7 +412,7 @@ function decorateButtons(element) {
           && twoup.childNodes.length === 1
           && twoup.tagName === 'P'
         ) {
-          a.className = 'button secondary';
+          a.className = 'button button--tertiary';
           twoup.classList.add('button-container');
         }
       }
@@ -426,16 +426,23 @@ function decorateButtons(element) {
  * @param {string} [prefix] prefix to be added to icon src
  * @param {string} [alt] alt text to be added to icon
  */
-function decorateIcon(span, prefix = '', alt = '') {
+async function decorateIcon(span, prefix = '', alt = '') {
   const iconName = Array.from(span.classList)
     .find((c) => c.startsWith('icon-'))
     .substring(5);
-  const img = document.createElement('img');
-  img.dataset.iconName = iconName;
-  img.src = `${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`;
-  img.alt = alt;
-  img.loading = 'lazy';
-  span.append(img);
+
+  const resp = await fetch(`${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`);
+  if (resp.ok) {
+    const iconHTML = await resp.text();
+    if (iconHTML.match(/<style/i)) {
+      const img = document.createElement('img');
+      img.alt = alt;
+      img.src = `data:image/svg+xml,${encodeURIComponent(iconHTML)}`;
+      span.appendChild(img);
+    } else {
+      span.innerHTML = iconHTML;
+    }
+  }
 }
 
 /**