Merge pull request #1263 from hlxsites/1259-homepage-carousel

1259 Fixed padding on Mini Teasers
hlxsites · Aug 23, 2024 · 7d921c8 · 7d921c8
2 parents 4f61944 + e99e23e
commit 7d921c8
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 15 deletions.
diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
@@ -235,10 +235,6 @@
   border-radius: 9999px;
 }
 
-.carousel-wrapper :is(.rounded-md) {
-  border-radius: 0.375rem;
-}
-
 .carousel-wrapper :is(.border-b) {
   border-bottom-width: 1px;
 }

diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js
@@ -43,9 +43,9 @@ export default function decorate(block) {
   block.classList.add(...'relative min-h-[30rem] md:min-h-[37rem]'.split(' '));
   block.style = 'grid-auto-columns: 100%';
   block.classList.remove('block');
-  block.classList.add(...'grid grid-flow-col overflow-x-auto space-x-2 snap-x snap-mandatory gap-6 rounded-md scroll-smooth'.split(' '));
+  block.classList.add(...'grid grid-flow-col overflow-x-auto space-x-2 snap-x snap-mandatory gap-6 scroll-smooth'.split(' '));
   const slides = [...block.children].map((ele, eleIndex) => {
-    ele.classList.add(...`card carousel-slider flex snap-start list-none bg-white flex-col rounded-md duration-${SLIDE_TRANSITION} ease-in-out inset-0 transition-transform transform`.split(' '));
+    ele.classList.add(...`card carousel-slider flex snap-start list-none bg-white flex-col duration-${SLIDE_TRANSITION} ease-in-out inset-0 transition-transform transform`.split(' '));
     ele.setAttribute('data-carousel-item', (eleIndex + 1));
     const contentEl = ele.querySelector('h2, p');
     const picture = ele.querySelector('picture');

diff --git a/blocks/mini-teasers/mini-teasers.css b/blocks/mini-teasers/mini-teasers.css
@@ -3,17 +3,16 @@
   margin-right: auto
 }
 
-.mini-teasers-wrapper :is(.my-10) {
-  margin-top: 2.5rem;
-  margin-bottom: 2.5rem
-}
-
 .mini-teasers-wrapper :is(.mb-0) {
   margin-bottom: 0px
 }
 
-.mini-teasers-wrapper :is(.mt-11) {
-  margin-top: 2.75rem
+.mini-teasers-wrapper :is(.mb-10) {
+  margin-bottom: 2.5rem
+}
+
+.mini-teasers-wrapper :is(.mt-2) {
+  margin-top: 0.5rem
 }
 
 .mini-teasers-wrapper :is(.mt-4) {

diff --git a/blocks/mini-teasers/mini-teasers.js b/blocks/mini-teasers/mini-teasers.js
@@ -1,11 +1,11 @@
 import { decorateModals } from '../../scripts/scripts.js';
 
 export default function decorate(block) {
-  block.classList.add(...'grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 px-2 my-10'.split(' '));
+  block.classList.add(...'grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 px-2 mb-10 mt-4'.split(' '));
   [...block.children].forEach((element) => {
     if ([...block.children].length === 4) block.classList.add('lg:grid-cols-4');
     else block.classList.add('lg:grid-cols-3');
-    element.classList.add(...'items-center mt-11'.split(' '));
+    element.classList.add(...'items-center mt-2'.split(' '));
     element.querySelector('span')?.classList.add(...'w-16 h-16 stroke-current'.split(' '));
     const h3El = element.querySelector('h3');
     if (h3El) {