Fixes/august (#12)

* fix button dimensions

* fix footer hover color

* breakout in trace component

* fix padding on button on small screens

* fix title with content on small screens

* sizing adjustment in intro component

* intro component adjustments

* container size adjustments

* meta og images

* fixed gutter size

* trace component fix + breakout fix

* show copy button if touch device

* responsive hero animation

8 files changed, 105 insertions, 46 deletions

diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
index fb76c8c29..39998e9c7 100644
--- a/packages/dev-tools-pages/ts/components/Breakout.tsx
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -4,8 +4,8 @@ import { media } from 'ts/variables';
 
 const Breakout = styled.div`
     ${media.small`
-        margin-left: -30px;
-        width: calc(100% + 60px);
+        margin-left: -2.5rem;
+        width: calc(100% + 5rem);
   `};
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index 65f1fce74..97c08ad21 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -13,7 +13,8 @@ const Button =
     ButtonProps >
     `
   font-family: inherit;
-  font-size: ${props => (props.large ? '1.125rem' : '.875rem')};
+  font-size: ${props => (props.large ? '1rem' : '.875rem')};
+  line-height: 1;
   font-weight: 500;
   white-space: nowrap;
   vertical-align: middle;
@@ -21,16 +22,20 @@ const Button =
   color: ${colors.black};
   border: 0;
   border-radius: 5rem;
-  padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
-  display: inline-block;
+  height: ${props => (props.large ? '3.25rem' : '2rem')};
+  padding: ${props => (props.large ? '0 2.375rem' : '0 1.25rem')};
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
   :hover, :focus {
     background-color: ${props => props.colors.secondary_alt};
   } 
   ${props =>
       props.large &&
       media.small`
-    font-size: 1rem;
-    padding: .875rem 1.5rem;
+    font-size: .875rem;
+    height: 2rem;
+    padding: 0 1.25rem;
   `}
 `;
 
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index b883dcbf8..d1aeaeeb0 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,9 +1,15 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from 'ts/variables';
+import { colors, media } from 'ts/variables';
 import BaseButton from './Button';
 
+const touch = Boolean(
+    'ontouchstart' in window ||
+        (window as any).navigator.maxTouchPoints > 0 ||
+        (window as any).navigator.msMaxTouchPoints > 0,
+);
+
 interface CodeProps {
     children: React.ReactNode;
     language?: string;
@@ -19,7 +25,7 @@ interface CodeState {
 }
 
 const Button = styled(BaseButton)`
-    opacity: 0;
+    opacity: ${touch ? '1' : '0'};
     position: absolute;
     top: 1rem;
     right: 1rem;
@@ -80,9 +86,10 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co
         position: relative;
         padding-right: 1.5rem;
         padding-left: calc(2.25rem + ${props => props.gutterLength}ch);
+
         ::before {
             content: attr(data-test);
-            font-size: 0.875rem;
+
             width: ${props => props.gutterLength};
             padding-left: 0.375rem;
             padding-right: 0.375rem;
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
index 53fb8427f..de2de383b 100644
--- a/packages/dev-tools-pages/ts/components/Container.tsx
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { media } from 'ts/variables';
+
 interface ContainerProps {
     wide?: boolean;
 }
@@ -10,7 +12,7 @@ const Container =
     `
     max-width: 77.5rem;
     margin: 0 auto;
-    width: ${props => (props.wide ? '100%' : 'calc(100% - 3.75rem)')};
+    width: ${props => (props.wide ? '100%' : 'calc(100% - 5rem)')};
 `;
 
 export default Container;
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
index 6db4c3994..c54930902 100644
--- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -45,6 +45,11 @@ const Item = styled.div`
 
 const StyledTitle = styled(Alpha)`
     color: ${props => props.color};
+    ${media.small`
+        & + div {
+            margin-top: 1.5rem;
+        }
+    `};
 `;
 
 interface ContentBlockProps extends Props {
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
index e045a7ad4..e92ab6e9d 100644
--- a/packages/dev-tools-pages/ts/components/Hero.tsx
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -6,40 +6,46 @@ import { withContext, Props } from './withContext';
 import Button from './Button';
 import { Beta } from './Typography';
 
-const IMAGE_WIDTH = 2560;
-const IMAGE_HEIGHT = 800;
-
 function Hero(props: Props) {
     const { subtitle, tagline, title } = props;
 
     return (
         <React.Fragment>
             <StyledHero>
-                <Subtitle>{subtitle}</Subtitle>
-                <Tagline as="p">{tagline}</Tagline>
-                <Button as="a" href="#" large>
-                    Read the Docs
-                </Button>
-            </StyledHero>
+                <HeroContainer>
+                    <Subtitle>{subtitle}</Subtitle>
+                    <Tagline as="p">{tagline}</Tagline>
+                    <Button as="a" href="#" large>
+                        Read the Docs
+                    </Button>
+                </HeroContainer>
 
-            <ImageContainer>
-                <Image src={`/images/${title}@1x.gif`} srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`} />
-            </ImageContainer>
+                <ImageContainer>
+                    <Image
+                        src={`/images/${title}@1x.gif`}
+                        srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`}
+                    />
+                </ImageContainer>
+            </StyledHero>
         </React.Fragment>
     );
 }
 
 const StyledHero = styled.section`
     text-align: center;
-    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;
     height: 80vh;
+    position: relative;
+`;
+
+const HeroContainer = styled.div`
+    margin: 0 auto;
+    max-width: 590px;
 `;
 
 const Subtitle = styled.h2`
@@ -63,20 +69,37 @@ const Tagline = styled(Beta)`
 
 const ImageContainer = styled.div`
     width: 100%;
-    height: ${IMAGE_HEIGHT}px;
+    height: 800px;
     position: absolute;
-    top: 6.875rem;
+    top: 100%;
     left: 0;
     overflow: hidden;
+    transform: translateY(-50%);
     z-index: -1;
+    ${media.xlarge`
+        height: 533.333333334px;
+        transform: translateY(-60%);
+    `};
+    ${media.small`
+        height: 400px;
+        transform: translateY(-70%);
+    `};
 `;
 
 const Image = styled.img`
-    width: ${IMAGE_WIDTH}px;
+    width: min-content;
+    height: 100%;
     position: absolute;
     top: 0;
     left: 50%;
-    transform: translate(-50%);
+    transform: translateX(-50%);
+    object-fit: contain;
+    ${media.small`
+        height: 100%;
+        width: auto;
+        left: 0;
+        transform: translateX(-15%);
+    `};
 `;
 
 export default withContext(Hero);
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index 86d29e36d..7a30d05c7 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -12,8 +12,10 @@ const Main = styled.div`
     display: flex;
     justify-content: space-between;
 
-    ${media.medium`
+    ${media.large`
         padding: 2.5rem 1.875rem
+    `};
+    ${media.medium`
         display: block;     
     `};
 `;
@@ -21,17 +23,24 @@ const Main = styled.div`
 const Title = styled(Alpha)`
     margin-bottom: 2.5rem;
 
-    ${media.small`margin-bottom: 2.25rem;`};
+    ${media.medium`margin-bottom: 2.25rem;`};
 `;
 
 const StyledIntroLead = styled(Lead)`
     max-width: 25.9375rem;
-    ${media.small`margin-bottom: 1.5625rem;`};
+    margin-right: 2rem;
+    ${media.medium`
+        max-width: 100%;
+        margin-bottom: 1.5625rem;
+    `};
 `;
 
 const StyledIntroAside = styled.div`
     max-width: 32.5rem;
     position: relative;
+    ${media.medium`
+        max-width: 100%;
+    `};
 `;
 
 interface IntroProps {
diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index d5f323775..74aef69b5 100644
--- a/packages/dev-tools-pages/ts/components/Trace.tsx
+++ b/packages/dev-tools-pages/ts/components/Trace.tsx
@@ -6,6 +6,7 @@ import { withContext, Props } from './withContext';
 import { Alpha, Lead, Gamma } from './Typography';
 import Container from './Container';
 import Code from './Code';
+import Breakout from './Breakout';
 
 import ExactLocation from 'ts/icons/exact-location.svg';
 import NoLocation from 'ts/icons/no-location.svg';
@@ -28,7 +29,9 @@ 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 light>Error: VM Exception while processing transaction: revert</Code>
+                    <Breakout>
+                        <Code light>Error: VM Exception while processing transaction: rever</Code>
+                    </Breakout>
 
                     <List>
                         <Item>
@@ -61,7 +64,8 @@ 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 light language="javascript">
+                    <Breakout>
+                        <Code light language="javascript">
                         {`contracts/src/2.0.0/protocol/Exchange/MixinSignatureValidator.sol:51:8
     require(
         isValidSignature(
@@ -71,7 +75,8 @@ function Trace(props: Props) {
         ),
         "INVALID_SIGNATURE"
     )`}
-                    </Code>
+                        </Code>
+                    </Breakout>
 
                     <List>
                         <Item>
@@ -110,7 +115,7 @@ const StyledSection =
     margin: 0 auto;
     background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
     
-    ${media.small`
+    ${media.large`
         background: none
         padding-top: 0;
         padding-bottom: 0;
@@ -126,7 +131,7 @@ const Wrapper = styled(Container)`
         ${media.small`padding-bottom: 1.875rem;`};
     }
 
-    ${media.small`
+    ${media.large`
         display: block;
         width: 100%;
     `};
@@ -149,19 +154,22 @@ const Block =
         padding-left: 6.25rem;
     }
 
-    ${media.small`
-        width: 100%;
-        padding-top: 2.5rem;
-        padding-bottom: 3.4375rem;
-
+    ${media.xlarge`
         :first-of-type {
-            padding-left: 1.875rem;
-            padding-right: 1.875rem;
+            padding-right: 2.5rem;
         }
         :last-of-type {
-            padding-left: 1.875rem;
-            padding-right: 1.875rem;
+            padding-left: 2.5rem;
         }
+    `}
+    ${media.large`
+        width: 100%;
+        padding: 2.5rem;
+    `}
+
+    ${media.small`
+        padding-left: 1.875rem;
+        padding-right: 1.875rem;
     `};
 `;