Merge pull request #10888 from bbc/tweak-homepage-css

Increase spacing between navigation and first promo on HomePage
bbc · Jun 13, 2023 · ddb037f · ddb037f
2 parents bf50abe + 03d47b5
commit ddb037f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 33 deletions.
diff --git a/src/app/components/ThemeProvider/mediaQueries.ts b/src/app/components/ThemeProvider/mediaQueries.ts
@@ -6,14 +6,19 @@ import pixelsToRem from '../../utilities/pixelsToRem';
   The only exception is that we have split out group 1 into 0 and 1
 */
 const GROUP_0_MAX_WIDTH_BP = pixelsToRem(239);
-const GROUP_1_MAX_WIDTH_BP = pixelsToRem(399);
+
 const GROUP_1_MIN_WIDTH_BP = pixelsToRem(240);
-const GROUP_2_MAX_WIDTH_BP = pixelsToRem(599);
+const GROUP_1_MAX_WIDTH_BP = pixelsToRem(399);
+
 const GROUP_2_MIN_WIDTH_BP = pixelsToRem(400);
-const GROUP_3_MAX_WIDTH_BP = pixelsToRem(1007);
+const GROUP_2_MAX_WIDTH_BP = pixelsToRem(599);
+
 const GROUP_3_MIN_WIDTH_BP = pixelsToRem(600);
-const GROUP_4_MAX_WIDTH_BP = pixelsToRem(1279);
+const GROUP_3_MAX_WIDTH_BP = pixelsToRem(1007);
+
 const GROUP_4_MIN_WIDTH_BP = pixelsToRem(1008);
+const GROUP_4_MAX_WIDTH_BP = pixelsToRem(1279);
+
 const GROUP_5_MIN_WIDTH_BP = pixelsToRem(1280);
 
 export const GROUP_0_MAX_WIDTH = `@media (max-width: ${GROUP_0_MAX_WIDTH_BP}rem)`;

diff --git a/src/app/pages/HomePage/HomePage.tsx b/src/app/pages/HomePage/HomePage.tsx
@@ -57,35 +57,37 @@ const HomePage = ({ pageData }: HomePageProps) => {
           </span>
         </VisuallyHiddenText>
         <div css={styles.inner}>
-          {curations.map(
-            ({
-              visualProminence,
-              summaries,
-              curationId,
-              title: curationTitle,
-              link,
-              position,
-              visualStyle,
-              mostRead,
-            }) => {
-              return (
-                <React.Fragment key={`${curationId}-${position}`}>
-                  <Curation
-                    headingLevel={curationTitle ? 3 : 2}
-                    visualStyle={visualStyle as VisualStyle}
-                    visualProminence={visualProminence as VisualProminence}
-                    promos={summaries || []}
-                    title={curationTitle}
-                    topStoriesTitle={topStoriesTitle}
-                    position={position}
-                    link={link}
-                    curationLength={curations && curations.length}
-                    mostRead={mostRead}
-                  />
-                </React.Fragment>
-              );
-            },
-          )}
+          <div css={styles.margins}>
+            {curations.map(
+              ({
+                visualProminence,
+                summaries,
+                curationId,
+                title: curationTitle,
+                link,
+                position,
+                visualStyle,
+                mostRead,
+              }) => {
+                return (
+                  <React.Fragment key={`${curationId}-${position}`}>
+                    <Curation
+                      headingLevel={curationTitle ? 3 : 2}
+                      visualStyle={visualStyle as VisualStyle}
+                      visualProminence={visualProminence as VisualProminence}
+                      promos={summaries || []}
+                      title={curationTitle}
+                      topStoriesTitle={topStoriesTitle}
+                      position={position}
+                      link={link}
+                      curationLength={curations && curations.length}
+                      mostRead={mostRead}
+                    />
+                  </React.Fragment>
+                );
+              },
+            )}
+          </div>
         </div>
       </main>
     </>

diff --git a/src/app/pages/HomePage/index.styles.tsx b/src/app/pages/HomePage/index.styles.tsx
@@ -12,6 +12,25 @@ const styles = {
     maxWidth: '63rem',
     margin: '0 auto',
   }),
+  margins: ({ spacings, mq }: Theme) =>
+    css({
+      margin: `${spacings.TRIPLE}rem 0`,
+      [mq.GROUP_0_MAX_WIDTH]: {
+        margin: `${spacings.TRIPLE}rem 0`,
+      },
+      [mq.GROUP_1_ONLY]: {
+        margin: `${spacings.QUADRUPLE}rem 0`,
+      },
+      [mq.GROUP_2_ONLY]: {
+        margin: `${spacings.QUADRUPLE}rem 0`,
+      },
+      [mq.GROUP_3_ONLY]: {
+        margin: `${spacings.SEXTUPLE}rem 0`,
+      },
+      [mq.GROUP_4_MIN_WIDTH]: {
+        margin: `${spacings.QUINTUPLE}rem 0`,
+      },
+    }),
 };
 
 export default styles;