diff options
| author | Fred Carlsen <fred@sjelfull.no> | 2018-12-18 21:04:44 +0800 |
|---|---|---|
| committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-18 21:04:44 +0800 |
| commit | ee0a226c43bc01044bc99fd8f51bd439bcd125f4 (patch) | |
| tree | 6aee708bdcf0253583cd1522699cade3d1716023 /packages/website/ts/@next | |
| parent | d760b355ecf0043cb99f4375ca7d169668f6cb78 (diff) | |
| download | dexon-sol-tools-ee0a226c43bc01044bc99fd8f51bd439bcd125f4.tar dexon-sol-tools-ee0a226c43bc01044bc99fd8f51bd439bcd125f4.tar.gz dexon-sol-tools-ee0a226c43bc01044bc99fd8f51bd439bcd125f4.tar.bz2 dexon-sol-tools-ee0a226c43bc01044bc99fd8f51bd439bcd125f4.tar.lz dexon-sol-tools-ee0a226c43bc01044bc99fd8f51bd439bcd125f4.tar.xz dexon-sol-tools-ee0a226c43bc01044bc99fd8f51bd439bcd125f4.tar.zst dexon-sol-tools-ee0a226c43bc01044bc99fd8f51bd439bcd125f4.zip | |
Mobile tweaks
Diffstat (limited to 'packages/website/ts/@next')
| -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; |