├── .prettierrc
├── gatsby-browser.js
├── static.json
├── app.json
├── gatsby-ssr.js
├── src
    ├── _colors.scss
    ├── pages
    │   ├── 404.js
    │   └── index.js
    ├── components
    │   ├── headingObserver.js
    │   ├── docs
    │   │   ├── index.js
    │   │   └── _docs.scss
    │   ├── header
    │   │   ├── index.js
    │   │   └── _header.scss
    │   ├── layout
    │   │   ├── index.js
    │   │   └── _layout.scss
    │   └── seo.js
    ├── util.js
    ├── images
    │   └── gd-logo.svg
    └── templates
    │   ├── docPage.js
    │   └── _docPage.scss
├── .eslintrc
├── gatsby-config.js
├── LICENSE
├── .gitignore
├── package.json
├── gatsby-node.js
└── README.md


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true,
4 |   "trailingComma": "es5"
5 | }
6 | 


--------------------------------------------------------------------------------
/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Implement Gatsby's Browser APIs in this file.
3 |  *
4 |  * See: https://www.gatsbyjs.org/docs/browser-apis/
5 |  */
6 | 


--------------------------------------------------------------------------------
/static.json:
--------------------------------------------------------------------------------
1 | {
2 |   "root": "public/",
3 |   "headers": {
4 |     "/**.js": {
5 |       "Cache-Control": "public, max-age=0, must-revalidate"
6 |     }
7 |   }
8 | }


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "buildpacks": [
 3 |     {
 4 |       "url": "heroku/nodejs"
 5 |     },
 6 |     {
 7 |       "url": "https://github.com/heroku/heroku-buildpack-static"
 8 |     }
 9 |   ]
10 | }


--------------------------------------------------------------------------------
/gatsby-ssr.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
3 |  *
4 |  * See: https://www.gatsbyjs.org/docs/ssr-apis/
5 |  */
6 | 
7 | // You can delete this file if you're not using it
8 | 


--------------------------------------------------------------------------------
/src/_colors.scss:
--------------------------------------------------------------------------------
 1 | $system: #3482F7;
 2 | $heading: #003366;
 3 | $dark-background: #1F2A36;
 4 | $toc: #f5f7fa;
 5 | $light-background: #d3d3d3;
 6 | $dark-text: #707070;
 7 | $anchor: #5f6d7b;
 8 | $paragraph: #707070;
 9 | $important: #ff4c4c;
10 | $input: #0dff92;
11 | $off-black: #101010;


--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import Layout from '../components/layout'
 4 | import SEO from '../components/seo'
 5 | 
 6 | const NotFoundPage = () => (
 7 |   <Layout>
 8 |     <SEO title="404: Not found" />
 9 |     <h1>NOT FOUND</h1>
10 |     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
11 |   </Layout>
12 | )
13 | 
14 | export default NotFoundPage
15 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "settings": {
 3 |     "react": {
 4 |       "version": "^16.6.3"
 5 |     }
 6 |   },
 7 |   "parser": "babel-eslint",
 8 |   "rules": {
 9 |     "strict": 0,
10 |     "no-console": 1
11 |   },
12 |   "extends": [
13 |     "eslint:recommended",
14 |     "plugin:react/recommended"
15 |   ],
16 |   "env": {
17 |     "es6": true,
18 |     "browser": true,
19 |     "amd": true,
20 |     "node": true
21 |   }
22 | }


--------------------------------------------------------------------------------
/src/components/headingObserver.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | import { InView } from 'react-intersection-observer'
 5 | 
 6 | const HeadingObserver = ({ section }) => {
 7 |   return (
 8 |     <InView>
 9 |       <div
10 |         className="doc-main-chunk"
11 |         dangerouslySetInnerHTML={{ __html: section }}
12 |       />
13 |     </InView>
14 |   )
15 | }
16 | 
17 | HeadingObserver.propTypes = {
18 |   section: PropTypes.string.isRequired,
19 | }
20 | 
21 | export default HeadingObserver
22 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   formatSlug: title => {
 3 |     return title
 4 |       .toLowerCase()
 5 |       .replace(/[^a-zA-Z ]/g, '')
 6 |       .replace(/\s/g, '-')
 7 |   },
 8 |   formatDate: dateString => {
 9 |     const date = new Date(dateString)
10 |     const months = [
11 |       'January',
12 |       'February',
13 |       'March',
14 |       'April',
15 |       'May',
16 |       'June',
17 |       'July',
18 |       'August',
19 |       'September',
20 |       'October',
21 |       'November',
22 |       'December',
23 |     ]
24 |     const hh = date.getHours()
25 |     let minutes = date.getMinutes()
26 |     let hour = hh
27 |     let dayTime = 'AM'
28 |     if (hour >= 12) {
29 |       hour = hh - 12
30 |       dayTime = 'PM'
31 |     }
32 |     if (hour == 0) {
33 |       hour = 12
34 |     }
35 | 
36 |     minutes = minutes < 10 ? '0' + minutes : minutes
37 | 
38 |     return {
39 |       year: date.getFullYear(),
40 |       month: months[date.getMonth()],
41 |       date: date.getDate(),
42 |       hour: hour,
43 |       minutes: minutes,
44 |       dayTime: dayTime,
45 |     }
46 |   },
47 | }
48 | 


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     title: `Gatsby Docs`,
 4 |     description: `Create and View Minimalistic Documentation`,
 5 |     author: `@jacobknaack`,
 6 |   },
 7 |   plugins: [
 8 |     `gatsby-plugin-eslint`,
 9 |     `gatsby-plugin-react-helmet`,
10 |     `gatsby-transformer-sharp`,
11 |     `gatsby-plugin-sharp`,
12 |     `gatsby-plugin-sass`,
13 |     {
14 |       resolve: `gatsby-plugin-manifest`,
15 |       options: {
16 |         name: `gatsby-docs`,
17 |         short_name: `docs`,
18 |         start_url: `/`,
19 |         display: `minimal-ui`,
20 |         icon: `src/images/gd-logo.svg`, // This path is relative to the root of the site.
21 |       },
22 |     },
23 |     {
24 |       resolve: `gatsby-source-graphql`,
25 |       options: {
26 |         url: `https://graphql.cosmicjs.com/v1`,
27 |         fieldName: `docs`,
28 |         typeName: `Doc`,
29 |         refetchInterval: 10,
30 |       },
31 |     },
32 |     // this (optional) plugin enables Progressive Web App + Offline functionality
33 |     // To learn more, visit: https://gatsby.app/offline
34 |     // 'gatsby-plugin-offline',
35 |   ],
36 | }
37 | 


