Different spacing for poster and story hero versions for mobile

SU-SWS · Oct 10, 2023 · e3b2c11 · e3b2c11
1 parent 7771406
commit e3b2c11
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx
@@ -23,13 +23,15 @@ export const contentWrapper = (imageOnLeft?: boolean, isTwoCol?: boolean) => cnb
 });
 
 export const headingWrapper = (
-  hasImage?: boolean,
+  type?: 'hero' | 'poster',
+  hasHeroImage?: boolean, // Hero image is the foreground image
   imageOnLeft?: boolean,
   headingFont?: 'druk' | 'serif',
   isTwoCol?: boolean,
 ) => cnb('rs-mb-5', {
-  'rs-mt-10': !hasImage && !isTwoCol,
-  'lg:rs-mt-7': isTwoCol,
+  'rs-mt-10': !hasHeroImage && !isTwoCol && type === 'hero',
+  'rs-mt-7': hasHeroImage && type === 'hero',
+  'lg:rs-mt-7': type === 'poster',
   'lg:mr-0 lg:w-[120%] lg:-ml-[20%] 3xl:w-auto 3xl:-ml-200': imageOnLeft && headingFont === 'druk' && isTwoCol,
 });
 export const headingInnerWrapper = (

diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx
@@ -79,7 +79,7 @@ export const BlurryPoster = ({
       <div className={styles.blurWrapper(addBgBlur, addDarkOverlay, type, bgColor)}>
         <Grid lg={isTwoCol ? 2 : 1} pt={type === 'hero' ? 9 : 8} pb={8} className={styles.grid}>
           <div className={styles.contentWrapper(imageOnLeft, isTwoCol)}>
-            <FlexBox className={styles.headingWrapper(!!imageSrc, imageOnLeft, headingFont, isTwoCol)}>
+            <FlexBox className={styles.headingWrapper(type, !!imageSrc, imageOnLeft, headingFont, isTwoCol)}>
               <AnimateInView
                 animation={imageOnLeft ? 'slideInFromRight' : 'slideInFromLeft'}
                 className={cnb(styles.headingInnerWrapper(imageOnLeft, headingFont, isTwoCol), accentBorderColors[tabColor])}