Remove iOS 8.4 tests

* https://github.com/niklasvh/html2canvas/issues/1374 - Wrap accesing the cssText property in a try...catch

.travis.yml

@@ -9,7 +9,7 @@ addons:
   chrome: stable
   firefox: latest
 dist: trusty
-sudo: false
+sudo: true
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start

CHANGELOG.md

@@ -1,5 +1,18 @@
 ### Changelog ###
 
+#### v1.0.0-alpha.11 - 1.4.2018 ####
+ * Fix IE11 member not found error 
+ * Support blob image resources in non-foreignObjectRendering mode
+
+#### v1.0.0-alpha.10 - 15.2.2018 ####
+ * Re-introduce `onclone` option (Fix #1434)
+ * Add `ignoreElements` predicate function option
+ * Fix version console logging
+
+#### v1.0.0-alpha.9 - 7.1.2018 ####
+ * Fix dynamic style sheets
+ * Fix > 50% border-radius values
+
 #### v1.0.0-alpha.8 - 2.1.2018 ####
  * Use correct doctype in cloned Document (Fix #1298)
  * Fix individual border rendering (Fix #1349)

README.md

@@ -3,7 +3,10 @@ html2canvas
 
 [Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](http://stackoverflow.com/questions/tagged/html2canvas?sort=newest) | [Donate](https://www.gittip.com/niklasvh/)
 
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Build Status](https://travis-ci.org/niklasvh/html2canvas.svg)](https://travis-ci.org/niklasvh/html2canvas)
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 
+[![Build Status](https://travis-ci.org/niklasvh/html2canvas.svg)](https://travis-ci.org/niklasvh/html2canvas)
+[![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
+[![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
 
 #### JavaScript HTML renderer ####
 

docs/configuration.md

@@ -1,5 +1,5 @@
 ---
-title: "Configuration"
+title: "Options"
 description: "Explore the different configuration options available for html2canvas"
 previousUrl: "/getting-started"
 previousTitle: "Getting Started"
@@ -17,7 +17,9 @@ These are all of the available configuration options.
 | 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.
+| ignoreElements | `(element) => false` | Predicate function which removes the matching elements from the render.
 | logging | `true` | Enable logging for debug purposes
+| onclone | `null` | Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.
 | 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.

karma.conf.js

@@ -66,13 +66,6 @@ module.exports = function(config) {
             platform: 'iOS',
             version: '9.3',
             device: 'iPhone 6 Plus Simulator'
-        },
-        'sl_ios_8.4_safari': {
-            base: 'SauceLabs',
-            browserName: 'Safari',
-            platform: 'iOS',
-            version: '8.4',
-            device: 'iPhone 5s Simulator'
         }
     };
 

package.json

@@ -3,7 +3,7 @@
   "name": "html2canvas",
   "description": "Screenshots with JavaScript",
   "main": "dist/npm/index.js",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.11",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
@@ -65,7 +65,7 @@
     "build": "rimraf dist/ && node scripts/create-reftest-list && npm run build:npm && npm run build:browser",
     "build:npm": "babel src/ -d dist/npm/ --plugins=dev-expression,transform-es2015-modules-commonjs && replace-in-file __VERSION__ '\"$npm_package_version\"' dist/npm/index.js",
     "build:browser": "webpack",
-    "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www,tests,scripts}/**/*.js\"",
+    "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www/src,tests,scripts}/**/*.js\"",
     "flow": "flow",
     "lint": "eslint src/**",
     "test": "npm run flow && npm run lint && npm run test:node && npm run karma",

src/Bounds.js

@@ -202,40 +202,32 @@ export const parseBoundCurves = (
     borders: Array<Border>,
     borderRadius: Array<BorderRadius>
 ): BoundCurves => {
-    const HALF_WIDTH = bounds.width / 2;
-    const HALF_HEIGHT = bounds.height / 2;
-    const tlh =
-        borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
-            ? borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width)
-            : HALF_WIDTH;
-    const tlv =
-        borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
-            ? borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height)
-            : HALF_HEIGHT;
-    const trh =
-        borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
-            ? borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width)
-            : HALF_WIDTH;
-    const trv =
-        borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
-            ? borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height)
-            : HALF_HEIGHT;
-    const brh =
-        borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
-            ? borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width)
-            : HALF_WIDTH;
-    const brv =
-        borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
-            ? borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height)
-            : HALF_HEIGHT;
-    const blh =
-        borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
-            ? borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width)
-            : HALF_WIDTH;
-    const blv =
-        borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
-            ? borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height)
-            : HALF_HEIGHT;
+    let tlh = borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width);
+    let tlv = borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height);
+    let trh = borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width);
+    let trv = borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height);
+    let brh = borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width);
+    let brv = borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height);
+    let blh = borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width);
+    let blv = borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height);
+
+    const factors = [];
+    factors.push((tlh + trh) / bounds.width);
+    factors.push((blh + brh) / bounds.width);
+    factors.push((tlv + blv) / bounds.height);
+    factors.push((trv + brv) / bounds.height);
+    const maxFactor = Math.max(...factors);
+
+    if (maxFactor > 1) {
+        tlh /= maxFactor;
+        tlv /= maxFactor;
+        trh /= maxFactor;
+        trv /= maxFactor;
+        brh /= maxFactor;
+        brv /= maxFactor;
+        blh /= maxFactor;
+        blv /= maxFactor;
+    }
 
     const topWidth = bounds.width - trh;
     const rightHeight = bounds.height - brv;

