From 561f441a5bfc4822b0974169605d089b4f687bf5 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 09:37:14 +0200
Subject: Implements color variables and updates components

---
 packages/dev-tools-pages/ts/components/Button.tsx     |  3 ++-
 packages/dev-tools-pages/ts/components/Code.tsx       |  5 +++--
 packages/dev-tools-pages/ts/components/Compiler.tsx   |  3 ++-
 packages/dev-tools-pages/ts/components/InlineCode.tsx |  3 ++-
 packages/dev-tools-pages/ts/components/Intro.tsx      |  6 +++---
 packages/dev-tools-pages/ts/components/Tabs.tsx       |  4 +++-
 packages/dev-tools-pages/ts/components/Trace.tsx      |  3 ++-
 packages/dev-tools-pages/ts/variables.tsx             | 12 ++++++++++++
 8 files changed, 29 insertions(+), 10 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/variables.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index e676961c8..fb36f7669 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { withContext, Props } from './withContext';
 
@@ -16,7 +17,7 @@ const Button =
   white-space: nowrap;
   vertical-align: middle;
   background-color: ${props => props.colors.secondary};
-  color: #000;
+  color: ${variables.colors.black};
   border: 0;
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 42d4234f1..42893a70a 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import BaseButton from './Button';
 
@@ -25,8 +26,8 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? '#FFF' : 'inherit')};
-  background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')};
+  color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')};
+  background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)};
   white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
   position: relative;
   &:hover ${Button} {
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index 6dcfda70c..fcdbb6bfe 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import InlineCode from './InlineCode';
 
@@ -13,7 +14,7 @@ const Cards = styled.dl`
 `;
 
 const Card = styled.div`
-    background-color: #f1f4f5;
+    background-color: ${variables.colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
 `;
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index 037cfa675..f8aad8795 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+import variables from '../variables';
 
 const InlineCode = styled.code`
-    background-color: #eceff9;
+    background-color: ${variables.colors.blueGray}
     padding: 0.1875rem;
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index c16c888b7..2d4a30f9f 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { Alpha, Beta } from './Typography';
 
 const Main = styled.div`
-    background-color: #f1f4f5;
+    background-color: ${variables.colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
@@ -16,13 +17,12 @@ const Title = styled(Alpha)`
 
 const Content = styled.div`
     max-width: 25.9375rem;
-
     display: flex;
     flex-direction: column;
 `;
 
 const Code = styled.div`
-    background-color: #e9eced;
+    background-color: ${variables.colors.darkGray};
     width: 520px;
     height: 350px;
 `;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 1efbe1f61..b36b354f3 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
+
 import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
 
 import {withContext, Props} from './withContext';
@@ -34,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>`
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
-    background-color: #F1F2F7;
+    background-color: ${variables.colors.gray};
   } 
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 50bbd449a..98695177d 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import variables from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -97,7 +98,7 @@ const StyledSection =
     `
     max-width: 90rem;
     margin: 0 auto;
-    background: linear-gradient(to right, #000 50%, ${props => props.background} 50%);
+    background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
 `;
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
new file mode 100644
index 000000000..8590547df
--- /dev/null
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -0,0 +1,12 @@
+const variables = {
+    colors: {
+        black: '#000000',
+        white: '#FFFFFF',
+        lightGray: '#F1F4F5',
+        gray: '#F1F2F7',
+        darkGray: '#E9ECED',
+        blueGray: '#ECEFF9',
+    },
+};
+
+export default variables;
-- 
cgit 


From 585ca203b02e902b3dd5141bcacd0ffc5740e0c1 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 11:32:59 +0200
Subject: Changed name of export to colors and updates components

---
 packages/dev-tools-pages/ts/components/Button.tsx     | 4 ++--
 packages/dev-tools-pages/ts/components/Code.tsx       | 6 +++---
 packages/dev-tools-pages/ts/components/Compiler.tsx   | 4 ++--
 packages/dev-tools-pages/ts/components/InlineCode.tsx | 4 ++--
 packages/dev-tools-pages/ts/components/Intro.tsx      | 6 +++---
 packages/dev-tools-pages/ts/components/Tabs.tsx       | 4 ++--
 packages/dev-tools-pages/ts/components/Trace.tsx      | 8 ++++----
 packages/dev-tools-pages/ts/variables.tsx             | 6 ++++--
 8 files changed, 22 insertions(+), 20 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index fb36f7669..2d0fbc353 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { withContext, Props } from './withContext';
 
@@ -17,7 +17,7 @@ const Button =
   white-space: nowrap;
   vertical-align: middle;
   background-color: ${props => props.colors.secondary};
-  color: ${variables.colors.black};
+  color: ${colors.black};
   border: 0;
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 42893a70a..44d1cb99c 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import BaseButton from './Button';
 
@@ -26,8 +26,8 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? variables.colors.white : 'inherit')};
-  background-color: ${props => (props.language === undefined ? variables.colors.black : variables.colors.lightGray)};
+  color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+  background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
   white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
   position: relative;
   &:hover ${Button} {
diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index fcdbb6bfe..bda29dc1f 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import InlineCode from './InlineCode';
 
@@ -14,7 +14,7 @@ const Cards = styled.dl`
 `;
 
 const Card = styled.div`
-    background-color: ${variables.colors.lightGray};
+    background-color: ${colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
 `;
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
index f8aad8795..bfbaeb395 100644
--- a/packages/dev-tools-pages/ts/components/InlineCode.tsx
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 const InlineCode = styled.code`
-    background-color: ${variables.colors.blueGray}
+    background-color: ${colors.blueGray}
     padding: 0.1875rem;
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 2d4a30f9f..cddee5b6f 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { Alpha, Beta } from './Typography';
 
 const Main = styled.div`
-    background-color: ${variables.colors.lightGray};
+    background-color: ${colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
@@ -22,7 +22,7 @@ const Content = styled.div`
 `;
 
 const Code = styled.div`
-    background-color: ${variables.colors.darkGray};
+    background-color: ${colors.darkGray};
     width: 520px;
     height: 350px;
 `;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index b36b354f3..64f87bea3 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
 
@@ -36,7 +36,7 @@ const Root = styled.div<{primaryColor: string;}>`
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
-    background-color: ${variables.colors.gray};
+    background-color: ${colors.gray};
   } 
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 98695177d..f4b4e76a3 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import variables from '../variables';
+import { colors } from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -98,7 +98,7 @@ const StyledSection =
     `
     max-width: 90rem;
     margin: 0 auto;
-    background: linear-gradient(to right, ${variables.colors.black} 50%, ${props => props.background} 50%);
+    background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
 `;
@@ -116,8 +116,8 @@ const Block =
     TraceProps >
     `
     width: 50%;
-    background: ${props => (props.background ? props.background : '#000')};
-    color: ${props => (props.background ? 'inherit' : '#fff')};
+    background: ${props => (props.background ? props.background : colors.black)};
+    color: ${props => (props.background ? 'inherit' : colors.white)};
 
     :first-of-type {
         padding-right: 6.25rem;
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index 8590547df..b1e0271d1 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -1,5 +1,6 @@
-const variables = {
-    colors: {
+import { css } from 'styled-components';
+
+const colors = {
         black: '#000000',
         white: '#FFFFFF',
         lightGray: '#F1F4F5',
@@ -10,3 +11,4 @@ const variables = {
 };
 
 export default variables;
+export { colors, media };
-- 
cgit 


From 45a24738b585d568c765b641a94e9bbf941a8fd7 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 11:33:41 +0200
Subject: Exports media breakpoints

---
 packages/dev-tools-pages/ts/variables.tsx | 35 ++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 8 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index b1e0271d1..b23bb3e52 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -1,14 +1,33 @@
 import { css } from 'styled-components';
 
 const colors = {
-        black: '#000000',
-        white: '#FFFFFF',
-        lightGray: '#F1F4F5',
-        gray: '#F1F2F7',
-        darkGray: '#E9ECED',
-        blueGray: '#ECEFF9',
-    },
+    black: '#000000',
+    white: '#FFFFFF',
+    lightGray: '#F1F4F5',
+    gray: '#F1F2F7',
+    darkGray: '#E9ECED',
+    blueGray: '#ECEFF9',
 };
 
-export default variables;
+interface SizesInterface {
+    [key: string]: number;
+}
+
+const sizes: SizesInterface = {
+    large: 992,
+    medium: 768,
+    small: 376,
+};
+
+const media = Object.keys(sizes).reduce((acc: any, label: string) => {
+    acc[label] = (args: any) => css`
+        @media (max-width: ${sizes[label] / 16}em) {
+            ${css(args)};
+        }
+    `;
+
+    return acc;
+}, {});
+
+export default media;
 export { colors, media };
-- 
cgit 


From ba0b9b259fdd84c34254cb9d9cab4a2dc4c91f94 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 11:59:03 +0200
Subject: Responsive header

---
 packages/dev-tools-pages/ts/components/Header.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index dca562421..aeefae3cc 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -5,6 +5,8 @@ import { withContext, Props } from './withContext';
 import Container from './Container';
 import { Small } from './Typography';
 
+import { media } from '../variables';
+
 function Header(props: Props) {
     const { icon, title, colors } = props;
 
@@ -36,6 +38,8 @@ const StyledHeader = styled.header`
         justify-content: space-between;
         align-items: center;
     }
+
+    ${media.small`padding-top: 2.125rem;`};
 `;
 
 const LogoMark = styled.div`
@@ -53,6 +57,8 @@ const Title = styled.h1`
     font-size: 1.5rem;
     margin: 0;
     margin-left: 0.8125rem;
+
+    ${media.small`font-size: 1.25rem;`};
 `;
 
 const StyledLink = styled(Small)`
-- 
cgit 


From 135a623b1f783a24ff4885a3dd0209fcaeb85678 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 14:29:59 +0200
Subject: Responsive trace

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 38 ++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index f4b4e76a3..fe1f357c7 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { colors, media } from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -101,6 +101,8 @@ const StyledSection =
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
+    
+    ${media.small`background: none`};
 `;
 
 const Wrapper = styled(Container)`
@@ -108,7 +110,14 @@ const Wrapper = styled(Container)`
 
     ${Alpha} {
         padding-bottom: 2.5rem;
+
+        ${media.small`padding-bottom: 1.875rem;`};
     }
+
+    ${media.small`
+        display: block;
+        width: 100%;
+    `};
 `;
 
 const Block =
@@ -125,27 +134,52 @@ const Block =
     :last-of-type {
         padding-left: 6.25rem;
     }
+
+    ${media.small`
+        width: 100%;
+        padding-top: 2.5rem;
+        padding-bottom: 3.4375rem;
+
+        :first-of-type {
+            padding-left: 1.875rem;
+            padding-right: 1.875rem;
+        }
+        :last-of-type {
+            padding-left: 1.875rem;
+            padding-right: 1.875rem;
+        }
+    `};
 `;
 
 const MainCopy = styled(Beta)`
     margin-bottom: 3.1875rem;
+    ${media.small`margin-bottom: 1.125rem;`};
 `;
 
 const List = styled.ul`
     margin-top: 6.25rem;
     margin-bottom: 0;
     padding: 0;
+
+    ${media.small`margin-top: 3.4375rem;`};
 `;
 
 const Item = styled.li`
     display: flex;
     align-items: center;
-    margin-bottom: 4.4375rem;
+
+    :not(:last-child) {
+        margin-bottom: 4.4375rem;
+
+        ${media.small`margin-bottom: 3.4375rem;`};
+    }
 `;
 
 const Copy = styled.div`
     max-width: 20rem;
     margin-right: 5.875rem;
+
+    ${media.small`margin-right: 2.0625rem;`};
 `;
 
 export default withContext(Trace);
-- 
cgit 


From 9a024fdacf885cbeb1d070064b0ab2314a092f13 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 14:30:38 +0200
Subject: Responsive font sizes in typography and globalstyles

---
 packages/dev-tools-pages/ts/components/Typography.tsx | 7 +++++++
 packages/dev-tools-pages/ts/globalStyles.tsx          | 4 ++++
 2 files changed, 11 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index 9251d31b4..5f9587335 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -1,17 +1,24 @@
 import styled from 'styled-components';
+import { media } from '../variables';
 
 const Alpha = styled.h2`
     font-size: 1.75rem;
     line-height: 1;
+
+    ${media.small`font-size: 1.5rem;`};
 `;
 
 const Beta = styled.h3`
     font-size: 1.25rem;
     line-height: 1.65;
+
+    ${media.small`font-size: 1rem;`};
 `;
 
 const Gamma = styled.h4`
     font-size: 1rem;
+
+    ${media.small`font-size: 0.875rem;`};
 `;
 
 const Small = styled.p`
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 1a2a1769a..e8ef630da 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -1,4 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
+import { media } from './variables';
 import styledNormalize from 'styled-normalize';
 import hljsStyles from 'highlight.js/styles/github-gist.css';
 
@@ -44,6 +45,9 @@ const BaseStyles = createGlobalStyle`
     font-weight: 300;
     font-size: 1rem;
     line-height: 1.8;
+
+    ${media.small`font-size: 0.875rem;`};
+
   }
 
   a {
-- 
cgit 


From 8a7c61c6f46dc283d9387fb29860295f58e683e7 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 15:31:26 +0200
Subject: Responsive footer

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 40 ++++++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 82b2de1a3..15e6a5b86 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Alpha, Beta } from './Typography';
 import { withContext, Props } from './withContext';
 import Container from './Container';
+import { media } from '../variables';
 
 import MainIcon from 'ts/icons/logos/0x.svg';
 import compiler from 'ts/context/compiler';
@@ -23,7 +24,7 @@ function Footer(props: Props) {
                     <Alpha>Other tools by 0x</Alpha>
                     <List>
                         {tools.map(({ title, subtitle, icon }) => (
-                            <ListItem as="li" key={title}>
+                            <ListItem key={title}>
                                 <Icon as={icon} />
                                 <div>
                                     <Beta>{title}</Beta>
@@ -49,21 +50,38 @@ const StyledFooter = styled.footer`
     background-color: ${(props: { background: string }) => props.background};
     padding-top: 6.25rem;
     padding-bottom: 5.4375rem;
+
+    ${media.small`padding-top: 2.5rem;`};
 `;
 
 const Top = styled.div`
     display: flex;
     justify-content: space-between;
     margin-bottom: 9.375rem;
+
+    ${media.small`
+        display: block;
+        margin-bottom: 5.3125rem;
+    `};
+
+    ${Alpha} {
+        ${media.small`margin-bottom: 3.8125rem;`};
+    }
+`;
+
+const Icon = styled.div`
+    margin-right: 1.3125rem;
+
+    ${media.small`margin-right: 0.9375rem`};
 `;
 
 const Media = styled.div`
     display: flex;
     align-items: center;
-`;
 
-const Icon = styled.div`
-    margin-right: 1.3125rem;
+    ${Icon} {
+        align-self: flex-start;
+    }
 `;
 
 const List = styled.ul`
@@ -73,14 +91,26 @@ const List = styled.ul`
     flex-direction: row;
     margin: 0;
     padding: 0;
+
+    ${media.small`
+        display: block;
+        width: 100%; 
+    `};
 `;
 
-const ListItem = styled(Media)`
+const ListItem = styled.li`
+    display: flex;
+    align-items: center;
     flex-basis: 50%;
     margin-bottom: 3.3125rem;
+
     :nth-last-of-type(-n + 2) {
         margin-bottom: 0;
+
+        ${media.small`margin-bottom: 1.875rem`};
     }
+
+    ${media.small`margin-bottom: 1.875rem`};
 `;
 
 const Small = styled.small`
-- 
cgit 


From d6ac1a4f782c55407760d4502325b6aa2cf3730c Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Fri, 19 Oct 2018 15:32:02 +0200
Subject: Remove font size adjustment for small screens from Beta

---
 packages/dev-tools-pages/ts/components/Trace.tsx      | 5 ++++-
 packages/dev-tools-pages/ts/components/Typography.tsx | 2 --
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index fe1f357c7..545e87d53 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -153,7 +153,10 @@ const Block =
 
 const MainCopy = styled(Beta)`
     margin-bottom: 3.1875rem;
-    ${media.small`margin-bottom: 1.125rem;`};
+    ${media.small`
+        margin-bottom: 1.125rem;
+        font-size: 1rem;
+    `};
 `;
 
 const List = styled.ul`
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index 5f9587335..deac8a976 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -11,8 +11,6 @@ const Alpha = styled.h2`
 const Beta = styled.h3`
     font-size: 1.25rem;
     line-height: 1.65;
-
-    ${media.small`font-size: 1rem;`};
 `;
 
 const Gamma = styled.h4`
-- 
cgit 


From 7d7f54c751a2a5b8fca6791fb6685f4b5f969fff Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 19 Oct 2018 15:02:15 +0100
Subject: Feature/build step (#2)

* BundleAnalyzerPlugin

* lazy load highlight.js

* seperate bundles for each page

* prerender apps to html on build

* preload important font files

* dont prerender code copy button

* fix woff2 variant of font

* added missing doctype

* remove metatags component
---
 packages/dev-tools-pages/ts/components/Base.tsx    | 26 +++++++++++++++
 packages/dev-tools-pages/ts/components/Code.tsx    |  6 ++--
 .../dev-tools-pages/ts/components/MetaTags.tsx     | 28 ----------------
 packages/dev-tools-pages/ts/globalStyles.tsx       |  6 ++--
 packages/dev-tools-pages/ts/globals.d.ts           |  2 ++
 packages/dev-tools-pages/ts/highlight.tsx          |  6 ++++
 packages/dev-tools-pages/ts/index.tsx              | 37 ----------------------
 packages/dev-tools-pages/ts/pages/Base.tsx         | 28 ----------------
 packages/dev-tools-pages/ts/pages/Compiler.tsx     | 13 ++++++--
 packages/dev-tools-pages/ts/pages/Cov.tsx          | 13 ++++++--
 packages/dev-tools-pages/ts/pages/Profiler.tsx     | 13 ++++++--
 packages/dev-tools-pages/ts/pages/Trace.tsx        | 13 ++++++--
 12 files changed, 80 insertions(+), 111 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Base.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/MetaTags.tsx
 create mode 100644 packages/dev-tools-pages/ts/highlight.tsx
 delete mode 100644 packages/dev-tools-pages/ts/index.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/Base.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
new file mode 100644
index 000000000..16e9560f0
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import ThemeContext from 'ts/context';
+import GlobalStyles from 'ts/globalStyles';
+import Header from 'ts/components/Header';
+import Hero from 'ts/components/Hero';
+import Footer from 'ts/components/Footer';
+
+interface BaseProps {
+    context: any;
+    children: React.ReactNode;
+}
+
+function Base(props: BaseProps) {
+    return (
+        <ThemeContext.Provider value={props.context}>
+            <GlobalStyles />
+            <Header />
+            <Hero />
+            {props.children}
+            <Footer />
+        </ThemeContext.Provider>
+    );
+}
+
+export default Base;
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 44d1cb99c..72b3e1af7 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -69,8 +69,8 @@ class Code extends React.Component<CodeProps, CodeState> {
         const { language, children } = this.props;
 
         if (language !== undefined) {
-            const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js');
-            const { value: hlCode } = highlight(language, children as string);
+            const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
+            const { value: hlCode } = hljs.highlight(language, children as string);
             this.setState({ hlCode });
         }
     }
@@ -103,7 +103,7 @@ class Code extends React.Component<CodeProps, CodeState> {
                         <StyledCode>{this.props.children}</StyledCode>
                     )}
                 </StyledPre>
-                <Button onClick={this.handleCopy}>Copy</Button>
+                {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
                 {!('clipboard' in navigator) ? (
                     <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
                 ) : null}
diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx
deleted file mode 100644
index 9bb33f7ab..000000000
--- a/packages/dev-tools-pages/ts/components/MetaTags.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import { withContext, Props } from './withContext';
-
-interface MetaTagsProps extends Props {
-    imgSrc?: string;
-}
-
-function MetaTags(props: MetaTagsProps) {
-    const { title, imgSrc = '/images/og_image.png' } = props;
-    const description = props.tagline;
-    return (
-        <Helmet>
-            <title>{props.title}</title>
-            <meta name="description" content={description} />
-            <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} />
-            <meta property="og:title" content={title} />
-            <meta property="og:description" content={description} />
-            <meta property="og:type" content="website" />
-            <meta property="og:image" content={imgSrc} />
-            <meta name="twitter:site" content="@0xproject" />
-            <meta name="twitter:image" content={imgSrc} />
-        </Helmet>
-    );
-}
-
-export default withContext(MetaTags);
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index e8ef630da..13ecde7aa 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -11,21 +11,21 @@ const BaseStyles = createGlobalStyle`
 
   @font-face {
     font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+    src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
     font-weight: 300;
     font-display: swap;
     unicode-range: U+20-7E;
   }
   @font-face {
     font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+    src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
     font-weight: 500;
     font-display: swap;
     unicode-range: U+20-7E;
   }
   @font-face {
     font-family: "Maison Neue Mono";
-    src: url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+    src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
     font-weight: 300;
     font-display: optional;
     unicode-range: U+20-7E;
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index da026a198..07871a74b 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -1,6 +1,8 @@
 declare module 'whatwg-fetch';
 declare module 'react-document-title';
 
+declare var System: any;
+
 declare module '*.json' {
     const json: any;
     /* tslint:disable */
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
new file mode 100644
index 000000000..0c4602d51
--- /dev/null
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -0,0 +1,6 @@
+const highlight = require('highlight.js/lib/highlight');
+const javascript = require('highlight.js/lib/languages/javascript');
+
+highlight.registerLanguage('javascript', javascript);
+
+export default highlight;
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
deleted file mode 100644
index b185e270a..000000000
--- a/packages/dev-tools-pages/ts/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { render } from 'react-dom';
-import { Router, Link } from '@reach/router';
-
-import Trace from 'ts/pages/Trace';
-import Compiler from 'ts/pages/Compiler';
-import Cov from 'ts/pages/Cov';
-import Profiler from 'ts/pages/Profiler';
-
-const Index = (props: any) => (
-    <ul>
-        <li>
-            <Link to="/trace">sol-trace</Link>
-        </li>
-        <li>
-            <Link to="/compiler">sol-compiler</Link>
-        </li>
-        <li>
-            <Link to="/cov">sol-cov</Link>
-        </li>
-        <li>
-            <Link to="/profiler">sol-profiler</Link>
-        </li>
-    </ul>
-);
-
-const App = () => (
-    <Router>
-        <Trace path="/trace" />
-        <Compiler path="/compiler" />
-        <Cov path="/cov" />
-        <Profiler path="/profiler" />
-        <Index default />
-    </Router>
-);
-
-render(<App />, document.getElementById('app'));
diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
deleted file mode 100644
index 7bb578611..000000000
--- a/packages/dev-tools-pages/ts/pages/Base.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-import ThemeContext from 'ts/context';
-import GlobalStyles from 'ts/globalStyles';
-import MetaTags from 'ts/components/MetaTags';
-import Header from 'ts/components/Header';
-import Hero from 'ts/components/Hero';
-import Footer from 'ts/components/Footer';
-
-interface BaseProps {
-    context: any;
-    children: React.ReactNode;
-}
-
-function Base(props: BaseProps) {
-    return (
-        <ThemeContext.Provider value={props.context}>
-            <MetaTags />
-            <GlobalStyles />
-            <Header />
-            <Hero />
-            {props.children}
-            <Footer />
-        </ThemeContext.Provider>
-    );
-}
-
-export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 79c9f52e4..35c810cb3 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import CompilerComponent from 'ts/components/Compiler';
 
-function Compiler(props: any) {
+function Compiler() {
     return (
         <Base context={context}>
             <Container>
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Compiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Compiler />, root);
+} else {
+    render(<Compiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index b7405f8f9..e835e5c82 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/cov';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Cov(props: any) {
+function Cov() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Cov;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Cov />, root);
+} else {
+    render(<Cov />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index d129d6427..9f8b46b9c 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/profiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Profiler(props: any) {
+function Profiler() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Profiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Profiler />, root);
+} else {
+    render(<Profiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 5dddf027e..be5acdac4 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/trace';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
 
-function Trace(props: any) {
+function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Trace;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Trace />, root);
+} else {
+    render(<Trace />, root);
+}
-- 
cgit 


From 7ed95d3954086a6be97f9c3cc044d91068dcf6d2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:27:41 +0200
Subject: don't shrink icons in footer

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 15e6a5b86..873b65071 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -71,7 +71,7 @@ const Top = styled.div`
 
 const Icon = styled.div`
     margin-right: 1.3125rem;
-
+    flex-shrink: 0;
     ${media.small`margin-right: 0.9375rem`};
 `;
 
-- 
cgit 


From 39fd3fd866b22580914ceef98e5488e970b833ee Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:29:41 +0200
Subject: spacing adjustment in footer

---
 packages/dev-tools-pages/ts/components/Footer.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 873b65071..df2d920ac 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -110,7 +110,12 @@ const ListItem = styled.li`
         ${media.small`margin-bottom: 1.875rem`};
     }
 
-    ${media.small`margin-bottom: 1.875rem`};
+    ${media.small`
+        margin-bottom: 1.875rem
+        :last-of-type {
+            margin-bottom: 0;
+        }
+    `};
 `;
 
 const Small = styled.small`
-- 
cgit 


From d3c5c682968421de6a942e966b84d98d1b177338 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:40:07 +0200
Subject: remove padding on Trace component on small breakpoint

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 545e87d53..0fbf27c5d 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -102,7 +102,11 @@ const StyledSection =
     padding-top: 6.25rem;
     padding-bottom: 5.25rem;
     
-    ${media.small`background: none`};
+    ${media.small`
+        background: none
+        padding-top: 0;
+        padding-bottom: 0;
+    `};
 `;
 
 const Wrapper = styled(Container)`
-- 
cgit 


From c1082b9b08e1a17b8385120e30726025ea676a39 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:40:38 +0200
Subject: spacing adjustments on contentblock and main components

---
 .../dev-tools-pages/ts/components/ContentBlock.tsx     | 18 +++++++++++++++++-
 packages/dev-tools-pages/ts/components/Main.tsx        |  8 ++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index 56d52a150..b80fd4550 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -1,19 +1,32 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
 import { Beta } from './Typography';
 
 const Base = styled.div`
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    &:not(:last-of-type) {
+    :not(:last-of-type) {
         margin-bottom: 6.25rem;
     }
+    ${Beta} {
+        margin-bottom: 2.5rem;
+    }
+    ${media.small`
+        display: block;
+        :not(:last-of-type) {
+            margin-bottom: 3.125rem;
+        }
+    `};
 `;
 
 const Content = styled.div`
     width: 66.693548387%;
+    ${media.small`
+        width: 100%;
+    `};
 `;
 
 const Item = styled.div`
@@ -23,6 +36,9 @@ const Item = styled.div`
 
     &:not(:last-of-type) {
         margin-bottom: 2.5rem;
+        ${media.small`
+            margin-bottom: 1.875rem;
+        `};
     }
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx
index 8046abc91..97eb407b9 100644
--- a/packages/dev-tools-pages/ts/components/Main.tsx
+++ b/packages/dev-tools-pages/ts/components/Main.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
 import { withContext, Props } from './withContext';
 
 import { Alpha } from './Typography';
@@ -8,11 +9,18 @@ import { Alpha } from './Typography';
 const StyledMain = styled.div`
     padding-top: 6.25rem;
     padding-bottom: 6.25rem;
+    ${media.small`
+        padding-top: 2.5rem;
+        padding-bottom: 2.5rem;
+    `};
 `;
 
 const Title = styled(Alpha)`
     color: ${props => props.color};
     margin-bottom: 6.25rem;
+    ${media.small`
+        margin-bottom: 3.125rem;
+    `};
 `;
 
 interface MainProps extends Props {
-- 
cgit 


From cacb8acf763ea0dc33af6925d8aeaa51f1006963 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:46:46 +0200
Subject: hero spacing adjustment on small screen

---
 packages/dev-tools-pages/ts/components/Hero.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index 5ba469fca..f52ce5bc9 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
 import { withContext, Props } from './withContext';
 import Button from './Button';
 import { Beta } from './Typography';
@@ -23,6 +24,8 @@ const StyledHero = styled.section`
     margin: 0 auto;
     padding-top: 9.375rem;
     padding-bottom: 2rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
     max-width: 590px;
     min-height: min-content;
     max-height: 37.5rem;
@@ -33,10 +36,19 @@ const Subtitle = styled.h2`
     font-size: 3.75rem;
     line-height: 1.16;
     margin-bottom: 1.5rem;
+
+    ${media.small`
+        font-size: 2.25rem;
+        line-height: 1.1;
+        margin-bottom: 1.375rem;
+    `};
 `;
 
 const Tagline = styled(Beta)`
     margin-bottom: 2rem;
+    ${media.small`
+        margin-bottom: 1.25rem;
+    `};
 `;
 
 export default withContext(Hero);
-- 
cgit 


From 6c39d498c2ec10377c84a6c7a830460ef2266c46 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:52:21 +0200
Subject: code fontsize on small screens

---
 packages/dev-tools-pages/ts/components/Code.tsx |  16 ++--
 packages/dev-tools-pages/ts/globalStyles.tsx    | 122 ++++++++++++------------
 2 files changed, 70 insertions(+), 68 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 72b3e1af7..63c9d369b 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
 
+import { colors } from '../variables';
 import BaseButton from './Button';
 
 interface CodeProps {
@@ -26,13 +26,13 @@ const Base =
     styled.div <
     CodeProps >
     `
-  color: ${props => (props.language === undefined ? colors.white : 'inherit')};
-  background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
-  white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
-  position: relative;
-  &:hover ${Button} {
-    opacity: 1;
-  }
+    color: ${props => (props.language === undefined ? colors.white : 'inherit')};
+    background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
+    white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
+    position: relative;
+    &:hover ${Button} {
+        opacity: 1;
+    }
 `;
 
 const StyledCode = styled.code`
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 13ecde7aa..f51ea4b1d 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -6,75 +6,77 @@ import hljsStyles from 'highlight.js/styles/github-gist.css';
 import { withContext } from 'ts/components/withContext';
 
 const BaseStyles = createGlobalStyle`
-  ${styledNormalize}
-  ${hljsStyles}
+    ${styledNormalize}
+    ${hljsStyles}
 
-  @font-face {
-    font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
-    font-weight: 300;
-    font-display: swap;
-    unicode-range: U+20-7E;
-  }
-  @font-face {
-    font-family: "Maison Neue";
-    src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
-    font-weight: 500;
-    font-display: swap;
-    unicode-range: U+20-7E;
-  }
-  @font-face {
-    font-family: "Maison Neue Mono";
-    src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
-    font-weight: 300;
-    font-display: optional;
-    unicode-range: U+20-7E;
-  }
-
-  html {
-    font-size: 100%;
-    box-sizing: border-box;
-  }
-  
-  *, *::before, *::after {
-    box-sizing: inherit;
-  }
-  
-  body {
-    font-family: "Maison Neue", system-ui, sans-serif;
-    font-weight: 300;
-    font-size: 1rem;
-    line-height: 1.8;
+    @font-face {
+        font-family: "Maison Neue";
+        src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+        font-weight: 300;
+        font-display: swap;
+        unicode-range: U+20-7E;
+    }
+    @font-face {
+        font-family: "Maison Neue";
+        src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+        font-weight: 500;
+        font-display: swap;
+        unicode-range: U+20-7E;
+    }
+    @font-face {
+        font-family: "Maison Neue Mono";
+        src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+        font-weight: 300;
+        font-display: optional;
+        unicode-range: U+20-7E;
+    }
 
-    ${media.small`font-size: 0.875rem;`};
+    html {
+        font-size: 100%;
+        box-sizing: border-box;
+    }
+    
+    *, *::before, *::after {
+        box-sizing: inherit;
+    }
+    
+    body {
+        font-family: "Maison Neue", system-ui, sans-serif;
+        font-weight: 300;
+        font-size: 1rem;
+        line-height: 1.8;
 
-  }
+        ${media.small`font-size: 0.875rem;`};
+    }
 
-  a {
-  color: ${(props: any) => props.colors.link};
-    text-decoration: none; 
+    a {
+        color: ${(props: any) => props.colors.link};
+        text-decoration: none; 
 
-    &:hover {
-      color: red; //what should this be?
+        &:hover {
+            color: red; //what should this be?
+        }
+    }
+    
+    h1, h2, h3, h4 {
+        font-weight: 500;
+        margin: 0;
     }
-  }
-  
-  h1, h2, h3, h4 {
-    font-weight: 500;
-    margin: 0;
-  }
 
-  p {
-    margin-top: 0;
-    margin-bottom: 1em;
-    &:not([class]):last-of-type {
-      margin-bottom: 0;
+    p {
+        margin-top: 0;
+        margin-bottom: 1em;
+        &:not([class]):last-of-type {
+            margin-bottom: 0;
+        }
     }
-  }
 
-  code {
-    font-family: "Maison Neue Mono", monospace;
-  }
+    code {
+        font-family: "Maison Neue Mono", monospace;
+        ${media.small`
+            font-size: .75rem;
+        `}
+    }
 `;
 
 export default withContext(BaseStyles);
-- 
cgit 


From bf7443c985f2b26458586ece6661dd3e13215b79 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 09:02:59 +0200
Subject: button styling on small screens

---
 packages/dev-tools-pages/ts/components/Button.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 2d0fbc353..eae6aaf54 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { colors } from '../variables';
 
+import { media } from 'ts/variables';
 import { withContext, Props } from './withContext';
 
 interface ButtonProps extends Props {
@@ -22,6 +23,12 @@ const Button =
   border-radius: 5rem;
   padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
   display: inline-block;
+  ${props =>
+      props.large &&
+      media.small`
+    font-size: 1rem;
+    padding: .875rem 1.5rem;
+  `}
 `;
 
 export default withContext(Button);
-- 
cgit 


From 15a3c234c552c3e32e76411acaefa49f312c0aed Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 09:05:07 +0200
Subject: dont shrink icons in trace component

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 0fbf27c5d..30fdb7066 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -39,7 +39,7 @@ function Trace(props: Props) {
                                     completely in the dark about its exact location.
                                 </p>
                             </Copy>
-                            <NoLocation />
+                            <Icon as={NoLocation} />
                         </Item>
 
                         <Item>
@@ -50,7 +50,7 @@ function Trace(props: Props) {
                                     the failing line of code quickly becomes a daunting task.
                                 </p>
                             </Copy>
-                            <TimeConsuming />
+                            <Icon as={TimeConsuming} />
                         </Item>
                     </List>
                 </Block>
@@ -72,7 +72,7 @@ function Trace(props: Props) {
                                     from.
                                 </p>
                             </Copy>
-                            <ExactLocation />
+                            <Icon as={ExactLocation} />
                         </Item>
 
                         <Item>
@@ -83,7 +83,7 @@ function Trace(props: Props) {
                                     on linen X of contract Y", it drastically improves the developer experience.
                                 </p>
                             </Copy>
-                            <TimeSaving />
+                            <Icon as={TimeSaving} />
                         </Item>
                     </List>
                 </Block>
@@ -189,4 +189,8 @@ const Copy = styled.div`
     ${media.small`margin-right: 2.0625rem;`};
 `;
 
+const Icon = styled.div`
+    flex-shrink: 0;
+`;
+
 export default withContext(Trace);
-- 
cgit 


From 12087b6b70862a7b5d1954119ac5b5a06e6179f0 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 09:11:37 +0200
Subject: ligt theme on code

---
 packages/dev-tools-pages/ts/components/Code.tsx  | 8 +++++---
 packages/dev-tools-pages/ts/components/Trace.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 63c9d369b..31ab421be 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -7,6 +7,7 @@ import BaseButton from './Button';
 interface CodeProps {
     children: React.ReactNode;
     language?: string;
+    light?: boolean;
 }
 
 interface CodeState {
@@ -27,7 +28,8 @@ const Base =
     CodeProps >
     `
     color: ${props => (props.language === undefined ? colors.white : 'inherit')};
-    background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
+    background-color: ${props =>
+        props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
     white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
     position: relative;
     &:hover ${Button} {
@@ -92,10 +94,10 @@ class Code extends React.Component<CodeProps, CodeState> {
     };
 
     render() {
-        const { language, children } = this.props;
+        const { language, light, children } = this.props;
 
         return (
-            <Base language={language}>
+            <Base language={language} light={light}>
                 <StyledPre>
                     {this.state.hlCode !== undefined ? (
                         <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 30fdb7066..4d399daa5 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -28,7 +28,7 @@ function Trace(props: Props) {
                         Every time an Ethereum transaction fails, it's extremely hard to trace down the troublemaking
                         line of code. The only hint you'll get is a generic error.
                     </MainCopy>
-                    <Code>Error: VM Exception while processing transaction: rever</Code>
+                    <Code light>Error: VM Exception while processing transaction: rever</Code>
 
                     <List>
                         <Item>
-- 
cgit 


From 68c18181395986035a5c8e1ff2a83926f34fac60 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 09:20:54 +0200
Subject: breakout container for small screens

---
 .../dev-tools-pages/ts/components/Breakout.tsx     | 12 +++
 packages/dev-tools-pages/ts/components/Code.tsx    |  2 +-
 packages/dev-tools-pages/ts/components/Tabs.tsx    | 98 +++++++++++-----------
 3 files changed, 62 insertions(+), 50 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Breakout.tsx

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
new file mode 100644
index 000000000..fb76c8c29
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { media } from 'ts/variables';
+
+const Breakout = styled.div`
+    ${media.small`
+        margin-left: -30px;
+        width: calc(100% + 60px);
+  `};
+`;
+
+export default Breakout;
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 31ab421be..02bd0382e 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../variables';
+import { colors } from 'ts/variables';
 import BaseButton from './Button';
 
 interface CodeProps {
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 64f87bea3..b51970a7e 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,81 +1,81 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
 
-import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
-
-import {withContext, Props} from './withContext';
+import { colors } from 'ts/variables';
+import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs';
+import Breakout from './Breakout';
+import { withContext, Props } from './withContext';
 
 const StyledTabList = styled(TabList)`
-  text-transform: uppercase;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;  
+    text-transform: uppercase;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
 `;
 
 const StyledTab = styled(Tab)`
-  height: 2.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  float: left;
-  &:not(:first-of-type) {
-    margin-left: .25rem;
-  }
-  &:focus, &:hover {
-    color: red;
-    outline: 0;
-  }
+    height: 2.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    float: left;
+    &:not(:first-of-type) {
+        margin-left: 0.25rem;
+    }
+    &:focus,
+    &:hover {
+        color: red;
+        outline: 0;
+    }
 `;
 
-const Root = styled.div<{primaryColor: string;}>`
+const Root =
+    styled.div <
+    { primaryColor: string } >
+    `
   ${StyledTab} {
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
     background-color: ${colors.gray};
-  } 
+  }
 `;
 
 interface TabsProps extends Props {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }
 
 function Tabs(props: TabsProps) {
-  return (
-    <Root primaryColor={props.colors.secondary}>
-      <ReactTabs>
-        <StyledTabList>
-          { React.Children.map(props.children, child => {
-            const {props} = React.cloneElement(child as React.ReactElement<any>);
-            return <StyledTab>{props.title}</StyledTab>
-          }) }
-        </StyledTabList>
+    return (
+        <Breakout>
+            <Root primaryColor={props.colors.secondary}>
+                <ReactTabs>
+                    <StyledTabList>
+                        {React.Children.map(props.children, child => {
+                            const { props } = React.cloneElement(child as React.ReactElement<any>);
+                            return <StyledTab>{props.title}</StyledTab>;
+                        })}
+                    </StyledTabList>
 
-        { React.Children.map(props.children, child => (
-          <TabPanel>{child}</TabPanel>
-        )) }
-      </ReactTabs>
-    </Root>
-  )
+                    {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+                </ReactTabs>
+            </Root>
+        </Breakout>
+    );
 }
 
 interface TabBlockProps {
-  title: string;
-  children: React.ReactNode;
+    title: string;
+    children: React.ReactNode;
 }
 
 function TabBlock(props: TabBlockProps) {
-  return (
-    <React.Fragment>
-      {props.children}
-    </React.Fragment>
-  )
+    return <React.Fragment>{props.children}</React.Fragment>;
 }
 
 const ContextTabs = withContext(Tabs);
 
-export {ContextTabs as Tabs, TabBlock};
\ No newline at end of file
+export { ContextTabs as Tabs, TabBlock };
-- 
cgit 


From 6066db8f423ea246ecd699a934889c893689df56 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 09:53:22 +0200
Subject: Responsive list

---
 packages/dev-tools-pages/ts/components/List.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
index df1fdc53b..3041fc475 100644
--- a/packages/dev-tools-pages/ts/components/List.tsx
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { media } from '../variables';
 
 const StyledList = styled.ul`
     list-style-type: none;
@@ -17,6 +18,11 @@ const StyledItem = styled.li`
         transform: rotate(45deg);
         margin-right: 1.09375rem;
     }
+    :not(:last-child) {
+        margin-bottom: 0.5625rem;
+
+        ${media.small`margin-bottom: 0.375rem`};
+    }
 `;
 
 interface ListProps {
-- 
cgit 


From 49beb6b7a3f924508a4169d12ab0aedcf1a51f15 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 09:53:58 +0200
Subject: Add light prop to code

---
 packages/dev-tools-pages/ts/components/Trace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 4d399daa5..5e52ee154 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -61,7 +61,7 @@ function Trace(props: Props) {
                         Sol-trace will give you full stack traces, including contract names, line numbers and code
                         snippets, every time you encounter an error.
                     </MainCopy>
-                    <Code>Error: VM Exception while processing transaction: rever</Code>
+                    <Code light>Error: VM Exception while processing transaction: rever</Code>
 
                     <List>
                         <Item>
-- 
cgit 


From dfa03feb43e9398dbfda8aebf96b6fb63dff0989 Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 11:55:02 +0200
Subject: Responsive Intro

---
 packages/dev-tools-pages/ts/components/Intro.tsx | 35 +++++++++++++++---------
 1 file changed, 22 insertions(+), 13 deletions(-)

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index cddee5b6f..597dddce0 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,30 +1,35 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
 
 import { Alpha, Beta } from './Typography';
+import Breakout from './Breakout';
+import Code from './Code';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
+
+    ${media.small`
+        padding: 2.5rem 1.875rem
+        display: block;     
+    `};
 `;
 
 const Title = styled(Alpha)`
     margin-bottom: 2.5rem;
+
+    ${media.small`margin-bottom: 2.25rem;`};
 `;
 
 const Content = styled.div`
     max-width: 25.9375rem;
     display: flex;
     flex-direction: column;
-`;
 
-const Code = styled.div`
-    background-color: ${colors.darkGray};
-    width: 520px;
-    height: 350px;
+    ${media.small`margin-bottom: 2.25rem;`};
 `;
 
 interface IntroProps {
@@ -34,13 +39,17 @@ interface IntroProps {
 
 function Intro(props: IntroProps) {
     return (
-        <Main>
-            <Content>
-                <Title>{props.title}</Title>
-                <Beta as="div">{props.children}</Beta>
-            </Content>
-            <Code />
-        </Main>
+        <Breakout>
+            <Main>
+                <Content>
+                    <Title>{props.title}</Title>
+                    <Beta as="div">{props.children}</Beta>
+                </Content>
+                <Breakout>
+                    <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
+                </Breakout>
+            </Main>
+        </Breakout>
     );
 }
 
-- 
cgit