Merge pull request #4 from bakkenbaeck/feature/moreresponsive

Feature/moreresponsive

5 files changed, 60 insertions, 31 deletions

diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index bda29dc1f..a5b92da13 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,22 +1,30 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
 
+import Container from './Container';
 import InlineCode from './InlineCode';
 
 const Cards = styled.dl`
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
-    align-items: start;
-    grid-gap: 1.25rem;
-    margin-top: 0;
-    margin-bottom: 0;
+    column-count: 3;
+    column-gap: 1.25rem;
+
+    ${media.small`
+        column-count: 1;
+    `}: ;
 `;
 
 const Card = styled.div`
     background-color: ${colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
+    display: inline-block;
+    margin-bottom: 1.25rem;
+    width: 100%;
+
+    ${media.small`
+        padding: 1.875rem;
+    `};
 `;
 
 const Dt = styled.dt`
@@ -63,14 +71,16 @@ const cards = [
 
 function Compiler() {
     return (
-        <Cards>
-            {cards.map(card => (
-                <Card key={card.title.split(' ').join('-')}>
-                    <Dt>{card.title}</Dt>
-                    <Dd>{card.body}</Dd>
-                </Card>
-            ))}
-        </Cards>
+        <Container wide>
+            <Cards>
+                {cards.map(card => (
+                    <Card key={card.title.split(' ').join('-')}>
+                        <Dt>{card.title}</Dt>
+                        <Dd>{card.body}</Dd>
+                    </Card>
+                ))}
+            </Cards>
+        </Container>
     );
 }
 
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
index d6df7a0b4..53fb8427f 100644
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -1,9 +1,16 @@
 import styled from 'styled-components';
 
-const Container = styled.div`
+interface ContainerProps {
+    wide?: boolean;
+}
+
+const Container =
+    styled.div <
+    ContainerProps >
+    `
     max-width: 77.5rem;
-    width: calc(100% - 3.75rem);
     margin: 0 auto;
+    width: ${props => (props.wide ? '100%' : 'calc(100% - 3.75rem)')};
 `;
 
 export default Container;
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 597dddce0..29d1d36fe 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { media, colors } from '../variables';
 
-import { Alpha, Beta } from './Typography';
-import Breakout from './Breakout';
+import { Alpha, Lead } from './Typography';
+import Container from './Container';
 import Code from './Code';
 
 const Main = styled.div`
@@ -29,6 +29,15 @@ const Content = styled.div`
     display: flex;
     flex-direction: column;
 
+    ${Lead} {
+        ${media.small`margin-bottom: 2.25rem;`};
+    }
+`;
+
+const StyledCode = styled(Code)`
+    width: 520px;
+    height: 350px;
+
     ${media.small`margin-bottom: 2.25rem;`};
 `;
 
@@ -39,17 +48,15 @@ interface IntroProps {
 
 function Intro(props: IntroProps) {
     return (
-        <Breakout>
+        <Container wide>
             <Main>
                 <Content>
                     <Title>{props.title}</Title>
-                    <Beta as="div">{props.children}</Beta>
+                    <Lead as="div">{props.children}</Lead>
                 </Content>
-                <Breakout>
-                    <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
-                </Breakout>
+                <StyledCode> Function execute transaction</StyledCode>
             </Main>
-        </Breakout>
+        </Container>
     );
 }
 
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 5e52ee154..62994a810 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { colors, media } from '../variables';
 
 import { withContext, Props } from './withContext';
-import { Alpha, Beta, Gamma } from './Typography';
+import { Alpha, Lead, Gamma } from './Typography';
 import Container from './Container';
 import Code from './Code';
 
@@ -24,7 +24,7 @@ function Trace(props: Props) {
             <Wrapper>
                 <Block>
                     <Alpha>The Issue</Alpha>
-                    <MainCopy as="p">
+                    <MainCopy>
                         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>
@@ -57,7 +57,7 @@ function Trace(props: Props) {
 
                 <Block background={colors.secondary}>
                     <Alpha>The Fix</Alpha>
-                    <MainCopy as="p">
+                    <MainCopy>
                         Sol-trace will give you full stack traces, including contract names, line numbers and code
                         snippets, every time you encounter an error.
                     </MainCopy>
@@ -155,11 +155,10 @@ const Block =
     `};
 `;
 
-const MainCopy = styled(Beta)`
+const MainCopy = styled(Lead)`
     margin-bottom: 3.1875rem;
     ${media.small`
         margin-bottom: 1.125rem;
-        font-size: 1rem;
     `};
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
index deac8a976..de4b64457 100644
--- a/packages/dev-tools-pages/ts/components/Typography.tsx
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -19,8 +19,14 @@ const Gamma = styled.h4`
     ${media.small`font-size: 0.875rem;`};
 `;
 
+const Lead = styled.p`
+    font-size: 1.25rem;
+
+    ${media.small`font-size: 1rem;`};
+`;
+
 const Small = styled.p`
     font-size: 0.875rem;
 `;
 
-export { Alpha, Beta, Gamma, Small };
+export { Alpha, Beta, Gamma, Lead, Small };