crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive trace

Browse Source
This commit is contained in:
Megan Pearson 2018-10-19 14:29:59 +02:00 committed by August Skare
parent 73ea2dac6d
commit 5187017f21
1 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/dev-tools-pages/ts/components/Trace.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { colors } from '../variables'; import { colors, media } from '../variables';
import { withContext, Props } from './withContext'; import { withContext, Props } from './withContext';
import { Alpha, Beta, Gamma } from './Typography'; import { Alpha, Beta, Gamma } from './Typography';
@ -101,6 +101,8 @@ const StyledSection =
background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%); background: linear-gradient(to right, ${colors.black} 50%, ${props => props.background} 50%);
padding-top: 6.25rem; padding-top: 6.25rem;
padding-bottom: 5.25rem; padding-bottom: 5.25rem;
${media.small`background: none`};
`; `;
const Wrapper = styled(Container)` const Wrapper = styled(Container)`
@ -108,7 +110,14 @@ const Wrapper = styled(Container)`
${Alpha} { ${Alpha} {
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
${media.small`padding-bottom: 1.875rem;`};
} }
${media.small`
display: block;
width: 100%;
`};
`; `;
const Block = const Block =
@ -125,27 +134,52 @@ const Block =
:last-of-type { :last-of-type {
padding-left: 6.25rem; 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)` const MainCopy = styled(Beta)`
margin-bottom: 3.1875rem; margin-bottom: 3.1875rem;
${media.small`margin-bottom: 1.125rem;`};
`; `;
const List = styled.ul` const List = styled.ul`
margin-top: 6.25rem; margin-top: 6.25rem;
margin-bottom: 0; margin-bottom: 0;
padding: 0; padding: 0;
${media.small`margin-top: 3.4375rem;`};
`; `;
const Item = styled.li` const Item = styled.li`
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 4.4375rem;
:not(:last-child) {
margin-bottom: 4.4375rem;
${media.small`margin-bottom: 3.4375rem;`};
}
`; `;
const Copy = styled.div` const Copy = styled.div`
max-width: 20rem; max-width: 20rem;
margin-right: 5.875rem; margin-right: 5.875rem;
${media.small`margin-right: 2.0625rem;`};
`; `;
export default withContext(Trace); export default withContext(Trace);