diff --git a/cigaradvisor/blocks/authorcard/authorcard.css b/cigaradvisor/blocks/authorcard/authorcard.css index fa9233bb..55c33953 100644 --- a/cigaradvisor/blocks/authorcard/authorcard.css +++ b/cigaradvisor/blocks/authorcard/authorcard.css @@ -145,7 +145,7 @@ text-overflow: ellipsis; display: block; color: var(--clr-white); - font-weight: var(--font-weight-extrabold); + font-weight: var(--font-weight-bold); font-size: var(--body-font-size-xl); } diff --git a/cigaradvisor/blocks/carousel/carousel.css b/cigaradvisor/blocks/carousel/carousel.css index 51ebe4cb..e2451d08 100644 --- a/cigaradvisor/blocks/carousel/carousel.css +++ b/cigaradvisor/blocks/carousel/carousel.css @@ -7,6 +7,7 @@ margin-right: auto; max-width: 1080px; overflow: hidden; + margin-bottom: 25px; } .carousel.block>div { @@ -47,6 +48,8 @@ padding: 0; margin: 0; border: none; + width: 0; + line-height: none; } .carousel.block>button.prev { @@ -60,7 +63,7 @@ .carousel.block .carousel-arrow { - display: inline-block; + display: flex; cursor: pointer; position: absolute; z-index: 9; @@ -70,29 +73,34 @@ text-align: center; width: 30px; height: 50px; + align-items: center; } .carousel.block .carousel-arrow .prev-icon, .carousel.block .carousel-arrow .next-icon { - display: inline-block; + display: flex; font-size: 45px; color: #fff; } -.carousel.block .carousel-arrow .next-icon { - transform: rotate(180deg); - margin: 10%; +.carousel.block .carousel-arrow .next-icon::before { + content: '\f054'; + font-family: var(--ff-fontawesome); + padding-left: 50%; + font-size: var(--body-font-size-xxl); } -.carousel.block .carousel-arrow .prev-icon { - margin: -10%; +.carousel.block .carousel-arrow .prev-icon::before { + content: '\f053'; + font-family: var(--ff-fontawesome); + padding-left: 50%; + font-size: var(--body-font-size-xxl); } -.carousel.block .arrow-prev { +.carousel.block .carousel-arrow.arrow-prev.disabled, .carousel.block .carousel-arrow.arrow-next.disabled { display: none; } - @media screen and (min-width: 600px) { .carousel.block .slide { flex: 1 0 50%; diff --git a/cigaradvisor/blocks/carousel/carousel.js b/cigaradvisor/blocks/carousel/carousel.js index 47443159..d1c42944 100644 --- a/cigaradvisor/blocks/carousel/carousel.js +++ b/cigaradvisor/blocks/carousel/carousel.js @@ -32,10 +32,13 @@ function createButtons(moveSlides) { button.classList.add(direction); const iconDiv = document.createElement('div'); iconDiv.classList.add(`arrow-${direction}`); + if (direction === 'prev') { + iconDiv.classList.add('disabled'); + } iconDiv.classList.add('carousel-arrow'); const iconSpan = document.createElement('span'); iconSpan.classList.add(`${direction}-icon`); - iconSpan.innerHTML = '‹'; + iconSpan.innerHTML = ''; iconDiv.append(iconSpan); button.appendChild(iconDiv); button.addEventListener('click', () => moveSlides(direction)); @@ -86,17 +89,17 @@ export default async function decorate(block) { if (currentIndex < (items.length - itemsToShow)) { currentIndex += 1; slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`; - block.querySelector('.arrow-prev').style.display = 'inline-block'; + block.querySelector('.arrow-prev').classList.remove('disabled'); if (currentIndex === (items.length - itemsToShow)) { - block.querySelector('.arrow-next').style.display = 'none'; + block.querySelector('.arrow-next').classList.add('disabled'); } } } else if (currentIndex >= 1) { currentIndex -= 1; slidesWrapper.style.transform = `translate3d(-${currentIndex * offset}%, 0, 0)`; - block.querySelector('.arrow-next').style.display = 'inline-block'; + block.querySelector('.arrow-next').classList.remove('disabled'); if (currentIndex < 1) { - block.querySelector('.arrow-prev').style.display = 'none'; + block.querySelector('.arrow-prev').classList.add('disabled'); } } } diff --git a/cigaradvisor/icons/decorleft.png b/cigaradvisor/icons/decorleft.png new file mode 100644 index 00000000..3cbe4b56 Binary files /dev/null and b/cigaradvisor/icons/decorleft.png differ diff --git a/cigaradvisor/icons/decorright.png b/cigaradvisor/icons/decorright.png new file mode 100644 index 00000000..d12e9c4d Binary files /dev/null and b/cigaradvisor/icons/decorright.png differ diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index 29917317..26ee4f20 100644 --- a/cigaradvisor/styles/styles.css +++ b/cigaradvisor/styles/styles.css @@ -138,10 +138,14 @@ --subdued-gold: #b19b5e; --silver: #ccc; --very-light-grey: #ddd; + --vv-light-grey: #e0e0e0; + --medium-grey: #888; --grey: #333; --light-grey: #d3d3d3; --dark-grey: #3c3a3b; --off-white: #f7f7f7; + --grey-background: #eaeaea; + --charcoal: #1c1c1c; /* functional-colors */ --clr-text: var(--clr-dark-gray); @@ -172,7 +176,7 @@ --heading-font-size-xl: 40px; /* Font Weights */ - --font-weight-extrabold: 700; + --font-weight-extrabold: 900; --font-weight-bold: 700; --font-weight-semibold: 600; --font-weight-normal: 400; @@ -235,7 +239,7 @@ h1 { font-style: normal; font-weight: 400; text-transform: uppercase; - color: #141414; + color: var(--clr-dark-gray); margin: 2px auto; } @@ -296,10 +300,18 @@ li { display: none; } + .default-content-wrapper { color: var(--clr-text); } +main .default-content-wrapper { + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 1080px; +} + /* Two-column grid */ main .section[data-layout="50/50"] { padding-left: 0; @@ -357,7 +369,7 @@ main .section[data-layout="50/50"] .right-grid > div { line-height: 30px; font-family: var(--ff-opensans); font-weight: 600; - color: #141414; + color: var(--clr-dark-gray); cursor: default; } @@ -365,7 +377,9 @@ main .section[data-layout="50/50"] .right-grid > div { font-size: 18px; line-height: 30px; text-decoration: underline; - color: #b19b5e; +< < < < < < < HEAD color: #b19b5e; += = = = = = = color: var(--subdued-gold); +>>> >>> > origin / main } .blog-post-template .author-container > .default-content-wrapper .article-image-wrapper { @@ -385,12 +399,12 @@ main .section[data-layout="50/50"] .right-grid > div { text-align: center; font-style: italic; font-weight: 700; - color: #888; + color: var(--medium-grey); margin: 0; } .blog-post-template .author-container > .default-content-wrapper blockquote { - border-color: #e0e0e0; + border-color: var(--vv-light-grey); border-width: 1px 0; border-style: solid; margin: 0 0 20px; @@ -401,7 +415,7 @@ main .section[data-layout="50/50"] .right-grid > div { .blog-post-template .author-container > .default-content-wrapper blockquote p { padding: 10px; margin: 0; - color: #1c1c1c; + color: var(--charcoal); background: transparent url('/cigaradvisor/images/blog-post/pattern-1.png') repeat; } @@ -409,6 +423,71 @@ main .section[data-layout="50/50"] .right-grid > div { font-weight: 700; } +main .section > .default-content-wrapper > h2 { + text-align: center; + text-transform: uppercase; + font-family: var(--ff-montserrat); + font-weight: 900; + color: var(--tan); + padding: 38px 15px; + font-size: 45px; +} + +main .section > .default-content-wrapper > h2 ::before { + content: 'decor'; + color: transparent; + background: url('../icons/decorleft.png') center no-repeat; + background-size: contain; + margin-right: 15px; +} + +main .section > .default-content-wrapper > h2 ::after { + content: 'decor'; + color: transparent; + background: url('../icons/decorright.png') center no-repeat; + background-size: contain; + margin-left: 15px; +} + +main .button-container { + padding: 10px 10px 40px; + text-align: center; + text-transform: uppercase; +} + +main .button-container .button { + font-style: normal; + font-family: var(--ff-montserrat); + font-weight: 700; + color: var(--clr-white); + text-transform: uppercase; + background-color: var(--clr-black); + border-color: var(--tan); + border-width: 2px; + border-radius: 0; + border-style: solid; + display: inline-block; + line-height: 26px; + height: 50px; + width: 250px; + max-height: 50px; + max-width: 250px; + min-height: 2.85rem; + padding: 0.8em 1em; + cursor: pointer; + text-decoration: none; + text-align: center; + margin: 2px 0; +} + +main .button-container .button:hover { + transition: .5s; + background-color: var(--subdued-gold); + border-color: var(--subdued-gold); + text-decoration: none; +} + + @media screen and (max-width: 600px) { main .section[data-layout="50/50"] { width: 100%; @@ -434,6 +513,15 @@ main .section[data-layout="50/50"] .right-grid > div { h1 { font-size: 45px; } + + main .section { + margin-bottom: 40px; + } + + main .section.background-grey { + background-color: var(--grey-background); + } + } @media screen and (min-width: 1200px) {