From 4802a054c00363235571834bff0c6e272edd1427 Mon Sep 17 00:00:00 2001
From: fdnklg <mail@fabiandinklage.com>
Date: Thu, 8 Oct 2020 08:51:39 +0200
Subject: [PATCH] fixed mobile padding of navigation, added media queries for
 spacing of feature blocks

---
 website/src/components/CodeBlock/Mdx.js    |  2 +-
 website/src/components/Header/index.js     |  2 +-
 website/src/components/TeaserFlow/index.js | 14 +++++++++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/website/src/components/CodeBlock/Mdx.js b/website/src/components/CodeBlock/Mdx.js
index 984765b2..6fcd4ba5 100644
--- a/website/src/components/CodeBlock/Mdx.js
+++ b/website/src/components/CodeBlock/Mdx.js
@@ -18,7 +18,7 @@ export default ({ children, className = 'javascript', language }) => {
           style={{
             ...style,
             overflowX: 'auto',
-            padding: 30,
+            padding: 16,
             borderRadius: 4,
             margin: '20px 0 20px 0',
             fontSize: 14,
diff --git a/website/src/components/Header/index.js b/website/src/components/Header/index.js
index 6509d33c..98ec5c44 100644
--- a/website/src/components/Header/index.js
+++ b/website/src/components/Header/index.js
@@ -14,7 +14,7 @@ import ReactFlowLogo from 'assets/images/react-flow-logo.svg';
 const Centered = styled(Flex)`
   justify-content: space-between;
   align-items: center;
-  padding: ${getThemeSpacePx(4)};
+  padding: 24px 16px;
 `;
 
 const Wrapper = styled.nav`
diff --git a/website/src/components/TeaserFlow/index.js b/website/src/components/TeaserFlow/index.js
index a0d80685..b828384c 100644
--- a/website/src/components/TeaserFlow/index.js
+++ b/website/src/components/TeaserFlow/index.js
@@ -25,7 +25,7 @@ const ReactFlowWrapper = styled(Box)`
   background: ${(p) => (p.isDark ? baseColors.violet : 'white')};
   border-radius: 10px;
   order: 2;
-  margin: 30px 0;
+  margin: ${getThemeSpacePx(4)} ${getThemeSpacePx(0)};
   border: solid rgba(26, 25, 43, 0.054) 1.5px;
 
   box-shadow: 0 2.8px 2.2px rgba(26, 25, 43, 0.014),
@@ -37,6 +37,10 @@ const ReactFlowWrapper = styled(Box)`
     order: ${(p) => p.order};
   }
 
+  @media ${device.mobile} {
+    margin-top: ${getThemeSpacePx(3)};
+  }
+
   .react-flow__controls {
     opacity: ${(p) => (p.isDark ? 0.5 : 1)};
   }
@@ -48,6 +52,10 @@ const DocsLink = styled(Link)`
   align-items: center;
   margin-top: 16px;
 
+  @media ${device.mobile} {
+    margin-top: ${getThemeSpacePx(0)};
+  }
+
   svg {
     transform: translateX(0px);
     transition: all 0.125s ease-in-out;
@@ -68,6 +76,10 @@ const DescriptionWrapper = styled(Box)`
   @media ${device.tablet} {
     order: ${(p) => p.order};
   }
+
+  @media ${device.mobile} {
+    margin-bottom: ${getThemeSpacePx(0)};
+  }
 `;
 
 const Description = ({ title, description }) => (