diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Footer.tsx | 40 |
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` |