aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/hero.tsx15
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx16
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;