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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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/.gitignore                |   3 +-
 packages/dev-tools-pages/assets/crawl.html         |  20 ++++++
 .../dev-tools-pages/assets/favicons/compiler.ico   | Bin 0 -> 6518 bytes
 packages/dev-tools-pages/assets/favicons/cov.ico   | Bin 0 -> 6518 bytes
 .../dev-tools-pages/assets/favicons/profiler.ico   | Bin 0 -> 6518 bytes
 packages/dev-tools-pages/assets/favicons/trace.ico | Bin 0 -> 6518 bytes
 packages/dev-tools-pages/assets/index.html         |  14 ++++
 packages/dev-tools-pages/package.json              |  12 +++-
 packages/dev-tools-pages/pages.js                  |  72 +++++++++++++++++++++
 .../dev-tools-pages/public/favicons/compiler.ico   | Bin 6518 -> 0 bytes
 packages/dev-tools-pages/public/favicons/cov.ico   | Bin 6518 -> 0 bytes
 .../dev-tools-pages/public/favicons/profiler.ico   | Bin 6518 -> 0 bytes
 packages/dev-tools-pages/public/favicons/trace.ico | Bin 6518 -> 0 bytes
 packages/dev-tools-pages/public/index.html         |  15 -----
 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 +++-
 packages/dev-tools-pages/webpack.config.js         |  27 ++++++--
 27 files changed, 221 insertions(+), 133 deletions(-)
 create mode 100644 packages/dev-tools-pages/assets/crawl.html
 create mode 100644 packages/dev-tools-pages/assets/favicons/compiler.ico
 create mode 100644 packages/dev-tools-pages/assets/favicons/cov.ico
 create mode 100644 packages/dev-tools-pages/assets/favicons/profiler.ico
 create mode 100644 packages/dev-tools-pages/assets/favicons/trace.ico
 create mode 100644 packages/dev-tools-pages/assets/index.html
 create mode 100644 packages/dev-tools-pages/pages.js
 delete mode 100644 packages/dev-tools-pages/public/favicons/compiler.ico
 delete mode 100644 packages/dev-tools-pages/public/favicons/cov.ico
 delete mode 100644 packages/dev-tools-pages/public/favicons/profiler.ico
 delete mode 100644 packages/dev-tools-pages/public/favicons/trace.ico
 delete mode 100644 packages/dev-tools-pages/public/index.html
 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')

diff --git a/packages/dev-tools-pages/.gitignore b/packages/dev-tools-pages/.gitignore
index 6446c8579..9e9db7dae 100644
--- a/packages/dev-tools-pages/.gitignore
+++ b/packages/dev-tools-pages/.gitignore
@@ -1 +1,2 @@
-/public/fonts
\ No newline at end of file
+public
+assets/fonts
\ No newline at end of file
diff --git a/packages/dev-tools-pages/assets/crawl.html b/packages/dev-tools-pages/assets/crawl.html
new file mode 100644
index 000000000..9135c3ede
--- /dev/null
+++ b/packages/dev-tools-pages/assets/crawl.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+
+<ul>
+<li><a href="/compiler">Compiler</a></li>
+<li><a href="/cov">Cov</a></li>
+<li><a href="/profiler">Profiler</a></li>
+<li><a href="/trace">Trace</a></li>
+
+</ul>
+  
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/assets/favicons/compiler.ico b/packages/dev-tools-pages/assets/favicons/compiler.ico
new file mode 100644
index 000000000..e43c5fc8a
Binary files /dev/null and b/packages/dev-tools-pages/assets/favicons/compiler.ico differ
diff --git a/packages/dev-tools-pages/assets/favicons/cov.ico b/packages/dev-tools-pages/assets/favicons/cov.ico
new file mode 100644
index 000000000..4f1172186
Binary files /dev/null and b/packages/dev-tools-pages/assets/favicons/cov.ico differ
diff --git a/packages/dev-tools-pages/assets/favicons/profiler.ico b/packages/dev-tools-pages/assets/favicons/profiler.ico
new file mode 100644
index 000000000..65d38812b
Binary files /dev/null and b/packages/dev-tools-pages/assets/favicons/profiler.ico differ
diff --git a/packages/dev-tools-pages/assets/favicons/trace.ico b/packages/dev-tools-pages/assets/favicons/trace.ico
new file mode 100644
index 000000000..af00455d4
Binary files /dev/null and b/packages/dev-tools-pages/assets/favicons/trace.ico differ
diff --git a/packages/dev-tools-pages/assets/index.html b/packages/dev-tools-pages/assets/index.html
new file mode 100644
index 000000000..5ab1a45f1
--- /dev/null
+++ b/packages/dev-tools-pages/assets/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="preload" href="/fonts/MaisonNeue-Book-subset.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/fonts/MaisonNeue-Bold-subset.woff2" as="font" type="font/woff2" crossorigin>
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json
index 8fb4bed7b..eb34e3715 100644
--- a/packages/dev-tools-pages/package.json
+++ b/packages/dev-tools-pages/package.json
@@ -7,7 +7,7 @@
     "private": true,
     "description": "0x Dev tools pages",
     "scripts": {
-        "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production",
+        "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production && react-snap",
         "build:ci": "yarn build",
         "build:dev": "../../node_modules/.bin/webpack --mode development",
         "clean": "shx rm -f public/bundle*",
@@ -28,7 +28,7 @@
         "styled-normalize": "^8.0.1"
     },
     "devDependencies": {
-        "@reach/router": "^1.2.1",
+        "@types/highlight.js": "^9.12.3",
         "@types/lodash": "4.14.104",
         "@types/node": "*",
         "@types/reach__router": "^1.2.0",
@@ -40,11 +40,15 @@
         "@types/react-tap-event-plugin": "0.0.30",
         "@types/styled-components": "^4.0.1",
         "awesome-typescript-loader": "^5.2.1",
+        "clean-webpack-plugin": "^0.1.19",
+        "copy-webpack-plugin": "^4.5.4",
         "copyfiles": "^2.0.0",
         "css-loader": "0.23.x",
+        "html-webpack-plugin": "^3.2.0",
         "less-loader": "^4.1.0",
         "make-promises-safe": "^1.1.0",
         "raw-loader": "^0.5.1",
+        "react-snap": "^1.19.0",
         "react-svg-loader": "^2.1.0",
         "shx": "^0.2.2",
         "source-map-loader": "^0.2.4",
@@ -55,7 +59,11 @@
         "typescript": "3.0.1",
         "uglifyjs-webpack-plugin": "^2.0.1",
         "webpack": "^4.20.2",
+        "webpack-bundle-analyzer": "^3.0.3",
         "webpack-cli": "3.1.2",
         "webpack-dev-server": "^3.1.9"
+    },
+    "reactSnap": {
+        "source": "public"
     }
 }
