aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx35
1 files changed, 22 insertions, 13 deletions
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index cddee5b6f..597dddce0 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -1,30 +1,35 @@
import * as React from 'react';
import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
import { Alpha, Beta } from './Typography';
+import Breakout from './Breakout';
+import Code from './Code';
const Main = styled.div`
background-color: ${colors.lightGray};
padding: 6.25rem;
display: flex;
justify-content: space-between;
+
+ ${media.small`
+ padding: 2.5rem 1.875rem
+ display: block;
+ `};
`;
const Title = styled(Alpha)`
margin-bottom: 2.5rem;
+
+ ${media.small`margin-bottom: 2.25rem;`};
`;
const Content = styled.div`
max-width: 25.9375rem;
display: flex;
flex-direction: column;
-`;
-const Code = styled.div`
- background-color: ${colors.darkGray};
- width: 520px;
- height: 350px;
+ ${media.small`margin-bottom: 2.25rem;`};
`;
interface IntroProps {
@@ -34,13 +39,17 @@ interface IntroProps {
function Intro(props: IntroProps) {
return (
- <Main>
- <Content>
- <Title>{props.title}</Title>
- <Beta as="div">{props.children}</Beta>
- </Content>
- <Code />
- </Main>
+ <Breakout>
+ <Main>
+ <Content>
+ <Title>{props.title}</Title>
+ <Beta as="div">{props.children}</Beta>
+ </Content>
+ <Breakout>
+ <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
+ </Breakout>
+ </Main>
+ </Breakout>
);
}