Styled resource for different screen widths

packages/website/ts/components/docs/resource/level.tsx

@@ -43,6 +43,7 @@ export const Level: React.FC<LevelProps> = ({ difficulty }) => {
 const LevelWrapper = styled.div`
     display: flex;
     align-items: center;
+    margin: 20px 0;
 `;
 
 const DifficultyLabel = styled.span`

packages/website/ts/components/docs/resource/resource.tsx

@@ -18,14 +18,12 @@ export interface IResourceProps {
 }
 
 export const Resource: React.FC<IResourceProps> = ({ heading, description, isCommunity, url, tags }) => {
-    console.log('isCommunity', isCommunity);
-
     return (
         <Wrapper>
             <Heading color={colors.brandDark} size="small" marginBottom="8px">
                 <Link to={url}>{heading}</Link>
             </Heading>
-            <Paragraph size="default" marginBottom="30px">
+            <Paragraph size="default" marginBottom="10px">
                 {description}
             </Paragraph>
             <Meta>
@@ -43,18 +41,19 @@ export const Resource: React.FC<IResourceProps> = ({ heading, description, isCom
 
 const Wrapper = styled.div`
     border: 1px solid #d7e3db;
-    padding: 25px 30px;
+    padding: 25px 30px 5px;
     margin-bottom: 1.1rem;
     display: block;
 `;
 
 const Meta = styled.div`
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
 `;
 
 const Tags = styled.div`
-    display: flex;
+    display: inline-flex;
     align-items: center;
+    flex-wrap: wrap;
 `;

packages/website/ts/components/docs/resource/tag.tsx

@@ -28,18 +28,15 @@ const TagText = styled.div<ITagProps>`
     background-color: ${({ isInverted }) => (isInverted ? colors.brandDark : colors.backgroundLight)};
     color: ${({ isInverted }) => (isInverted ? colors.white : colors.brandDark)};
     border-radius: 4px;
-    font-size: 0.666666667rem;
+    font-size: 0.67rem;
     font-family: 'Formular Mono';
     font-weight: 400;
+    margin: 5px 10px 5px 0;
     padding: 6px 10px 5px;
     display: inline-flex;
     align-items: center;
     text-transform: uppercase;
 
-    & + & {
-        margin-left: 10px;
-    }
-
     svg {
         margin-right: 7px;
     }

packages/website/ts/components/docs/search_input.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
-
-import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete';
 
 import algoliasearch from 'algoliasearch/lite';
 import { Configure, connectAutoComplete, Index, InstantSearch } from 'react-instantsearch-dom';
 
+import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete';
+
 const searchClient = algoliasearch('VHMP18K2OO', 'e46d0171577e85fa5418c50b18f80ade');
 
 interface ISearchInputProps {

packages/website/ts/pages/docs/tools.tsx

@@ -67,6 +67,10 @@ const Columns = styled.div`
     grid-template-columns: 250px 1fr;
     grid-column-gap: 98px;
     grid-row-gap: 30px;
+
+    @media (max-width: 900px) {
+        grid-template-columns: 1fr;
+    }
 `;
 
 const FeaturedToolsWrapper = styled.div`
@@ -180,7 +184,7 @@ const resources = [
         heading: '0x Mesh - your gateway to networked liquidity',
         description:
             'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
-        tags: ['Relayer'],
+        tags: ['Relayer', 'Dogs', 'Bells and whistles', 'Interstellar', 'Maharaji'],
         url: 'https://0x.org',
         isCommunity: true,
     },