diff --git a/packages/dev-tools-pages/pages.js b/packages/dev-tools-pages/pages.js
new file mode 100644
index 000000000..581904068
--- /dev/null
+++ b/packages/dev-tools-pages/pages.js
@@ -0,0 +1,72 @@
+const pages = [
+    {
+        title: 'sol-compiler',
+        filename: 'compiler/index.html',
+        template: 'assets/index.html',
+        chunks: ['compiler'],
+        favicon: 'assets/favicons/compiler.ico',
+        minify: true,
+        meta: {
+            description: 'Solidity compilation that just works',
+            'og-title': { property: 'og:title', content: 'sol-compiler' },
+            'og-description': { property: 'og:description', content: 'Solidity compilation that just works' },
+            'og-type': { property: 'og:type', content: 'website' },
+            'og-image': { property: 'og:image', content: '' },
+            'twitter:site': '@0xproject',
+            'twitter:image': '',
+        },
+    },
+    {
+        title: 'sol-cov',
+        filename: 'cov/index.html',
+        template: 'assets/index.html',
+        chunks: ['cov'],
+        favicon: 'assets/favicons/cov.ico',
+        minify: true,
+        meta: {
+            description: 'Solidity code coverage',
+            'og-title': { property: 'og:title', content: 'sol-cov' },
+            'og-description': { property: 'og:description', content: 'Solidity code coverage' },
+            'og-type': { property: 'og:type', content: 'website' },
+            'og-image': { property: 'og:image', content: '' },
+            'twitter:site': '@0xproject',
+            'twitter:image': '',
+        },
+    },
+    {
+        title: 'sol-profiler',
+        filename: 'profiler/index.html',
+        template: 'assets/index.html',
+        chunks: ['profiler'],
+        favicon: 'assets/favicons/profiler.ico',
+        minify: true,
+        meta: {
+            description: 'Gas profiling for Solidity',
+            'og-title': { property: 'og:title', content: 'sol-profiler' },
+            'og-description': { property: 'og:description', content: 'Gas profiling for Solidity' },
+            'og-type': { property: 'og:type', content: 'website' },
+            'og-image': { property: 'og:image', content: '' },
+            'twitter:site': '@0xproject',
+            'twitter:image': '',
+        },
+    },
+    {
+        title: 'sol-trace',
+        filename: 'trace/index.html',
+        template: 'assets/index.html',
+        chunks: ['trace'],
+        favicon: 'assets/favicons/trace.ico',
+        minify: true,
+        meta: {
+            description: 'Human-readable stack traces',
+            'og-title': { property: 'og:title', content: 'sol-trace' },
+            'og-description': { property: 'og:description', content: 'Human-readable stack traces' },
+            'og-type': { property: 'og:type', content: 'website' },
+            'og-image': { property: 'og:image', content: '' },
+            'twitter:site': '@0xproject',
+            'twitter:image': '',
+        },
+    },
+];
+
+module.exports = pages;
diff --git a/packages/dev-tools-pages/public/favicons/compiler.ico b/packages/dev-tools-pages/public/favicons/compiler.ico
deleted file mode 100644
index e43c5fc8a..000000000
Binary files a/packages/dev-tools-pages/public/favicons/compiler.ico and /dev/null differ
diff --git a/packages/dev-tools-pages/public/favicons/cov.ico b/packages/dev-tools-pages/public/favicons/cov.ico
deleted file mode 100644
index 4f1172186..000000000
Binary files a/packages/dev-tools-pages/public/favicons/cov.ico and /dev/null differ
diff --git a/packages/dev-tools-pages/public/favicons/profiler.ico b/packages/dev-tools-pages/public/favicons/profiler.ico
deleted file mode 100644
index 65d38812b..000000000
Binary files a/packages/dev-tools-pages/public/favicons/profiler.ico and /dev/null differ
diff --git a/packages/dev-tools-pages/public/favicons/trace.ico b/packages/dev-tools-pages/public/favicons/trace.ico
deleted file mode 100644
index af00455d4..000000000
Binary files a/packages/dev-tools-pages/public/favicons/trace.ico and /dev/null differ
diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html
deleted file mode 100644
index f8131aece..000000000
--- a/packages/dev-tools-pages/public/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>0x: The Protocol for Trading Tokens</title>
-</head>
-
-<body>
-    <div id="app"></div>
-    <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
-</body>
-
-</html>
\ No newline at end of file
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);
+}
diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js
index a016c6b04..d025737f7 100644
--- a/packages/dev-tools-pages/webpack.config.js
+++ b/packages/dev-tools-pages/webpack.config.js
@@ -1,13 +1,24 @@
 const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const childProcess = require('child_process');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+
