From 3317154ce87664e8bb47eeb710a08a4b765238b8 Mon Sep 17 00:00:00 2001 From: Luca Date: Tue, 9 Jan 2024 13:44:41 +0100 Subject: [PATCH] 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 | 139 ++++++++++++++++++++++++-- cigaradvisor/blocks/footer/footer.js | 36 +++++-- 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/scripts/scripts.js | 14 +-- cigaradvisor/styles/styles.css | 55 ++++++++-- 9 files changed, 212 insertions(+), 37 deletions(-) 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 19fc5607..5c42b4f3 100644 --- a/cigaradvisor/blocks/footer/footer.css +++ b/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; -} \ No newline at end of file + 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; + } +} diff --git a/cigaradvisor/blocks/footer/footer.js b/cigaradvisor/blocks/footer/footer.js index bf75a916..2ccefb90 100644 --- a/cigaradvisor/blocks/footer/footer.js +++ b/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; } 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ No newline at end of file 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 48340bb9..59514e91 100644 --- a/cigaradvisor/styles/styles.css +++ b/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,7 +188,7 @@ h2 { font-family: var(--ff-montserrat); font-weight: 900; text-transform: uppercase; - color: #141414; + color: var(--clr-text); margin: 0 auto; font-size: 12px; } @@ -179,7 +196,7 @@ h2 { 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); +}