Merge branch 'main' of https://github.com/hlxsites/famous-smoke-cigar…

…advisor into feature/authorcard

# Conflicts:
#	cigaradvisor/scripts/scripts.js
#	cigaradvisor/styles/lazy-styles.css
#	cigaradvisor/styles/styles.css

cigaradvisor/blocks/article-teaser/article-teaser.css

@@ -45,7 +45,7 @@
   font-weight: 600;
   background-color: #3c3a3b;
   font-size: 12px;
-  z-index: 9999;
+  z-index: 999;
   text-decoration: none;
 }
 

cigaradvisor/blocks/authorcard/authorcard.css

@@ -69,11 +69,11 @@
 }
 
 .authorcard.block .left-column .button {
-    background-color: var(--black);
+    background-color: var(--clr-black);
     border: 2px solid;
     font-family: var(--ff-montserrat);
     font-weight: var(--font-weight-bold);
-    color: var(--white);
+    color: var(--clr-white);
     text-transform: uppercase;
     border-color: var(--tan);
     display: inline-block;
@@ -131,7 +131,7 @@
 }
 
 .authorcard.block .right-column p {
-    color: var(--white);
+    color: var(--clr-white);
     text-transform: uppercase;
     background-color: transparent;
     font-family: var(--ff-montserrat);
@@ -144,7 +144,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;
-    color: var(--white);
+    color: var(--clr-white);
     font-weight: var(--font-weight-extrabold);
     font-size: var(--body-font-size-xl);
 }
@@ -173,7 +173,7 @@
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: opacity 0.3s ease;
-    color: var(--white);
+    color: var(--clr-white);
     text-align: center;
 }
 

cigaradvisor/blocks/footer/footer.css

@@ -1,14 +1,135 @@
-footer {
-  padding: 2rem;
-  background-color: var(--overlay-background-color);
-  font-size: var(--body-font-size-s);
+.footer {
+  text-transform: uppercase;
+  text-align: center;
+  font-family: var(--ff-montserrat);
 }
 
-footer .footer {
-  max-width: 1200px;
-  margin: auto;
+.footer a {
+  line-height: unset;
+  font-size: unset;
+  font-family: unset;
+  font-weight: 600;
 }
 
-footer .footer p {
+.footer-legal {
+  display: flex;
+  justify-content: center;
+  line-height: 2em;
+  font-family: var(--ff-opensans);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.footer-legal ul {
+  padding: 15px 0;
   margin: 0;
-}
+  list-style-type: none;
+}
+
+.footer-legal ul > li {
+  line-height: 18px;
+}
+
+.footer-legal a {
+  font-family: var(--ff-montserrat);
+}
+
+.footer-nav {
+  padding: 18px 0 40px;
+}
+
+.footer-nav > .nav-container {
+  display: grid;
+}
+
+.footer-nav > .nav-container > .nav-section {
+  padding: 10px;
+  width: 100%;
+  font-size: 14px;
+  line-height: 33px;
+}
+
+.footer-nav > .nav-container > .nav-section.with-heading > h1 {
+  margin-bottom: 5px;
+  color: #673841;
+  font-family: var(--ff-opensans);
+  font-weight: 700;
+  font-size: 16px;
+  letter-spacing: .06em;
+}
+
+.footer-nav > .nav-container > .nav-section > ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-nav > .nav-container > .nav-section:last-child > ul > li {
+  display: inline;
+}
+
+.footer-nav > .nav-container > .nav-section:last-child > ul > li .icon {
+  --icon-size: 28px;
+
+  margin: 0 10px;
+  filter: var(--clr-filter-gray);
+}
+
+@media print, screen and (min-width: 720px) {
+  .footer {
+    text-align: unset;
+  }
+
+  .footer-nav {
+    padding-bottom: 40px;
+  }
+
+  .footer-nav > .nav-container {
+    max-width: 1100px;
+    margin: auto;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-areas: "nav nav nav nav" "social social social social";
+  }
+
+  .footer-nav > .nav-container > .nav-section {
+    width: fit-content;
+  }
+
+  .footer-nav > .nav-container > .nav-section:last-child {
+    grid-area: social;
+    margin: auto;
+    text-align: center;
+  }
+
+  .footer-legal ul > li {
+    display: inline;
+    line-height: 24px;
+  }
+
+  .footer-legal ul > li:not(:last-child)::after {
+    content: " | ";
+    margin: 10px;
+  }
+}
+
+@media screen and (min-width: 960px) {
+  .footer-nav > .nav-container {
+    grid-template-columns: 8% 18% 18% 18% auto;
+  }
+
+  .footer-nav > .nav-container > .nav-section:last-child {
+    grid-area: unset;
+    margin: unset;
+    text-align: unset;
+  }
+
+  .footer-nav > .nav-container > .nav-section:last-child > ul > li .icon {
+    margin: 0 18px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .footer-legal {
+    font-size: 14px;
+  }
+}

cigaradvisor/blocks/footer/footer.js

@@ -7,15 +7,39 @@ import { loadFragment } from '../fragment/fragment.js';
  */
 export default async function decorate(block) {
   const footerMeta = getMetadata('footer');
-  block.textContent = '';
 
   // load footer fragment
   const footerPath = footerMeta.footer || '/cigaradvisor/footer';
-  const fragment = await loadFragment(footerPath);
+  const footerContent = await loadFragment(footerPath);
+  const currentYear = new Date().getFullYear();
+  footerContent.innerHTML = footerContent.innerHTML.replaceAll('{year}', currentYear.toString());
 
-  // decorate footer DOM
-  const footer = document.createElement('div');
-  while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
+  // decorate footer sections
+  const footerContainer = footerContent.querySelector('div.footer-nav > .default-content-wrapper');
+  if (footerContainer && footerContainer.childNodes.length) {
+    footerContainer.classList.add('nav-container');
 
-  block.append(footer);
+    let currentElement = footerContainer.firstElementChild;
+    let nextElement;
+    while (currentElement) {
+      // create section
+      const section = document.createElement('div');
+      section.classList.add('nav-section');
+      if (currentElement.tagName === 'H1') {
+        section.classList.add('with-heading');
+      }
+
+      // populate section
+      do {
+        nextElement = currentElement.nextSibling;
+        section.appendChild(currentElement);
+        currentElement = nextElement;
+      } while (nextElement && nextElement.tagName !== 'H1');
+
+      // add section to container
+      footerContainer.insertBefore(section, currentElement);
+    }
+  }
+
+  block.innerHTML = footerContent.innerHTML;
 }