Make website responsive

tests/reftests/dynamicstyle.html

@@ -18,9 +18,14 @@
             padding: 20px;
         }
         .div1 {
-            background: darkgreen;
+            background: darkred;
             color: white;
         }
+        @media (min-width: 10px) {
+            .div1 {
+                background: darkgreen;
+            }
+        }
     </style>
     <script>
         document.querySelector('#style').sheet.insertRule(

www/package.json

@@ -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/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%',
+    '@media(min-width: 1000px)': {
-    width: '300px',
         position: 'fixed',
         top: 0,
         left: 0,
-    fontSize: '13px',
+        width: '300px',
-    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)'
+            '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'
 };
 
 const links = [
@@ -36,16 +39,52 @@ const links = [
     {href: '/faq', text: 'FAQ'}
 ];
 
-export default () =>
+export default class Navigation extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {open: false};
+    }
+    render() {
+        return (
             <div css={navStyle}>
-        <Link to="/" css={{background: '#558b2f', display: 'block', padding: '24px 30px 24px'}}>
+                <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'
+                            }
+                        }}
+                    />
+                    <Link to="/">
                         <img src={logo} css={{margin: 0}} />
                     </Link>
+                </div>
+
                 <ul
-            style={{
+                    css={{
+                        display: this.state.open ? 'block' : 'none',
                         listStyle: 'none',
                         margin: 0,
-                padding: 0
+                        padding: 0,
+                        '@media(min-width: 1000px)': {
+                            display: 'block'
+                        }
                     }}
                 >
                     {links.map(({href, text}, i) =>
@@ -63,4 +102,7 @@ export default () =>
                         </li>
                     )}
                 </ul>
-    </div>;
+            </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/pages/index.js

@@ -55,7 +55,16 @@ export default ({data}) => {
                         Screenshots with JavaScript
                     </h4>
 
-                    <div css={{display: 'flex', justifyContent: 'center'}}>
+                    <div
+                        css={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            flexDirection: 'column',
+                            '@media(min-width: 1000px)': {
+                                flexDirection: 'row'
+                            }
+                        }}
+                    >
                         <div>
                             <h4>HTML</h4>
                             <div
@@ -101,14 +110,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',
+                                marginBottom: '10px',
+                                '@media(min-width: 1000px)': {
                                     marginRight: '5px'
+                                }
                             }}
                         >
                             <Carbon />
@@ -116,12 +136,16 @@ export default ({data}) => {
                         <div
                             css={{
                                 flex: 1,
-                                marginLeft: '5px',
+
                                 backgroundColor: '#558b2f',
                                 padding: '10px 20px',
                                 borderRadius: '10px',
                                 textAlign: 'left',
+                                marginBottom: '10px',
+                                '@media(min-width: 1000px)': {
+                                    marginLeft: '5px',
                                     marginRight: '5px'
+                                }
                             }}
                         >
                             <h6>Install NPM</h6>
@@ -143,11 +167,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>