diff options
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Intro.tsx | 35 |
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> ); } |