From 7962e4050c60e6f7eb57740da19e7b7ef9bec6a6 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 30 Nov 2018 15:23:26 +0100
Subject: Breakpoint on padding

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

(limited to 'packages')

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index a9e95f13c..1a78f691c 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -27,7 +27,7 @@ interface SectionProps {
 interface WrapProps {
     width?: 'default' | 'full' | 'medium' | 'narrow';
     bgColor?: string;
-    margin?: number | ('large' | 'default' | number)[];
+    padding?: number | ('large' | 'default' | number)[];
 }
 
 interface ColumnProps {
@@ -99,11 +99,15 @@ export const Section = styled.section<SectionProps>`
         width: ${props => props.fullWidth && '100vw'};
         margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`};
     }
+
+    @media (max-width: ${BREAKPOINTS.mobile}) {
+        padding: 30px;
+    }
 `;
 
 const WrapBase = styled.div<WrapProps>`
     max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
-    padding: ${props => props.margin && _getPadding(props.margin)};
+    padding: ${props => props.padding && _getPadding(props.padding)};
     background-color: ${props => props.bgColor};
     margin: 0 auto;
 `;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 6f1d14661..a2afab97e 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -72,7 +72,7 @@ export const NextLanding = () => (
             </WrapCentered>
 
             {/* Note you can also pass in a string "large/default" or a number for custom margins */}
-            <Wrap margin={['large', 0, 0, 0]}>
+            <Wrap padding={['large', 0, 0, 0]}>
                 {/* NOTE: this probably should be withComponent as part of a <dl> */}
                 <Column colWidth="1/3" noPadding>
                     <Heading size="medium" center>
-- 
cgit