Sophie Alpert
8 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with
66 additions and
60 deletions
-
src/pages/index.js
|
|
|
@ -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, |
|
|
|
|
|
|
|
[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: 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 |
|
|
|
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.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> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</header> |
|
|
|
|
|
|
|
|
