Homepage styling: issue #72 (#73)

* carousel fix * carousel fix * Update styles.css * buttons * review comments
hlxsites · Jan 17, 2024 · c2522b6 · c2522b6
1 parent e228154
commit c2522b6
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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 = '&#8249;';
+    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
diff --git a/cigaradvisor/icons/decorright.png b/cigaradvisor/icons/decorright.png
diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
@@ -286,8 +286,10 @@ export function decorateSocialLinks(element) {
   socialLinks.forEach((link) => {
     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
@@ -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,15 +394,15 @@ 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;
 }
 
 .blog-post-template .author-container>.default-content-wrapper a{
   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,14 +438,82 @@ 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;
 }
 
 .blog-post-template .author-container>.default-content-wrapper blockquote p strong{
   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) {