├── gatsby-config.js
├── src
    ├── pages
    │   ├── 404.js
    │   ├── thanks.js
    │   ├── index.js
    │   ├── contact.js
    │   ├── file-upload.js
    │   └── recaptcha.js
    ├── html.js
    ├── layouts
    │   └── index.js
    └── css
    │   └── typography.css
├── .gitignore
├── package.json
├── .travis.yml
├── LICENSE
└── README.md


/gatsby-config.js:
--------------------------------------------------------------------------------
1 | 
2 | module.exports = {
3 |   siteMetadata: {
4 |     title: `Gatsby Netlify Form Integration`
5 |   },
6 |   plugins: [`gatsby-plugin-react-helmet`]
7 | };
8 | 


--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | 
3 | export default () =>
4 |   <div>
5 |     <h1>NOT FOUND</h1>
6 |     <p>You just hit a route that doesn't exist... the sadness.</p>
7 |   </div>
8 | 


--------------------------------------------------------------------------------
/src/pages/thanks.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export default () => (
4 |   <div>
5 |     <h1>Thank you!</h1>
6 |     <p>This is a custom thank you page for form submissions</p>
7 |   </div>
8 | );
9 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Link from "gatsby-link";
 3 | import Helmet from "react-helmet";
 4 | 
 5 | export default class Index extends React.Component {
 6 |   render() {
 7 |     return (
 8 |       <div>
 9 |         <h1>Hi people</h1>
10 |         <p>
11 |           This is an example site integrating Netlify’s form handling with Gatsby
12 |         </p>
13 |         <ul>
14 |           <li><Link to="/contact/">Basic contact form</Link></li>
15 |           <li><Link to="/file-upload/">Form with file upload</Link></li>
16 |           <li><Link to="/recaptcha/">Form with reCAPTCHA 2</Link></li>
17 |         </ul>
18 |       </div>
19 |     );
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | .gatsby-context.js
29 | .sass-cache/
30 | public/
31 | .cache/
32 | .DS_Store
33 | 
34 | # Environment variables
35 | .env.development
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gatsby-starter-default",
 3 |   "description": "Gatsby default starter",
 4 |   "version": "1.0.0",
 5 |   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
 6 |   "dependencies": {
 7 |     "gatsby": "^1.9.261",
 8 |     "gatsby-link": "^1.0.1",
 9 |     "gatsby-plugin-react-helmet": "^1.0.1",
10 |     "react-async-script": "^0.9.1",
11 |     "react-google-recaptcha": "^0.11.1"
12 |   },
13 |   "devDependencies": {
14 |     "dotenv": "^5.0.1",
15 |     "gh-pages": "^0.12.0"
16 |   },
17 |   "keywords": [
18 |     "gatsby"
19 |   ],
20 |   "license": "MIT",
21 |   "main": "n/a",
22 |   "scripts": {
23 |     "build": "gatsby build",
24 |     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
25 |     "develop": "gatsby develop",
26 |     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"pages/*.js\" \"utils/*.js\" \"wrappers/*.js\" \"html.js\"",
27 |     "test": "echo \"Error: no test specified\" && exit 1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | # back to language cpp to try to bypass osx node failure
 2 | language: cpp
 3 | sudo: false
 4 | env:
 5 |   - export NODE_VERSION="0.12"
 6 |   - export NODE_VERSION="4"
 7 |   - export NODE_VERSION="5"
 8 | os:
 9 |   - linux
10 |   - osx
11 | # pre-install to bring in the correct version of node via nvm
12 | before_install:
13 |   - git submodule update --init --recursive
14 |   - git clone https://github.com/creationix/nvm.git ./.nvm
15 |   - source ./.nvm/nvm.sh
16 |   - nvm install $NODE_VERSION
17 |   - nvm use $NODE_VERSION
18 |   - npm config set python `which python`
19 |   - if [ $TRAVIS_OS_NAME == "linux" ]; then
20 |       export CC="gcc-4.8";
21 |       export CXX="g++-4.8";
22 |       export LINK="gcc-4.8";
23 |       export LINKXX="g++-4.8";
24 |     fi
25 |   - gcc --version
26 |   - g++ --version
27 | # node 4 depends on gcc 4.8
28 | addons:
29 |   apt:
30 |     sources:
31 |     - ubuntu-toolchain-r-test
32 |     packages:
33 |     - g++-4.8
34 |     - gcc-4.8
35 | # script needed to test, because defaults don't work on osx
36 | script:
37 |   - npm install
38 |   - npm run lint
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 gatsbyjs
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/src/html.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import PropTypes from "prop-types"
 3 | 
 4 | const BUILD_TIME = new Date().getTime()
 5 | 
 6 | export default class HTML extends React.Component {
 7 |   static propTypes = {
 8 |     body: PropTypes.string,
 9 |   }
10 | 
11 |   render() {
12 |     let css
13 |     if (process.env.NODE_ENV === "production") {
14 |       css = (
15 |         <style
16 |           dangerouslySetInnerHTML={{
17 |             __html: require("!raw!../public/styles.css"),
18 |           }}
19 |         />
20 |       )
21 |     }
22 | 
23 |     return (
24 |       <html lang="en">
25 |         <head>
26 |           <meta charSet="utf-8" />
27 |           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
28 |           <meta
29 |             name="viewport"
30 |             content="width=device-width, initial-scale=1.0"
31 |           />
32 |           {this.props.headComponents}
33 |           {css}
34 |         </head>
35 |         <body>
36 |           <div
37 |             id="___gatsby"
38 |             dangerouslySetInnerHTML={{ __html: this.props.body }}
39 |           />
40 |           {this.props.postBodyComponents}
41 |         </body>
42 |       </html>
43 |     )
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/layouts/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import PropTypes from "prop-types"
 3 | import Link from "gatsby-link"
 4 | import Helmet from "react-helmet"
 5 | 
 6 | import "../css/typography.css"
 7 | 
 8 | export default class Template extends React.Component {
 9 |   static propTypes = {
10 |     children: PropTypes.func,
11 |   }
12 | 
13 |   render() {
14 |     return (
15 |       <div>
16 |         <Helmet
17 |           title="Gatsby Default Starter"
18 |           meta={[
19 |             { name: "description", content: "Sample" },
20 |             { name: "keywords", content: "sample, something" },
21 |           ]}
22 |         />
23 |         <div
24 |           style={{
25 |             background: `rebeccapurple`,
26 |             marginBottom: `1.45rem`,
27 |           }}
28 |         >
29 |           <div
30 |             style={{
31 |               margin: `0 auto`,
32 |               maxWidth: 960,
33 |               padding: `1.45rem 1.0875rem`,
34 |             }}
35 |           >
36 |             <h1 style={{ margin: 0 }}>
37 |               <Link
38 |                 to="/"
39 |                 style={{
40 |                   color: "white",
41 |                   textDecoration: "none",
42 |                 }}
43 |               >
44 |                 Gatsby
45 |               </Link>
46 |             </h1>
47 |           </div>
48 |         </div>
49 |         <div
50 |           style={{
51 |             margin: `0 auto`,
52 |             maxWidth: 960,
53 |             padding: `0px 1.0875rem 1.45rem`,
54 |             paddingTop: 0,
55 |           }}
56 |         >
57 |           {this.props.children()}
58 |         </div>
59 |       </div>
60 |     )
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Integrating Netlify Form Handling in Gatsby
 2 | 
 3 | Example for integrating a basic contact form with Netlify’s form handling feature (based on the [default Gatsby starter](https://github.com/gatsbyjs/gatsby-starter-default))
 4 | 
 5 | Demo: https://gatsby-form-example.netlify.com
 6 | 
 7 | ## Deploy
 8 | 
 9 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/imorente/gatsby-netlify-form-example)
10 | 
11 | ## reCAPTCHA
12 | 
13 | This example site uses [react-google-recaptcha](https://github.com/dozoisch/react-google-recaptcha) to render the reCAPTCHA widget.
14 | 
15 | To make the reCAPTCHA example work in your own copy of this site, you’ll need to do the following:
16 | 1. [Sign up for a reCAPTCHA API key pair](http://www.google.com/recaptcha/admin) for your site.
17 | 2. [Log in to your Netlify account](https://app.netlify.com), and add the following
18 | environment variables to your site’s Settings > Build & deploy > Build environment variables:
19 |   - `SITE_RECAPTCHA_KEY` with your reCAPTCHA site key.
20 |   - `SITE_RECAPTCHA_SECRET` with your reCAPTCHA secret key.
21 | 
22 | **Important**: the environment variables need to be called `SITE_RECAPTCHA_KEY` and `SITE_RECAPTCHA_SECRET` for the Netlify backend to find them. If you add a `GATSBY_` prefix to the variable names, the Netlify backend won't recognize them, the reCAPTCHA verification will fail, and your form submissions won't be stored.
23 | 
24 | 3. Change the build command for your site to
25 | ```
26 | echo SITE_RECAPTCHA_KEY=$SITE_RECAPTCHA_KEY >> .env.production && gatsby build
27 | ```
28 | This will make the SITE_RECAPTCHA_KEY available to the Gatsby build in production.
29 | 
30 | To see the reCAPTCHA widget locally, add `SITE_RECAPTCHA_KEY=your-reCAPTCHA-API-site-key`
31 | to your local [.env.development](https://www.gatsbyjs.org/docs/environment-variables/) file.
32 | 
33 | ## Troubleshooting
34 | 
35 | ### Forms stop working after upgrading to Gatsby v2
36 | This can be caused by the offline-plugin. [Workaround](https://github.com/gatsbyjs/gatsby/issues/7997#issuecomment-419749232) is to use `?no-cache=1` in the POST url to prevent the service worker from handling form submissions (Thanks to [@phmu_office](https://twitter.com/phmu_office/status/1047810173417472000) for the heads up ✨)
37 | 


--------------------------------------------------------------------------------
/src/pages/contact.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { navigateTo } from "gatsby-link";
 3 | 
 4 | function encode(data) {
 5 |   return Object.keys(data)
 6 |     .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
 7 |     .join("&");
 8 | }
 9 | 
10 | export default class Contact extends React.Component {
11 |   constructor(props) {
12 |     super(props);
13 |     this.state = {};
14 |   }
15 | 
16 |   handleChange = e => {
17 |     this.setState({ [e.target.name]: e.target.value });
18 |   };
19 | 
20 |   handleSubmit = e => {
21 |     e.preventDefault();
22 |     const form = e.target;
23 |     fetch("/", {
24 |       method: "POST",
25 |       headers: { "Content-Type": "application/x-www-form-urlencoded" },
26 |       body: encode({
27 |         "form-name": form.getAttribute("name"),
28 |         ...this.state
29 |       })
30 |     })
31 |       .then(() => navigateTo(form.getAttribute("action")))
32 |       .catch(error => alert(error));
33 |   };
34 | 
35 |   render() {
36 |     return (
37 |       <div>
38 |         <h1>Contact</h1>
39 |         <form
40 |           name="contact"
41 |           method="post"
42 |           action="/thanks/"
43 |           data-netlify="true"
44 |           data-netlify-honeypot="bot-field"
45 |           onSubmit={this.handleSubmit}
46 |         >
47 |           {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
48 |           <input type="hidden" name="form-name" value="contact" />
49 |           <p hidden>
50 |             <label>
51 |               Don’t fill this out:{" "}
52 |               <input name="bot-field" onChange={this.handleChange} />
53 |             </label>
54 |           </p>
55 |           <p>
56 |             <label>
57 |               Your name:<br />
58 |               <input type="text" name="name" onChange={this.handleChange} />
59 |             </label>
60 |           </p>
61 |           <p>
62 |             <label>
63 |               Your email:<br />
64 |               <input type="email" name="email" onChange={this.handleChange} />
65 |             </label>
66 |           </p>
67 |           <p>
68 |             <label>
69 |               Message:<br />
70 |               <textarea name="message" onChange={this.handleChange} />
71 |             </label>
72 |           </p>
73 |           <p>
74 |             <button type="submit">Send</button>
75 |           </p>
76 |         </form>
77 |       </div>
78 |     );
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/src/pages/file-upload.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Link from "gatsby-link";
 3 | import Helmet from "react-helmet";
 4 | import { navigateTo } from "gatsby-link";
 5 | 
 6 | function encode(data) {
 7 |   const formData = new FormData();
 8 | 
 9 |   for (const key of Object.keys(data)) {
10 |     formData.append(key, data[key]);
11 |   }
12 | 
13 |   return formData;
14 | }
15 | 
16 | export default class Contact extends React.Component {
17 |   constructor(props) {
18 |     super(props);
19 |     this.state = {};
20 |   }
21 | 
22 |   handleChange = e => {
23 |     this.setState({ [e.target.name]: e.target.value });
24 |   };
25 | 
26 |   handleAttachment = e => {
27 |     this.setState({ [e.target.name]: e.target.files[0] });
28 |   };
29 | 
30 |   handleSubmit = e => {
31 |     e.preventDefault();
32 |     const form = e.target;
33 |     fetch("/", {
34 |       method: "POST",
35 |       body: encode({
36 |         "form-name": form.getAttribute("name"),
37 |         ...this.state
38 |       })
39 |     })
40 |       .then(() => navigateTo(form.getAttribute("action")))
41 |       .catch(error => alert(error));
42 |   };
43 | 
44 |   render() {
45 |     return (
46 |       <div>
47 |         <h1>File Upload</h1>
48 |         <form
49 |           name="file-upload"
50 |           method="post"
51 |           action="/thanks/"
52 |           data-netlify="true"
53 |           data-netlify-honeypot="bot-field"
54 |           onSubmit={this.handleSubmit}
55 |         >
56 |           {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
57 |           <input type="hidden" name="form-name" value="file-upload" />
58 |           <p hidden>
59 |             <label>
60 |               Don’t fill this out:{" "}
61 |               <input name="bot-field" onChange={this.handleChange} />
62 |             </label>
63 |           </p>
64 |           <p>
65 |             <label>
66 |               Your name:<br />
67 |               <input type="text" name="name" onChange={this.handleChange} />
68 |             </label>
69 |           </p>
70 |           <p>
71 |             <label>
72 |               File:<br />
73 |               <input
74 |                 type="file"
75 |                 name="attachment"
76 |                 onChange={this.handleAttachment}
77 |               />
78 |             </label>
79 |           </p>
80 |           <p>
81 |             <button type="submit">Send</button>
82 |           </p>
83 |         </form>
84 |       </div>
85 |     );
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/src/pages/recaptcha.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { navigateTo } from "gatsby-link";
 3 | import Recaptcha from "react-google-recaptcha";
 4 | 
 5 | const RECAPTCHA_KEY = process.env.SITE_RECAPTCHA_KEY;
 6 | 
 7 | function encode(data) {
 8 |   return Object.keys(data)
 9 |     .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
10 |     .join("&");
11 | }
12 | 
13 | export default class Contact extends React.Component {
14 |   constructor(props) {
15 |     super(props);
16 |     this.state = {};
17 |   }
18 | 
19 |   handleChange = e => {
20 |     this.setState({ [e.target.name]: e.target.value });
21 |   };
22 | 
23 |   handleRecaptcha = value => {
24 |     this.setState({ "g-recaptcha-response": value });
25 |   };
26 | 
27 |   handleSubmit = e => {
28 |     e.preventDefault();
29 |     const form = e.target;
30 |     fetch("/", {
31 |       method: "POST",
32 |       headers: { "Content-Type": "application/x-www-form-urlencoded" },
33 |       body: encode({
34 |         "form-name": form.getAttribute("name"),
35 |         ...this.state
36 |       })
37 |     })
38 |       .then(() => navigateTo(form.getAttribute("action")))
39 |       .catch(error => alert(error));
40 |   };
41 | 
42 |   render() {
43 |     return (
44 |       <div>
45 |         <h1>reCAPTCHA 2</h1>
46 |         <form
47 |           name="contact-recaptcha"
48 |           method="post"
49 |           action="/thanks/"
50 |           data-netlify="true"
51 |           data-netlify-recaptcha="true"
52 |           onSubmit={this.handleSubmit}
53 |         >
54 |           <noscript>
55 |             <p>This form won’t work with Javascript disabled</p>
56 |           </noscript>
57 |           <p>
58 |             <label>
59 |               Your name:<br />
60 |               <input type="text" name="name" onChange={this.handleChange} />
61 |             </label>
62 |           </p>
63 |           <p>
64 |             <label>
65 |               Your email:<br />
66 |               <input type="email" name="email" onChange={this.handleChange} />
67 |             </label>
68 |           </p>
69 |           <p>
70 |             <label>
71 |               Message:<br />
72 |               <textarea name="message" onChange={this.handleChange} />
73 |             </label>
74 |           </p>
75 |           <Recaptcha
76 |             ref="recaptcha"
77 |             sitekey={RECAPTCHA_KEY}
78 |             onChange={this.handleRecaptcha}
79 |           />
80 |           <p>
81 |             <button type="submit">Send</button>
82 |           </p>
83 |         </form>
84 |       </div>
85 |     );
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/src/css/typography.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: sans-serif;
  3 |   -ms-text-size-adjust: 100%;
  4 |   -webkit-text-size-adjust: 100%;
  5 | }
  6 | body {
  7 |   margin: 0;
  8 | }
  9 | article,
 10 | aside,
 11 | details,
 12 | figcaption,
 13 | figure,
 14 | footer,
 15 | header,
 16 | main,
 17 | menu,
 18 | nav,
 19 | section,
 20 | summary {
 21 |   display: block;
 22 | }
 23 | audio,
 24 | canvas,
 25 | progress,
 26 | video {
 27 |   display: inline-block;
 28 | }
 29 | audio:not([controls]) {
 30 |   display: none;
 31 |   height: 0;
 32 | }
 33 | progress {
 34 |   vertical-align: baseline;
 35 | }
 36 | [hidden],
 37 | template {
 38 |   display: none;
 39 | }
 40 | a {
 41 |   background-color: transparent;
 42 |   -webkit-text-decoration-skip: objects;
 43 | }
 44 | a:active,
 45 | a:hover {
 46 |   outline-width: 0;
 47 | }
 48 | abbr[title] {
 49 |   border-bottom: none;
 50 |   text-decoration: underline;
 51 |   text-decoration: underline dotted;
 52 | }
 53 | b,
 54 | strong {
 55 |   font-weight: inherit;
 56 |   font-weight: bolder;
 57 | }
 58 | dfn {
 59 |   font-style: italic;
 60 | }
 61 | h1 {
 62 |   font-size: 2em;
 63 |   margin: .67em 0;
 64 | }
 65 | mark {
 66 |   background-color: #ff0;
 67 |   color: #000;
 68 | }
 69 | small {
 70 |   font-size: 80%;
 71 | }
 72 | sub,
 73 | sup {
 74 |   font-size: 75%;
 75 |   line-height: 0;
 76 |   position: relative;
 77 |   vertical-align: baseline;
 78 | }
 79 | sub {
 80 |   bottom: -.25em;
 81 | }
 82 | sup {
 83 |   top: -.5em;
 84 | }
 85 | img {
 86 |   border-style: none;
 87 | }
 88 | svg:not(:root) {
 89 |   overflow: hidden;
 90 | }
 91 | code,
 92 | kbd,
 93 | pre,
 94 | samp {
 95 |   font-family: monospace, monospace;
 96 |   font-size: 1em;
 97 | }
 98 | figure {
 99 |   margin: 1em 40px;
100 | }
101 | hr {
102 |   box-sizing: content-box;
103 |   height: 0;
104 |   overflow: visible;
105 | }
106 | button,
107 | input,
108 | optgroup,
109 | select,
110 | textarea {
111 |   font: inherit;
112 |   margin: 0;
113 | }
114 | optgroup {
115 |   font-weight: 700;
116 | }
117 | button,
118 | input {
119 |   overflow: visible;
120 | }
121 | button,
122 | select {
123 |   text-transform: none;
124 | }
125 | [type=reset],
126 | [type=submit],
127 | button,
128 | html [type=button] {
129 |   -webkit-appearance: button;
130 | }
131 | [type=button]::-moz-focus-inner,
132 | [type=reset]::-moz-focus-inner,
133 | [type=submit]::-moz-focus-inner,
134 | button::-moz-focus-inner {
135 |   border-style: none;
136 |   padding: 0;
137 | }
138 | [type=button]:-moz-focusring,
139 | [type=reset]:-moz-focusring,
140 | [type=submit]:-moz-focusring,
141 | button:-moz-focusring {
142 |   outline: 1px dotted ButtonText;
143 | }
144 | fieldset {
145 |   border: 1px solid silver;
146 |   margin: 0 2px;
147 |   padding: .35em .625em .75em;
148 | }
149 | legend {
150 |   box-sizing: border-box;
151 |   color: inherit;
152 |   display: table;
153 |   max-width: 100%;
154 |   padding: 0;
155 |   white-space: normal;
156 | }
157 | textarea {
158 |   overflow: auto;
159 | }
160 | [type=checkbox],
161 | [type=radio] {
162 |   box-sizing: border-box;
163 |   padding: 0;
164 | }
165 | [type=number]::-webkit-inner-spin-button,
166 | [type=number]::-webkit-outer-spin-button {
167 |   height: auto;
168 | }
169 | [type=search] {
170 |   -webkit-appearance: textfield;
171 |   outline-offset: -2px;
172 | }
173 | [type=search]::-webkit-search-cancel-button,
174 | [type=search]::-webkit-search-decoration {
175 |   -webkit-appearance: none;
176 | }
177 | ::-webkit-input-placeholder {
178 |   color: inherit;
179 |   opacity: .54;
180 | }
181 | ::-webkit-file-upload-button {
182 |   -webkit-appearance: button;
183 |   font: inherit;
184 | }
185 | html {
186 |   font: 112.5%/1.45em georgia, serif;
187 |   box-sizing: border-box;
188 |   overflow-y: scroll;
189 | }
190 | * {
191 |   box-sizing: inherit;
192 | }
193 | *:before {
194 |   box-sizing: inherit;
195 | }
196 | *:after {
197 |   box-sizing: inherit;
198 | }
199 | body {
200 |   color: hsla(0, 0%, 0%, 0.8);
201 |   font-family: georgia, serif;
202 |   font-weight: normal;
203 |   word-wrap: break-word;
204 |   font-kerning: normal;
205 |   -moz-font-feature-settings: "kern", "liga", "clig", "calt";
206 |   -ms-font-feature-settings: "kern", "liga", "clig", "calt";
207 |   -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
208 |   font-feature-settings: "kern", "liga", "clig", "calt";
209 | }
210 | img {
211 |   max-width: 100%;
212 |   margin-left: 0;
213 |   margin-right: 0;
214 |   margin-top: 0;
215 |   padding-bottom: 0;
216 |   padding-left: 0;
217 |   padding-right: 0;
218 |   padding-top: 0;
219 |   margin-bottom: 1.45rem;
220 | }
221 | h1 {
222 |   margin-left: 0;
223 |   margin-right: 0;
224 |   margin-top: 0;
225 |   padding-bottom: 0;
226 |   padding-left: 0;
227 |   padding-right: 0;
228 |   padding-top: 0;
229 |   margin-bottom: 1.45rem;
230 |   color: inherit;
231 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
232 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
233 |   font-weight: bold;
234 |   text-rendering: optimizeLegibility;
235 |   font-size: 2.25rem;
236 |   line-height: 2.9rem;
237 | }
238 | h2 {
239 |   margin-left: 0;
240 |   margin-right: 0;
241 |   margin-top: 0;
242 |   padding-bottom: 0;
243 |   padding-left: 0;
244 |   padding-right: 0;
245 |   padding-top: 0;
246 |   margin-bottom: 1.45rem;
247 |   color: inherit;
248 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
249 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
250 |   font-weight: bold;
251 |   text-rendering: optimizeLegibility;
252 |   font-size: 1.62671rem;
253 |   line-height: 2.175rem;
254 | }
255 | h3 {
256 |   margin-left: 0;
257 |   margin-right: 0;
258 |   margin-top: 0;
259 |   padding-bottom: 0;
260 |   padding-left: 0;
261 |   padding-right: 0;
262 |   padding-top: 0;
263 |   margin-bottom: 1.45rem;
264 |   color: inherit;
265 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
266 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
267 |   font-weight: bold;
268 |   text-rendering: optimizeLegibility;
269 |   font-size: 1.38316rem;
270 |   line-height: 2.175rem;
271 | }
272 | h4 {
273 |   margin-left: 0;
274 |   margin-right: 0;
275 |   margin-top: 0;
276 |   padding-bottom: 0;
277 |   padding-left: 0;
278 |   padding-right: 0;
279 |   padding-top: 0;
280 |   margin-bottom: 1.45rem;
281 |   color: inherit;
282 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
283 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
284 |   font-weight: bold;
285 |   text-rendering: optimizeLegibility;
286 |   font-size: 1rem;
287 |   line-height: 1.45rem;
288 | }
289 | h5 {
290 |   margin-left: 0;
291 |   margin-right: 0;
292 |   margin-top: 0;
293 |   padding-bottom: 0;
294 |   padding-left: 0;
295 |   padding-right: 0;
296 |   padding-top: 0;
297 |   margin-bottom: 1.45rem;
298 |   color: inherit;
299 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
300 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
301 |   font-weight: bold;
302 |   text-rendering: optimizeLegibility;
303 |   font-size: 0.85028rem;
304 |   line-height: 1.45rem;
305 | }
306 | h6 {
307 |   margin-left: 0;
308 |   margin-right: 0;
309 |   margin-top: 0;
310 |   padding-bottom: 0;
311 |   padding-left: 0;
312 |   padding-right: 0;
313 |   padding-top: 0;
314 |   margin-bottom: 1.45rem;
315 |   color: inherit;
316 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
317 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
318 |   font-weight: bold;
319 |   text-rendering: optimizeLegibility;
320 |   font-size: 0.78405rem;
321 |   line-height: 1.45rem;
322 | }
323 | hgroup {
324 |   margin-left: 0;
325 |   margin-right: 0;
326 |   margin-top: 0;
327 |   padding-bottom: 0;
328 |   padding-left: 0;
329 |   padding-right: 0;
330 |   padding-top: 0;
331 |   margin-bottom: 1.45rem;
332 | }
333 | ul {
334 |   margin-left: 1.45rem;
335 |   margin-right: 0;
336 |   margin-top: 0;
337 |   padding-bottom: 0;
338 |   padding-left: 0;
339 |   padding-right: 0;
340 |   padding-top: 0;
341 |   margin-bottom: 1.45rem;
342 |   list-style-position: outside;
343 |   list-style-image: none;
344 | }
345 | ol {
346 |   margin-left: 1.45rem;
347 |   margin-right: 0;
348 |   margin-top: 0;
349 |   padding-bottom: 0;
350 |   padding-left: 0;
351 |   padding-right: 0;
352 |   padding-top: 0;
353 |   margin-bottom: 1.45rem;
354 |   list-style-position: outside;
355 |   list-style-image: none;
356 | }
357 | dl {
358 |   margin-left: 0;
359 |   margin-right: 0;
360 |   margin-top: 0;
361 |   padding-bottom: 0;
362 |   padding-left: 0;
363 |   padding-right: 0;
364 |   padding-top: 0;
365 |   margin-bottom: 1.45rem;
366 | }
367 | dd {
368 |   margin-left: 0;
369 |   margin-right: 0;
370 |   margin-top: 0;
371 |   padding-bottom: 0;
372 |   padding-left: 0;
373 |   padding-right: 0;
374 |   padding-top: 0;
375 |   margin-bottom: 1.45rem;
376 | }
377 | p {
378 |   margin-left: 0;
379 |   margin-right: 0;
380 |   margin-top: 0;
381 |   padding-bottom: 0;
382 |   padding-left: 0;
383 |   padding-right: 0;
384 |   padding-top: 0;
385 |   margin-bottom: 1.45rem;
386 | }
387 | figure {
388 |   margin-left: 0;
389 |   margin-right: 0;
390 |   margin-top: 0;
391 |   padding-bottom: 0;
392 |   padding-left: 0;
393 |   padding-right: 0;
394 |   padding-top: 0;
395 |   margin-bottom: 1.45rem;
396 | }
397 | pre {
398 |   margin-left: 0;
399 |   margin-right: 0;
400 |   margin-top: 0;
401 |   padding-bottom: 0;
402 |   padding-left: 0;
403 |   padding-right: 0;
404 |   padding-top: 0;
405 |   margin-bottom: 1.45rem;
406 |   font-size: 0.85rem;
407 |   line-height: 1.42;
408 |   background: hsla(0, 0%, 0%, 0.04);
409 |   border-radius: 3px;
410 |   overflow: auto;
411 |   word-wrap: normal;
412 |   padding: 1.45rem;
413 | }
414 | table {
415 |   margin-left: 0;
416 |   margin-right: 0;
417 |   margin-top: 0;
418 |   padding-bottom: 0;
419 |   padding-left: 0;
420 |   padding-right: 0;
421 |   padding-top: 0;
422 |   margin-bottom: 1.45rem;
423 |   font-size: 1rem;
424 |   line-height: 1.45rem;
425 |   border-collapse: collapse;
426 |   width: 100%;
427 | }
428 | fieldset {
429 |   margin-left: 0;
430 |   margin-right: 0;
431 |   margin-top: 0;
432 |   padding-bottom: 0;
433 |   padding-left: 0;
434 |   padding-right: 0;
435 |   padding-top: 0;
436 |   margin-bottom: 1.45rem;
437 | }
438 | blockquote {
439 |   margin-left: 1.45rem;
440 |   margin-right: 1.45rem;
441 |   margin-top: 0;
442 |   padding-bottom: 0;
443 |   padding-left: 0;
444 |   padding-right: 0;
445 |   padding-top: 0;
446 |   margin-bottom: 1.45rem;
447 | }
448 | form {
449 |   margin-left: 0;
450 |   margin-right: 0;
451 |   margin-top: 0;
452 |   padding-bottom: 0;
453 |   padding-left: 0;
454 |   padding-right: 0;
455 |   padding-top: 0;
456 |   margin-bottom: 1.45rem;
457 | }
458 | noscript {
459 |   margin-left: 0;
460 |   margin-right: 0;
461 |   margin-top: 0;
462 |   padding-bottom: 0;
463 |   padding-left: 0;
464 |   padding-right: 0;
465 |   padding-top: 0;
466 |   margin-bottom: 1.45rem;
467 | }
468 | iframe {
469 |   margin-left: 0;
470 |   margin-right: 0;
471 |   margin-top: 0;
472 |   padding-bottom: 0;
473 |   padding-left: 0;
474 |   padding-right: 0;
475 |   padding-top: 0;
476 |   margin-bottom: 1.45rem;
477 | }
478 | hr {
479 |   margin-left: 0;
480 |   margin-right: 0;
481 |   margin-top: 0;
482 |   padding-bottom: 0;
483 |   padding-left: 0;
484 |   padding-right: 0;
485 |   padding-top: 0;
486 |   margin-bottom: calc(1.45rem - 1px);
487 |   background: hsla(0, 0%, 0%, 0.2);
488 |   border: none;
489 |   height: 1px;
490 | }
491 | address {
492 |   margin-left: 0;
493 |   margin-right: 0;
494 |   margin-top: 0;
495 |   padding-bottom: 0;
496 |   padding-left: 0;
497 |   padding-right: 0;
498 |   padding-top: 0;
499 |   margin-bottom: 1.45rem;
500 | }
501 | b {
502 |   font-weight: bold;
503 | }
504 | strong {
505 |   font-weight: bold;
506 | }
507 | dt {
508 |   font-weight: bold;
509 | }
510 | th {
511 |   font-weight: bold;
512 | }
513 | li {
514 |   margin-bottom: calc(1.45rem / 2);
515 | }
516 | ol li {
517 |   padding-left: 0;
518 | }
519 | ul li {
520 |   padding-left: 0;
521 | }
522 | li > ol {
523 |   margin-left: 1.45rem;
524 |   margin-bottom: calc(1.45rem / 2);
525 |   margin-top: calc(1.45rem / 2);
526 | }
527 | li > ul {
528 |   margin-left: 1.45rem;
529 |   margin-bottom: calc(1.45rem / 2);
530 |   margin-top: calc(1.45rem / 2);
531 | }
532 | blockquote *:last-child {
533 |   margin-bottom: 0;
534 | }
535 | li *:last-child {
536 |   margin-bottom: 0;
537 | }
538 | p *:last-child {
539 |   margin-bottom: 0;
540 | }
541 | li > p {
542 |   margin-bottom: calc(1.45rem / 2);
543 | }
544 | code {
545 |   font-size: 0.85rem;
546 |   line-height: 1.45rem;
547 | }
548 | kbd {
549 |   font-size: 0.85rem;
550 |   line-height: 1.45rem;
551 | }
552 | samp {
553 |   font-size: 0.85rem;
554 |   line-height: 1.45rem;
555 | }
556 | abbr {
557 |   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
558 |   cursor: help;
559 | }
560 | acronym {
561 |   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
562 |   cursor: help;
563 | }
564 | abbr[title] {
565 |   border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
566 |   cursor: help;
567 |   text-decoration: none;
568 | }
569 | thead {
570 |   text-align: left;
571 | }
572 | td,
573 | th {
574 |   text-align: left;
575 |   border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
576 |   font-feature-settings: "tnum";
577 |   -moz-font-feature-settings: "tnum";
578 |   -ms-font-feature-settings: "tnum";
579 |   -webkit-font-feature-settings: "tnum";
580 |   padding-left: 0.96667rem;
581 |   padding-right: 0.96667rem;
582 |   padding-top: 0.725rem;
583 |   padding-bottom: calc(0.725rem - 1px);
584 | }
585 | th:first-child,
586 | td:first-child {
587 |   padding-left: 0;
588 | }
589 | th:last-child,
590 | td:last-child {
591 |   padding-right: 0;
592 | }
593 | tt,
594 | code {
595 |   background-color: hsla(0, 0%, 0%, 0.04);
596 |   border-radius: 3px;
597 |   font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
598 |     "Liberation Mono", Menlo, Courier, monospace;
599 |   padding: 0;
600 |   padding-top: 0.2em;
601 |   padding-bottom: 0.2em;
602 | }
603 | pre code {
604 |   background: none;
605 |   line-height: 1.42;
606 | }
607 | code:before,
608 | code:after,
609 | tt:before,
610 | tt:after {
611 |   letter-spacing: -0.2em;
612 |   content: " ";
613 | }
614 | pre code:before,
615 | pre code:after,
616 | pre tt:before,
617 | pre tt:after {
618 |   content: "";
619 | }
620 | @media only screen and (max-width: 480px) {
621 |   html {
622 |     font-size: 100%;
623 |   }
624 | }
625 | 


--------------------------------------------------------------------------------