+const pages = require('./pages');
 
 const config = {
-    entry: ['./ts/index.tsx'],
+    entry: {
+        compiler: './ts/pages/Compiler.tsx',
+        cov: './ts/pages/Cov.tsx',
+        profiler: './ts/pages/Profiler.tsx',
+        trace: './ts/pages/Trace.tsx',
+    },
     output: {
         path: path.join(__dirname, '/public'),
-        filename: 'bundle.js',
+        filename: 'bundle-[name].js',
         chunkFilename: 'bundle-[name].js',
         publicPath: '/',
     },
@@ -70,17 +81,25 @@ const config = {
 };
 
 module.exports = (_env, argv) => {
-    let plugins = [];
+    let plugins = [
+        new CleanWebpackPlugin('public'),
+        ...pages.map(p => new HtmlWebpackPlugin(p)),
+        new CopyWebpackPlugin([{ from: 'assets/crawl.html', to: 'index.html' }, { from: 'assets/fonts', to: 'fonts' }]),
+    ];
     if (argv.mode === 'development') {
         config.mode = 'development';
     } else {
         config.mode = 'production';
+        config.output.filename = 'bundle-[name].[chunkhash].js';
+        config.output.chunkFilename = 'bundle-[name].[chunkhash].js';
+
         plugins = plugins.concat([
             new webpack.DefinePlugin({
                 'process.env': {
-                    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+                    NODE_ENV: JSON.stringify(process.env.NODE_ENV || config.mode),
                 },
             }),
+            //new BundleAnalyzerPlugin(),
         ]);
     }
     console.log('i ｢atl｣: Mode: ', config.mode);
-- 
cgit v1.2.3


From 4dc91c86ae56aa3472740d66ef105314095fb47b Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 08:21:34 +0200
Subject: keep fonts folder in git

---
 packages/dev-tools-pages/.gitignore            | 3 ++-
 packages/dev-tools-pages/assets/fonts/.gitkeep | 0
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 packages/dev-tools-pages/assets/fonts/.gitkeep

(limited to 'packages')

diff --git a/packages/dev-tools-pages/.gitignore b/packages/dev-tools-pages/.gitignore
index 9e9db7dae..557b82311 100644
--- a/packages/dev-tools-pages/.gitignore
+++ b/packages/dev-tools-pages/.gitignore
@@ -1,2 +1,3 @@
 public
-assets/fonts
\ No newline at end of file
+assets/fonts/*.woff
+assets/fonts/*.woff2
\ No newline at end of file
diff --git a/packages/dev-tools-pages/assets/fonts/.gitkeep b/packages/dev-tools-pages/assets/fonts/.gitkeep
new file mode 100644
index 000000000..e69de29bb
-- 
cgit v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3


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')

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 v1.2.3