diff options
| -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; |