diff --git a/cigaradvisor/blocks/footer/footer.css b/cigaradvisor/blocks/footer/footer.css index 5c42b4f3..91c2d89b 100644 --- a/cigaradvisor/blocks/footer/footer.css +++ b/cigaradvisor/blocks/footer/footer.css @@ -4,6 +4,10 @@ font-family: var(--ff-montserrat); } +.footer > h2 { + display: none; +} + .footer a { line-height: unset; font-size: unset; @@ -28,6 +32,7 @@ .footer-legal ul > li { line-height: 18px; + color: inherit; } .footer-legal a { @@ -38,18 +43,18 @@ padding: 18px 0 40px; } -.footer-nav > .nav-container { +.footer-nav nav { display: grid; } -.footer-nav > .nav-container > .nav-section { +.footer-nav nav > .nav-section { padding: 10px; width: 100%; font-size: 14px; line-height: 33px; } -.footer-nav > .nav-container > .nav-section.with-heading > h1 { +.footer-nav nav > .nav-section.with-heading > h1 { margin-bottom: 5px; color: #673841; font-family: var(--ff-opensans); @@ -58,17 +63,17 @@ letter-spacing: .06em; } -.footer-nav > .nav-container > .nav-section > ul { +.footer-nav nav > .nav-section > ul { list-style-type: none; padding: 0; margin: 0; } -.footer-nav > .nav-container > .nav-section:last-child > ul > li { +.footer-nav nav > .nav-section:last-child > ul > li { display: inline; } -.footer-nav > .nav-container > .nav-section:last-child > ul > li .icon { +.footer-nav nav > .nav-section:last-child > ul > li .icon { --icon-size: 28px; margin: 0 10px; @@ -84,18 +89,18 @@ padding-bottom: 40px; } - .footer-nav > .nav-container { + .footer-nav nav { 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 { + .footer-nav nav > .nav-section { width: fit-content; } - .footer-nav > .nav-container > .nav-section:last-child { + .footer-nav nav > .nav-section:last-child { grid-area: social; margin: auto; text-align: center; @@ -113,17 +118,17 @@ } @media screen and (min-width: 960px) { - .footer-nav > .nav-container { + .footer-nav nav { grid-template-columns: 8% 18% 18% 18% auto; } - .footer-nav > .nav-container > .nav-section:last-child { + .footer-nav nav > .nav-section:last-child { grid-area: unset; margin: unset; text-align: unset; } - .footer-nav > .nav-container > .nav-section:last-child > ul > li .icon { + .footer-nav nav > .nav-section:last-child > ul > li .icon { margin: 0 18px; } } diff --git a/cigaradvisor/blocks/footer/footer.js b/cigaradvisor/blocks/footer/footer.js index 41600ed3..cf8c7a5c 100644 --- a/cigaradvisor/blocks/footer/footer.js +++ b/cigaradvisor/blocks/footer/footer.js @@ -15,17 +15,16 @@ export default async function decorate(block) { footerContent.innerHTML = footerContent.innerHTML.replaceAll('{year}', currentYear.toString()); // decorate footer sections - const footerContainer = footerContent.querySelector('div.footer-nav > .default-content-wrapper'); - if (footerContainer && footerContainer.childNodes.length) { - footerContainer.classList.add('nav-container'); - - let currentElement = footerContainer.firstElementChild; + const footerNavContainer = footerContent.querySelector('div.footer-nav > .default-content-wrapper'); + const footerNav = document.createElement('nav'); + if (footerNavContainer && footerNavContainer.childNodes.length) { + let currentElement = footerNavContainer.firstElementChild; let nextElement; while (currentElement) { // create section const section = document.createElement('div'); section.classList.add('nav-section'); - if (currentElement.tagName === 'h4') { + if (currentElement.tagName === 'H3') { section.classList.add('with-heading'); } @@ -34,12 +33,16 @@ export default async function decorate(block) { nextElement = currentElement.nextSibling; section.appendChild(currentElement); currentElement = nextElement; - } while (nextElement && nextElement.tagName !== 'h4'); + } while (nextElement && nextElement.tagName !== 'H3'); // add section to container - footerContainer.insertBefore(section, currentElement); + footerNav.append(section); } + footerNavContainer.append(footerNav); } block.innerHTML = footerContent.innerHTML; + const footerHeading = document.createElement('H2'); + footerHeading.innerText = 'Footer'; + block.prepend(footerHeading); }