diff options
| author | August Skare <post@augustskare.no> | 2018-10-22 14:40:38 +0800 |
|---|---|---|
| committer | August Skare <post@augustskare.no> | 2018-10-22 14:40:38 +0800 |
| commit | c1082b9b08e1a17b8385120e30726025ea676a39 (patch) | |
| tree | ca0747bb3bb1882e12b8b5eb4751c446bdd2009b | |
| parent | d3c5c682968421de6a942e966b84d98d1b177338 (diff) | |
| download | dexon-sol-tools-c1082b9b08e1a17b8385120e30726025ea676a39.tar.gz dexon-sol-tools-c1082b9b08e1a17b8385120e30726025ea676a39.tar.zst dexon-sol-tools-c1082b9b08e1a17b8385120e30726025ea676a39.zip | |
spacing adjustments on contentblock and main components
| -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 { |