diff options
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); |