From c2522b642cc5bee2eacefa77a9dd3523034d5c5a Mon Sep 17 00:00:00 2001 From: Kailas Nadh U <53608019+kailasnadh790@users.noreply.github.com> Date: Wed, 17 Jan 2024 09:51:34 -0500 Subject: [PATCH] Homepage styling: issue #72 (#73) * carousel fix * carousel fix * Update styles.css * buttons * review comments --- cigaradvisor/blocks/authorcard/authorcard.css | 2 +- cigaradvisor/blocks/carousel/carousel.css | 26 +++-- cigaradvisor/blocks/carousel/carousel.js | 13 ++- cigaradvisor/icons/decorleft.png | Bin 0 -> 144 bytes cigaradvisor/icons/decorright.png | Bin 0 -> 144 bytes cigaradvisor/scripts/scripts.js | 6 +- cigaradvisor/styles/styles.css | 103 ++++++++++++++++-- 7 files changed, 126 insertions(+), 24 deletions(-) create mode 100644 cigaradvisor/icons/decorleft.png create mode 100644 cigaradvisor/icons/decorright.png 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 0000000000000000000000000000000000000000..3cbe4b56040f7df9ee06fd5a847c0c16b87a09bd GIT binary patch literal 144 zcmeAS@N?(olHy`uVBq!ia0vp^+kjY@gAGX9Dt?ayQsJI1jv*Dd-rjQLWl-Q@IT&?7 z-tR+0h)zRWod=ikNvjvHFLf|Id*ORZ#Fekwd*&*cZuqO) r%W{As8@8Ud|91EAwzH?~x0NuQ{$XUc>*wvwKnVsPH literal 0 HcmV?d00001 diff --git a/cigaradvisor/icons/decorright.png b/cigaradvisor/icons/decorright.png new file mode 100644 index 0000000000000000000000000000000000000000..d12e9c4deab564d24c359a934dc72f75eaefd04a GIT binary patch literal 144 zcmeAS@N?(olHy`uVBq!ia0vp^+kjY@i5W;b_{*OHQak}ZA+A8WuQ~>T9=xyh0`i$l zg8YIR1mC@r)z}E+8hE-mhE&{2=1}F4kq~%bpIE@)`BUrAg2qIbrhp&^2E&Ja4DubE j { const text = link.textContent; const textToClass = text.trim().toLowerCase().replace(/\s/g, '-'); - link.classList.add(textToClass); - link.textContent = ''; + if (textToClass) { + link.classList.add(textToClass); + link.textContent = ''; + } }); } diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css index cb818bb0..d5184f67 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; @@ -232,7 +236,7 @@ h1 { font-style: normal; font-weight: 400; text-transform: uppercase; - color: #141414; + color: var(--clr-dark-gray); margin: 2px auto; } @@ -321,10 +325,18 @@ button { max-width: 250px; } + .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; @@ -382,7 +394,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; } @@ -390,7 +402,7 @@ main .section[data-layout="50/50"] .right-grid>div { font-size: 18px; line-height: 30px; text-decoration: underline; -color: #b19b5e; +color: var(--subdued-gold); } .blog-post-template .author-container>.default-content-wrapper .article-image-wrapper { @@ -410,12 +422,12 @@ color: #b19b5e; 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; @@ -426,7 +438,7 @@ color: #b19b5e; .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; } @@ -434,6 +446,74 @@ color: #b19b5e; 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: auto; + 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: auto; + 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%; @@ -451,6 +531,15 @@ color: #b19b5e; h1 { font-size: 45px; } + + main .section { + margin-bottom: 40px; + } + + main .section.background-grey { + background-color: var(--grey-background); + } + } @media screen and (min-width: 1200px) {