amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix hero buttons to be clickable (#373)

Browse Source
This commit is contained in:
Sophie Alpert
2017-11-29 19:35:28 -08:00
committed by GitHub
parent a53a1afb72
commit 33cfa5f6b8
1 changed files with 63 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/index.js
View File

@@ -116,66 +116,72 @@ class Home extends Component {
},
},
}}>
<Container>
<h1
css={{
color: colors.brand,
textAlign: 'center',
margin: 0,
fontSize: 45,
letterSpacing: '0.01em',
[media.size('xsmall')]: {
fontSize: 30,
},
[media.greaterThan('xlarge')]: {
fontSize: 60,
},
}}>
React
</h1>
<p
css={{
paddingTop: 15,
textAlign: 'center',
fontSize: 24,
letterSpacing: '0.01em',
fontWeight: 200,
<div
css={{
// Content should be above absolutely-positioned hero image
position: 'relative',
}}>
<Container>
<h1
css={{
color: colors.brand,
textAlign: 'center',
margin: 0,
fontSize: 45,
letterSpacing: '0.01em',
[media.size('xsmall')]: {
fontSize: 30,
},
[media.greaterThan('xlarge')]: {
fontSize: 60,
},
}}>
React
</h1>
<p
css={{
paddingTop: 15,
textAlign: 'center',
fontSize: 24,
letterSpacing: '0.01em',
fontWeight: 200,
[media.size('xsmall')]: {
fontSize: 16,
maxWidth: '12em',
marginLeft: 'auto',
marginRight: 'auto',
},
[media.size('xsmall')]: {
fontSize: 16,
maxWidth: '12em',
marginLeft: 'auto',
marginRight: 'auto',
},
[media.greaterThan('xlarge')]: {
paddingTop: 20,
fontSize: 30,
},
}}>
A JavaScript library for building user interfaces
</p>
<Flex
valign="center"
css={{
paddingTop: 40,
[media.greaterThan('xlarge')]: {
paddingTop: 20,
fontSize: 30,
},
}}>
A JavaScript library for building user interfaces
</p>
<Flex
valign="center"
css={{
paddingTop: 40,
[media.greaterThan('xlarge')]: {
paddingTop: 65,
},
}}>
<CtaItem>
<ButtonLink to="/docs/hello-world.html" type="primary">
Get Started
</ButtonLink>
</CtaItem>
<CtaItem>
<ButtonLink to="/tutorial/tutorial.html" type="secondary">
Take the Tutorial
</ButtonLink>
</CtaItem>
</Flex>
</Container>
[media.greaterThan('xlarge')]: {
paddingTop: 65,
},
}}>
<CtaItem>
<ButtonLink to="/docs/hello-world.html" type="primary">
Get Started
</ButtonLink>
</CtaItem>
<CtaItem>
<ButtonLink to="/tutorial/tutorial.html" type="secondary">
Take the Tutorial
</ButtonLink>
</CtaItem>
</Flex>
</Container>
</div>
</div>
</header>