diff options
author | August Skare <post@augustskare.no> | 2018-10-25 17:54:53 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-25 17:54:53 +0800 |
commit | e5d3e3b33a88e2b08ed02cb39910fab28e130594 (patch) | |
tree | 6ab79e457f3e010ed00ce653442d5ffdce1cf123 /packages/dev-tools-pages/ts/components/Footer.tsx | |
parent | 1c8ea1336e9e0c018ceb38cba90943f1b50eb23a (diff) | |
download | dexon-0x-contracts-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar dexon-0x-contracts-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.gz dexon-0x-contracts-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.bz2 dexon-0x-contracts-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.lz dexon-0x-contracts-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.xz dexon-0x-contracts-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.zst dexon-0x-contracts-e5d3e3b33a88e2b08ed02cb39910fab28e130594.zip |
Feature/tweaks (#8)
* show copy button on focs
* change base link styling
* text-decoration underline on basic links
* basic hover and focus styles on button and tabs
* add links in footer
* change breakpoints vars
* medium breakpoint on footer
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Footer.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Footer.tsx | 25 |
1 files changed, 21 insertions, 4 deletions
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx index df2d920ac..de479a81e 100644 --- a/packages/dev-tools-pages/ts/components/Footer.tsx +++ b/packages/dev-tools-pages/ts/components/Footer.tsx @@ -27,7 +27,11 @@ function Footer(props: Props) { <ListItem key={title}> <Icon as={icon} /> <div> - <Beta>{title}</Beta> + <Beta> + <StyledLink colors={colors} href="#"> + {title} + </StyledLink> + </Beta> <p>{subtitle}</p> </div> </ListItem> @@ -59,13 +63,13 @@ const Top = styled.div` justify-content: space-between; margin-bottom: 9.375rem; - ${media.small` + ${media.medium` display: block; margin-bottom: 5.3125rem; `}; ${Alpha} { - ${media.small`margin-bottom: 3.8125rem;`}; + ${media.medium`margin-bottom: 3.8125rem;`}; } `; @@ -92,9 +96,13 @@ const List = styled.ul` margin: 0; padding: 0; + ${media.medium` + + width: 100%; + `}; + ${media.small` display: block; - width: 100%; `}; `; @@ -123,4 +131,13 @@ const Small = styled.small` max-width: 37.5rem; `; +const StyledLink = + styled.a < + { colors: any } > + ` + :hover { + color: ${props => props.colors.main}; + } +`; + export default withContext(Footer); |