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, 5 deletions

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;
   `}
 `;