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

1 files changed, 10 insertions, 3 deletions

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;