diff options
author | August Skare <post@augustskare.no> | 2018-10-29 16:15:20 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-29 16:15:20 +0800 |
commit | 0e3cd82348570ed4c524d3b4f216001089f49125 (patch) | |
tree | 645aee17a391fb0c70f8db6bdc6c14ea5d04fa82 /packages/dev-tools-pages/ts/components/Hero.tsx | |
parent | 3d4041ecd3d9384853514ea0cebc445e630b106e (diff) | |
download | dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.gz dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.bz2 dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.lz dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.xz dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.tar.zst dexon-sol-tools-0e3cd82348570ed4c524d3b4f216001089f49125.zip |
Fixes/august (#12)
* fix button dimensions
* fix footer hover color
* breakout in trace component
* fix padding on button on small screens
* fix title with content on small screens
* sizing adjustment in intro component
* intro component adjustments
* container size adjustments
* meta og images
* fixed gutter size
* trace component fix + breakout fix
* show copy button if touch device
* responsive hero animation
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Hero.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Hero.tsx | 59 |
1 files changed, 41 insertions, 18 deletions
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx index e045a7ad4..e92ab6e9d 100644 --- a/packages/dev-tools-pages/ts/components/Hero.tsx +++ b/packages/dev-tools-pages/ts/components/Hero.tsx @@ -6,40 +6,46 @@ import { withContext, Props } from './withContext'; import Button from './Button'; import { Beta } from './Typography'; -const IMAGE_WIDTH = 2560; -const IMAGE_HEIGHT = 800; - function Hero(props: Props) { const { subtitle, tagline, title } = props; return ( <React.Fragment> <StyledHero> - <Subtitle>{subtitle}</Subtitle> - <Tagline as="p">{tagline}</Tagline> - <Button as="a" href="#" large> - Read the Docs - </Button> - </StyledHero> + <HeroContainer> + <Subtitle>{subtitle}</Subtitle> + <Tagline as="p">{tagline}</Tagline> + <Button as="a" href="#" large> + Read the Docs + </Button> + </HeroContainer> - <ImageContainer> - <Image src={`/images/${title}@1x.gif`} srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`} /> - </ImageContainer> + <ImageContainer> + <Image + src={`/images/${title}@1x.gif`} + srcSet={`/images/${title}@1x.gif, /images/${title}@2x.gif 2x`} + /> + </ImageContainer> + </StyledHero> </React.Fragment> ); } const StyledHero = styled.section` text-align: center; - 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; height: 80vh; + position: relative; +`; + +const HeroContainer = styled.div` + margin: 0 auto; + max-width: 590px; `; const Subtitle = styled.h2` @@ -63,20 +69,37 @@ const Tagline = styled(Beta)` const ImageContainer = styled.div` width: 100%; - height: ${IMAGE_HEIGHT}px; + height: 800px; position: absolute; - top: 6.875rem; + top: 100%; left: 0; overflow: hidden; + transform: translateY(-50%); z-index: -1; + ${media.xlarge` + height: 533.333333334px; + transform: translateY(-60%); + `}; + ${media.small` + height: 400px; + transform: translateY(-70%); + `}; `; const Image = styled.img` - width: ${IMAGE_WIDTH}px; + width: min-content; + height: 100%; position: absolute; top: 0; left: 50%; - transform: translate(-50%); + transform: translateX(-50%); + object-fit: contain; + ${media.small` + height: 100%; + width: auto; + left: 0; + transform: translateX(-15%); + `}; `; export default withContext(Hero); |