From 8933141e6d28e243ec53329abfdd2a15c146b5d2 Mon Sep 17 00:00:00 2001
From: Luca <adobe@gituser.de>
Date: Tue, 19 Dec 2023 17:19:39 +0100
Subject: [PATCH 1/7] add basic footer implementation

---
 cigaradvisor/blocks/footer/footer.css         | 105 ++++++++++++++++--
 cigaradvisor/blocks/footer/footer.js          |  40 ++++++-
 cigaradvisor/blocks/icon-links/icon-links.css |   0
 cigaradvisor/blocks/icon-links/icon-links.js  |   0
 cigaradvisor/scripts/scripts.js               |  14 +--
 cigaradvisor/styles/styles.css                |  35 ++++--
 6 files changed, 160 insertions(+), 34 deletions(-)
 create mode 100644 cigaradvisor/blocks/icon-links/icon-links.css
 create mode 100644 cigaradvisor/blocks/icon-links/icon-links.js

diff --git a/cigaradvisor/blocks/footer/footer.css b/cigaradvisor/blocks/footer/footer.css
index 19fc5607..66ce243e 100644
--- a/cigaradvisor/blocks/footer/footer.css
+++ b/cigaradvisor/blocks/footer/footer.css
@@ -1,14 +1,101 @@
-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: montserrat, sans-serif;
 }
 
-footer .footer {
-  max-width: 1200px;
-  margin: auto;
+.footer a {
+  line-height: unset;
+  font-size: unset;
+  font-family: unset;
+  font-weight: unset;
 }
 
-footer .footer p {
+.footer-nav {
+  padding-top: 24px;
+}
+
+.footer-nav > .nav-container {
+  display: flex;
+  flex-flow: column wrap;
+  align-content: flex-start;
+}
+
+.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 {
+  color: #673841;
+  font-weight: 700;
+  margin-bottom: 5px;
+  font-size: 16px;
+  letter-spacing: .06em;
+}
+
+.footer-nav > .nav-container > .nav-section > ul {
+  list-style-type: none;
+  padding: 0;
   margin: 0;
-}
\ No newline at end of file
+}
+
+.footer-legal {
+  display: flex;
+  justify-content: center;
+  line-height: 2em;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+ul.footer-legal {
+  padding: 0;
+}
+
+.footer-legal ul > li {
+  line-height: 18px;
+}
+
+@media screen and (min-width: 480px) {
+  .footer {
+    text-align: unset;
+  }
+
+  .footer-nav {
+    padding-bottom: 40px;
+  }
+
+  .footer-nav > .nav-container {
+    max-width: 1080px;
+    margin: auto;
+    flex-flow: row wrap;
+  }
+
+  .footer-nav > .nav-container > .nav-section {
+    width: fit-content;
+  }
+
+  .footer-nav > .nav-container > .nav-section.with-heading {
+    width: 18%;
+  }
+
+  .footer-nav > .nav-container > .nav-section.with-heading:last-child {
+    flex: 1;
+  }
+
+  .footer-legal {
+    font-size: 14px;
+  }
+
+  .footer-legal ul > li {
+    display: inline;
+    line-height: 24px;
+  }
+
+  .footer-legal ul > li:not(:last-child)::after {
+    content: " | ";
+    margin: 10px;
+  }
+}
diff --git a/cigaradvisor/blocks/footer/footer.js b/cigaradvisor/blocks/footer/footer.js
index bf75a916..d8d9e0c7 100644
--- a/cigaradvisor/blocks/footer/footer.js
+++ b/cigaradvisor/blocks/footer/footer.js
@@ -7,15 +7,43 @@ 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 navContainer = footerContent.querySelector('div.footer-nav > .default-content-wrapper');
+  if (navContainer && navContainer.childNodes.length) {
+    navContainer.classList.add('nav-container');
 
-  block.append(footer);
+    let currentElement = navContainer.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
+      if (nextElement) {
+        navContainer.insertBefore(section, nextElement);
+      } else {
+        navContainer.appendChild(section);
+      }
+    }
+  }
+
+  block.innerHTML = footerContent.innerHTML;
 }
