From 3c7e538202cefdc74b088c2fe56c6dd4a96b3631 Mon Sep 17 00:00:00 2001
From: Piotr Janosz <janosz128@gmail.com>
Date: Sun, 14 Jul 2019 22:58:41 +0200
Subject: [PATCH] Fixed styles for community links

---
 .../ts/components/docs/community_link.tsx     |  9 +++++++-
 packages/website/ts/pages/docs/home.tsx       | 22 +++++++++++++------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/website/ts/components/docs/community_link.tsx b/packages/website/ts/components/docs/community_link.tsx
index a62e85e64f..1ddb4ea0a4 100644
--- a/packages/website/ts/components/docs/community_link.tsx
+++ b/packages/website/ts/components/docs/community_link.tsx
@@ -15,7 +15,7 @@ export interface ICommunityLinkProps {
 
 export const CommunityLink: React.FC<ICommunityLinkProps> = props => (
     <Wrapper href={props.url}>
-        <Icon color={colors.brandLight} name={props.icon} size={100} margin={[0, 0, 24, 0]} />
+        <CommunityIcon color={colors.brandLight} name={props.icon} margin={[0, 0, 24, 0]} />
         <Heading size="small" marginBottom="8px">
             {props.heading}
         </Heading>
@@ -35,3 +35,10 @@ const Wrapper = styled.a`
     justify-content: center;
     text-align: center;
 `;
+
+const CommunityIcon = styled(Icon)`
+    @media (min-width: 900px) {
+        height: 100px;
+        width: 100px;
+    }
+`;
diff --git a/packages/website/ts/pages/docs/home.tsx b/packages/website/ts/pages/docs/home.tsx
index 397a388745..de3bebae85 100644
--- a/packages/website/ts/pages/docs/home.tsx
+++ b/packages/website/ts/pages/docs/home.tsx
@@ -68,24 +68,32 @@ const ShortcutsWrapper = styled.div`
     }
 `;
 
-const CommunityWrapper = styled.div`
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-column-gap: 30px;
-    grid-row-gap: 30px;
-`;
-
 const GetStartedWrapper = styled.div`
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-column-gap: 70px;
     grid-row-gap: 30px;
+
+    @media (max-width: 500px) {
+        grid-template-columns: 1fr;
+    }
 `;
 
 const GetStartedButton = styled(Button)`
     margin-bottom: 12px;
 `;
 
+const CommunityWrapper = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 30px;
+    grid-row-gap: 30px;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+`;
+
 const Separator = styled.hr`
     border-width: 0 0 1px;
     border-color: #e4e4e4;