diff options
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Hero.tsx | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx index 5ba469fca..f52ce5bc9 100644 --- a/packages/dev-tools-pages/ts/components/Hero.tsx +++ b/packages/dev-tools-pages/ts/components/Hero.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; +import { media } from 'ts/variables'; import { withContext, Props } from './withContext'; import Button from './Button'; import { Beta } from './Typography'; @@ -23,6 +24,8 @@ const StyledHero = styled.section` margin: 0 auto; padding-top: 9.375rem; padding-bottom: 2rem; + padding-left: 2.5rem; + padding-right: 2.5rem; max-width: 590px; min-height: min-content; max-height: 37.5rem; @@ -33,10 +36,19 @@ const Subtitle = styled.h2` font-size: 3.75rem; line-height: 1.16; margin-bottom: 1.5rem; + + ${media.small` + font-size: 2.25rem; + line-height: 1.1; + margin-bottom: 1.375rem; + `}; `; const Tagline = styled(Beta)` margin-bottom: 2rem; + ${media.small` + margin-bottom: 1.25rem; + `}; `; export default withContext(Hero); |