diff --git a/cigaradvisor/blocks/icon-links/icon-links.css b/cigaradvisor/blocks/icon-links/icon-links.css
new file mode 100644
index 00000000..e69de29b
diff --git a/cigaradvisor/blocks/icon-links/icon-links.js b/cigaradvisor/blocks/icon-links/icon-links.js
new file mode 100644
index 00000000..e69de29b
diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
index fa44ccdb..a4ddf6f0 100644
--- a/cigaradvisor/scripts/scripts.js
+++ b/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);
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 3286a29d..39f947d8 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -10,8 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
- :root {
+:root {
   /* colors */
+  --clr-white: #fff;
+  --clr-dark-gray: #141414;
+  --clr-black: #000;
+  --clr-pampas: #e9e4de;
+
+  /* functional-colors */
+  --clr-text: var(--clr-dark-gray);
 
   /* fonts */
 
@@ -21,11 +28,12 @@
 
   /* nav height */
   --nav-height: 64px;
- }
+}
 
 body {
   display: none;
-  color: #333;
+  margin: 0;
+  color: var(--clr-text);
 }
 
 body.appear {
@@ -38,7 +46,7 @@ header {
 
 html {
   font-size:100%;
-  line-height:1.5
+  line-height:1.5;
 }
 
 *, ::before, ::after{
@@ -56,7 +64,7 @@ h2 {
   font-family: montserrat,sans-serif;
   font-weight: 900;
   text-transform: uppercase;
-  color: #141414;
+  color: var(--clr-text);
   margin: 0 auto;
   font-size: 12px;
 }
@@ -64,7 +72,7 @@ h2 {
 a{
   font-family: montserrat,sans-serif;
   font-weight: 600;
-  color: #141414;
+  color: var(--clr-text);
   font-size: 12px;
   background-color: transparent;
   text-decoration:none
@@ -80,6 +88,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;
@@ -104,7 +116,7 @@ main .section[data-layout="50/50"] > div {
   flex-basis: 100%;
   flex-direction: column;
 }
-  
+
 main .section[data-layout="50/50"] .left-grid > div{
   padding: 10px;
 }
@@ -113,3 +125,12 @@ main .section[data-layout="50/50"] .right-grid > div{
   padding: 10px;
 }
 
+.bg-dark-gray {
+  --clr-text: var(--clr-white);
+
+  background-color: var(--clr-dark-gray);
+}
+
+.bg-pampas {
+  background-color: var(--clr-pampas);
+}

From 360aaf85ca72fb5966fc5a4dfea05acaa2414bbf Mon Sep 17 00:00:00 2001
From: Luca <adobe@gituser.de>
Date: Tue, 19 Dec 2023 17:22:04 +0100
Subject: [PATCH 2/7] switch order so stylelint is happy

---
 cigaradvisor/blocks/footer/footer.css | 32 +++++++++++++--------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/cigaradvisor/blocks/footer/footer.css b/cigaradvisor/blocks/footer/footer.css
index 66ce243e..bdfa9782 100644
--- a/cigaradvisor/blocks/footer/footer.css
+++ b/cigaradvisor/blocks/footer/footer.css
@@ -11,6 +11,22 @@
   font-weight: unset;
 }
 
+.footer-legal {
+  display: flex;
+  justify-content: center;
+  line-height: 2em;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.footer-legal ul {
+  padding: 0;
+}
+
+.footer-legal ul > li {
+  line-height: 18px;
+}
+
 .footer-nav {
   padding-top: 24px;
 }
@@ -42,22 +58,6 @@
   margin: 0;
 }
 
-.footer-legal {
-  display: flex;
-  justify-content: center;
-  line-height: 2em;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-ul.footer-legal {
-  padding: 0;
-}
-
-.footer-legal ul > li {
-  line-height: 18px;
-}
-
 @media screen and (min-width: 480px) {
   .footer {
     text-align: unset;

From 08823b08e0019b78ee6a275aef6860a384e8bfbd Mon Sep 17 00:00:00 2001
From: Luca <adobe@gituser.de>
Date: Tue, 19 Dec 2023 18:10:11 +0100
Subject: [PATCH 3/7] minor footer styling adjustments

---
 cigaradvisor/blocks/footer/footer.css | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/cigaradvisor/blocks/footer/footer.css b/cigaradvisor/blocks/footer/footer.css
index bdfa9782..d1466665 100644
--- a/cigaradvisor/blocks/footer/footer.css
+++ b/cigaradvisor/blocks/footer/footer.css
@@ -1,34 +1,41 @@
 .footer {
   text-transform: uppercase;
   text-align: center;
-  font-family: montserrat, sans-serif;
+  font-family: var(--ff-montserrat);
 }
 
 .footer a {
   line-height: unset;
   font-size: unset;
   font-family: unset;
-  font-weight: unset;
+  font-weight: 600;
 }
 
 .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: 0;
+  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-top: 24px;
+  padding-top: 18px;
 }
 
 .footer-nav > .nav-container {
@@ -45,9 +52,10 @@
 }
 
 .footer-nav > .nav-container > .nav-section.with-heading > h1 {
+  margin-bottom: 5px;
   color: #673841;
+  font-family: var(--ff-opensans);
   font-weight: 700;
-  margin-bottom: 5px;
   font-size: 16px;
   letter-spacing: .06em;
 }
@@ -68,7 +76,7 @@
   }
 
   .footer-nav > .nav-container {
-    max-width: 1080px;
+    max-width: 1100px;
     margin: auto;
     flex-flow: row wrap;
   }
@@ -77,6 +85,10 @@
     width: fit-content;
   }
 
+  .footer-nav > .nav-container > .nav-section:first-child {
+    width: 8%;
+  }
+
   .footer-nav > .nav-container > .nav-section.with-heading {
     width: 18%;
   }

From b1ba109c4d9336d3efd8c69869027322b168b09a Mon Sep 17 00:00:00 2001
From: Luca <adobe@gituser.de>
Date: Mon, 8 Jan 2024 11:07:32 +0100
Subject: [PATCH 4/7] add socialmedia links

---
 cigaradvisor/blocks/footer/footer.css         | 73 ++++++++++++++++---
 cigaradvisor/blocks/footer/footer.js          | 17 ++---
 cigaradvisor/blocks/icon-links/icon-links.css |  0
 cigaradvisor/blocks/icon-links/icon-links.js  |  0
 cigaradvisor/icons/facebook-f.svg             |  1 +
 cigaradvisor/icons/instagram.svg              |  1 +
 cigaradvisor/icons/pinterest-p.svg            |  1 +
 cigaradvisor/icons/x-twitter.svg              |  1 +
 cigaradvisor/icons/youtube.svg                |  1 +
 cigaradvisor/styles/styles.css                | 16 +++-
 10 files changed, 91 insertions(+), 20 deletions(-)
 delete mode 100644 cigaradvisor/blocks/icon-links/icon-links.css
 delete mode 100644 cigaradvisor/blocks/icon-links/icon-links.js
 create mode 100644 cigaradvisor/icons/facebook-f.svg
 create mode 100644 cigaradvisor/icons/instagram.svg
 create mode 100644 cigaradvisor/icons/pinterest-p.svg
 create mode 100644 cigaradvisor/icons/x-twitter.svg
 create mode 100644 cigaradvisor/icons/youtube.svg

diff --git a/cigaradvisor/blocks/footer/footer.css b/cigaradvisor/blocks/footer/footer.css
index d1466665..baea08d9 100644
--- a/cigaradvisor/blocks/footer/footer.css
+++ b/cigaradvisor/blocks/footer/footer.css
@@ -38,20 +38,20 @@
   padding-top: 18px;
 }
 
-.footer-nav > .nav-container {
+.footer-nav > .footer-container > .footer-nav {
   display: flex;
   flex-flow: column wrap;
   align-content: flex-start;
 }
 
-.footer-nav > .nav-container > .nav-section {
+.footer-nav > .footer-container > .footer-nav > .nav-section {
   padding: 10px;
   width: 100%;
   font-size: 14px;
   line-height: 33px;
 }
 
-.footer-nav > .nav-container > .nav-section.with-heading > h1 {
+.footer-nav > .footer-container > .footer-nav > .nav-section.with-heading > h1 {
   margin-bottom: 5px;
   color: #673841;
   font-family: var(--ff-opensans);
@@ -60,13 +60,66 @@
   letter-spacing: .06em;
 }
 
-.footer-nav > .nav-container > .nav-section > ul {
+.footer-nav > .footer-container > .footer-nav > .nav-section > ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
 }
 
-@media screen and (min-width: 480px) {
+.footer-nav .icon {
+  --icon-size: 28px;
+
+  margin: 0 20px;
+  filter: var(--clr-filter-gray);
+}
+
+@media print, screen and (min-width: 720px) {
+  .footer {
+    text-align: unset;
+  }
+
+  .footer-nav {
+    padding-bottom: 40px;
+  }
+
+  .footer-nav > .footer-container > .footer-nav {
+    max-width: 1100px;
+    margin: auto;
+    flex-flow: row wrap;
+  }
+
+  .footer-nav > .footer-container > .footer-nav > .nav-section {
+    width: fit-content;
+  }
+
+  .footer-nav > .footer-container > .footer-nav > .nav-section:first-child {
+    width: 8%;
+  }
+
+  .footer-nav > .footer-container > .footer-nav > .nav-section.with-heading {
+    width: 18%;
+  }
+
+  .footer-nav > .footer-container > .footer-nav > .nav-section.with-heading:last-child {
+    flex: 1;
+  }
+
+  .footer-legal {
+    font-size: 14px;
+  }
+
+  .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 {
     text-align: unset;
   }
@@ -75,25 +128,25 @@
     padding-bottom: 40px;
   }
 
-  .footer-nav > .nav-container {
+  .footer-nav > .footer-container > .footer-nav {
     max-width: 1100px;
     margin: auto;
     flex-flow: row wrap;
   }
 
-  .footer-nav > .nav-container > .nav-section {
+  .footer-nav > .footer-container > .footer-nav > .nav-section {
     width: fit-content;
   }
 
-  .footer-nav > .nav-container > .nav-section:first-child {
+  .footer-nav > .footer-container > .footer-nav > .nav-section:first-child {
     width: 8%;
   }
 
-  .footer-nav > .nav-container > .nav-section.with-heading {
+  .footer-nav > .footer-container > .footer-nav > .nav-section.with-heading {
     width: 18%;
   }
 
-  .footer-nav > .nav-container > .nav-section.with-heading:last-child {
+  .footer-nav > .footer-container > .footer-nav > .nav-section.with-heading:last-child {
     flex: 1;
   }
 
diff --git a/cigaradvisor/blocks/footer/footer.js b/cigaradvisor/blocks/footer/footer.js
index d8d9e0c7..69a67689 100644
--- a/cigaradvisor/blocks/footer/footer.js
+++ b/cigaradvisor/blocks/footer/footer.js
@@ -15,11 +15,13 @@ export default async function decorate(block) {
   footerContent.innerHTML = footerContent.innerHTML.replaceAll('{year}', currentYear.toString());
 
   // decorate footer sections
-  const navContainer = footerContent.querySelector('div.footer-nav > .default-content-wrapper');
-  if (navContainer && navContainer.childNodes.length) {
-    navContainer.classList.add('nav-container');
+  const footerContainer = footerContent.querySelector('div.footer-nav > .default-content-wrapper');
+  if (footerContainer && footerContainer.childNodes.length) {
+    footerContainer.classList.add('footer-container');
+    const navContainer = document.createElement('div');
+    navContainer.classList.add('footer-nav');
 
-    let currentElement = navContainer.firstElementChild;
+    let currentElement = footerContainer.firstElementChild;
     let nextElement;
     while (currentElement) {
       // create section
@@ -37,12 +39,9 @@ export default async function decorate(block) {
       } while (nextElement && nextElement.tagName !== 'H1');
 
       // add section to container
-      if (nextElement) {
-        navContainer.insertBefore(section, nextElement);
-      } else {
-        navContainer.appendChild(section);
-      }
+      navContainer.appendChild(section);
     }
+    footerContainer.prepend(navContainer);
   }
 
   block.innerHTML = footerContent.innerHTML;
diff --git a/cigaradvisor/blocks/icon-links/icon-links.css b/cigaradvisor/blocks/icon-links/icon-links.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/cigaradvisor/blocks/icon-links/icon-links.js b/cigaradvisor/blocks/icon-links/icon-links.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/cigaradvisor/icons/facebook-f.svg b/cigaradvisor/icons/facebook-f.svg
new file mode 100644
index 00000000..82fa74a0
--- /dev/null
+++ b/cigaradvisor/icons/facebook-f.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/></svg>
\ No newline at end of file
diff --git a/cigaradvisor/icons/instagram.svg b/cigaradvisor/icons/instagram.svg
new file mode 100644
index 00000000..7cd2f95a
--- /dev/null
+++ b/cigaradvisor/icons/instagram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
\ No newline at end of file
diff --git a/cigaradvisor/icons/pinterest-p.svg b/cigaradvisor/icons/pinterest-p.svg
new file mode 100644
index 00000000..6111f7d4
--- /dev/null
+++ b/cigaradvisor/icons/pinterest-p.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/></svg>
\ No newline at end of file
diff --git a/cigaradvisor/icons/x-twitter.svg b/cigaradvisor/icons/x-twitter.svg
new file mode 100644
index 00000000..12e5df88
--- /dev/null
+++ b/cigaradvisor/icons/x-twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
\ No newline at end of file
diff --git a/cigaradvisor/icons/youtube.svg b/cigaradvisor/icons/youtube.svg
new file mode 100644
index 00000000..9ef94b20
--- /dev/null
+++ b/cigaradvisor/icons/youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
\ No newline at end of file
diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
index 25530fc2..59514e91 100644
--- a/cigaradvisor/styles/styles.css
+++ b/cigaradvisor/styles/styles.css
@@ -131,6 +131,9 @@
   /* 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;
@@ -138,11 +141,17 @@
   --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 {
@@ -240,6 +249,11 @@ 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);
 

From aecd94ea846c35c0bf4bc53a965d2f8bfe80ca63 Mon Sep 17 00:00:00 2001
From: Luca <adobe@gituser.de>
Date: Mon, 8 Jan 2024 11:32:17 +0100
Subject: [PATCH 5/7] add tablet viewport

---
 cigaradvisor/blocks/footer/footer.css | 67 ++++++---------------------
 1 file changed, 15 insertions(+), 52 deletions(-)

diff --git a/cigaradvisor/blocks/footer/footer.css b/cigaradvisor/blocks/footer/footer.css
index baea08d9..7ad34e80 100644
--- a/cigaradvisor/blocks/footer/footer.css
+++ b/cigaradvisor/blocks/footer/footer.css
@@ -39,9 +39,7 @@
 }
 
 .footer-nav > .footer-container > .footer-nav {
-  display: flex;
-  flex-flow: column wrap;
-  align-content: flex-start;
+  display: grid;
 }
 
 .footer-nav > .footer-container > .footer-nav > .nav-section {
@@ -69,7 +67,7 @@
 .footer-nav .icon {
   --icon-size: 28px;
 
-  margin: 0 20px;
+  margin: 0 10px;
   filter: var(--clr-filter-gray);
 }
 
@@ -85,23 +83,18 @@
   .footer-nav > .footer-container > .footer-nav {
     max-width: 1100px;
     margin: auto;
-    flex-flow: row wrap;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-areas: "nav nav nav nav" "social social social social";
   }
 
   .footer-nav > .footer-container > .footer-nav > .nav-section {
     width: fit-content;
   }
 
-  .footer-nav > .footer-container > .footer-nav > .nav-section:first-child {
-    width: 8%;
-  }
-
-  .footer-nav > .footer-container > .footer-nav > .nav-section.with-heading {
-    width: 18%;
-  }
-
-  .footer-nav > .footer-container > .footer-nav > .nav-section.with-heading:last-child {
-    flex: 1;
+  .footer-nav > .footer-container > .footer-nav > .nav-section:last-child {
+    grid-area: social;
+    margin: auto;
+    text-align: center;
   }
 
   .footer-legal {
@@ -120,47 +113,17 @@
 }
 
 @media screen and (min-width: 960px) {
-  .footer {
-    text-align: unset;
-  }
-
-  .footer-nav {
-    padding-bottom: 40px;
-  }
-
   .footer-nav > .footer-container > .footer-nav {
-    max-width: 1100px;
-    margin: auto;
-    flex-flow: row wrap;
+    grid-template-columns: 8% 18% 18% 18% auto;
   }
 
-  .footer-nav > .footer-container > .footer-nav > .nav-section {
-    width: fit-content;
-  }
-
-  .footer-nav > .footer-container > .footer-nav > .nav-section:first-child {
-    width: 8%;
-  }
-
-  .footer-nav > .footer-container > .footer-nav > .nav-section.with-heading {
-    width: 18%;
-  }
-
-  .footer-nav > .footer-container > .footer-nav > .nav-section.with-heading:last-child {
-    flex: 1;
-  }
-
-  .footer-legal {
-    font-size: 14px;
-  }
-
-  .footer-legal ul > li {
-    display: inline;
-    line-height: 24px;
+  .footer-nav > .footer-container > .footer-nav > .nav-section:last-child {
+    grid-area: unset;
+    margin: unset;
+    text-align: unset;
   }
 
-  .footer-legal ul > li:not(:last-child)::after {
-    content: " | ";
-    margin: 10px;
+  .footer-nav .icon {
+    margin: 0 20px;
   }
 }

From 6621f4430e7d946fad82139c3c0d5394752e3ff9 Mon Sep 17 00:00:00 2001
From: Luca <adobe@gituser.de>
Date: Tue, 9 Jan 2024 09:20:36 +0100
Subject: [PATCH 6/7] remove unnecessary dom elements

---
 cigaradvisor/blocks/footer/footer.css | 28 ++++++++++++++-------------
 cigaradvisor/blocks/footer/footer.js  |  7 ++-----
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/cigaradvisor/blocks/footer/footer.css b/cigaradvisor/blocks/footer/footer.css
index 7ad34e80..d2347d6a 100644
--- a/cigaradvisor/blocks/footer/footer.css
+++ b/cigaradvisor/blocks/footer/footer.css
@@ -38,18 +38,18 @@
   padding-top: 18px;
 }
 
-.footer-nav > .footer-container > .footer-nav {
+.footer-nav > .nav-container {
   display: grid;
 }
 
-.footer-nav > .footer-container > .footer-nav > .nav-section {
+.footer-nav > .nav-container > .nav-section {
   padding: 10px;
   width: 100%;
   font-size: 14px;
   line-height: 33px;
 }
 
-.footer-nav > .footer-container > .footer-nav > .nav-section.with-heading > h1 {
+.footer-nav > .nav-container > .nav-section.with-heading > h1 {
   margin-bottom: 5px;
   color: #673841;
   font-family: var(--ff-opensans);
@@ -58,7 +58,7 @@
   letter-spacing: .06em;
 }
 
-.footer-nav > .footer-container > .footer-nav > .nav-section > ul {
+.footer-nav > .nav-container > .nav-section > ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -80,27 +80,23 @@
     padding-bottom: 40px;
   }
 
-  .footer-nav > .footer-container > .footer-nav {
+  .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 > .footer-container > .footer-nav > .nav-section {
+  .footer-nav > .nav-container > .nav-section {
     width: fit-content;
   }
 
-  .footer-nav > .footer-container > .footer-nav > .nav-section:last-child {
+  .footer-nav > .nav-container > .nav-section:last-child {
     grid-area: social;
     margin: auto;
     text-align: center;
   }
 
-  .footer-legal {
-    font-size: 14px;
-  }
-
   .footer-legal ul > li {
     display: inline;
     line-height: 24px;
@@ -113,11 +109,11 @@
 }
 
 @media screen and (min-width: 960px) {
-  .footer-nav > .footer-container > .footer-nav {
+  .footer-nav > .nav-container {
     grid-template-columns: 8% 18% 18% 18% auto;
   }
 
-  .footer-nav > .footer-container > .footer-nav > .nav-section:last-child {
+  .footer-nav > .nav-container > .nav-section:last-child {
     grid-area: unset;
     margin: unset;
     text-align: unset;
@@ -127,3 +123,9 @@
     margin: 0 20px;
   }
 }
+
+@media screen and (min-width: 1200px) {
+  .footer-legal {
+    font-size: 14px;
+  }
+}
diff --git a/cigaradvisor/blocks/footer/footer.js b/cigaradvisor/blocks/footer/footer.js
index 69a67689..2ccefb90 100644
--- a/cigaradvisor/blocks/footer/footer.js
+++ b/cigaradvisor/blocks/footer/footer.js
@@ -17,9 +17,7 @@ export default async function decorate(block) {
   // decorate footer sections
   const footerContainer = footerContent.querySelector('div.footer-nav > .default-content-wrapper');
   if (footerContainer && footerContainer.childNodes.length) {
-    footerContainer.classList.add('footer-container');
-    const navContainer = document.createElement('div');
-    navContainer.classList.add('footer-nav');
+    footerContainer.classList.add('nav-container');
 
     let currentElement = footerContainer.firstElementChild;
     let nextElement;
@@ -39,9 +37,8 @@ export default async function decorate(block) {
       } while (nextElement && nextElement.tagName !== 'H1');
 
       // add section to container
-      navContainer.appendChild(section);
+      footerContainer.insertBefore(section, currentElement);
     }
-    footerContainer.prepend(navContainer);
   }
 
   block.innerHTML = footerContent.innerHTML;

From 2bf57138138b43822706dc6a8c3f84bd22b717fb Mon Sep 17 00:00:00 2001
From: Luca <adobe@gituser.de>
Date: Tue, 9 Jan 2024 10:42:31 +0100
Subject: [PATCH 7/7] fix minor visual bugs

---
 cigaradvisor/blocks/footer/footer.css | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/cigaradvisor/blocks/footer/footer.css b/cigaradvisor/blocks/footer/footer.css
index d2347d6a..5c42b4f3 100644
--- a/cigaradvisor/blocks/footer/footer.css
+++ b/cigaradvisor/blocks/footer/footer.css
@@ -35,7 +35,7 @@
 }
 
 .footer-nav {
-  padding-top: 18px;
+  padding: 18px 0 40px;
 }
 
 .footer-nav > .nav-container {
@@ -64,7 +64,11 @@
   margin: 0;
 }
 
-.footer-nav .icon {
+.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;
@@ -119,8 +123,8 @@
     text-align: unset;
   }
 
-  .footer-nav .icon {
-    margin: 0 20px;
+  .footer-nav > .nav-container > .nav-section:last-child > ul > li .icon {
+    margin: 0 18px;
   }
 }