diff --git a/best-cigars-guide/blocks/footer/footer.css b/best-cigars-guide/blocks/footer/footer.css index 5f06794..ccbe7aa 100644 --- a/best-cigars-guide/blocks/footer/footer.css +++ b/best-cigars-guide/blocks/footer/footer.css @@ -1,14 +1,34 @@ footer { - padding: 2rem; - background-color: var(--light-color); + padding: 4em 0; font-size: var(--body-font-size-s); } footer .footer { max-width: var(--content-width); - margin: auto; + margin: 0 auto; } footer .footer p { margin: 0; + text-align: center; + font-size: 0.75em; + font-weight: 300; +} + +footer .footer p a { + color: #111; +} + +footer .footer p:first-child { + padding-bottom: 2em; +} + +footer .footer .footer-logo-wrap { + text-align: center; +} + +footer .footer .footer-logo { + margin: 0 auto 30px; + width: 120px; + height: auto; } diff --git a/best-cigars-guide/blocks/footer/footer.js b/best-cigars-guide/blocks/footer/footer.js index 4fe0fca..cb1d996 100644 --- a/best-cigars-guide/blocks/footer/footer.js +++ b/best-cigars-guide/blocks/footer/footer.js @@ -1,5 +1,26 @@ import { getMetadata } from '../../scripts/aem.js'; import { loadFragment } from '../fragment/fragment.js'; +import { isInternal } from '../../scripts/scripts.js'; + +function getFamousLogo() { + // Create the image element + const image = document.createElement('img'); + image.src = '/best-cigars-guide/icons/famous-smoke-shop-logo-gray.png'; + image.className = 'footer-logo'; + + // Add the Famous link, with the logo inside of it + const link = document.createElement('a'); + link.href = 'https://www.famous-smoke.com'; + link.className = 'footer-logo-link'; + link.appendChild(image); + + // Wrap it up + const wrap = document.createElement('div'); + wrap.className = 'footer-logo-wrap'; + wrap.appendChild(link); + + return wrap; +} /** * loads and decorates the footer @@ -16,5 +37,20 @@ export default async function decorate(block) { const footer = document.createElement('div'); while (fragment.firstElementChild) footer.append(fragment.firstElementChild); + // Add the Famous logo + footer.prepend(getFamousLogo()); + + // Open external links in new tab + footer.querySelectorAll('a').forEach((a) => { + const href = a.getAttribute('href'); + if (!isInternal(href)) { + a.setAttribute('target', '_blank'); + } + }); + + // Set copyright year to current year + const currentYear = new Date().getFullYear(); + footer.innerHTML = footer.innerHTML.replaceAll('{year}', currentYear.toString()); + block.append(footer); } diff --git a/best-cigars-guide/icons/famous-smoke-shop-logo-gray.png b/best-cigars-guide/icons/famous-smoke-shop-logo-gray.png new file mode 100644 index 0000000..113d5ac Binary files /dev/null and b/best-cigars-guide/icons/famous-smoke-shop-logo-gray.png differ diff --git a/best-cigars-guide/scripts/scripts.js b/best-cigars-guide/scripts/scripts.js index 0211c1d..b06f36c 100644 --- a/best-cigars-guide/scripts/scripts.js +++ b/best-cigars-guide/scripts/scripts.js @@ -69,6 +69,20 @@ export function decorateMain(main) { decorateBlocks(main); } +/** + * Checks if the given path is an external URL. + * @param {string} path - The path to be checked. + * @returns {boolean} - Returns true if the path is an external URL, false otherwise. + */ +export function isInternal(path) { + try { + const url = new URL(path); + return (window.location.hostname === url.hostname && url.pathname.startsWith('/best-cigars-guide')); + } catch (error) { + return true; + } +} + /** * Loads everything needed to get to LCP. * @param {Element} doc The container element diff --git a/best-cigars-guide/styles/styles.css b/best-cigars-guide/styles/styles.css index d0cee86..f6d6625 100644 --- a/best-cigars-guide/styles/styles.css +++ b/best-cigars-guide/styles/styles.css @@ -14,6 +14,8 @@ /* colors */ --link-color: #035fe6; --link-hover-color: #136ff6; + --header-color: #2c2c2c; + --paragraph-color: #4a4a4a; --background-color: white; --header-background-color: #111; --light-color: #eee; @@ -88,6 +90,7 @@ h4, h5, h6 { margin-top: 1em; margin-bottom: .5em; scroll-margin: calc(var(--nav-height) + 1em); + color: var(--header-color); } h1 { font-size: var(--heading-font-size-xxl) } @@ -102,6 +105,10 @@ p, dl, ol, ul, pre, blockquote { margin-bottom: 1em; } +p { + color: var(--paragraph-color); +} + code, pre { font-family: var(--fixed-font-family); font-size: var(--body-font-size-s);