responsive styles; adjust conditionals for checking headlines

SU-SWS · Oct 5, 2023 · 806f50c · 806f50c
1 parent 6b254b9
commit 806f50c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/components/VerticalPoster/VerticalPoster.styles.ts b/components/VerticalPoster/VerticalPoster.styles.ts
@@ -5,31 +5,30 @@ export const blurWrapper = 'w-full h-full backdrop-blur-md';
 
 export const grid = 'w-full';
 
-export const contentWrapper = (imageOnLeft: boolean) => cnb('relative px-[6vw] py-[8vw]', {
+export const contentWrapper = (imageOnLeft: boolean) => cnb('relative px-20 sm:px-30 md:px-50 rs-py-6 lg:px-[6vw] lg:py-[8vw]', {
   'lg:order-last': imageOnLeft,
   'lg:order-first': !imageOnLeft,
 });
 
 export const headingWrapper = '-mt-1em rs-mb-5';
-export const heading = (isSmallHeading: boolean) => cnb('mb-0 fluid-type-7 bg-fixed bg-clip-text text-black/40 bg-fixed bg-cover bg-center bg-no-repeat', {
-  'mt-01em md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]': isSmallHeading,
-  'mt-01em md:fluid-type-9': !isSmallHeading,
+export const heading = (isSmallHeading: boolean) => cnb('mb-0 fluid-type-8 bg-fixed bg-clip-text text-black/40 bg-fixed bg-cover bg-center bg-no-repeat hyphens-auto', {
+  'lg:fluid-type-6 2xl:fluid-type-7 4xl:fluid-type-8': isSmallHeading,
+  'md:fluid-type-9': !isSmallHeading,
 });
 
 export const customHeading = 'flex flex-col mb-0 children:block bg-clip-text text-black/40 bg-fixed bg-cover bg-center bg-no-repeat';
 export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolean) => cnb('hyphens-auto first:ml-0 last:mr-0', {
-  'fluid-type-7': font === 'druk',
+  'fluid-type-8': font === 'druk',
   'md:fluid-type-9' : font === 'druk' && !isSmallHeading,
-  'md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]' : font === 'druk' && isSmallHeading,
+  'lg:fluid-type-6 2xl:fluid-type-7 4xl:fluid-type-8' : font === 'druk' && isSmallHeading,
   'mx-01em md:mx-03em mt-01em fluid-type-4 md:fluid-type-5 font-semibold md:font-normal': font === 'serif',
   'md:type-4 3xl:fluid-type-5' : font === 'serif' && isSmallHeading,
 });
 
 export const cta = 'rs-mt-4';
 
-export const imageWrapper = (imageOnLeft: boolean) => cnb('w-full bg-gc-black bg-no-repeat bg-cover bg-center px-[6vw] py-[8vw] mt-30 md:mt-50 lg:mt-0 shrink-0', {
+export const imageWrapper = (imageOnLeft: boolean) => cnb('w-full bg-gc-black bg-no-repeat bg-cover bg-center px-[6vw] py-[8vw]', {
   'lg:order-first': imageOnLeft,
-  '': !imageOnLeft,
 });
 export const imageInnerWrapper = 'h-full w-full';
 export const image = 'h-full w-full max-h-[100rem] object-cover object-center hidden lg:block';

diff --git a/components/VerticalPoster/VerticalPoster.tsx b/components/VerticalPoster/VerticalPoster.tsx
@@ -67,7 +67,7 @@ export const VerticalPoster = ({
             <FlexBox className={styles.headingWrapper}>
               <AnimateInView animation='slideUp'>
                 {/* Render all Druk font heading if custom heading is not entered */}
-                {heading && !customHeading && (
+                {heading && !customHeading?.length && (
                   <Heading
                     font="druk"
                     align="center"
@@ -79,7 +79,7 @@ export const VerticalPoster = ({
                   </Heading>
                 )}
                 {/* Render custom mixed typography heading if entered */}
-                {customHeading && (
+                {!!customHeading?.length && (
                   <Heading size="base" align="center" leading="none" className={styles.customHeading} style={bgImageStyle}>
                     {customHeading.map(({text, font, italic}) => (
                       <Text