From ace63fe83a5a0f04c136d42a242261956a3d8926 Mon Sep 17 00:00:00 2001
From: Piotr Janosz <janosz128@gmail.com>
Date: Tue, 16 Jul 2019 23:43:31 +0200
Subject: [PATCH] Fixed docs whitespace for mobile / tablet

---
 .../ts/components/docs/get_started_link.tsx      |  4 ++++
 .../website/ts/components/docs/separator.tsx     | 16 ++++++++++++++--
 .../website/ts/components/docs/step_links.tsx    |  1 -
 packages/website/ts/pages/docs/home.tsx          | 10 +++++-----
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/website/ts/components/docs/get_started_link.tsx b/packages/website/ts/components/docs/get_started_link.tsx
index e1f1c57060..7d10aa611a 100644
--- a/packages/website/ts/components/docs/get_started_link.tsx
+++ b/packages/website/ts/components/docs/get_started_link.tsx
@@ -36,6 +36,10 @@ const GetStartedButton = styled(Button)`
 `;
 
 const GetStartedParagraph = styled(Paragraph)`
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+
     @media (max-width: 500px) {
         font-size: 14px;
     }
diff --git a/packages/website/ts/components/docs/separator.tsx b/packages/website/ts/components/docs/separator.tsx
index 3acaab984b..932589b6f7 100644
--- a/packages/website/ts/components/docs/separator.tsx
+++ b/packages/website/ts/components/docs/separator.tsx
@@ -1,8 +1,20 @@
 import styled from 'styled-components';
 
-export const Separator = styled.hr`
+interface ISeparatorProps {
+    margin?: string;
+}
+
+export const Separator = styled.hr<ISeparatorProps>`
     border-width: 0 0 1px;
     border-color: #e4e4e4;
     height: 0;
-    margin: 30px 0;
+    margin: ${({ margin }) => margin};
+
+    @media (max-width: 768px) {
+        margin: 30px 0;
+    }
 `;
+
+Separator.defaultProps = {
+    margin: '30px 0',
+};
diff --git a/packages/website/ts/components/docs/step_links.tsx b/packages/website/ts/components/docs/step_links.tsx
index 69b9657082..e313052d98 100644
--- a/packages/website/ts/components/docs/step_links.tsx
+++ b/packages/website/ts/components/docs/step_links.tsx
@@ -20,5 +20,4 @@ export const StepLinks: React.FC<ILinkProps> = ({ links }) => (
 const StepLinksWrapper = styled.div`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
-    margin-bottom: 1.875rem;
 `;
diff --git a/packages/website/ts/pages/docs/home.tsx b/packages/website/ts/pages/docs/home.tsx
index 06080f9a8f..be50711db2 100644
--- a/packages/website/ts/pages/docs/home.tsx
+++ b/packages/website/ts/pages/docs/home.tsx
@@ -15,6 +15,8 @@ import { Heading } from 'ts/components/text';
 
 import { documentConstants } from 'ts/utils/document_meta_constants';
 
+const separatorMargin = '60px 0';
+
 export const DocsHome: React.FC = () => {
     return (
         <SiteWrap theme="light">
@@ -26,7 +28,7 @@ export const DocsHome: React.FC = () => {
                         <ShortcutLink key={`shortcut-${index}`} {...shortcut} />
                     ))}
                 </ShortcutsWrapper>
-                <Separator />
+                <Separator margin={separatorMargin} />
                 <GetStartedWrapper>
                     <div>
                         <Heading size="default">Get Started</Heading>
@@ -34,13 +36,12 @@ export const DocsHome: React.FC = () => {
                             <GetStartedLink key={`getStarted-${index}`} {...link} />
                         ))}
                     </div>
-                    <Separator />
                     <div>
                         <Heading size="default">Useful Links</Heading>
                         <StepLinks links={usefulLinks} />
                     </div>
                 </GetStartedWrapper>
-                <Separator />
+                <Separator margin={separatorMargin} />
                 <CommunityWrapper>
                     {communityShortcuts.map((shortcut, index) => (
                         <CommunityLink key={`communityLink-${index}`} {...shortcut} />
@@ -64,12 +65,11 @@ const ShortcutsWrapper = styled.div`
 
 const GetStartedWrapper = styled.div`
     display: grid;
-    grid-template-columns: 1fr 0 1fr;
+    grid-template-columns: 1fr 1fr;
     grid-column-gap: 70px;
     grid-row-gap: 30px;
 
     @media (max-width: 900px) {
-        grid-column-gap: 30px;
         grid-template-columns: 1fr;
     }
 `;