diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.css b/cigaradvisor/blocks/article-teaser/article-teaser.css index addeb5c2..72d7cf0b 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.css +++ b/cigaradvisor/blocks/article-teaser/article-teaser.css @@ -89,7 +89,7 @@ display: flex; align-items: flex-start; flex: 1 0 13rem; - width: 100%; + width: 100%; } .article-teaser.block .article.article-thumbnail .article-image>img { @@ -238,12 +238,14 @@ } .article-teaser.block .read-more::after { - content: '\f054'; - font-family: FontAwesome, sans-serif; + display: inline-block; + width: 12px; + height: 12px; + content: url('/cigaradvisor/icons/angle-right.svg'); margin-left: 8px; - line-height: 1.5; - color: #b19b5e; - font-size: 18px; + vertical-align: top; + margin-top: 2px; + filter: var(--clr-filter-subdued-gold); } .article-teaser.block .article-thumbnail .article-read-more { @@ -296,4 +298,4 @@ .article-teaser.block .article.article-thumbnail { min-height: 26.25rem; } -} \ No newline at end of file +} diff --git a/cigaradvisor/blocks/author/author.css b/cigaradvisor/blocks/author/author.css index 3310765b..85f8236b 100644 --- a/cigaradvisor/blocks/author/author.css +++ b/cigaradvisor/blocks/author/author.css @@ -83,37 +83,14 @@ .author.block .author-details ul { display: flex; margin: 10px 0; + + --icon-size: 20px; } .author.block .author-details ul li { margin-right: 20px; } -.author.block .author-details ul li a::before { - font-family: var(--ff-fontawesome); - font-style: normal; - font-weight: bolder; - text-decoration: inherit; - font-size: 20px; - color: #141414 -} - -.author.block .author-details ul li.social-twitter a::before { - content: "\f099"; -} - -.author.block .author-details ul li.social-facebook a::before { - content: "\f39e"; -} - -.author.block .author-details ul li.social-instagram a::before { - content: "\f16d"; -} - -.author.block .author-details ul li.social-youtube a::before { - content: "\f167"; -} - /* media queries */ @media screen and (min-width: 900px) { .author.block>div { @@ -153,6 +130,6 @@ .author.block .author-details .author-heading { display: flex; flex-direction: row; - align-items: left; + align-items: start; } -} \ No newline at end of file +} diff --git a/cigaradvisor/blocks/author/author.js b/cigaradvisor/blocks/author/author.js index d6414017..1d19d272 100644 --- a/cigaradvisor/blocks/author/author.js +++ b/cigaradvisor/blocks/author/author.js @@ -1,4 +1,5 @@ import { decorateExternalLink } from '../../scripts/scripts.js'; +import { decorateIcons } from '../../scripts/aem.js'; /** * Loads an author. @@ -51,20 +52,38 @@ export default async function decorate(block) { if (authorPContent) { authorDetails.append(authorPContent); } - const socilaLinks = author.querySelector('ul'); - if (socilaLinks) { - const socialItems = socilaLinks.querySelectorAll('li'); + const socialLinks = author.querySelector('ul'); + if (socialLinks) { + const socialItems = socialLinks.querySelectorAll('li > a'); socialItems.forEach((item) => { - const textNode = item.childNodes[0]; - if (textNode && textNode.textContent !== '') { - const text = `social-${textNode.textContent.trim()}`; - textNode.innerText = ''; - const textToClass = text.toLowerCase().replace(/\s/g, '-'); - item.className = textToClass; + const innerText = item.innerText.trim(); + if (innerText && innerText !== '') { + let icon; + switch (innerText) { + case 'twitter': + icon = 'twitter'; + break; + case 'facebook': + icon = 'facebook-f'; + break; + case 'instagram': + icon = 'instagram'; + break; + case 'youtube': + icon = 'youtube'; + break; + case 'pintrest': + icon = 'pintrest-p'; + break; + default: + icon = 'unknown'; + } + item.innerHTML = ``; } }); - authorDetails.append(socilaLinks); + decorateIcons(socialLinks); + authorDetails.append(socialLinks); } else { const emptySocialLinks = document.createElement('ul'); authorDetails.append(emptySocialLinks); diff --git a/cigaradvisor/blocks/header/header.css b/cigaradvisor/blocks/header/header.css index e763f8e5..91626a97 100644 --- a/cigaradvisor/blocks/header/header.css +++ b/cigaradvisor/blocks/header/header.css @@ -54,52 +54,16 @@ justify-content: center; align-items: flex-end; padding: 10px; + filter: var(--clr-filter-tan); } -.header.block nav .top-nav-right .twitter::before{ - content: '\e61b'; - font-family: var(--ff-fontawesome); - color: var(--tan); - font-size: 24px; -} - -.header.block nav .top-nav-right .facebook::before{ - content: '\f39e'; - font-family: var(--ff-fontawesome); - color: var(--tan); - font-size: 24px; -} - -.header.block nav .top-nav-right .instagram::before{ - content: '\f16d'; - font-family: var(--ff-fontawesome); - color: var(--tan); - font-size: 24px; -} - -.header.block nav .top-nav-right .youtube::before{ - content: '\f167'; - font-family: var(--ff-fontawesome); - color: var(--tan); - font-size: 24px; -} - -.header.block nav .top-nav-right .pinterest::before{ - content: '\f231'; - font-family: var(--ff-fontawesome); - color: var(--tan); - font-size: 24px; -} - - .header.block nav .top-nav-left ul { display: flex; flex-direction: row; justify-content: space-between; list-style-type: none; - padding: 0; margin: 0; - padding-right: 25px; + padding: 0 25px 0 0; } .header.block nav .top-nav-left ul li { @@ -149,7 +113,8 @@ .header.block nav .primary-nav { display: flex; flex-grow: 1; - background-color: rgb(255 255 255 / 70%); border: none; + background-color: rgb(255 255 255 / 70%); + border: none; position: static; top: auto; bottom: auto; @@ -161,6 +126,8 @@ transform: none; transition: none; z-index: auto; + + --icon-size: 18px; } .header.block nav .primary-nav ul { @@ -181,7 +148,7 @@ flex: 0 0 auto; margin-top: 0; font-size: 14px; - font-family: var(--ff-open-sans); + font-family: var(--ff-opensans); font-weight: 600; color: var(--clr-dark-gray); cursor: default; @@ -207,16 +174,12 @@ z-index: 111; } -.header.block nav .icon-search{ - padding: 0 20px; -} - -.header.block nav .icon-search img{ - width: 18px; - height: 18px; +.header.block nav .primary-nav .icon-search { + display: inline-block; + margin: 0 10px } -.header.block nav .primary-nav ul li>a:hover{ +.header.block nav .primary-nav ul li > a:hover { border-color: var(--tan); } @@ -233,10 +196,13 @@ } .header.block nav .primary-nav .nav-drop:not([data-secondarynav='search-box']) span::after { - font-size: 16px; - content: '\f107'; - font-family: FontAwesome, Arial, sans-serif; + display: inline-block; + width: 16px; + height: 16px; + content: url('/cigaradvisor/icons/angle-down.svg'); margin-left: 10px; + vertical-align: top; + margin-top: 1px } /* Secondary navigation */ @@ -253,7 +219,7 @@ z-index: 110; } -.header.block nav .secondary-nav-box>ul { +.header.block nav .secondary-nav-box > ul { column-count: 3; width: 100%; padding: 3em; @@ -262,7 +228,7 @@ .header.block nav .secondary-nav-box.browse-categories ul li { line-height: 2; font-size: 14px; - font-family: var(--ff-open-sans); + font-family: var(--ff-opensans); font-weight: 600; color: var(--clr-dark-gray); cursor: default; @@ -337,7 +303,6 @@ clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; - border: 0; display: inline-block; } @@ -366,25 +331,20 @@ border-radius: 0; } -.header.block nav .primary-nav ul li:last-child { - border: 2px solid transparent; - cursor: pointer; -} - /* Mobile navigation */ .header.block .mobile-nav { height: 100%; display: flex; - flex-direction: column; - margin: auto; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1000; + flex-direction: column; + margin: auto; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; } -.header.block .mobile-nav.mobile-nav-closed{ +.header.block .mobile-nav.mobile-nav-closed { z-index: 1; } @@ -403,11 +363,12 @@ bottom: 0; right: 100%; overflow: auto; - transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out; + transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; } -.header.block .mobile-nav .mobile-primary-nav-wrapper.nav-content-open{ - transform: translate3d(-100%,0,0);} +.header.block .mobile-nav .mobile-primary-nav-wrapper.nav-content-open { + transform: translate3d(-100%, 0, 0); +} .header.block .mobile-nav .mobile-primary-nav-wrapper > * { flex: 0 0 auto; @@ -435,19 +396,19 @@ } .header.block .mobile-nav .mobile-top-nav .default-content-wrapper p { - width: 35%; - font-size: 10px; + width: 35%; + font-size: 10px; } .header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul li { - margin: 2px; - flex: 1 1 auto; - border-left: 1px solid var(--tan); - justify-content: center; - display: flex; + margin: 2px; + flex: 1 1 auto; + border-left: 1px solid var(--tan); + justify-content: center; + display: flex; } -.header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul li a{ +.header.block .mobile-nav .mobile-top-nav .default-content-wrapper ul li a { margin: 0 auto; width: 30px; height: 25px; @@ -462,9 +423,11 @@ width: 100%; background-color: rgb(255 255 255); padding: 20px 0 5px; + + --icon-size: 32px; } -.header.block .mobile-nav .mobile-primary-nav .nav-hamburger,.header.block .mobile-nav .mobile-primary-nav .search{ +.header.block .mobile-nav .mobile-primary-nav .nav-hamburger, .header.block .mobile-nav .mobile-primary-nav .search { width: 1.25em; height: 1.25em; font-size: 2em; @@ -472,18 +435,12 @@ color: var(--grey); } -.header.block .mobile-nav .nav-hamburger i::before { - content: "\f0c9"; - color: var(--tan); -} - -.header.block .mobile-nav .fa-search::before { - content: "\f002"; - color: var(--tan); +.header.block .mobile-nav .icon { + filter: var(--clr-filter-tan); } /* mobile primary nav */ -.header.block .mobile-nav .mobile-primary-nav-content{ +.header.block .mobile-nav .mobile-primary-nav-content { display: flex; flex: 0 0 auto; flex-direction: row; @@ -494,7 +451,7 @@ padding-top: 15px; } -.header.block .mobile-nav .mobile-primary-nav-content ul{ +.header.block .mobile-nav .mobile-primary-nav-content ul { list-style: none; margin: 5px auto; width: 100%; @@ -502,30 +459,30 @@ padding: 0 15px; } -.header.block .mobile-nav .mobile-primary-nav-content ul li{ +.header.block .mobile-nav .mobile-primary-nav-content ul li { display: block; align-items: center; border-bottom: 1px solid var(--light-grey); min-height: 3.5rem; - font-family: --var(ff-open-sans); + font-family: var(--ff-opensans); font-weight: 600; color: var(--clr-dark-gray); font-size: 12px; cursor: default; } -.header.block .mobile-nav .mobile-primary-nav-content ul li div{ +.header.block .mobile-nav .mobile-primary-nav-content ul li div { display: none; flex-direction: column; - align-items: left; + align-items: start; min-height: 3.5rem; - font-family: --var(ff-open-sans); + font-family: var(--ff-opensans); font-weight: 600; color: var(--clr-dark-gray); font-size: 12px; } -.header.block .mobile-nav .mobile-primary-nav-content ul li a{ +.header.block .mobile-nav .mobile-primary-nav-content ul li a { background-color: transparent; align-items: center; border: none; @@ -546,7 +503,7 @@ float: right; } -.header.block .mobile-nav .mobile-primary-nav-content>ul>li:last-child { +.header.block .mobile-nav .mobile-primary-nav-content > ul > li:last-child { display: none; } @@ -554,31 +511,34 @@ display: flex; } -.header.block .mobile-nav .secondary-nav-box ul{ +.header.block .mobile-nav .secondary-nav-box ul { padding: 12px 0; margin: 0; border: none; } .header.block .mobile-nav .nav-drop:not([data-secondarynav='search-box']) span::after { - font-size: 16px; - content: '\f107'; - font-family: FontAwesome, Arial, sans-serif; + display: inline-block; + width: 16px; + height: 16px; + content: url('/cigaradvisor/icons/angle-down.svg'); margin-left: 10px; + vertical-align: top; + margin-top: 1px; } -.header.block .mobile-nav .secondary-nav-box ul li{ +.header.block .mobile-nav .secondary-nav-box ul li { border: none; } -.header.block .mobile-nav .secondary-nav-box ul li a{ +.header.block .mobile-nav .secondary-nav-box ul li a { border: none; padding: 0.65em 0; color: rgb(20 20 20); font-size: 12px; } -.header.block .mobile-nav .secondary-nav-box ul li span{ +.header.block .mobile-nav .secondary-nav-box ul li span { display: none; } @@ -587,55 +547,20 @@ padding-top: 24px; } -.header.block .mobile-nav .mobile-social-nav ul{ +.header.block .mobile-nav .mobile-social-nav ul { display: flex; } -.header.block .mobile-nav .mobile-social-nav ul li{ +.header.block .mobile-nav .mobile-social-nav ul li { flex: 1 1 auto; margin-right: 10px; } -.header.block .mobile-nav .mobile-social-nav ul li img{ +.header.block .mobile-nav .mobile-social-nav ul li img { height: 36px; width: 36px; } -.header.block .mobile-nav .mobile-social-nav .twitter::before{ - content: '\e61b'; - font-family: var(--ff-fontawesome); - color: var(--dark-grey); - font-size: 36px; -} - -.header.block .mobile-nav .mobile-social-nav .facebook::before{ - content: '\f39e'; - font-family: var(--ff-fontawesome); - color: var(--dark-grey); - font-size: 36px; -} - -.header.block .mobile-nav .mobile-social-nav .instagram::before{ - content: '\f16d'; - font-family: var(--ff-fontawesome); - color: var(--dark-grey); - font-size: 36px; -} - -.header.block .mobile-nav .mobile-social-nav .youtube::before{ - content: '\f167'; - font-family: var(--ff-fontawesome); - color: var(--dark-grey); - font-size: 36px; -} - -.header.block .mobile-nav .mobile-social-nav .pinterest::before{ - content: '\f231'; - font-family: var(--ff-fontawesome); - color: var(--dark-grey); - font-size: 36px; -} - @media screen and (min-width: 900px) { .header.block nav { display: flex; @@ -651,4 +576,4 @@ .header.block .mobile-nav { display: none; } -} \ No newline at end of file +} diff --git a/cigaradvisor/blocks/header/header.js b/cigaradvisor/blocks/header/header.js index c38b420e..636ef7e5 100644 --- a/cigaradvisor/blocks/header/header.js +++ b/cigaradvisor/blocks/header/header.js @@ -1,6 +1,6 @@ -import { getMetadata } from '../../scripts/aem.js'; +import { decorateIcons, getMetadata } from '../../scripts/aem.js'; import { loadFragment } from '../fragment/fragment.js'; -import { decorateSocialLinks, decorateExternalLink } from '../../scripts/scripts.js'; +import { decorateExternalLink } from '../../scripts/scripts.js'; /** * Decorates the header block with navigation elements. @@ -53,7 +53,7 @@ export default async function decorate(block) { hamburger.classList.add('nav-hamburger'); hamburger.setAttribute('href', '#'); hamburger.setAttribute('title', 'Toggle navigation'); - hamburger.innerHTML = ''; + hamburger.innerHTML = ''; mobilePrimaryNav.append(hamburger); const mobileLogo = document.createElement('a'); mobileLogo.className = 'mobile-logo'; @@ -65,9 +65,10 @@ export default async function decorate(block) { search.className = 'search'; search.setAttribute('href', '/cigaradvisor/?s='); search.setAttribute('title', 'Search'); - search.innerHTML = ''; + search.innerHTML = ''; mobilePrimaryNav.append(search); mobileNav.append(mobilePrimaryNav); + decorateIcons(mobilePrimaryNav); topNavLeft.classList.add('top-nav-left'); topNavContent.append(topNavLeft); @@ -78,7 +79,6 @@ export default async function decorate(block) { brand.className = 'brand-logo'; topNavContent.append(brand); const topNavRight = fragment.children[0]; - decorateSocialLinks(topNavRight); const socialNavMobile = topNavRight.cloneNode(true); socialNavMobile.className = 'mobile-social-nav'; topNavRight.classList.add('top-nav-right'); @@ -148,10 +148,13 @@ export default async function decorate(block) { } }); - const lastChild = primaryNav.querySelector('li:last-child'); - lastChild.className = 'nav-drop'; - lastChild.setAttribute('data-secondarynav', 'search-box'); - lastChild.setAttribute('aria-expanded', 'false'); + const searchButton = document.createElement('li'); + primaryNav.querySelector('ul').append(searchButton); + searchButton.innerHTML = ''; + decorateIcons(primaryNav); + searchButton.className = 'nav-drop'; + searchButton.setAttribute('data-secondarynav', 'search-box'); + searchButton.setAttribute('aria-expanded', 'false'); const searchBox = document.createElement('div'); searchBox.className = 'secondary-nav-box search-box'; searchBox.innerHTML = `
diff --git a/cigaradvisor/blocks/hero/hero.css b/cigaradvisor/blocks/hero/hero.css index 9f61b37b..ba4b0729 100644 --- a/cigaradvisor/blocks/hero/hero.css +++ b/cigaradvisor/blocks/hero/hero.css @@ -94,22 +94,11 @@ main .hero.block .hero-search form input:focus { } main .hero.block .hero-search form button { - flex: 0 1; - height: 100%; - width: 100%; background: transparent; border: none; -} - -main .hero.block .hero-search form button::before { - position: relative; - height: 100%; - width: 100%; - font-size: 30px; - content: "\f002"; - text-align: center; - font-family: var(--ff-fontawesome); cursor: pointer; + + --icon-size: 30px; } @media screen and (min-width: 900px) { diff --git a/cigaradvisor/blocks/hero/hero.js b/cigaradvisor/blocks/hero/hero.js index 814a9294..b8ba11bb 100644 --- a/cigaradvisor/blocks/hero/hero.js +++ b/cigaradvisor/blocks/hero/hero.js @@ -3,11 +3,16 @@ import { getMetadata } from '../../scripts/aem.js'; function buildSearch() { const search = document.createElement('div'); search.classList.add('hero-search'); + // noinspection HtmlRequiredAltAttribute search.innerHTML = ` - +
`; return search; diff --git a/cigaradvisor/icons/angle-down.svg b/cigaradvisor/icons/angle-down.svg new file mode 100644 index 00000000..b648930a --- /dev/null +++ b/cigaradvisor/icons/angle-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cigaradvisor/icons/angle-right.svg b/cigaradvisor/icons/angle-right.svg new file mode 100644 index 00000000..81912986 --- /dev/null +++ b/cigaradvisor/icons/angle-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cigaradvisor/icons/bars.svg b/cigaradvisor/icons/bars.svg new file mode 100644 index 00000000..5d3e95c9 --- /dev/null +++ b/cigaradvisor/icons/bars.svg @@ -0,0 +1 @@ + diff --git a/cigaradvisor/icons/magnifying-glass.svg b/cigaradvisor/icons/magnifying-glass.svg new file mode 100644 index 00000000..d73d5b2a --- /dev/null +++ b/cigaradvisor/icons/magnifying-glass.svg @@ -0,0 +1 @@ + diff --git a/cigaradvisor/icons/twitter.svg b/cigaradvisor/icons/twitter.svg new file mode 100644 index 00000000..d8d388f7 --- /dev/null +++ b/cigaradvisor/icons/twitter.svg @@ -0,0 +1 @@ + diff --git a/cigaradvisor/styles/fonts.css b/cigaradvisor/styles/fonts.css index c41d2128..e0613849 100644 --- a/cigaradvisor/styles/fonts.css +++ b/cigaradvisor/styles/fonts.css @@ -20,21 +20,3 @@ font-display: swap; src: url('../fonts/alfaslabone.woff2') format('woff2'); } - -@font-face { - font-family: "alfa-slab-one-normal-400-fallback"; - size-adjust: 89.069%; - src: local("Courier New"); - } - - @font-face { - font-family: "montserrat-normal-400-fallback"; - size-adjust: 97.069%; - src: local("Verdana"); - } - - @font-face { - font-family: "open-sans-normal-400-fallback"; - size-adjust: 78.069%; - src: local("Courier New"); - } \ No newline at end of file diff --git a/cigaradvisor/styles/lazy-styles.css b/cigaradvisor/styles/lazy-styles.css index 5972756a..84e7d6c9 100644 --- a/cigaradvisor/styles/lazy-styles.css +++ b/cigaradvisor/styles/lazy-styles.css @@ -1,3 +1 @@ /* add global styles that can be loaded post LCP here */ -@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One%7CMontserrat%3A300%2C400%2C500%2C600%2C700%2C800%2C900%7COpen+Sans%3A400%2C600%2C700&ver=5.5.1'); -@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css?ver=5.5.1'); diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index ab45c1b4..5a18f639 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -120,13 +120,6 @@ size-adjust: 112.12%; } - -@font-face { - font-family: "fontawesome-normal-400-fallback"; - size-adjust: 137.621%; - src: local("Arial"); -} - :root { /* colors */ --clr-black: #000; @@ -152,13 +145,15 @@ /* filter colors (https://codepen.io/sosuke/pen/Pjoqqp) */ --clr-filter-gray: invert(18%) sepia(4%) saturate(304%) hue-rotate(277deg) brightness(98%) contrast(92%); + --clr-filter-tan: invert(50%) sepia(27%) saturate(408%) hue-rotate(358deg) brightness(93%) contrast(91%); + --clr-filter-subdued-gold: invert(62%) sepia(55%) saturate(302%) hue-rotate(6deg) brightness(90%) contrast(88%); + /* 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-fontawesome: 'FontAwesome'; /* body sizes */ --text-size-xs: 12px;