aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-12-18 21:04:44 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-19 05:03:30 +0800
commit630ecb98e17c6cce795e368ebfe8af5ffb4a2266 (patch)
tree6e54a94cf4df192e1d2e62ca0bfcfb78c652f6ba
parentae27695d25301fe7cc34e22bddd3fedfdd8d81a2 (diff)
downloaddexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.tar
dexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.tar.gz
dexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.tar.bz2
dexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.tar.lz
dexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.tar.xz
dexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.tar.zst
dexon-sol-tools-630ecb98e17c6cce795e368ebfe8af5ffb4a2266.zip
Mobile tweaks
-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;