mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Update wip website

Browse Source
This commit is contained in:
Niklas von Hertzen
2017-12-10 16:43:34 +08:00
parent 9bc0fb0bd1
commit 8fd616aed2
23 changed files with 7746 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
www/src/templates/docs.js
View File

@@ -1,21 +1,41 @@
import React from 'react';
import Link from 'gatsby-link';
import back from '../images/ic_arrow_back_black_24px.svg';
import next from '../images/ic_arrow_forward_black_24px.svg';
import Carbon from '../components/carbon';
import Helmet from 'react-helmet';
export default ({data}) => {
const post = data.markdownRemark;
return (
<div>
<Helmet
title={`${post.frontmatter.title} - html2canvas`}
meta={[{name: 'description', content: post.frontmatter.description}]}
/>
<div
style={{
marginLeft: '300px',
background: '#01579b',
background: '#7cb342',
marginBottom: '1.45rem',
color: '#fff'
color: '#fff',
paddingTop: '1rem',
paddingBottom: '1rem'
}}
>
{' '}<div css={{width: '85%', margin: '0 auto'}}>
<h1 css={{padding: '20px 0'}}>
{post.frontmatter.title}
</h1>
<div css={{maxWidth: '960px'}}>
<div css={{width: '85%', margin: '0 auto', display: 'flex'}}>
<div css={{flex: 1}}>
<h1 css={{padding: '20px 0'}}>
{post.frontmatter.title}
</h1>
<h4 css={{fontWeight: 300, color: 'rgba(255, 255, 255, 0.6)'}}>
{post.frontmatter.description}
</h4>
</div>
<Carbon css={{width: '150px', marginLeft: '20px'}} />
</div>
</div>
</div>
<div
@@ -31,6 +51,95 @@ export default ({data}) => {
dangerouslySetInnerHTML={{__html: post.html}}
/>
</div>
{(post.frontmatter.previousUrl && post.frontmatter.previousTitle) ||
(post.frontmatter.nextUrl && post.frontmatter.nextTitle)
? <div
css={{
marginLeft: '300px',
backgroundColor: '#7cb342',
marginTop: '30px'
}}
>
<div
css={{
width: '85%',
display: 'flex',
margin: '0 auto',
alignItems: 'center',
height: '96px'
}}
>
{post.frontmatter.previousUrl && post.frontmatter.previousTitle
? <Link
to={post.frontmatter.previousUrl}
css={{
flex: 1,
color: '#fff',
display: 'flex',
alignItems: 'flex-end'
}}
>
<div css={{height: '24px'}}>
<img src={back} />
</div>
<div>
<span
css={{
display: 'block',
color: 'rgba(255,255,255,.55)',
fontSize: '15px',
lineHeight: '18px',
marginBottom: '1px'
}}
>
Previous
</span>
<div
css={{color: 'rgba(255,255,255,.87)', fontSize: '20px'}}
>
{post.frontmatter.previousTitle}
</div>
</div>
</Link>
: null}
{post.frontmatter.nextUrl && post.frontmatter.nextTitle
? <Link
to={post.frontmatter.nextUrl}
css={{
flex: 1,
color: '#fff',
justifyContent: 'flex-end',
display: 'flex',
alignItems: 'flex-end'
}}
>
<div>
<span
css={{
display: 'block',
color: 'rgba(255,255,255,.55)',
fontSize: '15px',
lineHeight: '18px',
marginBottom: '1px'
}}
>
Next
</span>
<div
css={{color: 'rgba(255,255,255,.87)', fontSize: '20px'}}
>
{post.frontmatter.nextTitle}
</div>
</div>
<div css={{height: '24px'}}>
<img src={next} />
</div>
</Link>
: null}
</div>
</div>
: null}
</div>
);
};
@@ -41,6 +150,11 @@ export const query = graphql`
html
frontmatter {
title
description
previousUrl
previousTitle
nextUrl
nextTitle
}
}
}