diff options
| author | Fred Carlsen <fred@sjelfull.no> | 2018-12-18 21:04:44 +0800 |
|---|---|---|
| committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-12-19 05:03:30 +0800 |
| commit | 630ecb98e17c6cce795e368ebfe8af5ffb4a2266 (patch) | |
| tree | 6e54a94cf4df192e1d2e62ca0bfcfb78c652f6ba | |
| parent | ae27695d25301fe7cc34e22bddd3fedfdd8d81a2 (diff) | |
| download | dexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.tar.gz dexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.tar.zst dexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.zip | |
Mobile tweaks
| -rw-r--r-- | packages/website/ts/@next/components/hero.tsx | 15 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/sections/landing/about.tsx | 16 |
2 files changed, 28 insertions, 3 deletions
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx index 46e2ca6d9..6a781f923 100644 --- a/packages/website/ts/@next/components/hero.tsx +++ b/packages/website/ts/@next/components/hero.tsx @@ -117,4 +117,19 @@ const ButtonWrap = styled.div` > *:nth-child(2) { ${addFadeInAnimation('0.6s', '0.4s')} } + + @media (max-width: 500px) { + flex-direction: column; + justify-content: center; + + * { + padding-left: 20px; + padding-right: 20px; + } + + * + * { + margin-left: 0; + margin-top: 12px; + } + } `; diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index bf2577581..87a0fe562 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -26,13 +26,14 @@ export const SectionLandingAbout = () => ( instruments to assets that could have never existed before. </Paragraph> - <Button href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}> + <DeveloperLink href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}> Discover how developers use 0x - </Button> + </DeveloperLink> <hr style={{ - width: '340px', + width: '100%', + maxWidth: '340px', borderColor: '#3C4746', margin: '60px auto', }} @@ -55,6 +56,15 @@ const Figure = (props: FigureProps) => ( </Column> ); +const DeveloperLink = styled(Button)` + @media (max-width: 500px) { + && { + white-space: pre-wrap; + line-height: 1.3; + } + } +`; + const FigureValue = styled.dt` font-size: 50px; font-weight: 300; |