diff options
author | Megan Pearson <megan.e.pearson@gmail.com> | 2018-10-22 23:05:27 +0800 |
---|---|---|
committer | Megan Pearson <megan.e.pearson@gmail.com> | 2018-10-22 23:05:27 +0800 |
commit | bc029df0820dfffe9e46bedaf1b42191c2cd70ed (patch) | |
tree | b4a36468f8cda1baaeeb1b23f18fe09800104b59 /packages/dev-tools-pages/ts/components/Intro.tsx | |
parent | 50eee9a657fe81fa0af4652f9a5a3f1892a1f1fa (diff) | |
parent | 63b53acd482d38d3015419a4996cf5c2bc1fdb50 (diff) | |
download | dexon-sol-tools-bc029df0820dfffe9e46bedaf1b42191c2cd70ed.tar dexon-sol-tools-bc029df0820dfffe9e46bedaf1b42191c2cd70ed.tar.gz dexon-sol-tools-bc029df0820dfffe9e46bedaf1b42191c2cd70ed.tar.bz2 dexon-sol-tools-bc029df0820dfffe9e46bedaf1b42191c2cd70ed.tar.lz dexon-sol-tools-bc029df0820dfffe9e46bedaf1b42191c2cd70ed.tar.xz dexon-sol-tools-bc029df0820dfffe9e46bedaf1b42191c2cd70ed.tar.zst dexon-sol-tools-bc029df0820dfffe9e46bedaf1b42191c2cd70ed.zip |
Merge branch 'feature/variables' into dev-tools-pages
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Intro.tsx')
-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> ); } |