From 4bc5881e9a4214a132481062651ff088f61d3241 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Thu, 29 Nov 2018 15:08:24 +0100
Subject: Tests flush width sections

---
 packages/website/ts/@next/components/layout.tsx | 9 +++++++--
 packages/website/ts/@next/pages/landing.tsx     | 5 ++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/@next')

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 541b4fc58..d64bcf74a 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -70,12 +70,17 @@ export const Main = styled.main`
 `;
 
 export const Section = styled.section<SectionProps>`
-  width: ${props => props.fullWidth ? `100vw` : '100%'};
+  width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
   padding: ${props => !props.noPadding && '30px'};
   margin-bottom: ${props => !props.noMargin && `${GUTTER}px`};
-  margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`};
+  margin-left: ${props => props.fullWidth && `-${GUTTER}px`};
   background-color: ${props => props.bgColor};
   border: 1px dotted rgba(0, 255, 0, 0.3);
+
+  @media (min-width: 1560px) {
+    width: ${props => props.fullWidth && '100vw'};
+    margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`};
+  }
 `;
 
 export const Wrap = styled.div<WrapProps>`
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index c0cda84cf..025a9d47b 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -56,7 +56,10 @@ export const NextLanding = () => (
       </Wrap>
     </Section>
 
-    <Section fullWidth noPadding>
+    <Section
+      bgColor="#ff0000"
+      fullWidth
+      noPadding>
       <Wrap width="full">
         <Column colWidth="2/3">
           SAMPLE FLUSHED width
-- 
cgit