Add footer block (#53)

* add basic footer implementation

* switch order so stylelint is happy

* minor footer styling adjustments

* add socialmedia links

* add tablet viewport

* remove unnecessary dom elements

* fix minor visual bugs

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;
 }

cigaradvisor/scripts/scripts.js

@@ -1,6 +1,5 @@
 import {
   sampleRUM,
-  buildBlock,
   loadHeader,
   loadFooter,
   decorateButtons,
@@ -19,16 +18,6 @@ const LCP_BLOCKS = []; // add your LCP blocks to the list
  * Builds hero block and prepends to main in a new section.
  * @param {Element} main The container element
  */
-function buildHeroBlock(main) {
-  const h1 = main.querySelector('h1');
-  const picture = main.querySelector('picture');
-  // eslint-disable-next-line no-bitwise
-  if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
-    const section = document.createElement('div');
-    section.append(buildBlock('hero', { elems: [picture, h1] }));
-    main.prepend(section);
-  }
-}
 
 /**
  * Builds two column grid.
@@ -69,9 +58,10 @@ async function loadFonts() {
  * Builds all synthetic blocks in a container element.
  * @param {Element} main The container element
  */
+// eslint-disable-next-line no-unused-vars
 function buildAutoBlocks(main) {
   try {
-    buildHeroBlock(main);
+    // do nothing
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);

cigaradvisor/styles/styles.css

@@ -121,26 +121,43 @@
 }
 
 
- :root {
+:root {
   /* colors */
+  --clr-white: #fff;
+  --clr-dark-gray: #141414;
+  --clr-black: #000;
+  --clr-pampas: #e9e4de;
+
+  /* functional-colors */
+  --clr-text: var(--clr-dark-gray);
+
+  /* filter colors (https://codepen.io/sosuke/pen/Pjoqqp) */
+  --clr-filter-gray: invert(18%) sepia(4%) saturate(304%) hue-rotate(277deg) brightness(98%) contrast(92%);
 
   /* fonts */
-   --ff-arial: 'Arial', sans-serif;
-   --ff-opensans: 'Open Sans', 'Open Sans Fallback', sans-serif;
-   --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
-   --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
+  --ff-arial: 'Arial', sans-serif;
+  --ff-opensans: 'Open Sans', 'Open Sans Fallback', sans-serif;
+  --ff-montserrat: 'Montserrat', 'Montserrat Fallback', sans-serif;
+  --ff-alfaslabone: 'Alfa Slab One', 'Alfa Slab One Fallback', cursive;
 
   /* body sizes */
+  --text-size-xs: 12px;
+  --text-size-sm: 14px;
+  --text-size-md: 16px;
+  --text-size-lg: 18px;
+  --text-size-xl: 24px;
 
   /* heading sizes */
 
-  /* nav height */
+  /* misc */
   --nav-height: 64px;
- }
+  --icon-size: var(--text-size-xl);
+}
 
 body {
   display: none;
-  color: #333;
+  margin: 0;
+  color: var(--clr-text);
 }
 
 body.appear {
@@ -171,15 +188,15 @@ h2 {
   font-family: var(--ff-montserrat);
   font-weight: 900;
   text-transform: uppercase;
-  color: #141414;
+  color: var(--clr-text);
   margin: 0 auto;
   font-size: 12px;
 }
 
 a{
   font-family: var(--ff-montserrat);
   font-weight: 600;
-  color: #141414;
+  color: var(--clr-text);
   font-size: 12px;
   background-color: transparent;
   text-decoration:none
@@ -195,6 +212,10 @@ a:active, a:hover {
   outline-width: 0;
 }
 
+.default-content-wrapper {
+  color: var(--clr-text);
+}
+
 /* Two-column grid */
 main .section[data-layout="50/50"]{
   padding-left: 0;
@@ -228,3 +249,17 @@ main .section[data-layout="50/50"] .right-grid > div{
   padding: 10px;
 }
 
+.icon > img {
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+
+.bg-dark-gray {
+  --clr-text: var(--clr-white);
+
+  background-color: var(--clr-dark-gray);
+}
+
+.bg-pampas {
+  background-color: var(--clr-pampas);
+}