aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-19 21:31:26 +0800
committerMegan Pearson <megan.e.pearson@gmail.com>2018-10-19 21:31:26 +0800
commit8a7c61c6f46dc283d9387fb29860295f58e683e7 (patch)
treef554eeaa2e7280d21a4de9871f0e1b3faa1d2cbc
parent9a024fdacf885cbeb1d070064b0ab2314a092f13 (diff)
downloaddexon-sol-tools-8a7c61c6f46dc283d9387fb29860295f58e683e7.tar
dexon-sol-tools-8a7c61c6f46dc283d9387fb29860295f58e683e7.tar.gz
dexon-sol-tools-8a7c61c6f46dc283d9387fb29860295f58e683e7.tar.bz2
dexon-sol-tools-8a7c61c6f46dc283d9387fb29860295f58e683e7.tar.lz
dexon-sol-tools-8a7c61c6f46dc283d9387fb29860295f58e683e7.tar.xz
dexon-sol-tools-8a7c61c6f46dc283d9387fb29860295f58e683e7.tar.zst
dexon-sol-tools-8a7c61c6f46dc283d9387fb29860295f58e683e7.zip
Responsive footer
-rw-r--r--packages/dev-tools-pages/ts/components/Footer.tsx40
1 files changed, 35 insertions, 5 deletions
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index 82b2de1a3..15e6a5b86 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
import { Alpha, Beta } from './Typography';
import { withContext, Props } from './withContext';
import Container from './Container';
+import { media } from '../variables';
import MainIcon from 'ts/icons/logos/0x.svg';
import compiler from 'ts/context/compiler';
@@ -23,7 +24,7 @@ function Footer(props: Props) {
<Alpha>Other tools by 0x</Alpha>
<List>
{tools.map(({ title, subtitle, icon }) => (
- <ListItem as="li" key={title}>
+ <ListItem key={title}>
<Icon as={icon} />
<div>
<Beta>{title}</Beta>
@@ -49,21 +50,38 @@ const StyledFooter = styled.footer`
background-color: ${(props: { background: string }) => props.background};
padding-top: 6.25rem;
padding-bottom: 5.4375rem;
+
+ ${media.small`padding-top: 2.5rem;`};
`;
const Top = styled.div`
display: flex;
justify-content: space-between;
margin-bottom: 9.375rem;
+
+ ${media.small`
+ display: block;
+ margin-bottom: 5.3125rem;
+ `};
+
+ ${Alpha} {
+ ${media.small`margin-bottom: 3.8125rem;`};
+ }
+`;
+
+const Icon = styled.div`
+ margin-right: 1.3125rem;
+
+ ${media.small`margin-right: 0.9375rem`};
`;
const Media = styled.div`
display: flex;
align-items: center;
-`;
-const Icon = styled.div`
- margin-right: 1.3125rem;
+ ${Icon} {
+ align-self: flex-start;
+ }
`;
const List = styled.ul`
@@ -73,14 +91,26 @@ const List = styled.ul`
flex-direction: row;
margin: 0;
padding: 0;
+
+ ${media.small`
+ display: block;
+ width: 100%;
+ `};
`;
-const ListItem = styled(Media)`
+const ListItem = styled.li`
+ display: flex;
+ align-items: center;
flex-basis: 50%;
margin-bottom: 3.3125rem;
+
:nth-last-of-type(-n + 2) {
margin-bottom: 0;
+
+ ${media.small`margin-bottom: 1.875rem`};
}
+
+ ${media.small`margin-bottom: 1.875rem`};
`;
const Small = styled.small`