--------------------------------------------------------------------------------
/src/images/gd-logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><defs><style>.cls-1{fill:#3482f7;}.cls-2{fill:#036;}.cls-3{fill:#1f2a36;}.cls-4{fill:#fff;}</style></defs><title>gd_logo</title><path class="cls-1" d="M8.2,2.6h47a5,5,0,0,1,5,5V172.3a5.1,5.1,0,0,1-5.1,5.1H8.3a5.1,5.1,0,0,1-5.1-5.1V7.6A5,5,0,0,1,8.2,2.6Z"/><path class="cls-2" d="M66.5,2.6h47a5,5,0,0,1,5,5V172.3a5.1,5.1,0,0,1-5.1,5.1H66.6a5.1,5.1,0,0,1-5.1-5.1V7.6A5,5,0,0,1,66.5,2.6Z"/><path class="cls-3" d="M124.8,2.6h47a5,5,0,0,1,5,5V172.3a5.1,5.1,0,0,1-5.1,5.1H124.9a5.1,5.1,0,0,1-5.1-5.1V7.6A5,5,0,0,1,124.8,2.6Z"/><path class="cls-4" d="M49.4,47c14.8,0,25,5.5,33.4,14.1L69.2,73.7a28.9,28.9,0,0,0-19.8-8c-14.3,0-23.5,10.7-23.5,24.2s10.5,24.3,23.9,24.3,20.8-7.8,21.3-15.6H48.3v-17h44v7.6c0,23.7-13.9,43.6-42.9,43.6C24,132.8,6,113.9,6,89.9S24,47,49.4,47ZM22,81.6c3.2-11.5,13.4-19.7,27.4-19.7A35.8,35.8,0,0,1,69,68.3l7.7-7.5c-6.9-6.5-15.9-10-27.3-10-19.5,0-34.2,13-37.7,30.8Z"/><path class="cls-4" d="M105,49.7h27.9c23.6,0,41.9,17.4,41.9,40.1s-16.3,40.3-41.9,40.3H105Zm14.7,76.6V53.5h-9.8v72.8Zm12.8-14.2c12.5,0,22.1-8.8,22.1-22.3s-8.4-22.3-22.1-22.3h-7.9v44.6Z"/></svg>


--------------------------------------------------------------------------------
/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/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { graphql } from 'gatsby'
 4 | 
 5 | import Layout from '../components/layout'
 6 | import SEO from '../components/seo.js'
 7 | import Docs from '../components/docs'
 8 | 
 9 | const IndexPage = ({ data, pageContext }) => {
10 |   return (
11 |     <Layout>
12 |       <SEO
13 |         title="Home"
14 |         keywords={[
15 |           `gatsby`,
16 |           `application`,
17 |           `react`,
18 |           'documentation',
19 |           'docs',
20 |           'markdown',
21 |         ]}
22 |       />
23 |       <Docs docs={data.docs.objectsByType} pageContext={pageContext} />
24 |     </Layout>
25 |   )
26 | }
27 | 
28 | IndexPage.propTypes = {
29 |   data: PropTypes.object,
30 |   pageContext: PropTypes.object,
31 | }
32 | 
33 | export const query = graphql`
34 |   query($cosmicBucket: String!, $readKey: String!) {
35 |     docs {
36 |       objectsByType(
37 |         bucket_slug: $cosmicBucket
38 |         type_slug: "docs"
39 |         read_key: $readKey
40 |       ) {
41 |         title
42 |         content
43 |         created_at
44 |         _id
45 |       }
46 |     }
47 |   }
48 | `
49 | 
50 | export default IndexPage
51 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # dotenv environment variables file
55 | .env
56 | 
57 | # gatsby files
58 | .cache/
59 | public
60 | 
61 | # Mac files
62 | .DS_Store
63 | 
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 | 


--------------------------------------------------------------------------------
/src/components/docs/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | import { Link } from 'gatsby'
 5 | import util from '../../util.js'
 6 | import './_docs.scss'
 7 | 
 8 | const Docs = ({ docs }) => (
 9 |   <div className="docs-container">
10 |     <div className="docs-list">
11 |       {docs.map(doc => {
12 |         const date_created = util.formatDate(doc.created_at)
13 |         return (
14 |           <Link
15 |             key={doc._id}
16 |             to={`/doc/${util.formatSlug(doc.title)}`}
17 |             className="docs-item"
18 |           >
19 |             <div className="date-container">
20 |               <h3 className="date-yearMonthDate">{`${date_created.month} ${
21 |                 date_created.date
22 |                 }, ${date_created.year}`}</h3>
23 |               <p className="date-timeDayTime">{`at ${date_created.hour}:${
24 |                 date_created.minutes
25 |                 } ${date_created.dayTime}`}</p>
26 |             </div>
27 |             <h2 className="doc-title">{doc.title}</h2>
28 |             <div
29 |               className="doc-preview"
30 |               dangerouslySetInnerHTML={{
31 |                 __html: doc.content,
32 |               }}
33 |             />
34 |           </Link>
35 |         )
36 |       })}
37 |     </div>
38 |   </div>
39 | )
40 | 
41 | Docs.propTypes = {
42 |   docs: PropTypes.array.isRequired,
43 |   pageContext: PropTypes.object,
44 | }
45 | 
46 | export default Docs
47 | 


--------------------------------------------------------------------------------
/src/components/header/index.js:
--------------------------------------------------------------------------------
 1 | import { Link } from 'gatsby'
 2 | import PropTypes from 'prop-types'
 3 | import React from 'react'
 4 | import util from '../../util.js'
 5 | import logo from '../../images/gd-logo.svg'
 6 | import './_header.scss'
 7 | 
 8 | const Header = ({ siteTitle, description, doc }) => {
 9 |   let docDate = {}
10 |   if (doc) {
11 |     docDate = util.formatDate(doc.created_at)
12 |   }
13 |   return (
14 |     <div className="header-container">
15 |       <div className="header-content">
16 |         <div className={`site-meta${doc ? ' doc' : ''}`}>
17 |           <div style={{ margin: 0, height: '75px', width: '300px' }}>
18 |             <Link to="/" className="site-title">
19 |               <img className="header-logo" src={logo} />
20 |               {doc ? '' : siteTitle}
21 |             </Link>
22 |           </div>
23 |           <p className="site-description">{description}</p>
24 |         </div>
25 |         {doc ? (
26 |           <div className="doc-meta">
27 |             <h1 className="doc-title">{doc.title}</h1>
28 |             <p className="doc-date">{`Created on ${docDate.month} ${
29 |               docDate.date
30 |             }, ${docDate.year} at ${docDate.hour}:${docDate.minutes} ${
31 |               docDate.dayTime
32 |             }`}</p>
33 |           </div>
34 |         ) : null}
35 |       </div>
36 |     </div>
37 |   )
38 | }
39 | 
40 | Header.propTypes = {
41 |   siteTitle: PropTypes.string,
42 |   description: PropTypes.string,
43 |   doc: PropTypes.object,
44 | }
45 | 
46 | Header.defaultProps = {
47 |   siteTitle: ``,
48 | }
49 | 
50 | export default Header
51 | 


--------------------------------------------------------------------------------
/src/components/header/_header.scss:
--------------------------------------------------------------------------------
 1 | @import '../../_colors.scss';
 2 | 
 3 | .header-container {
 4 |   max-width: 100%;
 5 |   background-color: #ffffff;
 6 |   box-shadow: 0 4px 2px -2px grey;
 7 |   
 8 |   .header-content {
 9 |     max-width: 1300px;
10 |     margin: 0 auto;
11 |     display: flex;
12 |     flex-direction: row;
13 |   }
14 | 
15 |   .header-logo {
16 |     height: 75px;
17 |     margin: 0 10px 0 0;
18 |   }
19 | 
20 |   .site-meta {
21 |     width: 100vw;
22 |     margin: 0 auto;
23 |     padding: 0.5rem 15%;
24 |     background-color: #ffffff;
25 | 
26 |     .site-title {
27 |       color: $system;
28 |       height: 75px;
29 |       line-height: 75px;
30 |       text-decoration: none;
31 |       font-family: sans-serif;
32 |       font-weight: 200;
33 |       font-size: 200%;
34 |       display: flex;
35 |       flex-direction: row;
36 |       justify-content: center;
37 |     }
38 |     .site-description {
39 |       color: $system;
40 |       margin: 0;
41 |       font-size: 120%;
42 |       font-family: sans-serif;
43 |       font-weight: 100;
44 |     }
45 |   }
46 | 
47 |   .site-meta.doc {
48 |     width: 300px;
49 |     margin: 0 10px;
50 |     padding: 1.45rem 1%;
51 | 
52 |     .site-description {
53 |       width: 100%;
54 |       padding: 0;
55 |       font-size: 70%;
56 |       text-align: center;
57 |     }
58 |   }
59 | 
60 |   .doc-meta {
61 |     display: flex;
62 |     flex-direction: column;
63 |     justify-content: center;
64 | 
65 |     .doc-title {
66 |       width: 100%;
67 |       margin-bottom: 10px;
68 |       font-weight: 400;
69 |     }
70 |     .doc-date {
71 |       margin-bottom: 10px;
72 |       line-height: 20px;
73 |       padding: 0;
74 |     }
75 |   }
76 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gatsby-docs",
 3 |   "private": true,
 4 |   "description": "A Documentation creating and viewing application",
 5 |   "version": "0.1.0",
 6 |   "author": "Jacob Knaack",
 7 |   "dependencies": {
 8 |     "cosmicjs": "^3.2.14",
 9 |     "dotenv": "^6.2.0",
10 |     "eslint-plugin-react": "^7.12.3",
11 |     "gatsby": "^2.0.91",
12 |     "gatsby-image": "^2.0.26",
13 |     "gatsby-plugin-eslint": "^2.0.1",
14 |     "gatsby-plugin-manifest": "^2.0.13",
15 |     "gatsby-plugin-offline": "^2.0.21",
16 |     "gatsby-plugin-react-helmet": "^3.0.2",
17 |     "gatsby-plugin-sass": "^2.0.7",
18 |     "gatsby-plugin-sharp": "^2.0.17",
19 |     "gatsby-source-filesystem": "^2.0.13",
20 |     "gatsby-source-graphql": "^2.0.8",
21 |     "gatsby-transformer-sharp": "^2.1.10",
22 |     "highlight.js": "^9.14.2",
23 |     "node-sass": "^4.11.0",
24 |     "prop-types": "^15.6.2",
25 |     "react": "^16.6.3",
26 |     "react-dom": "^16.6.3",
27 |     "react-helmet": "^5.2.0",
28 |     "react-intersection-observer": "^6.4.2",
29 |     "showdown": "^1.9.0"
30 |   },
31 |   "keywords": [
32 |     "gatsby",
33 |     "cosmicjs",
34 |     "documentation"
35 |   ],
36 |   "license": "MIT",
37 |   "scripts": {
38 |     "build": "gatsby build",
39 |     "heroku-postbuild": "gatsby build",
40 |     "develop": "gatsby develop",
41 |     "start": "gatsby serve --port ${PORT}",
42 |     "format": "prettier --write \"src/**/*.js\"",
43 |     "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
44 |   },
45 |   "devDependencies": {
46 |     "babel-eslint": "^10.0.1",
47 |     "prettier": "^1.15.2"
48 |   },
49 |   "repository": {
50 |     "type": "git",
51 |     "url": "https://github.com/JacobKnaack/gatsby-docs"
52 |   },
53 |   "bugs": {
54 |     "url": "https://github.com/gatsbyjs/gatsby/issues"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/components/layout/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { StaticQuery, graphql } from 'gatsby'
 4 | 
 5 | import Header from '../header'
 6 | import './_layout.scss'
 7 | 
 8 | const Layout = ({ children, selectedDoc }) => (
 9 |   <StaticQuery
10 |     query={graphql`
11 |       query SiteTitleQuery {
12 |         site {
13 |           siteMetadata {
14 |             title
15 |             description
16 |           }
17 |         }
18 |       }
19 |     `}
20 |     render={data => (
21 |       <>
22 |         <Header
23 |           siteTitle={data.site.siteMetadata.title}
24 |           description={data.site.siteMetadata.description}
25 |           doc={selectedDoc}
26 |         />
27 |         <div
28 |           style={{
29 |             margin: `10px auto 0 auto`,
30 |             maxWidth: 1400,
31 |             height: `calc(100vh - 185px)`,
32 |             padding: `0px 1.0875rem 1.45rem`,
33 |             paddingTop: 0,
34 |           }}
35 |         >
36 |           {children}
37 |           <footer id="footer">
38 |             © {new Date().getFullYear()}, Built with
39 |             {` `}
40 |             <a
41 |               href="https://www.gatsbyjs.org"
42 |               target="_blank"
43 |               rel="noopener noreferrer"
44 |             >
45 |               Gatsby
46 |             </a>
47 |             {' & proudly powered by '}
48 |             <a
49 |               href="https://cosmicjs.com"
50 |               target="_blank"
51 |               rel="noopener noreferrer"
52 |             >
53 |               Cosmic JS
54 |             </a>
55 |           </footer>
56 |         </div>
57 |       </>
58 |     )}
59 |   />
60 | )
61 | 
62 | Layout.propTypes = {
63 |   children: PropTypes.node.isRequired,
64 |   selectedDoc: PropTypes.object,
65 | }
66 | 
67 | export default Layout
68 | 


--------------------------------------------------------------------------------
/src/templates/docPage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import showdown from 'showdown'
 3 | import PropTypes from 'prop-types'
 4 | import Layout from '../components/layout'
 5 | import SEO from '../components/seo.js'
 6 | import { graphql, Link } from 'gatsby'
 7 | import hljs from 'highlight.js'
 8 | import 'highlight.js/styles/github.css'
 9 | import './_docPage.scss'
10 | 
11 | const converter = new showdown.Converter({ ghCompatibleHeaderId: true })
12 | 
13 | class DocPage extends React.PureComponent {
14 |   constructor(props) {
15 |     super(props)
16 |     this.state = {
17 |       Doc: props.data.docs.object,
18 |     }
19 |   }
20 | 
21 |   componentDidMount() {
22 |     hljs.initHighlighting()
23 |   }
24 | 
25 |   componentWillUnmount() {
26 |     hljs.initHighlighting.called = false
27 |   }
28 | 
29 |   render() {
30 |     let toc
31 |     let doc
32 |     for (const i in this.state.Doc.metafields) {
33 |       if (this.state.Doc.metafields[i].key === 'table_of_contents') {
34 |         toc = this.state.Doc.metafields[i].value
35 |       }
36 |       if (this.state.Doc.metafields[i].key === 'documentation') {
37 |         doc = this.state.Doc.metafields[i].value
38 |       }
39 |     }
40 |     return (
41 |       <Layout selectedDoc={this.state.Doc}>
42 |         <SEO
43 |           title={this.state.Doc.title}
44 |           keywords={[`${this.state.Doctitle}`, 'gatsby', 'documentation']}
45 |         />
46 |         <div className="doc-container">
47 |           <div className="toc-container">
48 |             <div className="back-bttn">
49 |               <i className="arrow left" />
50 |               <Link to="/">Back To List</Link>
51 |             </div>
52 |             <div
53 |               className="doc-toc"
54 |               dangerouslySetInnerHTML={{ __html: converter.makeHtml(toc) }}
55 |             />
56 |           </div>
57 |           <div
58 |             className="doc-main"
59 |             dangerouslySetInnerHTML={{ __html: converter.makeHtml(doc) }}
60 |           />
61 |         </div>
62 |       </Layout>
63 |     )
64 |   }
65 | }
66 | 
67 | export const query = graphql`
68 |   query($cosmicBucket: String!, $title: String!, $readKey: String!) {
69 |     docs {
70 |       object(bucket_slug: $cosmicBucket, slug: $title, read_key: $readKey) {
71 |         title
72 |         content
73 |         created_at
74 |         _id
75 |         metafields {
76 |           key
77 |           value
78 |         }
79 |       }
80 |     }
81 |   }
82 | `
83 | 
84 | DocPage.propTypes = {
85 |   data: PropTypes.object.isRequired,
86 | }
87 | 
88 | export default DocPage
89 | 


--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
 1 | require("dotenv").config();
 2 | const path = require('path');
 3 | /**
 4 |  * Implement Gatsby's Node APIs in this file.
 5 |  *
 6 |  * See: https://www.gatsbyjs.org/docs/node-apis/
 7 |  */
 8 | 
 9 | /*
10 |  * Gatsby API onCreatePage
11 |  ** Runs when a page is created using the files in the `pages` directory
12 |  ** Creates a page context object with any environment variables that might be needing to be configured through Cosmic Js
13 | */
14 | 
15 | exports.onCreatePage = ({ page, actions }) => {
16 |   const { createPage, deletePage } = actions
17 |   const pageContext = {
18 |     writeKey: `${process.env.COSMIC_WRITE_KEY}`,
19 |     readKey: `${process.env.COSMIC_READ_KEY}`,
20 |     cosmicBucket: `${process.env.COSMIC_BUCKET}`,
21 |   }
22 |   if (process.env.NODE_ENV === 'production') {
23 |     pageContext.buildhookUrl = `${process.env.BUILDHOOK_ENDPOINT}`
24 |   }
25 |   deletePage(page)
26 |   createPage({
27 |     ...page,
28 |     context: pageContext,
29 |   })
30 | }
31 | 
32 | /*
33 |   * Gatsby API createPages
34 |   ** Creates a page at a specified path using a template
35 |   ** Initialized with a GraphQL query and creates a new page for each item returned.
36 |  */
37 | 
38 | exports.createPages = ({ graphql, actions }) => {
39 |   const { createPage, createRedirect } = actions
40 | 
41 |   createRedirect({
42 |     fromPath: `/doc/*`,
43 |     isPermanent: true,
44 |     redirectInBrowser: true,
45 |     toPath: `/`,
46 |   })
47 | 
48 |   return new Promise((resolve, reject) => {
49 |     const docTemplate = path.resolve(`src/templates/docPage.js`)
50 | 
51 |     resolve(
52 |       graphql(`
53 |         query {
54 |           docs {
55 |             objectsByType(bucket_slug: "${process.env.COSMIC_BUCKET}", type_slug: "docs", read_key: "${process.env.COSMIC_READ_KEY}") {
56 |               title
57 |             }
58 |           }
59 |         }
60 |       `
61 |       ).then(result => {
62 |         if (result.errors) {
63 |           reject(result.errors)
64 |         }
65 |         if (result.data.docs.objectsByType.length) {
66 |           result.data.docs.objectsByType.forEach(doc => {
67 |             let slug = doc.title.toLowerCase().replace(/[^a-zA-Z ]/g, "").replace(/\s/g, '-')
68 |             createPage({
69 |               path: `/doc/${slug}`,
70 |               component: docTemplate,
71 |               context: {
72 |                 cosmicBucket: `${process.env.COSMIC_BUCKET}`,
73 |                 readKey: `${process.env.COSMIC_READ_KEY}`,
74 |                 title: slug,
75 |               }
76 |             })
77 |           })
78 |         }
79 |       })
80 |     )
81 |   })
82 | }
83 | 


--------------------------------------------------------------------------------
/src/components/seo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import Helmet from 'react-helmet'
 4 | import { StaticQuery, graphql } from 'gatsby'
 5 | 
 6 | function SEO({ description, lang, meta, keywords, title }) {
 7 |   return (
 8 |     <StaticQuery
 9 |       query={detailsQuery}
10 |       render={data => {
11 |         const metaDescription =
12 |           description || data.site.siteMetadata.description
13 |         return (
14 |           <Helmet
15 |             htmlAttributes={{
16 |               lang,
17 |             }}
18 |             title={title}
19 |             titleTemplate={`%s | ${data.site.siteMetadata.title}`}
20 |             meta={[
21 |               {
22 |                 name: `description`,
23 |                 content: metaDescription,
24 |               },
25 |               {
26 |                 property: `og:title`,
27 |                 content: title,
28 |               },
29 |               {
30 |                 property: `og:description`,
31 |                 content: metaDescription,
32 |               },
33 |               {
34 |                 property: `og:type`,
35 |                 content: `website`,
36 |               },
37 |               {
38 |                 name: `twitter:card`,
39 |                 content: `summary`,
40 |               },
41 |               {
42 |                 name: `twitter:creator`,
43 |                 content: data.site.siteMetadata.author,
44 |               },
45 |               {
46 |                 name: `twitter:title`,
47 |                 content: title,
48 |               },
49 |               {
50 |                 name: `twitter:description`,
51 |                 content: metaDescription,
52 |               },
53 |             ]
54 |               .concat(
55 |                 keywords.length > 0
56 |                   ? {
57 |                       name: `keywords`,
58 |                       content: keywords.join(`, `),
59 |                     }
60 |                   : []
61 |               )
62 |               .concat(meta)}
63 |           />
64 |         )
65 |       }}
66 |     />
67 |   )
68 | }
69 | 
70 | SEO.defaultProps = {
71 |   lang: `en`,
72 |   meta: [],
73 |   keywords: [],
74 | }
75 | 
76 | SEO.propTypes = {
77 |   description: PropTypes.string,
78 |   lang: PropTypes.string,
79 |   meta: PropTypes.array,
80 |   keywords: PropTypes.arrayOf(PropTypes.string),
81 |   title: PropTypes.string.isRequired,
82 | }
83 | 
84 | export default SEO
85 | 
86 | const detailsQuery = graphql`
87 |   query DefaultSEOQuery {
88 |     site {
89 |       siteMetadata {
90 |         title
91 |         description
92 |         author
93 |       }
94 |     }
95 |   }
96 | `
97 | 


--------------------------------------------------------------------------------
/src/templates/_docPage.scss:
--------------------------------------------------------------------------------
  1 | @import '../_colors.scss';
  2 | 
  3 | .doc-container h1 {
  4 |   border-bottom: thin solid grey;
  5 |   padding-bottom: 10px;
  6 |   margin-bottom: 10px;
  7 | }
  8 | 
  9 | p, h1, h2, h3, h4, h5, h6, a {
 10 |   font-family: sans-serif;
 11 |   line-height: 35px;
 12 |   font-weight: 300;
 13 | }
 14 | h1, h2, h3, h4, h5, h6 {
 15 |   color: $heading;
 16 |   font-weight: 200;
 17 | }
 18 | h1, h2, {
 19 |   margin: 30px auto;
 20 | }
 21 | h3, h4, h5, h6 {
 22 |   margin: 10px auto;
 23 | }
 24 | p {
 25 |   padding-left: 10px;
 26 |   color: $dark-text;
 27 |   a {
 28 |     text-decoration: none;
 29 |     color: $anchor;
 30 |     font-weight: 200;
 31 |   }
 32 | }
 33 | 
 34 | .doc-container {
 35 |   width: 100%;
 36 |   height: calc(100vh - 228px);
 37 |   display: flex;
 38 |   flex-direction: row;
 39 |   justify-content: center;
 40 |   border-radius: 5px;
 41 | }
 42 | 
 43 | .toc-container {
 44 |   width: 25%;
 45 |   min-width: 290px;
 46 |   height: 100%;
 47 |   background-color: $toc;
 48 |   border-radius: 5px 0 0 5px;
 49 |   border-top: 2px solid $system;
 50 |   border-right: thin solid $system;
 51 | 
 52 |   .back-bttn {
 53 |     height: 45px;
 54 |     padding-top: 10px;
 55 |     text-align: center;
 56 | 
 57 |     .arrow {
 58 |       border: solid #4353d2;
 59 |       border-width: 0 3px 3px 0;
 60 |       display: inline-block;
 61 |       padding: 3px;
 62 |       margin-right: 10px;
 63 |     }
 64 | 
 65 |     .left {
 66 |       transform: rotate(135deg);
 67 |       -webkit-transform: rotate(135deg);
 68 |     }
 69 | 
 70 |     a {
 71 |       color: $system;
 72 |       text-decoration: none;
 73 |       font-family: sans-serif;
 74 |       font-weight: 400;
 75 |     }
 76 |   }
 77 | 
 78 |   .doc-toc {
 79 |     width: 100%;
 80 |     height: calc(100% - 45px);
 81 |     overflow: auto;
 82 |     padding-left: 20px;
 83 |     border-top: thin solid #a9a9a9;
 84 | 
 85 |     // ul, ol {
 86 |     //   adds margin, button outline and precents word wrap on hover for TOC
 87 |     //   a:hover {
 88 |     //     white-space: nowrap; 
 89 |     //     margin: 10px;
 90 |     //     padding: 10px;
 91 |     //     background-color: #ffffff;
 92 |     //     border-radius: 5px;
 93 |     //     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 94 |     //   }
 95 | 
 96 |     //   Inverts colors on 
 97 |     //   a:active {
 98 |     //     background-color: $anchor;
 99 |     //     color: #ffffff;
100 |     //   }
101 |     // }
102 |   }
103 | }
104 | 
105 | .doc-main {
106 |   width: calc(75% - 30px);
107 |   height: 100%;
108 |   padding: 15px;
109 |   background-color: #ffffff;
110 |   overflow: auto;
111 |   scroll-behavior: smooth;
112 |   border-radius: 0 5px 5px 0;
113 |   border-top: 2px solid $system;
114 | 
115 |   a {
116 |     color: $system;
117 |   }
118 | }
119 | 
120 | ol {
121 |   color: $dark-background;
122 |   margin: 0;
123 |   li {
124 |     margin: 30px auto 10px 20px;
125 |     font-family: sans-serif;
126 |     color: $dark-text;
127 |     ul {
128 |       margin-top: 0;
129 |     }
130 |     a {
131 |       text-decoration: none;
132 |       color: $anchor;
133 |       font-weight: 200;
134 |       line-height: 20px;
135 |     }
136 |   }
137 | }
138 | 
139 | ul {
140 |   list-style-type: none;
141 |   margin: 0;
142 |   li {
143 |     margin: 15px auto 10px 0;
144 |     font-family: sans-serif;
145 |     color:$dark-text;
146 |     ul {
147 |       margin-top: 0;
148 |     }
149 |     a {
150 |       text-decoration: none;
151 |       color: $anchor;
152 |       font-weight: 200;
153 |       line-height: 20px;
154 |     }
155 |   }
156 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <a href="https://www.gatsbyjs.org">
  3 |     <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
  4 |   </a>
  5 |   <img alt="add" src="https://www.svgrepo.com/show/13238/plus-cross.svg" height="30" width="50">
  6 |   <a href="https://cosmicjs.com">
  7 |     <img alt="Gatsby" src="https://cosmicjs.com/images/logo.svg" width="60" />
  8 |   </a>
  9 | </p>
 10 | <h1 align="center">
 11 |   Gatsby Docs
 12 | </h1>
 13 | <p align="center">A minimalistic App for creating and viewing Documentation powered by Cosmic JS<p>
 14 | 
 15 | ### [View Demo](https://cosmicjs.com/apps/gatsby-docs)
 16 | 
 17 | ## Quick Start
 18 | 
 19 | 1.  **Get this source Code**
 20 | 
 21 |     Install this software by cloning this repository:
 22 | 
 23 |     ```sh
 24 |     # create a directory on your machine with this source code inside
 25 |     git clone https://github.com/JacobKnaack/gatsby-docs.git
 26 |     ```
 27 | 
 28 | 2.  **Install the necessary packages.**
 29 | 
 30 |     Navigate into your new site’s directory.
 31 | 
 32 |     ```sh
 33 |     cd gatsby-docs/
 34 |     ```
 35 | 
 36 |     then install with use npm.
 37 |     ```sh
 38 |     npm install
 39 |     ```
 40 | 
 41 |     or use yarn
 42 |     ```sh
 43 |     yarn install
 44 |     ```
 45 | 
 46 | 3.  **Configure your environment variables required for Cosmic JS**
 47 | 
 48 |     Create a `.env` file at the root of your project
 49 | 
 50 |     ```sh
 51 |     touch .env
 52 |     ```
 53 | 
 54 |     Open your .`env` file and add three environment variables
 55 |     ```sh
 56 |     # Inside your .env file
 57 |     COSMIC_BUCKET=bucket_title_goes_here
 58 |     COSMIC_READ_KEY=read_key_goes_here
 59 |     COSMIC_WRITE_KEY=write_key_goes_here
 60 |     ```
 61 | 
 62 | 4.  **Run your development script**
 63 | 
 64 |     start a development server using pre-built scripts
 65 |     ```sh
 66 |     yarn develop
 67 |     ```
 68 |     or
 69 |     ```sh
 70 |     npm run develop
 71 |     ```
 72 | 
 73 | 5.  **Open the source code and start editing!**
 74 | 
 75 |     Your site is now running at `http://localhost:8000`!
 76 | 
 77 |     _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
 78 | 
 79 |     Open the `gatsby-docs` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
 80 | 
 81 | ## Project Structure
 82 | Here's what you should see when you first install the project.
 83 | 
 84 |     .
 85 |     ├── node_modules
 86 |     ├── src
 87 |     ├── .gitignore
 88 |     ├── .prettierrc
 89 |     ├── app.json
 90 |     ├── gatsby-browser.js
 91 |     ├── gatsby-config.js
 92 |     ├── gatsby-node.js
 93 |     ├── gatsby-ssr.js
 94 |     ├── LICENSE
 95 |     ├── package-lock.json
 96 |     ├── package.json
 97 |     ├── README.md
 98 |     ├── static.json
 99 |     └── yarn.lock
100 | 
101 | 1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
102 | 
103 | 2.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
104 | 
105 | 3.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
106 | 
107 | 4.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
108 | 
109 | 5. **`app.json`**: this is a configuration for deplying your code on either heroku or Cosmic JS.  Acts as a manifest to describing the application for an app container.  This one container urls for buildpacks needed for deployment.
110 | 
111 | 6.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
112 | 
113 | 7.  **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
114 | 
115 | 8.  **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
116 | 
117 | 9.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
118 | 
119 | 10.  **`LICENSE`**: Gatsby is licensed under the MIT license.
120 | 
121 | 11. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
122 | 
123 | 12. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
124 | 
125 | 13. **`static.json`**: A file used with the horokus buildpacks furing deployment.  The contents handle static build files.
126 | 
127 | 14. **`yarn.lock`**: a configuration file for yarn to help install dependenies on your local machine.
128 |     
129 | 15. **`package-lock.json`**: a configuration for npm also to help with installation of dependecies on your local machine.
130 | 
131 | 16. **`README.md`**: A text file containing useful reference information about your project.
132 | 
133 | ## Learning Gatsby
134 | 
135 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
136 | 
137 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
138 | 
139 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
140 | 
141 | ## Deploy
142 | 
143 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default)
144 | 


--------------------------------------------------------------------------------
/src/components/docs/_docs.scss:
--------------------------------------------------------------------------------
  1 | @import '../../_colors.scss';
  2 | 
  3 | .docs-container {
  4 |   // position: absolute;
  5 |   // width: 100vw;
  6 |   height: 100%;
  7 |   font-family: sans-serif;
  8 | 
  9 |   .docs-list {
 10 |     width: 100%;
 11 |     height: 100%;
 12 |     display: flex;
 13 |     flex-direction: row;
 14 |     justify-content: flex-start;
 15 |     overflow-x: auto;
 16 |   }
 17 | 
 18 |   .docs-item {
 19 |     width: 250px;
 20 |     min-width: 250px;
 21 |     height: 100%;
 22 |     margin: 0 5px;
 23 |     display: flex;
 24 |     flex-direction: column;
 25 |     justify-content: flex-start;
 26 |     text-decoration: none;
 27 |     background-color: $system;
 28 |     border-radius: 10px;
 29 |     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 30 |     // transition: 0.3s ease-in-out;
 31 |     overflow-y: auto; 
 32 | 
 33 |     .doc-title {
 34 |       width: 100%;
 35 |       margin:0 0 20px 0;
 36 |       padding: 0 15px;
 37 |       color: #ffffff;
 38 |       font-family: sans-serif;
 39 |       font-weight: 200;
 40 |       font-size: 200%;
 41 |       text-align: left;
 42 |     }
 43 | 
 44 |     .date-container {
 45 |       width: calc(100% - 10px);
 46 |       padding: 5px 10px 5px 10px;
 47 |       display: flex;
 48 |       flex-direction: column;
 49 |       justify-content: flex-start;
 50 |       align-items: flex-start;
 51 | 
 52 |       .date-yearMonthDate {
 53 |         height: 20px;
 54 |         margin: 0;
 55 |         color: #ffffff;
 56 |         text-align: right;
 57 |         font-size: 100%;
 58 |         font-weight: 400;
 59 |       }
 60 | 
 61 |       .date-timeDayTime {
 62 |         height: 20px;
 63 |         color: #ffffff;
 64 |         margin: 0 0 40px 0;;
 65 |         padding: 0;
 66 |         text-align: right;
 67 |         font-size: 100%;
 68 |         font-weight: 300;
 69 |       }
 70 |     }
 71 |     .doc-date {
 72 |       padding-left: 15px;
 73 |       margin-top: 20px;
 74 |       color: #ffffff;
 75 |       font-weight: 300;
 76 |       font-size: 75%;
 77 |       text-align: left;
 78 |     }
 79 | 
 80 |     .doc-preview {
 81 |       width: 230px;
 82 |       height: calc(100% - 230px);
 83 |       margin: 0 auto;
 84 |       overflow: hidden;
 85 |       h1, h2, h3, h4, h5, h6 {
 86 |         font-size: 130%;
 87 |         margin: 0;
 88 |       }
 89 |        p, h1, h2, h3, h4, h5, h6, li, a {
 90 |          color: #ffffff;
 91 |        }
 92 |        p {
 93 |         width: 200px;
 94 |         margin: 10px auto;
 95 |         line-height: 20px;
 96 |         padding: 0;
 97 |        }
 98 |        img {
 99 |          max-width: 175px;
100 |          display: block;
101 |          margin: 0 auto;
102 |          border-radius: 5px;
103 |        }
104 |     }
105 |   }
106 | }
107 | 
108 | .create-doc-container {
109 |   z-index: 8;
110 |   width: 200px;
111 |   margin: 0 auto;
112 |   border-radius: 30px;
113 |   background-color: $system;
114 |   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
115 | 
116 |   .create-doc-successMessage {
117 |     position: absolute;
118 |     font-weight: 300;
119 |     margin-top: 75px;
120 |   }
121 | }
122 | 
123 | .create-doc-container:hover {
124 |   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
125 | }
126 | 
127 | .create-doc-container.active {
128 |   position: fixed;
129 |   top: 25px;
130 |   left: 2.5vw;
131 |   width: 95vw;
132 |   height: 90vh;
133 |   background-color: #ffffff;
134 | }
135 | 
136 | .doc-form {
137 |   width: 100%;
138 |   height: 100%;
139 |   display: flex;
140 |   flex-direction: column;
141 |   justify-content: flex-start;
142 | 
143 |   .close-bttn {
144 |     width: 100px;
145 |     margin: 20px auto 0 auto;
146 |     color: $important;
147 |     padding: 3px;
148 |     background: none;
149 |     outline: none;
150 |     border: thin solid $important;
151 |     font-family: sans-serif;
152 |     font-weight: 200;
153 |     font-size: 100%;
154 |     border-radius: 30px;
155 |     // transition: 0.5s ease-in-out;
156 |   }
157 |   
158 |   .close-bttn:hover {
159 |     color: #ffffff;
160 |     background-color: $important;
161 |   }
162 | 
163 |   .helpertext {
164 |     width: 70%;
165 |     margin: 0 auto;
166 |     display: flex;
167 |     flex-direction: column;
168 |     justify-content: center;
169 |     align-items: flex-start;
170 |     color: $off-black;
171 | 
172 |     span {
173 |       margin: 0 0 15px 5px;
174 |       font-size: 75%;
175 |       color: $dark-text;
176 |     }
177 |   }
178 | 
179 |   .title-input {
180 |     width: 100%;
181 |     height: 40px;
182 |     margin: 0 auto;
183 |     padding-left: 5px;
184 |     background: none;
185 |     outline: none;
186 |     border-radius: 5px;
187 |     border: none;
188 |     color: $off-black;
189 |     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
190 |     font-family: sans-serif;
191 |   }
192 | 
193 |   .content-container {
194 |     padding: 20px;
195 |     width: 100%;
196 |     height: 80%;
197 |     background-color: $system;
198 |     overflow-y: auto;
199 |   }
200 | 
201 |   .content-info {
202 |     height: 40px;
203 |     width: 100%;
204 |     max-width: 1200px;
205 |     margin: 0 auto 10px auto;
206 | 
207 |     label {
208 |       padding: 10px;
209 |       margin-right: 40px;
210 |       border-radius: 20px;
211 |       box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
212 |       background-color: $system;
213 |       color: #ffffff;
214 |       input {
215 |         margin: 5px;
216 |         color: $input;
217 |       }
218 |     }
219 | 
220 |     label:active {
221 |       background-color: $heading;
222 |     }
223 |   }
224 | 
225 |   .markdown-container {
226 |     width: 100%;
227 |     max-width: 1200px;
228 |     height: calc(100% - 45px);
229 |     margin: 0 auto;
230 |     display: flex;
231 |     flex-direction: row;
232 |     justify-content: center;
233 |     border-radius: 5px;
234 |     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
235 | 
236 |     .markdown-input {
237 |       width: 33.33333%;
238 |       height: 100%;
239 |       padding: 5px;
240 |       resize: none;
241 |       font-family: sans-serif;
242 |       border: none;
243 |       overflow: auto;
244 |       border-radius: 5px 0 0 5px;
245 |     }
246 | 
247 |     .markdown-preview {
248 |       width: 66.66666%;
249 |       height: 100%;
250 |       padding: 5px;
251 |       text-align: center;
252 |       background-color: #ffffff;
253 |       border-left: thin solid $light-background;
254 |       border-radius: 0 5px 5px 0;
255 | 
256 |       h4 {
257 |        color: $dark-text;;
258 |        margin: 0 auto;  
259 |       }
260 | 
261 |       .preview-layout {
262 |         width: 100%;
263 |         height: calc(100% - 20px);
264 |         display: flex;
265 |         flex-direction: row;
266 |         justify-content: center;
267 |       }
268 | 
269 |       .preview-content {
270 |         text-align: left;
271 |       }
272 |       .toc {
273 |         width: 33%;
274 |         height: calc(100% - 20px);
275 |         overflow-y: auto;
276 |       }
277 | 
278 |       .main {
279 |         width: 66%;
280 |         height: calc(100% - 20px);
281 |         overflow: auto;
282 |       }
283 | 
284 |       a {
285 |         text-decoration: none;
286 |         color: $anchor;
287 |       }
288 |       
289 |       .toc.selected, .main.selected {
290 |         background-color: $light-background;
291 |         border: thin solid $dark-text;
292 |       }
293 |     }
294 |   }
295 | 
296 |   .submit-bttn {
297 |     outline: none;
298 |     border: none;
299 |     border-radius: 20px;
300 |     background: $system;
301 |     margin: 20px auto;
302 |     width: 100px;
303 |     color: #ffffff;
304 |     font-family: sans-serif;
305 |     font-weight: 300;
306 |     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
307 |   }
308 | }
309 | 
310 | .create-doc-bttn {
311 |   cursor: pointer;
312 |   margin-bottom: 50px;
313 |   padding: 10px;
314 |   height: 100%;
315 |   width: 100%;
316 |   color: #ffffff;
317 |   text-align: center;
318 |   font-weight: 300;
319 |   font-family: sans-serif;
320 | }


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


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