Fixed styles for community links

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;
+    }
+`;

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;