From 701ea77a79466ce57d609c322aa1f0c37d34cca2 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 7 Dec 2018 13:51:45 +0100
Subject: Mobile tweaks

---
 packages/website/ts/@next/components/layout.tsx | 18 ++++++++++++++++--
 packages/website/ts/@next/components/logo.tsx   |  4 ++++
 2 files changed, 20 insertions(+), 2 deletions(-)

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

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;
+        }
     }
 `;
 
-- 
cgit v1.2.3