aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-22 17:55:02 +0800
committerMegan Pearson <megan.e.pearson@gmail.com>2018-10-22 17:55:02 +0800
commitdfa03feb43e9398dbfda8aebf96b6fb63dff0989 (patch)
tree49f4280ebac519fed2303e95a86b5020eca5bca4 /packages/dev-tools-pages/ts
parent49beb6b7a3f924508a4169d12ab0aedcf1a51f15 (diff)
downloaddexon-sol-tools-dfa03feb43e9398dbfda8aebf96b6fb63dff0989.tar
dexon-sol-tools-dfa03feb43e9398dbfda8aebf96b6fb63dff0989.tar.gz
dexon-sol-tools-dfa03feb43e9398dbfda8aebf96b6fb63dff0989.tar.bz2
dexon-sol-tools-dfa03feb43e9398dbfda8aebf96b6fb63dff0989.tar.lz
dexon-sol-tools-dfa03feb43e9398dbfda8aebf96b6fb63dff0989.tar.xz
dexon-sol-tools-dfa03feb43e9398dbfda8aebf96b6fb63dff0989.tar.zst
dexon-sol-tools-dfa03feb43e9398dbfda8aebf96b6fb63dff0989.zip
Responsive Intro
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>
);
}