diff options
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r-- | packages/dev-tools-pages/ts/components/ContentBlock.tsx | 18 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/components/Main.tsx | 8 |
2 files changed, 25 insertions, 1 deletions
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx index 56d52a150..b80fd4550 100644 --- a/packages/dev-tools-pages/ts/components/ContentBlock.tsx +++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx @@ -1,19 +1,32 @@ import * as React from 'react'; import styled from 'styled-components'; +import { media } from 'ts/variables'; import { Beta } from './Typography'; const Base = styled.div` display: flex; align-items: flex-start; justify-content: space-between; - &:not(:last-of-type) { + :not(:last-of-type) { margin-bottom: 6.25rem; } + ${Beta} { + margin-bottom: 2.5rem; + } + ${media.small` + display: block; + :not(:last-of-type) { + margin-bottom: 3.125rem; + } + `}; `; const Content = styled.div` width: 66.693548387%; + ${media.small` + width: 100%; + `}; `; const Item = styled.div` @@ -23,6 +36,9 @@ const Item = styled.div` &:not(:last-of-type) { margin-bottom: 2.5rem; + ${media.small` + margin-bottom: 1.875rem; + `}; } `; diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx index 8046abc91..97eb407b9 100644 --- a/packages/dev-tools-pages/ts/components/Main.tsx +++ b/packages/dev-tools-pages/ts/components/Main.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; +import { media } from 'ts/variables'; import { withContext, Props } from './withContext'; import { Alpha } from './Typography'; @@ -8,11 +9,18 @@ import { Alpha } from './Typography'; const StyledMain = styled.div` padding-top: 6.25rem; padding-bottom: 6.25rem; + ${media.small` + padding-top: 2.5rem; + padding-bottom: 2.5rem; + `}; `; const Title = styled(Alpha)` color: ${props => props.color}; margin-bottom: 6.25rem; + ${media.small` + margin-bottom: 3.125rem; + `}; `; interface MainProps extends Props { |