src/Clone.js

@@ -229,6 +229,23 @@ export class DocumentCloner {
             return tempIframe;
         }
 
+        if (node instanceof HTMLStyleElement && node.sheet && node.sheet.cssRules) {
+            const css = [].slice.call(node.sheet.cssRules, 0).reduce((css, rule) => {
+                try {
+                    if (rule && rule.cssText) {
+                        return css + rule.cssText;
+                    }
+                    return css;
+                } catch (err) {
+                    this.logger.log('Unable to access cssText property', rule.name);
+                    return css;
+                }
+            }, '');
+            const style = node.cloneNode(false);
+            style.textContent = css;
+            return style;
+        }
+
         return node.cloneNode(false);
     }
 
@@ -259,8 +276,12 @@ export class DocumentCloner {
         for (let child = node.firstChild; child; child = child.nextSibling) {
             if (
                 child.nodeType !== Node.ELEMENT_NODE ||
-                // $FlowFixMe
-                (child.nodeName !== 'SCRIPT' && !child.hasAttribute(IGNORE_ATTRIBUTE))
+                (child.nodeName !== 'SCRIPT' &&
+                    // $FlowFixMe
+                    !child.hasAttribute(IGNORE_ATTRIBUTE) &&
+                    (typeof this.options.ignoreElements !== 'function' ||
+                        // $FlowFixMe
+                        !this.options.ignoreElements(child)))
             ) {
                 if (!this.copyStyles || child.nodeName !== 'STYLE') {
                     clone.appendChild(this.cloneNode(child));
@@ -598,14 +619,21 @@ export const cloneWindow = (
                 documentClone.documentElement.style.left = -bounds.left + 'px';
                 documentClone.documentElement.style.position = 'absolute';
             }
+
+            const result = Promise.resolve([
+                cloneIframeContainer,
+                cloner.clonedReferenceElement,
+                cloner.resourceLoader
+            ]);
+
+            const onclone = options.onclone;
+
             return cloner.clonedReferenceElement instanceof cloneWindow.HTMLElement ||
             cloner.clonedReferenceElement instanceof ownerDocument.defaultView.HTMLElement ||
             cloner.clonedReferenceElement instanceof HTMLElement
-                ? Promise.resolve([
-                      cloneIframeContainer,
-                      cloner.clonedReferenceElement,
-                      cloner.resourceLoader
-                  ])
+                ? typeof onclone === 'function'
+                  ? Promise.resolve().then(() => onclone(documentClone)).then(() => result)
+                  : result
                 : Promise.reject(
                       __DEV__
                           ? `Error finding the ${referenceElement.nodeName} in the cloned document`

src/Logger.js

@@ -7,7 +7,7 @@ export default class Logger {
     id: ?string;
 
     constructor(enabled: boolean, id: ?string, start: ?number) {
-        this.enabled = enabled;
+        this.enabled = typeof window !== 'undefined' && enabled;
         this.start = start ? start : Date.now();
         this.id = id;
     }

src/ResourceLoader.js

@@ -33,6 +33,10 @@ export default class ResourceLoader {
         if (this.hasResourceInCache(src)) {
             return src;
         }
+        if (isBlobImage(src)) {
+            this.cache[src] = loadImage(src, this.options.imageTimeout || 0);
+            return src;
+        }
 
         if (!isSVG(src) || FEATURES.SUPPORT_SVG_DRAWING) {
             if (this.options.allowTaint === true || isInlineImage(src) || this.isSameOrigin(src)) {
@@ -215,6 +219,7 @@ const INLINE_IMG = /^data:image\/.*/i;
 
 const isInlineImage = (src: string): boolean => INLINE_IMG.test(src);
 const isInlineBase64Image = (src: string): boolean => INLINE_BASE64.test(src);
+const isBlobImage = (src: string): boolean => src.substr(0, 4) === 'blob';
 
 const isSVG = (src: string): boolean =>
     src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);

src/index.js

@@ -14,8 +14,10 @@ export type Options = {
     backgroundColor: string,
     canvas: ?HTMLCanvasElement,
     foreignObjectRendering: boolean,
+    ignoreElements?: HTMLElement => boolean,
     imageTimeout: number,
     logging: boolean,
+    onclone?: Document => void,
     proxy: ?string,
     removeContainer: ?boolean,
     scale: number,
@@ -32,14 +34,9 @@ export type Options = {
 };
 
 const html2canvas = (element: HTMLElement, conf: ?Options): Promise<*> => {
-    // eslint-disable-next-line no-console
-    if (typeof console === 'object' && typeof console.log === 'function') {
-        // eslint-disable-next-line no-console
-        console.log(`html2canvas ${__VERSION__}`);
-    }
-
     const config = conf || {};
     const logger = new Logger(typeof config.logging === 'boolean' ? config.logging : true);
+    logger.log(`html2canvas ${__VERSION__}`);
 
     if (__DEV__ && typeof config.onrendered === 'function') {
         logger.error(

src/renderer/CanvasRenderer.js

@@ -250,7 +250,7 @@ export default class CanvasRenderer implements RenderTarget<HTMLCanvasElement> {
                             const {baseline} = this.options.fontMetrics.getMetrics(font);
                             this.rectangle(
                                 text.bounds.left,
-                                Math.round(text.bounds.top + text.bounds.height - baseline),
+                                Math.round(text.bounds.top + baseline),
                                 text.bounds.width,
                                 1,
                                 textDecorationColor

tests/reftests/border/radius.html

@@ -5,7 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="../../test.js"></script>
     <style type="text/css">
-      div {
+      .box {
         width: 200px;
         height: 200px;
         display: inline-block;
@@ -63,6 +63,21 @@
         border-radius: 200px;
       }
 
+      .gauge{
+          display: inline-block;
+          width: 100px;
+          height: 50px;
+          background: green;
+          margin-bottom: 20px;
+      }
+
+       .gauge1{ border-radius: 25px 25px 0 0   / 25px 25px 0 0; }
+       .gauge2{ border-radius: 100px 100px 0 0 / 50px 50px 0 0; }
+       .gauge3{ border-radius: 100px 100px 0 0 / 100px 100px 0 0; }
+       .gauge4{ border-radius: 300px 100px 0 0  / 100px 100px 0 0; }
+       .gauge5{ border-radius: 400px 400px 50px 50px / 50px 50px 50px 50px; }
+
+
       html {
         background: #3a84c3;
       }
@@ -70,11 +85,16 @@
   </head>
   <body>
 
-    <div class="box1">&nbsp;</div>
-    <div class="box2">&nbsp;</div>
-    <div class="box3">&nbsp;</div>
-    <div class="box4">&nbsp;</div>
-    <div class="box5">&nbsp;</div>
-    <div class="box6">&nbsp;</div>
+    <div class="box box1">&nbsp;</div>
+    <div class="box box2">&nbsp;</div>
+    <div class="box box3">&nbsp;</div>
+    <div class="box box4">&nbsp;</div>
+    <div class="box box5">&nbsp;</div>
+    <div class="box box6">&nbsp;</div>
+    <div class="gauge gauge1"></div>
+    <div class="gauge gauge2"></div>
+    <div class="gauge gauge3"></div>
+    <div class="gauge gauge4"></div>
+    <div class="gauge gauge5"></div>
   </body>
 </html>

tests/reftests/dynamicstyle.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Dynamic style</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../test.js"></script>
+    <style id="style">
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
+            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+        }
+        body { font-family: "Roboto", serif }
+
+        div {
+            padding: 20px;
+        }
+        .div1 {
+            background: darkred;
+            color: white;
+        }
+        @media (min-width: 10px) {
+            .div1 {
+                background: darkgreen;
+            }
+        }
+    </style>
+    <script>
+        document.querySelector('#style').sheet.insertRule(
+            '.div2 { background: darkgreen; color:white; }',
+            document.querySelector('#style').sheet.cssRules.length
+        );
+    </script>
+</head>
+<body>
+<div class="div1">Static styles</div>
+<div class="div2">Dynamic styles</div>
+</body>
+</html>
+

tests/reftests/options/ignore.html

@@ -4,7 +4,9 @@
     <title>element render test</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script>
-
+        h2cOptions = {ignoreElements: function(element) {
+            return element.className === 'ignored';
+        }};
     </script>
     <script type="text/javascript" src="../../test.js"></script>
     <style>
@@ -15,7 +17,7 @@
             background: green;
         }
 
-        #ignored {
+        #ignored, .ignored {
             background: red;
             width: 100px;
             height: 100px;
@@ -32,10 +34,11 @@
 <div id="ignored" data-html2canvas-ignore>
     great failure
 </div>
+<div class="ignored">
+    ignore predicate
+</div>
 <div id="div1">
     great success
 </div>
-
-
 </body>
 </html>

tests/reftests/options/onclone.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>element render test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script>
+        h2cOptions = {onclone: function(document) {
+            const remove = document.querySelector('.ignored');
+            remove.parentNode.removeChild(remove);
+        }};
+    </script>
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        #div1 {
+
+            width: 100px;
+            height: 100px;
+            background: green;
+        }
+
+        #ignored, .ignored {
+            background: red;
+            width: 100px;
+            height: 100px;
+        }
+
+        body, html {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+
+</head>
+<body>
+<div class="ignored">
+    ignore during onclone
+</div>
+<div id="div1">
+    great success
+</div>
+</body>
+</html>

www/package-lock.json

@@ -2684,6 +2684,14 @@
         "hyphenate-style-name": "1.0.2"
       }
     },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "requires": {
+        "base64-arraybuffer": "0.1.5"
+      }
+    },
     "css-loader": {
       "version": "0.26.4",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.26.4.tgz",
@@ -4895,11 +4903,11 @@
       "integrity": "sha1-nSLgyjKsyVs/RbjVtPb73AWv/VU="
     },
     "html2canvas": {
-      "version": "1.0.0-alpha.4",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.4.tgz",
-      "integrity": "sha1-t1Q+6kUkAHitGEesk5CBpXUYCho=",
+      "version": "1.0.0-alpha.9",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.9.tgz",
+      "integrity": "sha1-/2A9gINa/rbCdm6GEEdooc7xyAE=",
       "requires": {
-        "punycode": "2.1.0"
+        "css-line-break": "1.0.1"
       }
     },
     "htmlparser2": {

www/package.json

@@ -18,7 +18,7 @@
     "gatsby-source-filesystem": "^1.5.9",
     "gatsby-transformer-remark": "^1.7.23",
     "gzip-size": "^4.1.0",
-    "html2canvas": "1.0.0-alpha.4",
+    "html2canvas": "^1.0.0-alpha.9",
     "mkdirp": "^0.5.1",
     "typography": "^0.16.6",
     "typography-theme-github": "^0.15.10"
@@ -28,7 +28,7 @@
   "scripts": {
     "copybuild": "mkdirp public/dist && cpy ../dist/*.js public/dist",
     "build": "npm run copybuild && gatsby build",
-    "develop": "gatsby develop",
+    "start": "gatsby develop",
     "test": "echo \"Error: no test specified\" && exit 1"
   }
 }

www/src/components/footer.js

@@ -4,14 +4,25 @@ export default () =>
     <footer
         css={{
             backgroundColor: '#558b2f',
-            color: 'rgba(255,255,255,0.8)',
+            color: 'rgba(255,255,255, 0.8)',
             fontWeight: 300,
             minHeight: '50px',
             lineHeight: '50px',
             padding: '10px 0px'
         }}
     >
-        <div css={{margin: '0 auto', width: '85%'}}>
+        <div
+            css={{
+                margin: '0 auto',
+                fontSize: '10.5px',
+                textAlign: 'center',
+                '@media(min-width: 1000px)': {
+                    textAlign: 'left',
+                    width: '85%',
+                    fontSize: '14.5px'
+                }
+            }}
+        >
             Created by{' '}
             <a href="https://hertzen.com" css={{color: '#fff', fontWeight: 'bold'}}>
                 Niklas von Hertzen

www/src/components/navigation.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {Component} from 'react';
 import Link from 'gatsby-link';
 import logo from '../images/logo.svg';
+import menu from '../images/ic_menu_black_24px.svg';
 
 const lineLinkStyle = {
     lineHeight: '44px',
@@ -16,15 +17,17 @@ const lineLinkStyle = {
 };
 
 const navStyle = {
-    height: '100%',
-    width: '300px',
-    position: 'fixed',
-    top: 0,
-    left: 0,
+    '@media(min-width: 1000px)': {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '300px',
+        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)',
+        height: '100%'
+    },
     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)'
+    backgroundColor: '#fff'
 };
 
 const links = [
@@ -36,31 +39,70 @@ const links = [
     {href: '/faq', text: 'FAQ'}
 ];
 
-export default () =>
-    <div css={navStyle}>
-        <Link to="/" css={{background: '#558b2f', display: 'block', padding: '24px 30px 24px'}}>
-            <img src={logo} css={{margin: 0}} />
-        </Link>
-        <ul
-            style={{
-                listStyle: 'none',
-                margin: 0,
-                padding: 0
-            }}
-        >
-            {links.map(({href, text}, i) =>
-                <li style={{padding: 0, margin: 0}} key={i}>
-                    <Link
-                        to={href}
-                        css={lineLinkStyle}
-                        activeStyle={{
-                            backgroundColor: '#7cb342',
-                            color: '#fff'
+export default class Navigation extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {open: false};
+    }
+    render() {
+        return (
+            <div css={navStyle}>
+                <div
+                    css={{
+                        background: '#558b2f',
+                        alignItems: 'center',
+                        padding: '24px 30px 24px 0px',
+                        display: 'flex',
+                        '@media(min-width: 1000px)': {
+                            padding: '24px 30px 24px 30px'
+                        }
+                    }}
+                >
+                    <img
+                        src={menu}
+                        onClick={() => this.setState(s => ({open: !s.open}))}
+                        css={{
+                            width: '50px',
+                            cursor: 'pointer',
+                            margin: '0 20px 0',
+                            display: 'block',
+                            '@media(min-width: 1000px)': {
+                                display: 'none'
+                            }
                         }}
-                    >
-                        {text}
+                    />
+                    <Link to="/">
+                        <img src={logo} css={{margin: 0}} />
                     </Link>
-                </li>
-            )}
-        </ul>
-    </div>;
+                </div>
+
+                <ul
+                    css={{
+                        display: this.state.open ? 'block' : 'none',
+                        listStyle: 'none',
+                        margin: 0,
+                        padding: 0,
+                        '@media(min-width: 1000px)': {
+                            display: 'block'
+                        }
+                    }}
+                >
+                    {links.map(({href, text}, i) =>
+                        <li style={{padding: 0, margin: 0}} key={i}>
+                            <Link
+                                to={href}
+                                css={lineLinkStyle}
+                                activeStyle={{
+                                    backgroundColor: '#7cb342',
+                                    color: '#fff'
+                                }}
+                            >
+                                {text}
+                            </Link>
+                        </li>
+                    )}
+                </ul>
+            </div>
+        );
+    }
+}

www/src/images/ic_menu_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="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>

www/src/layouts/index.css

@@ -36,9 +36,22 @@ table {
     border: 1px solid #ddd;
 }
 
+table tr:nth-child(odd) {
+    background-color: #f9f9f9;
+}
+
 th {
     padding: 8px;
     border: 1px solid #ddd;
+    border-bottom-width: 2px;
+}
+
+td {
+    padding: 8px;
+}
+
+th:first-child, td:first-child {
+    padding-left: 8px;
 }
 
 :not(pre) > code {

www/src/pages/index.js

@@ -55,8 +55,24 @@ export default ({data}) => {
                         Screenshots with JavaScript
                     </h4>
 
-                    <div css={{display: 'flex', justifyContent: 'center'}}>
-                        <div>
+                    <div
+                        css={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            flexDirection: 'column',
+                            '@media(min-width: 1000px)': {
+                                flexDirection: 'row'
+                            }
+                        }}
+                    >
+                        <div
+                            css={{
+                                display: 'none',
+                                '@media(min-width: 1000px)': {
+                                    display: 'block'
+                                }
+                            }}
+                        >
                             <h4>HTML</h4>
                             <div
                                 css={{marginRight: '5px'}}
@@ -70,7 +86,14 @@ export default ({data}) => {
                                 }}
                             />
                         </div>
-                        <div>
+                        <div
+                            css={{
+                                display: 'none',
+                                '@media(min-width: 1000px)': {
+                                    display: 'block'
+                                }
+                            }}
+                        >
                             <h4>JavaScript</h4>
                             <div
                                 css={{marginLeft: '5px'}}
@@ -101,14 +124,25 @@ export default ({data}) => {
                             Documentation
                         </Link>
                     </div>
-                    <div css={{display: 'flex'}}>
+                    <div
+                        css={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            '@media(min-width: 1000px)': {
+                                flexDirection: 'row'
+                            }
+                        }}
+                    >
                         <div
                             css={{
                                 flex: 1,
                                 backgroundColor: '#558b2f',
                                 padding: '10px 20px',
                                 borderRadius: '10px',
-                                marginRight: '5px'
+                                marginBottom: '10px',
+                                '@media(min-width: 1000px)': {
+                                    marginRight: '5px'
+                                }
                             }}
                         >
                             <Carbon />
@@ -116,12 +150,16 @@ export default ({data}) => {
                         <div
                             css={{
                                 flex: 1,
-                                marginLeft: '5px',
+
                                 backgroundColor: '#558b2f',
                                 padding: '10px 20px',
                                 borderRadius: '10px',
                                 textAlign: 'left',
-                                marginRight: '5px'
+                                marginBottom: '10px',
+                                '@media(min-width: 1000px)': {
+                                    marginLeft: '5px',
+                                    marginRight: '5px'
+                                }
                             }}
                         >
                             <h6>Install NPM</h6>
@@ -143,11 +181,14 @@ export default ({data}) => {
                         <div
                             css={{
                                 flex: 1,
-                                marginLeft: '5px',
                                 backgroundColor: '#558b2f',
                                 padding: '10px 20px',
                                 borderRadius: '10px',
-                                textAlign: 'left'
+                                textAlign: 'left',
+                                marginBottom: '10px',
+                                '@media(min-width: 1000px)': {
+                                    marginLeft: '5px'
+                                }
                             }}
                         >
                             <h5>Connect</h5>

www/src/templates/docs.js

@@ -19,7 +19,9 @@ export default ({data}) => {
             <Navigation />
             <div
                 css={{
-                    marginLeft: '300px',
+                    '@media(min-width: 1000px)': {
+                        marginLeft: '300px'
+                    },
                     display: 'flex',
                     minHeight: '100vh',
                     flexDirection: 'column'
@@ -37,10 +39,23 @@ export default ({data}) => {
                     <div css={{maxWidth: '960px'}}>
                         <div css={{width: '85%', margin: '0 auto', display: 'flex'}}>
                             <div css={{flex: 1}}>
-                                <h1 css={{padding: '20px 0'}}>
+                                <h1
+                                    css={{
+                                        padding: '20px 0',
+                                        fontSize: '2.8rem',
+                                        '@media(min-width: 1000px)': {fontSize: '4.2rem'}
+                                    }}
+                                >
                                     {post.frontmatter.title}
                                 </h1>
-                                <h4 css={{fontWeight: 300, color: 'rgba(255, 255, 255, 0.6)'}}>
+                                <h4
+                                    css={{
+                                        fontWeight: 300,
+                                        color: 'rgba(255, 255, 255, 0.6)',
+                                        fontSize: '1.8rem',
+                                        '@media(min-width: 1000px)': {fontSize: '2.28rem'}
+                                    }}
+                                >
                                     {post.frontmatter.description}
                                 </h4>
                             </div>