diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 925044b..f73ba32 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,5 +1,5 @@ footer { - background-color: #222; + background-color: var(--black); color: var(--c-primary-white); position: relative; padding: 0 20px; @@ -13,12 +13,9 @@ footer { margin: 0; } -.footer .footer-column:first-child { - margin: 0; -} - .footer .footer-column:last-child { padding-bottom: 0; + margin: 0; } .footer .block.columns .footer-column { @@ -28,11 +25,11 @@ footer { } .footer .footer-column ul { - margin-top: 20px; + margin-top: 24px; padding: 0; list-style: none; display: flex; - gap: 24px; + gap: 16px; flex-direction: column; } @@ -52,6 +49,7 @@ footer { } .footer .footer-list-item a { + border-bottom: 1px solid transparent; color: var(--c-primary-white); display: flex; gap: 15px; @@ -61,8 +59,7 @@ footer { .footer .footer-list-item a:hover, .footer .footer-list-item a:active { - color: var(--action-hover); - text-decoration: none; + border-bottom: 1px solid var(--c-primary-white); } .footer .footer-list-item a:focus { @@ -73,6 +70,7 @@ footer { .footer .footer-list-item a:has(span.icon):focus, .footer .footer-list-item a:has(span.icon):hover { filter: brightness(2); + border: none; } .footer .back-to-top { diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 671ce85..15c5068 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -48,49 +48,46 @@ export default async function decorate(block) { }); // Back to top button - const path = window.location.pathname; - if (!(path.includes('importatori-dealer') || path.includes('import-dealers'))) { - const backToTopNode = document.createRange().createContextualFragment(` + const backToTopNode = document.createRange().createContextualFragment(` `); - footer.prepend(backToTopNode); + footer.prepend(backToTopNode); - const backToTopButton = footer.querySelector('.back-to-top'); - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - backToTopButton.style.position = 'absolute'; - backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`; - } else { - backToTopButton.style.position = 'fixed'; - backToTopButton.style.bottom = '80px'; - } - }); - }); - observer.observe(footer); - - window.addEventListener('scroll', () => { - const scrollPosition = window.scrollY + window.innerHeight; - const documentHeight = document.documentElement.scrollHeight; - - // Display button if user scrolls close to the bottom, 40px above the footer - if (scrollPosition >= documentHeight / 3) { - backToTopButton.style.display = 'block'; + const backToTopButton = footer.querySelector('.back-to-top'); + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + backToTopButton.style.position = 'absolute'; + backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`; } else { - backToTopButton.style.display = 'none'; + backToTopButton.style.position = 'fixed'; + backToTopButton.style.bottom = '80px'; } }); + }); + observer.observe(footer); - footer.querySelector('.back-to-top').addEventListener('click', () => { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); + window.addEventListener('scroll', () => { + const scrollPosition = window.scrollY + window.innerHeight; + const documentHeight = document.documentElement.scrollHeight; + + // Display button if user scrolls close to the bottom, 40px above the footer + if (scrollPosition >= documentHeight / 3) { + backToTopButton.style.display = 'block'; + } else { + backToTopButton.style.display = 'none'; + } + }); + + footer.querySelector('.back-to-top').addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', }); - } + }); block.append(footer); }