Mobile tweaks

2 files changed, 20 insertions, 2 deletions

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index d30b7a9d1..1fa145368 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -68,9 +68,13 @@ const COLUMN_WIDTHS: ColumnWidths = {
 
 export const Main = styled.main`
     border: 1px dotted rgba(0, 0, 255, 0.3);
-    width: calc(100% - 60px);
+    width: calc(100% - 0);
     max-width: ${MAX_WIDTH}px;
     margin: 0 auto;
+
+    @media (min-width: ${BREAKPOINTS.mobile}) {
+        width: calc(100% - 60px);
+    }
 `;
 
 // We can also turn Section into a stateless comp,
@@ -91,7 +95,7 @@ export const Section = styled.section<SectionProps>`
     }
 
     @media (max-width: ${BREAKPOINTS.mobile}) {
-        padding: 30px;
+        padding: 20px;
     }
 `;
 
@@ -100,6 +104,10 @@ const WrapBase = styled.div<WrapProps>`
     padding: ${props => props.padding && getCSSPadding(props.padding)};
     background-color: ${props => props.bgColor};
     margin: 0 auto;
+
+    @media (max-width: ${BREAKPOINTS.mobile}) {
+        padding: 20px 0;
+    }
 `;
 
 export const Wrap = styled(WrapBase)`
@@ -132,6 +140,12 @@ export const Column = styled.div<ColumnProps>`
     @media (min-width: ${BREAKPOINTS.mobile}) {
         width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
     }
+
+    @media (max-width: ${BREAKPOINTS.mobile}) {
+        padding-left: 0;
+        padding-right: 0;
+        margin-bottom: var(--gutterMobile, 20px);
+    }
 `;
 
 WrapGrid.defaultProps = {
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 96658a4b2..6e6abee2a 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -30,6 +30,10 @@ const Icon = styled(LogoIcon)`
 
     path {
         fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor};
+
+        @media (max-width: 768px) {
+            fill: #fff;
+        }
     }
 `;