Update wip website

.travis.yml

@@ -22,6 +22,7 @@ notifications:
     on_start: false
 script:
   - npm run build
+  - cd www && npm install && npm run build && cd ..
   - npm test
 deploy:
   - provider: npm
@@ -44,3 +45,13 @@ deploy:
       tags: true
       branch: master
       repo: niklasvh/html2canvas
+  - provider: pages
+    skip_cleanup: true
+    local_dir: www/public
+    target_branch: gh-pages-test
+    fqdn: html2canvas.hertzen.com
+    github_token:
+      secure: "PowO/Jat660k3gHcjgI6DlJz15RM7pLUu11UPsLCtYJ8ZwodppE6Keg0DfVkSFSIZttZor+UssDwP/WOEqfZNLqmXbcj3Gec4xolohet/GOe0KJKKuF/HgggbcxumopxMX6sMVePlMBpkLpHh7tgEAEHBWTlzC1c1a7Xa48fZ7k="
+    on:
+      branch: master
+      repo: niklasvh/html2canvas

CHANGELOG.md

@@ -1,6 +1,8 @@
 ### Changelog ###
 
-#### v1.0.0-alpha3 - TBD ####
+#### v1.0.0-alpha4 - TBD ####
+
+#### v1.0.0-alpha3 - 9.12.2017 ####
  * Disable `foreignObjectRendering` by default (#1295)
  * Fix background-size when using background-origin and background-size: cover/contain (#1299)
  * Added support for background-origin: content-box (#1299)

docs/about.md

@@ -1,33 +1,37 @@
 ---
 title: "About"
+description: "Learn about html2canvas, how it works and some of its limitations"
+nextUrl: "/getting-started"
+nextTitle: "Getting Started"
 ---
 
 Before you get started with the script, there are a few things that are good to know regarding the 
 script and some of its limitations.
 
-# Introduction
+## Introduction
 The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.
 The screenshot is based on the DOM and as such may not be 100% accurate to the real representation 
 as it does not make an actual screenshot, but builds the screenshot based on the information 
 available on the page.
 
-# How it works
+## How it works
 The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements
 there, which it then uses to build a representation of the page. In other words, it does not actually take a
 screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.
             
+            
 As a result, it is only able to render correctly properties that it understands, meaning there are many 
 CSS properties which do not work. For a full list of supported CSS properties, check out the 
-[support features](/features/) page.
+[supported features](/features/) page.
 
-# Limitations
+## Limitations
 All the images that the script uses need to reside under the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy) 
 for it to be able to read them without the assistance of a [proxy](/proxy/). Similarly, if you have other `canvas` 
 elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.
 
 The script doesn't render plugin content such as Flash or Java applets.
 
-# Browser compatibility
+## Browser compatibility
 
 The library should work fine on the following browsers (with `Promise` polyfill):
  - Firefox 3.5+

docs/configuration.md

@@ -1,25 +1,30 @@
 ---
 title: "Configuration"
+description: "Explore the different configuration options available for html2canvas"
+previousUrl: "/getting-started"
+previousTitle: "Getting Started"
+nextUrl: "/features"
+nextTitle: "Features"
 ---
 
 These are all of the available configuration options.
 
-| Name          | Type          | Default  | Description |
-| ------------- |:-------------:| :------: | ----------- |
-| async | Boolean | `true` | Whether to parse and render the element asynchronously
-| allowTaint | Boolean | `false` | Whether to allow cross-origin images to taint the canvas
-| backgroundColor | String | `#ffffff` | Canvas background color, if none is specified in DOM. Set undefined for transparent
-| canvas | `HTMLCanvasElement` | `null` | Existing `canvas` element to use as a base for drawing on
-| foreignObjectRendering | Boolean | `false` | Whether to use ForeignObject rendering if the browser supports it
-| imageTimeout | Number | `15000` | Timeout for loading an image (in milliseconds). Set to `0` to disable timeout.
-| proxy | String | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
-| removeContainer | Boolean | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily
-| scale | Number | `window.devicePixelRatio` | The scale to use for rendering. Defaults to the browsers device pixel ratio.
-| width | Number | `Element` width | The width of the `canvas`
-| height | Number | `Element` height | The height of the `canvas`
-| x | Number | `Element` x-offset | Crop canvas x-coordinate
-| y | Number | `Element` y-offset| Crop canvas y-coordinate
-| scrollX | Number | `Element` scrollX | The x-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
-| scrollY | Number | `Element` scrollY | The y-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
-| windowWidth | Number | `Window.innerWidth` | Window width to use when rendering `Element`, which may affect things like Media queries
-| windowHeight | Number | `Window.innerHeight` | Window height to use when rendering `Element`, which may affect things like Media queries
+| Name          | Default  | Description |
+| ------------- | :------: | ----------- |
+| async | `true` | Whether to parse and render the element asynchronously
+| allowTaint | `false` | Whether to allow cross-origin images to taint the canvas
+| backgroundColor | `#ffffff` | Canvas background color, if none is specified in DOM. Set undefined for transparent
+| canvas | `null` | Existing `canvas` element to use as a base for drawing on
+| foreignObjectRendering | `false` | Whether to use ForeignObject rendering if the browser supports it
+| imageTimeout | `15000` | Timeout for loading an image (in milliseconds). Set to `0` to disable timeout.
+| proxy | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
+| removeContainer | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily
+| scale | `window.devicePixelRatio` | The scale to use for rendering. Defaults to the browsers device pixel ratio.
+| width | `Element` width | The width of the `canvas`
+| height | `Element` height | The height of the `canvas`
+| x | `Element` x-offset | Crop canvas x-coordinate
+| y | `Element` y-offset| Crop canvas y-coordinate
+| scrollX | `Element` scrollX | The x-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
+| scrollY | `Element` scrollY | The y-scroll position to used when rendering element, (for example if the Element uses `position: fixed`)
+| windowWidth | `Window.innerWidth` | Window width to use when rendering `Element`, which may affect things like Media queries
+| windowHeight | `Window.innerHeight` | Window height to use when rendering `Element`, which may affect things like Media queries

docs/faq.md

@@ -0,0 +1,42 @@
+---
+title: "FAQ"
+description: "Explore Frequently Asked Questions regarding html2canvas"
+---
+
+## Why aren't my images rendered?
+html2canvas does not get around content policy restrictions set by your browser. Drawing images that reside outside of 
+the [origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) of the current page [taint the 
+canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_tainted_canvas) that they are drawn upon. If the canvas gets tainted, it cannot be read anymore. As such, html2canvas implements 
+methods to check whether an image would taint the canvas before applying it. If you have set the `allowTaint` 
+[option](/configuration) to `false`, it will not draw the image.
+
+If you wish to load images that reside outside of your pages origin, you can use a [proxy](/proxy) to load the images.
+
+## Why is the produced canvas empty or cuts off half way through?
+Make sure that `canvas` element doesn't hit [browser limitations](https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element) for the `canvas` size. 
+The limitations vary by browser, operating system and system hardware.
+
+### Chrome
+> Maximum height/width: 32,767 pixels
+> Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
+
+### Firefox
+> Maximum height/width: 32,767 pixels
+> Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
+
+### Internet Explorer
+> Maximum height/width: 8,192 pixels
+> Maximum area: N/A
+
+### iOS
+> The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM
+
+## Why doesn't CSS property X render correctly or only partially?
+As each CSS property needs to be manually coded to render correctly, html2canvas will *never* have full CSS support. 
+The library tries to support the most [commonly used CSS properties](/features) to the extent that it can. If some CSS property 
+is missing or incomplete and you feel that it should be part of the library, create test cases for it and a new issue for it.
+
+## How do I get html2canvas to work in a browser extension?
+You shouldn't use html2canvas in a browser extension. Most browsers have native support for capturing screenshots from 
+tabs within extensions. Relevant information for [Chrome](https://developer.chrome.com/extensions/tabs#method-captureVisibleTab) and 
+[Firefox](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#drawWindow()).

docs/features.md

@@ -1,5 +1,6 @@
 ---
 title: "Features"
+description: "Discover the different features supported by html2canvas"
 ---
 
 Below is a list of all the supported CSS properties and values.

docs/getting-started.md

@@ -1,8 +1,13 @@
 ---
 title: "Getting Started"
+description: "Learn how to start using html2canvas"
+previousUrl: "/about"
+previousTitle: "About"
+nextUrl: "/configuration"
+nextTitle: "Configuration"
 ---
 
-# Installing
+## Installing
 
 You can install `html2canvas` through npm or [download a built release](https://github.com/niklasvh/html2canvas/releases).
 
@@ -14,7 +19,7 @@ You can install `html2canvas` through npm or [download a built release](https://
 import html2canvas from 'html2canvas';
 ```
     
-# Usage
+## Usage
 
 To render an `element` with html2canvas with some (optional) [options](/configuration/), simply call `html2canvas(element, options);`
 

docs/proxy.md

@@ -1,11 +1,12 @@
 ---
 title: "Proxy"
+description: "Browse different proxies available for supporting CORS content"
 ---
 
 html2canvas does not get around content policy restrictions set by your browser. Drawing images that reside outside of 
 the origin of the current page taint the canvas that they are drawn upon. If the canvas gets tainted, 
 it cannot be read anymore. If you wish to load images that reside outside of your pages origin, you can use a proxy to load the images.
 
-# Available proxies
+## Available proxies
 
  - [node.js](https://github.com/niklasvh/html2canvas-proxy-nodejs)

package.json

@@ -3,7 +3,7 @@
   "name": "html2canvas",
   "description": "Screenshots with JavaScript",
   "main": "dist/npm/index.js",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",

www/gatsby-config.js

@@ -37,6 +37,12 @@ module.exports = {
                     }
                 ]
             }
+        },
+        {
+            resolve: `gatsby-plugin-google-analytics`,
+            options: {
+                trackingId: 'UA-188600-10'
+            }
         }
     ]
 };

www/package-lock.json

@@ -4130,6 +4130,14 @@
         "glamor": "2.20.40"
       }
     },
+    "gatsby-plugin-google-analytics": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-1.0.14.tgz",
+      "integrity": "sha512-iwibBcUW4PDFvu0He387xOsRcB3Fclwnf3zPecTCQ2pwG1xYVFgPIf+cVhKkWsw68KpiMzK3JoSmK1P0kHq5eg==",
+      "requires": {
+        "babel-runtime": "6.26.0"
+      }
+    },
     "gatsby-plugin-react-helmet": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-1.0.8.tgz",

www/package.json

@@ -9,6 +9,7 @@
     "gatsby-link": "^1.6.30",
     "gatsby-plugin-catch-links": "^1.0.13",
     "gatsby-plugin-glamor": "^1.6.9",
+    "gatsby-plugin-google-analytics": "^1.0.14",
     "gatsby-plugin-react-helmet": "^1.0.8",
     "gatsby-plugin-typography": "^1.7.10",
     "gatsby-remark-prismjs": "^1.2.10",

www/src/components/carbon.css

@@ -0,0 +1,30 @@
+
+#carbonads {
+    display: block;
+    overflow: hidden;
+    text-align: center;
+    font-size: 14px;
+    line-height: 1.5;
+}
+#carbonads span {
+    display: block;
+    overflow: hidden;
+}
+.carbon-img {
+    display: block;
+}
+.carbon-text {
+    display: block;
+    margin-bottom: .5em;
+}
+.carbon-poweredby {
+    display: block;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 9px;
+}
+
+#carbonads a {
+    color: #fff;
+}
+
+

www/src/components/carbon.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import './carbon.css';
+
+export default class Carbon extends Component {
+    componentDidMount() {
+        if (this.container) {
+            const script = document.createElement('script');
+
+            script.src =
+                '//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html2canvashertzencom';
+            script.async = true;
+            script.id = '_carbonads_js';
+            this.container.appendChild(script);
+        }
+    }
+
+    render() {
+        return (
+            <div
+                {...this.props}
+                ref={container => {
+                    this.container = container;
+                }}
+            />
+        );
+    }
+}

www/src/components/navigation.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import Link from 'gatsby-link';
+import logo from '../images/logo.svg';
 
 const lineLinkStyle = {
     lineHeight: '44px',
     height: '44px',
     padding: '0 30px',
     display: 'block',
+    color: 'rgba(0,0,0,0.87)',
+    fontWeight: '500',
     '&:hover': {
         backgroundColor: 'rgba(0,0,0,0.05)'
     },
@@ -18,6 +21,7 @@ const navStyle = {
     position: 'fixed',
     top: 0,
     left: 0,
+    fontSize: '13px',
     backgroundColor: '#fff',
     boxShadow:
         '0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)'
@@ -33,7 +37,10 @@ const links = [
 ];
 
 export default () =>
-    <div style={navStyle}>
+    <div css={navStyle}>
+        <div css={{background: '#558b2f'}}>
+            <img src={logo} css={{margin: 0, padding: '24px 30px 24px'}} />
+        </div>
         <ul
             style={{
                 listStyle: 'none',
@@ -43,7 +50,14 @@ export default () =>
         >
             {links.map(({href, text}, i) =>
                 <li style={{padding: 0, margin: 0}} key={i}>
-                    <Link to={href} css={lineLinkStyle}>
+                    <Link
+                        to={href}
+                        css={lineLinkStyle}
+                        activeStyle={{
+                            backgroundColor: '#7cb342',
+                            color: '#fff'
+                        }}
+                    >
                         {text}
                     </Link>
                 </li>

www/src/images/ic_arrow_back_black_24px.svg

@@ -0,0 +1,4 @@
+<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+</svg>

www/src/images/ic_arrow_forward_black_24px.svg

@@ -0,0 +1,4 @@
+<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
+</svg>

www/src/layouts/index.css

@@ -1,624 +1,67 @@
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: .67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -.25em;
-}
-sup {
-  top: -.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type=reset],
-[type=submit],
-button,
-html [type=button] {
-  -webkit-appearance: button;
-}
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: .35em .625em .75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type=checkbox],
-[type=radio] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type=search]::-webkit-search-cancel-button,
-[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: .54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
 p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
+    color: rgba(0,0,0,0.71);
+    padding: 0;
+    -webkit-font-smoothing: antialiased;
 }
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
+
+h1 {
+    font-weight: 300;
+    font-size: 4.2rem;
+    padding: 0;
 }
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
+
+h4 {
+    font-size: 2.28rem;
+    line-height: 110%;
+    margin: 1.14rem 0 .912rem 0;
 }
+
+a {
+    color: #7cb342;
+    text-decoration: none;
+}
+
 table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
+    border: 1px solid #ddd;
 }
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
+
+th {
+    padding: 8px;
+    border: 1px solid #ddd;
 }
+
+:not(pre) > code {
+    padding: .1em .25em;
+    border: solid 1px rgba(51,51,51,0.12);
+    background: #f5f2f0;
+    border-radius: .3em;
+    color: black;
+    font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.4;
+
+}
+
 blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
+    white-space: pre-wrap;
+    padding: 0 20px;
+    margin: 20px 0;
+    border: 1px solid #eee;
+    border-left-width: 5px;
+    border-radius: 3px;
+    border-left-color: #558b2f;
+
 }
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
+
+blockquote p {
+    padding: 0;
+
 }
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
+
+* {
+    box-sizing: border-box;
 }

www/src/layouts/index.js

@@ -7,15 +7,27 @@ import './index.css';
 
 const TemplateWrapper = ({children}) =>
     <div>
-        <Helmet
-            title="Gatsby Default Starter"
-            meta={[
-                {name: 'description', content: 'Sample'},
-                {name: 'keywords', content: 'sample, something'}
-            ]}
-        />
+        <Helmet title="html2canvas" />
         <Navigation />
         {children()}
+        <footer
+            css={{
+                marginLeft: '300px',
+                backgroundColor: '#558b2f',
+                color: 'rgba(255,255,255,0.8)',
+                fontWeight: 300,
+                minHeight: '50px',
+                lineHeight: '50px',
+                padding: '10px 0px'
+            }}
+        >
+            <div css={{margin: '0 auto', width: '85%'}}>
+                Created by{' '}
+                <a href="https://hertzen.com" css={{color: '#fff', fontWeight: 'bold'}}>
+                    Niklas von Hertzen
+                </a>. Licensed under the MIT License.
+            </div>
+        </footer>
     </div>;
 
 TemplateWrapper.propTypes = {

www/src/templates/docs.js

@@ -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
             }
         }
     }

www/src/utils/typography.js

@@ -1,6 +1,20 @@
 import Typography from 'typography';
 import githubTheme from 'typography-theme-github';
 
-const typography = new Typography(githubTheme);
+const theme = {
+    googleFonts: [
+        {
+            name: 'Roboto',
+            styles: ['100', '300', '400', '500', '700']
+        }
+    ],
+    scale: 4.2,
+    baseFontSize: '14.5px',
+    baseLineHeight: 1.5,
+    headerFontFamily: ['Roboto', 'sans-serif'],
+    bodyFontFamily: ['Roboto', 'sans-serif']
+};
+
+const typography = new Typography(theme);
 
 export default typography;