Background Style Names (#89)

* Add some comments. * update angle background naming. * Fix CLS issue.
hlxsites · Jul 31, 2023 · 28f47a5 · 28f47a5
1 parent 3ebd510
commit 28f47a5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -19,8 +19,8 @@ export default async function decorate(block) {
 
     // size the footer image
     const image = footer.querySelector('picture img');
-    image.setAttribute('width', '100');
-    image.removeAttribute('height');
+    image.width = '100';
+    image.height = '36';
 
     decorateIcons(footer);
     block.append(footer);

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -21,6 +21,10 @@ export const BREAKPOINTS = {
 
 const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list
 
+/**
+ * Converts paagraphs that start with a `<sup>` element, to a p.reference paragraph.
+ * @param {HTMLElement} main
+ */
 function updateRefParagraphs(main) {
   main.querySelectorAll('sup').forEach((sup) => {
     if (!sup.previousSibling) {
@@ -30,6 +34,11 @@ function updateRefParagraphs(main) {
   });
 }
 
+/**
+ * Builds the Floating Images auto-block sections.
+ *
+ * @param {HTMLElement} main
+ */
 function buildFloatingImages(main) {
   main.querySelectorAll('.section-metadata').forEach((metadata) => {
     let style;
@@ -63,7 +72,7 @@ function buildFloatingImages(main) {
 
 /**
  * Builds all synthetic blocks in a container element.
- * @param {Element} main The container element
+ * @param {HTMLElement} main The container element
  */
 function buildAutoBlocks(main) {
   try {
@@ -75,6 +84,10 @@ function buildAutoBlocks(main) {
   }
 }
 
+/**
+ * Builds layout containers after all sections & blocks have been decorated.
+ * @param {HTMLElement} main
+ */
 export function buildLayoutContainers(main) {
   main.querySelectorAll('.section[data-layout]').forEach((section) => {
     const container = document.createElement('div');

diff --git a/styles/styles.css b/styles/styles.css
@@ -355,7 +355,7 @@ main > .section.full-width > div {
   max-width: var(--full-page-width);
 }
 
-main .section.gray-gradient {
+main .section.gray-gradient-background {
   background: linear-gradient(
           var(--gray-gradient-angle),
           var(--gray-gradient-light) 0%,
@@ -364,14 +364,14 @@ main .section.gray-gradient {
   );
 }
 
-.angle-background-top,
-.angle-background-top-s,
-.angle-background-top-l {
+.angled-background,
+.small-angled-background,
+.large-angled-background {
   background: var(--white);
 }
 
-.section .angle-background-top::after,
-.section .angle-background-top-s::after {
+.section .angled-background::after,
+.section .small-angled-background::after {
   background: var(--gray-gradient-light);
   clip-path: polygon(0 100%, 100% 5vw, 100% 0, 0 100%);
   content: '';
@@ -382,7 +382,7 @@ main .section.gray-gradient {
   width: 100%;
 }
 
-.section .angle-background-top-l::after {
+.section .large-angled-background::after {
   background: var(--gray-gradient-light);
   clip-path: polygon(0 100%, 100% 10vw, 100% 0, 0 100%);
   content: '';
@@ -394,14 +394,14 @@ main .section.gray-gradient {
 }
 
 .section.angle-background,
-.section.angle-background-top,
-.section.angle-background-top-s,
-.section.angle-background-top-l {
+.section.angled-background,
+.section.small-angled-background,
+.section.large-angled-background {
   padding-bottom: unset;
 }
 
-.section.angle-background-top::after,
-.section.angle-background-top-s::after {
+.section.angled-background::after,
+.section.small-angled-background::after {
   background: var(--gray-gradient-light);
   clip-path: polygon(0 100%, 100% 5vw, 100% 0, 0 100%);
   content: '';
@@ -413,7 +413,7 @@ main .section.gray-gradient {
 
 }
 
-.section.angle-background-top-l::after {
+.section.large-angled-background::after {
   background: var(--gray-gradient-light);
   clip-path: polygon(0 100%, 100% 10vw, 100% 0, 0 100%);
   content: '';