Merge branch 'feature/alternate-main' into dev-tools-pages

1 files changed, 42 insertions, 4 deletions

diff --git a/packages/dev-tools-pages/ts/components/Trace.tsx b/packages/dev-tools-pages/ts/components/Trace.tsx
index 50bbd449a..545e87d53 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 { colors, media } from '../variables';
 
 import { withContext, Props } from './withContext';
 import { Alpha, Beta, Gamma } from './Typography';
@@ -97,9 +98,11 @@ const StyledSection =
     `
     max-width: 90rem;
     margin: 0 auto;
-    background: linear-gradient(to right, #000 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;
+    
+    ${media.small`background: none`};
 `;
 
 const Wrapper = styled(Container)`
@@ -107,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 =
@@ -115,8 +125,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;
@@ -124,27 +134,55 @@ 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;
+        font-size: 1rem;
+    `};
 `;
 
 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);