Fix career-carousel image (#496)

* Fix career carousel to show 4 cards. Also fixed the right angle icon in the scroller and the 'Read More' link. --------- Co-authored-by: David Bosschaert <[email protected]>
hlxsites · Dec 4, 2023 · cd4a6e2 · cd4a6e2
1 parent c4b9dc4
commit cd4a6e2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/blocks/career-carousel/career-carousel.css b/blocks/career-carousel/career-carousel.css
@@ -1,5 +1,5 @@
 .career-carousel {
-  --card-width: 16rem;
+  --card-width: 18rem;
 
   margin-top: 3rem;
   padding-left: 0.5rem;
@@ -32,7 +32,7 @@
   box-shadow: #3c465040 0 2px 12px 0;
   margin: 1.5rem 0.5rem;
   padding: 1rem;
-  width: var(--card-width);
+  width: 16rem;
   transition: all 0.15s ease-in-out;
 }
 
@@ -57,9 +57,9 @@
 }
 
 .career-carousel .career-card picture img {
+  margin-left: 2.75rem;
   height: 9.5625rem;
   width: 8.75rem;
-  padding-inline: 2.8rem;
 }
 
 .career-carousel .career-card blockquote {
@@ -157,7 +157,11 @@
 
 @media (min-width: 77rem) {
   .career-slider {
-    width: calc(((var(--card-width) + 3rem) * 4));
+    width: calc(((var(--card-width) + 1rem) * 4));
+  }
+
+  .career-carousel .career-card {
+    width: var(--card-width);
   }
 
   .career-carousel .career-card blockquote {
@@ -171,6 +175,7 @@
   }
 
   .career-carousel .career-card picture img {
+    margin-left: unset;
     height: 16rem;
     width: 14.375rem;
     padding-inline: 0;
@@ -179,4 +184,4 @@
   .career-carousel .career-slides-navbar {
     display: flex;
   }
-}
+}
diff --git a/blocks/career-carousel/career-carousel.js b/blocks/career-carousel/career-carousel.js
@@ -87,7 +87,7 @@ export default async function decorate(block) {
     const link = document.createElement('button');
     link.textContent = placeholders['career-carousel-readmore'];
     const arrow = document.createElement('img');
-    arrow.src = '/icons/angle-right-blue.svg';
+    arrow.src = '/icons/angle-right-blue-bg.svg';
     arrow.alt = 'Go to testimonial';
     arrow.classList.add('icon-angle-right-blue');
     link.append(arrow);
@@ -124,7 +124,7 @@ export default async function decorate(block) {
   navButtons.prepend(la);
 
   const ra = document.createElement('img');
-  ra.src = '/icons/angle-right-blue.svg';
+  ra.src = '/icons/angle-right-blue-bg.svg';
   ra.alt = 'Next person card';
   ra.classList.add('btn-angle');
   ra.onclick = () => scrollToAdjacent(buttons, slideDivs, careerSlides, true, document);