Merge branch 'feature/new-docs' of github.com:0xProject/0x-monorepo into feature/new-docs

packages/website/ts/components/docs/mdx/ordered_list.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 
+import { colors } from 'ts/style/colors';
 import { docs } from 'ts/style/docs';
 
 export const OrderedList = styled.ol`
@@ -12,7 +13,8 @@ export const OrderedList = styled.ol`
         counter-increment: steps;
         padding-left: 48px;
         margin-bottom: 0.8333rem;
-        font-size: 1rem;
+        color: ${colors.brandDark};
+        font-size: ${docs.fontSize.desktop};
         line-height: 30px;
 
         &:before {
@@ -27,5 +29,9 @@ export const OrderedList = styled.ol`
             min-width: 30px;
             height: 30px;
         }
+
+        @media (max-width: 900px) {
+            font-size: ${docs.fontSize.mobile};
+        }
     }
 `;

packages/website/ts/components/docs/mdx/paragraph.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+import { docs } from 'ts/style/docs';
+
+export const Paragraph = styled.p`
+    color: ${docs.textColor};
+    font-size: ${docs.fontSize.desktop};
+    font-weight: 300;
+    line-height: 1.4;
+    margin-bottom: 30px;
+
+    @media (max-width: 900px) {
+        font-size: ${docs.fontSize.mobile};
+    }
+`;

packages/website/ts/components/docs/mdx/unordered_list.tsx

@@ -8,11 +8,15 @@ export const UnorderedList = styled.ul`
     padding-left: 1rem;
 
     li {
-        color: ${({ theme }) => theme.paragraphColor};
-        font-size: 1rem;
+        color: ${docs.textColor};
+        font-size: ${docs.fontSize.desktop};
         font-weight: 300;
         line-height: 1.625em;
         margin-bottom: 1rem;
-        line-height: 26px;
+        line-height: 1.4;
+
+        @media (max-width: 900px) {
+            font-size: ${docs.fontSize.mobile};
+        }
     }
 `;

packages/website/ts/components/docs/sidebar/table_of_contents.tsx

@@ -66,7 +66,7 @@ const ContentLink = styled(Link)<{ level: number }>`
     display: inline-block;
 
     span {
-        color: #999;
+        color: #939393;
         font-weight: 300;
         transition: all 250ms ease-in-out;
     }

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

@@ -18,6 +18,7 @@ import { NewsletterWidget } from 'ts/components/docs/mdx/newsletter_widget';
 import { Note } from 'ts/components/docs/mdx/note';
 import { Notification } from 'ts/components/docs/mdx/notification';
 import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
+import { Paragraph } from 'ts/components/docs/mdx/paragraph';
 import { Table } from 'ts/components/docs/mdx/table';
 import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
 
@@ -32,8 +33,6 @@ import { IContents, TableOfContents } from 'ts/components/docs/sidebar/table_of_
 
 import { PageNotFound } from 'ts/pages/docs/page_not_found';
 
-import { Paragraph } from 'ts/components/text';
-
 import { docs } from 'ts/style/docs';
 
 import meta from 'ts/utils/algolia_meta.json';

packages/website/ts/style/docs.ts

@@ -2,4 +2,9 @@ export const docs = {
     scrollDuration: 0,
     headerOffset: 116,
     marginBottom: '1.875rem',
+    fontSize: {
+        mobile: '16px',
+        desktop: '17px',
+    },
+    textColor: '#494949',
 };