186 cleanup diversity and inclusion section (#214)

chrisnottca · web-flow · commit 1f54098e2c72 · 2021-04-09T10:08:10.000-07:00
Adjust relative sizes of image and text block
Adjust text block padding
diff --git a/sections/diversity-and-inclusion-section/index.js b/sections/diversity-and-inclusion-section/index.js
@@ -6,46 +6,76 @@ import styled from 'styled-components'
 import { Heading, Text } from 'components'
 import { TABLET_LARGE_SIZE } from 'styles/constants'
 
-const IMAGE_BREAKPOINT = '839px'
+// for reference: image assets and sizes:
+// filename width X height
+// painted-hand-mobile.png 414px x 400px
+// painted-hand-tablet.png 500px x 534px
+// painted-hand-desktop.png 709px x 534px
+
+const TABLET_IMAGE_BREAKPOINT = '828px' // width of painted-hand-mobile.png times two
+const DESKTOP_IMAGE_BREAKPOINT = '1442px' // width of painted-hand-desktop.png times two plus 24px padding
+const HEIGHT = '534px'
 
 const { h2 } = Heading.VARIANT
 
 const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  @media only screen and (max-width: ${IMAGE_BREAKPOINT}) {
-    flex-direction: column-reverse;
-    height: auto;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  height: ${HEIGHT};
+  overflow-y: hidden;
+
+  @media only screen and (max-width: ${TABLET_IMAGE_BREAKPOINT}) {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 50% 50%;
+    height: 100%;
   }
 `
 
 const Picture = styled.picture`
   img {
     width: 100%;
-    height: 100%;
+    height: auto;
+  }
+
+  @media only screen and (min-width: ${TABLET_IMAGE_BREAKPOINT}) and (max-width: ${TABLET_LARGE_SIZE}) {
+    img {
+      width: auto;
+      height: 100%;
+    }
+  }
+
+  @media only screen and (max-width: ${TABLET_IMAGE_BREAKPOINT}) {
+    grid-row-start: 2;
+    img {
+      height: 100%;
+      width: 100%;
+    }
   }
 `
 
 const TextContainer = styled.div`
-  width: 50%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 1;
-  padding: ${rem('101px')} ${rem('80px')} ${rem('101px')} ${rem('70px')};
+
+  width: 100%;
+  height: ${HEIGHT};
+
+  padding: ${rem('101px')} 7% ${rem('101px')} 7%;
   background: linear-gradient(61.68deg, #ff68ba 2.29%, #edc281 100.63%);
   justify-content: center;
   align-items: center;
 
   @media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
-    align-items: center;
-    padding: ${rem('48px')} ${rem('24px')};
+    padding: ${rem('70px')} ${rem('24px')};
   }
 
-  @media only screen and (max-width: ${IMAGE_BREAKPOINT}) {
-    align-items: center;
+  @media only screen and (max-width: ${TABLET_IMAGE_BREAKPOINT}) {
+    grid-row-start: 1;
+    height: 100%;
     padding: ${rem('84px')} ${rem('36px')};
-    width: 100%;
   }
 `
 
@@ -67,21 +97,36 @@ const StyledHeading = styled(Heading)`
   @media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
     margin-bottom: ${rem('32px')};
   }
-  @media only screen and (max-width: ${IMAGE_BREAKPOINT}) {
+  @media only screen and (max-width: ${TABLET_IMAGE_BREAKPOINT}) {
     margin-bottom: ${rem('26px')};
   }
 `
 
+const TabletImage = styled.source.attrs((props) => ({
+  ...props,
+  media: `(min-width: ${TABLET_IMAGE_BREAKPOINT}) and (max-width:${DESKTOP_IMAGE_BREAKPOINT})`,
+  srcSet: '/painted-hand-tablet.png',
+}))``
+
+const DesktopImage = styled.source.attrs((props) => ({
+  ...props,
+  media: `(min-width:${DESKTOP_IMAGE_BREAKPOINT})`,
+  srcSet: '/painted-hand-desktop.png',
+}))``
+
+const MobileImage = styled.img.attrs((props) => ({
+  ...props,
+  src: '/painted-hand-mobile.png',
+  alt: 'Inclusive community',
+}))``
+
 const DiversityAndInclusionSection = () => (
   <section>
     <Container>
       <Picture>
-        <source
-          media="(min-width:770px) and (max-width:1200px)"
-          srcSet="/painted-hand-tablet.png"
-        />
-        <source media="(min-width:1201px)" srcSet="/painted-hand-desktop.png" />
-        <img src="/painted-hand-mobile.png" alt="Unicorn Pool Float" />
+        <TabletImage />
+        <DesktopImage />
+        <MobileImage />
       </Picture>
       <TextContainer>
         <TextWrapper>
