diff options
| author | Fred Carlsen <fred@sjelfull.no> | 2018-12-07 18:00:34 +0800 |
|---|---|---|
| committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-07 18:00:34 +0800 |
| commit | eb137cf576ab0e6adf3743ea30bef06fb7a8512f (patch) | |
| tree | ae3666c5c882694161da23c2cf974cbe01445f16 /packages/website/ts/@next/components | |
| parent | f88ff698a498293c2eebdd97d68789f0d9ed7be1 (diff) | |
| download | dexon-sol-tools-eb137cf576ab0e6adf3743ea30bef06fb7a8512f.tar dexon-sol-tools-eb137cf576ab0e6adf3743ea30bef06fb7a8512f.tar.gz dexon-sol-tools-eb137cf576ab0e6adf3743ea30bef06fb7a8512f.tar.bz2 dexon-sol-tools-eb137cf576ab0e6adf3743ea30bef06fb7a8512f.tar.lz dexon-sol-tools-eb137cf576ab0e6adf3743ea30bef06fb7a8512f.tar.xz dexon-sol-tools-eb137cf576ab0e6adf3743ea30bef06fb7a8512f.tar.zst dexon-sol-tools-eb137cf576ab0e6adf3743ea30bef06fb7a8512f.zip | |
Mobile tweaks
Diffstat (limited to 'packages/website/ts/@next/components')
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 9 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 4 |
3 files changed, 17 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index b2ce9eb73..fa830f42c 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -30,6 +30,10 @@ export const Button = styled.button<ButtonInterface>` text-align: center; font-size: 18px; text-decoration: none; + + @media (max-width: 768px) { + padding: ${props => !props.isNoPadding && '6% 10%'}; + } `; export const Link = (props: ButtonInterface) => { diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 9f147e3fb..96658a4b2 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -14,6 +14,15 @@ interface LogoInterface { // to pass props down into the styled icon? const StyledLogo = styled.div` text-align: left; + position: relative; + + @media (max-width: 768px) { + z-index: 2; + + svg { + width: 60px; + } + } `; const Icon = styled(LogoIcon)` diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 3fcd5c776..8584a093c 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -27,6 +27,10 @@ const StyledHeading = styled.h1<HeadingProps>` margin-bottom: ${props => !props.isNoMargin && '30px'}; text-align: ${props => props.isCentered && 'center'}; font-weight: 300; + + @media (max-width: 768px) { + text-align: center; + } `; export const Heading: React.StatelessComponent<HeadingProps> = props => { |