Clean up

SU-SWS · Apr 3, 2024 · 9aec510 · 9aec510
1 parent b62d4e9
commit 9aec510
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/components/VerticalPoster/VerticalPoster.styles.ts b/components/VerticalPoster/VerticalPoster.styles.ts
@@ -1,35 +1,47 @@
 import { cnb } from 'cnbuilder';
+import { type BgColorType } from '@/components/Container';
 
 export const root = 'relative overflow-hidden break-words';
 
 export const grid = 'w-full';
 
-export const contentWrapper = (imageOnLeft: boolean) => cnb('relative px-20 sm:px-30 md:px-50 rs-py-6 lg:px-[6vw] lg:py-[8vw]', {
+export const contentWrapper = (imageOnLeft: boolean, isParallax: boolean) => cnb('relative px-20 sm:px-30 md:px-50 rs-py-6 lg:px-[6vw]', {
   'lg:order-last': imageOnLeft,
   'lg:order-first': !imageOnLeft,
+  // If no parallax, we don't need to match the thick vertical padding on the image frame on the content side
+  'lg:py-[8vw]': !isParallax,
 });
 
-export const headingWrapper = '-mt-1em 2xl:mt-[-1.5em] rs-mb-5';
+export const headingWrapper = '-mt-04em md:-mt-1em 2xl:mt-[-1.5em] rs-mb-5';
 
 /**
  * The pb-03em class in heading and customHeading is to compensate for the line-height:1 in the heading which
  * causes the bottom of the heading not showing the background mask
  */
-export const heading = (isSmallHeading: boolean, hasBgImage: boolean, isMaskedHeading: boolean) => cnb(
+export const heading = (
+  isSmallHeading: boolean,
+  hasBgImage: boolean,
+  isMaskedHeading: boolean,
+  bgColor: BgColorType,
+) => cnb(
   'mb-0 pb-03em fluid-type-8 hyphens-auto', {
   'lg:fluid-type-6 2xl:fluid-type-7 4xl:fluid-type-8': isSmallHeading,
   'md:fluid-type-9': !isSmallHeading,
-  'bg-clip-text text-black/40 xl:bg-fixed bg-cover bg-center bg-no-repeat': hasBgImage && isMaskedHeading,
+  'bg-clip-text xl:bg-fixed bg-cover bg-center bg-no-repeat': hasBgImage && isMaskedHeading,
+  'text-black/40': hasBgImage && isMaskedHeading && bgColor !== 'black',
+  'text-white/20': hasBgImage && isMaskedHeading && bgColor === 'black',
 });
-export const customHeading = (hasBgImage: boolean, isMaskedHeading: boolean) => cnb(
+export const customHeading = (hasBgImage: boolean, isMaskedHeading: boolean, bgColor: BgColorType) => cnb(
   'flex flex-col mb-0 pb-03em *:block', {
-  'bg-clip-text text-black/40 xl:bg-fixed bg-cover bg-center bg-no-repeat': hasBgImage && isMaskedHeading,
+  'bg-clip-text xl:bg-fixed bg-cover bg-center bg-no-repeat': hasBgImage && isMaskedHeading,
+  'text-black/40': hasBgImage && isMaskedHeading && bgColor !== 'black',
+  'text-white/20': hasBgImage && isMaskedHeading && bgColor === 'black',
 });
 export const customHeadingText = (font: 'druk' | 'serif') => cnb('hyphens-auto first:ml-0 last:mr-0', {
   'mt-01em font-semibold md:font-normal': font === 'serif',
 });
 
-export const body = '*:*:leading-snug rs-mt-3 type-1 text-balance';
+export const body = '*:*:leading-snug *:*:max-w-prose rs-mt-3 2xl:type-1 text-balance';
 export const metadata = 'rs-mt-4 *:mx-auto';
 export const date = 'block text-center';
 export const cta = 'rs-mt-3';
@@ -41,7 +53,12 @@ export const imageInnerWrapper = 'size-full';
 export const image = 'size-full object-cover object-center hidden lg:block';
 export const imageMobile = 'size-full object-cover object-center lg:hidden';
 
-// Parallax images
+// Parallax enabled styles
+export const parallaxWrapper = 'relative aspect-w-3 aspect-h-4';
 export const parallaxBgImage = (prefersReducedMotion: boolean) => cnb('w-full object-cover', {
-  'lg:h-[120%] lg:-mt-[10%]': !prefersReducedMotion,
+  'lg:h-[120%] lg:-mt-[10%]': !prefersReducedMotion, // No background image parallax for < LG
+});
+export const parallaxForegroundWrapper = 'absolute top-0 right-0 z-10';
+export const parallaxImage = (prefersReducedMotion: boolean) => cnb('size-full', {
+  'mt-[7%] lg:mt-[3vw]': !prefersReducedMotion,
 });
diff --git a/components/VerticalPoster/VerticalPoster.tsx b/components/VerticalPoster/VerticalPoster.tsx
@@ -79,7 +79,7 @@ export const VerticalPoster = ({
             direction="col"
             alignItems="center"
             justifyContent="center"
-            className={styles.contentWrapper(imageOnLeft)}
+            className={styles.contentWrapper(imageOnLeft, isParallax)}
           >
             <FlexBox className={styles.headingWrapper}>
               <AnimateInView animation='slideUp'>
@@ -89,7 +89,7 @@ export const VerticalPoster = ({
                     font="druk"
                     align="center"
                     leading="none"
-                    className={styles.heading(isSmallHeading, !!bgImageSrc, isMaskedHeading)}
+                    className={styles.heading(isSmallHeading, !!bgImageSrc, isMaskedHeading, bgColor)}
                     style={isMaskedHeading && !!bgImageSrc ? bgImageStyle : undefined}
                   >
                     {heading}
@@ -101,7 +101,7 @@ export const VerticalPoster = ({
                     size="base"
                     align="center"
                     leading="none"
-                    className={styles.customHeading(!!bgImageSrc, isMaskedHeading)}
+                    className={styles.customHeading(!!bgImageSrc, isMaskedHeading, bgColor)}
                     style={isMaskedHeading && !!bgImageSrc ? bgImageStyle : undefined}
                   >
                     {customHeading.map(({
@@ -130,7 +130,7 @@ export const VerticalPoster = ({
               </Text>
             )}
             {!!body && (
-              <div className="*:*:leading-snug *:*:max-w-prose rs-mt-3 2xl:type-1">
+              <div className={styles.body}>
                 {body}
               </div>
             )}
@@ -151,7 +151,7 @@ export const VerticalPoster = ({
             )}
           </FlexBox>
           {isParallax ? (
-            <div className="relative aspect-w-3 aspect-h-4">
+            <div className={styles.parallaxWrapper}>
               {bgImageSrc && (
                 <Parallax offset={isDesktop ? 60 : 0}>
                   <picture>
@@ -195,7 +195,7 @@ export const VerticalPoster = ({
                 </Parallax>
               )}
               {imageSrc && (
-                <div className="absolute top-0 right-0 z-10">
+                <div className={styles.parallaxForegroundWrapper}>
                   <Parallax offset={isDesktop ? 120 : 60}>
                     <picture>
                       <source
@@ -225,7 +225,7 @@ export const VerticalPoster = ({
                       <img
                         src={getProcessedImage(imageSrc, '1000x0', imageFocus)}
                         alt={alt || ''}
-                        className="size-full mt-[7%] lg:mt-[3vw]"
+                        className={styles.parallaxImage(prefersReducedMotion)}
                       />
                     </picture>
                   </Parallax>