├── .gitignore
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package.json
├── src
    ├── components
    │   ├── collapsible.js
    │   ├── header.js
    │   ├── image.js
    │   ├── layout.css
    │   ├── layout.js
    │   ├── locomotive-scroll.css
    │   ├── locomotiveScroll.js
    │   └── seo.js
    ├── images
    │   ├── gatsby-astronaut.png
    │   └── gatsby-icon.png
    ├── pages
    │   ├── 404.js
    │   ├── index.js
    │   └── page-2.js
    └── theme.js
└── yarn.lock


/.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 variable files
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 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | package.json
3 | package-lock.json
4 | public
5 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "arrowParens": "avoid",
3 |   "semi": false
4 | }
5 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Gatsby Locomotive Scroll Starter
2 | 
3 | ### This starter is based of Gatsby's default starter. For information on this tool, [see the original repo](https://github.com/gatsbyjs/gatsby-starter-default)
4 | 
5 | This project aims to provide a minimal base for building sites with Gatsby in combination with [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll)
6 | 
7 | [See the demo](https://gatsby-locomotive-scroll-starter.netlify.app/)
8 | 


--------------------------------------------------------------------------------
/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 | 
7 | // You can delete this file if you're not using it
8 | 


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     title: `Gatsby Locomotive Scroll Starter`,
 4 |     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
 5 |     author: `@gatsbyjs`,
 6 |   },
 7 |   plugins: [
 8 |     `gatsby-plugin-react-helmet`,
 9 |     {
10 |       resolve: `gatsby-source-filesystem`,
11 |       options: {
12 |         name: `images`,
13 |         path: `${__dirname}/src/images`,
14 |       },
15 |     },
16 |     `gatsby-transformer-sharp`,
17 |     `gatsby-plugin-sharp`,
18 |     {
19 |       resolve: `gatsby-plugin-manifest`,
20 |       options: {
21 |         name: `gatsby-starter-default`,
22 |         short_name: `starter`,
23 |         start_url: `/`,
24 |         background_color: `#663399`,
25 |         theme_color: `#663399`,
26 |         display: `minimal-ui`,
27 |         icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
28 |       },
29 |     },
30 |     // this (optional) plugin enables Progressive Web App + Offline functionality
31 |     // To learn more, visit: https://gatsby.dev/offline
32 |     // `gatsby-plugin-offline`,
33 |   ],
34 | }
35 | 


--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Implement Gatsby's Node APIs in this file.
 3 |  *
 4 |  * See: https://www.gatsbyjs.org/docs/node-apis/
 5 |  */
 6 | 
 7 | exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
 8 |   if (stage === "build-html" || stage === "develop-html") {
 9 |     actions.setWebpackConfig({
10 |       module: {
11 |         rules: [
12 |           {
13 |             test: /locomotive-scroll/,
14 |             use: loaders.null(),
15 |           },
16 |         ],
17 |       },
18 |     })
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gatsby-locomotivescroll-starter",
 3 |   "private": true,
 4 |   "description": "A simple starter to get up and developing quickly with Gatsby",
 5 |   "version": "0.1.0",
 6 |   "author": "Francis Champagne <hey@fcis.io>",
 7 |   "dependencies": {
 8 |     "gatsby": "^2.22.15",
 9 |     "gatsby-image": "^2.4.5",
10 |     "gatsby-plugin-manifest": "^2.4.9",
11 |     "gatsby-plugin-offline": "^3.2.7",
12 |     "gatsby-plugin-react-helmet": "^3.3.2",
13 |     "gatsby-plugin-sharp": "^2.6.9",
14 |     "gatsby-source-filesystem": "^2.3.8",
15 |     "gatsby-transformer-sharp": "^2.5.3",
16 |     "gsap": "^3.3.0",
17 |     "locomotive-scroll": "^3.5.4",
18 |     "prop-types": "^15.7.2",
19 |     "react": "^16.12.0",
20 |     "react-device-detect": "^1.12.1",
21 |     "react-dom": "^16.12.0",
22 |     "react-helmet": "^6.0.0"
23 |   },
24 |   "devDependencies": {
25 |     "prettier": "2.0.5"
26 |   },
27 |   "keywords": [
28 |     "gatsby"
29 |   ],
30 |   "license": "MIT",
31 |   "scripts": {
32 |     "build": "gatsby build",
33 |     "develop": "gatsby develop -H 0.0.0.0",
34 |     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
35 |     "start": "npm run develop",
36 |     "serve": "gatsby serve",
37 |     "clean": "gatsby clean",
38 |     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
39 |   },
40 |   "repository": {
41 |     "type": "git",
42 |     "url": "https://github.com/gatsbyjs/gatsby-starter-default"
43 |   },
44 |   "bugs": {
45 |     "url": "https://github.com/gatsbyjs/gatsby/issues"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/components/collapsible.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useRef, useEffect } from "react"
 2 | import { gsap } from "gsap/all"
 3 | import { isBrowser } from "react-device-detect"
 4 | 
 5 | //! This method is essential to keep the scroll height up to date.
 6 | const updateScroll = () => isBrowser && window.scroll.update()
 7 | 
 8 | const collapsible = node => {
 9 |   const tl = gsap.timeline({
10 |     defaults: {
11 |       duration: 0.35,
12 |       ease: " power1.inOut",
13 |     },
14 |   })
15 | 
16 |   const animation = height =>
17 |     tl
18 |       .to(node, { height: height, willChange: "height" })
19 |       .to(node, { clearProps: "willChange" }, "-=0.45")
20 |       .call(() => updateScroll()) //! We call this method after every change that impacts the page height.
21 |       .pause()
22 | 
23 |   let open = () => animation("auto").play()
24 |   let close = () => animation(0).play()
25 | 
26 |   return { open, close }
27 | }
28 | 
29 | const Collapsible = ({ children }) => {
30 |   const [state, setState] = useState({
31 |     initial: false,
32 |     clicked: null,
33 |   })
34 | 
35 |   let body = useRef(null)
36 | 
37 |   const handleClick = () => {
38 |     if (state.initial === false) {
39 |       setState({
40 |         initial: null,
41 |         clicked: true,
42 |       })
43 |     } else if (state.clicked === true) {
44 |       setState({
45 |         clicked: !state.clicked,
46 |       })
47 |     } else if (state.clicked === false) {
48 |       setState({
49 |         clicked: !state.clicked,
50 |       })
51 |     }
52 |   }
53 | 
54 |   useEffect(() => {
55 |     if (state.clicked === false) {
56 |       collapsible(body).close()
57 |     } else if (
58 |       state.clicked === true ||
59 |       (state.clicked === true && state.initial === null)
60 |     ) {
61 |       collapsible(body).open()
62 |     }
63 |   }, [state])
64 | 
65 |   return (
66 |     <button className="Collapse" onClick={() => handleClick()}>
67 |       <div className="Collapse_Plus">Click Me +</div>
68 |       {children && (
69 |         <div className="Collapse_Content" ref={el => (body = el)}>
70 |           <div>{children}</div>
71 |         </div>
72 |       )}
73 |     </button>
74 |   )
75 | }
76 | 
77 | export default Collapsible
78 | 


--------------------------------------------------------------------------------
/src/components/header.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "gatsby"
 2 | import PropTypes from "prop-types"
 3 | import React from "react"
 4 | 
 5 | const Header = ({ siteTitle }) => (
 6 |   <header
 7 |     data-scroll
 8 |     data-scroll-sticky
 9 |     data-scroll-target="#container"
10 |     style={{
11 |       width: `100%`,
12 |       position: `fixed`,
13 |       top: 0,
14 |       left: 0,
15 |       zIndex: 10,
16 |     }}
17 |   >
18 |     <div
19 |       className="header"
20 |       style={{
21 |         background: `rebeccapurple`,
22 |         transition: `transform 0.35s ease`,
23 |       }}
24 |     >
25 |       <div
26 |         style={{
27 |           margin: `0 auto`,
28 |           maxWidth: 960,
29 |           padding: `0 1.0875rem`,
30 |           height: `80px`,
31 |           display: `flex`,
32 |           alignItems: `center`,
33 |         }}
34 |       >
35 |         <h1 style={{ fontSize: `30px`, margin: 0 }}>
36 |           <Link
37 |             to="/"
38 |             style={{
39 |               color: `white`,
40 |               textDecoration: `none`,
41 |             }}
42 |           >
43 |             {siteTitle}
44 |           </Link>
45 |         </h1>
46 |       </div>
47 |     </div>
48 |   </header>
49 | )
50 | 
51 | Header.propTypes = {
52 |   siteTitle: PropTypes.string,
53 | }
54 | 
55 | Header.defaultProps = {
56 |   siteTitle: ``,
57 | }
58 | 
59 | export default Header
60 | 


--------------------------------------------------------------------------------
/src/components/image.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { useStaticQuery, graphql } from "gatsby"
 3 | import Img from "gatsby-image"
 4 | 
 5 | /*
 6 |  * This component is built using `gatsby-image` to automatically serve optimized
 7 |  * images with lazy loading and reduced file sizes. The image is loaded using a
 8 |  * `useStaticQuery`, which allows us to load the image from directly within this
 9 |  * component, rather than having to pass the image data down from pages.
10 |  *
11 |  * For more information, see the docs:
12 |  * - `gatsby-image`: https://gatsby.dev/gatsby-image
13 |  * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
14 |  */
15 | 
16 | const Image = () => {
17 |   const data = useStaticQuery(graphql`
18 |     query {
19 |       placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
20 |         childImageSharp {
21 |           fluid(maxWidth: 300) {
22 |             ...GatsbyImageSharpFluid
23 |           }
24 |         }
25 |       }
26 |     }
27 |   `)
28 | 
29 |   return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
30 | }
31 | 
32 | export default Image
33 | 


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


--------------------------------------------------------------------------------
/src/components/layout.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Layout component that queries for data
 3 |  * with Gatsby's useStaticQuery component
 4 |  *
 5 |  * See: https://www.gatsbyjs.org/docs/use-static-query/
 6 |  */
 7 | 
 8 | import React from "react"
 9 | import PropTypes from "prop-types"
10 | import { useStaticQuery, graphql } from "gatsby"
11 | 
12 | import Scroll from "./locomotiveScroll"
13 | import Header from "./header"
14 | import "./layout.css"
15 | import "./locomotive-scroll.css"
16 | 
17 | // This `location` prop will serve as a callback on route change
18 | const Layout = ({ children, location }) => {
19 |   const data = useStaticQuery(graphql`
20 |     query SiteTitleQuery {
21 |       site {
22 |         siteMetadata {
23 |           title
24 |         }
25 |       }
26 |     }
27 |   `)
28 | 
29 |   return (
30 |     <>
31 |       <Header siteTitle={data.site.siteMetadata.title} />
32 | 
33 |       {/* Here we pass the callbacks to the component. Anything that impacts the innerHeight, for example: Font Loaded */}
34 |       <Scroll callbacks={location} />
35 | 
36 |       <div
37 |         id="container"
38 |         style={{
39 |           margin: `0 auto`,
40 |           maxWidth: 960,
41 |           padding: `120px 1.45rem 1.0875rem 1.45rem`,
42 |         }}
43 |       >
44 |         <main>{children}</main>
45 |         <footer>
46 |           © {new Date().getFullYear()}, Built with
47 |           {` `}
48 |           <a href="https://www.gatsbyjs.org">Gatsby</a>
49 |         </footer>
50 |       </div>
51 |     </>
52 |   )
53 | }
54 | 
55 | Layout.propTypes = {
56 |   children: PropTypes.node.isRequired,
57 | }
58 | 
59 | export default Layout
60 | 


--------------------------------------------------------------------------------
/src/components/locomotive-scroll.css:
--------------------------------------------------------------------------------
 1 | /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
 2 | html.has-scroll-smooth {
 3 |   overflow: hidden;
 4 | }
 5 | 
 6 | html.has-scroll-dragging {
 7 |   -webkit-user-select: none;
 8 |   -moz-user-select: none;
 9 |   -ms-user-select: none;
10 |   user-select: none;
11 | }
12 | 
13 | .has-scroll-smooth body {
14 |   overflow: hidden;
15 | }
16 | 
17 | /* Specifying the scroll container manually */
18 | .has-scroll-smooth #___gatsby,
19 | .has-scroll-smooth [data-scroll-container] {
20 |   min-height: 100vh;
21 | }
22 | 
23 | .c-scrollbar {
24 |   position: absolute;
25 |   right: 0;
26 |   top: 0;
27 |   width: 11px;
28 |   height: 100vh;
29 |   transform-origin: center right;
30 |   transition: transform 0.3s, opacity 0.3s;
31 |   opacity: 0;
32 | }
33 | .c-scrollbar:hover {
34 |   transform: scaleX(1.45);
35 | }
36 | .c-scrollbar:hover,
37 | .has-scroll-scrolling .c-scrollbar,
38 | .has-scroll-dragging .c-scrollbar {
39 |   opacity: 1;
40 | }
41 | 
42 | .c-scrollbar_thumb {
43 |   position: absolute;
44 |   top: 0;
45 |   right: 0;
46 |   background-color: black;
47 |   opacity: 0.5;
48 |   width: 7px;
49 |   border-radius: 10px;
50 |   margin: 2px;
51 |   cursor: -webkit-grab;
52 |   cursor: grab;
53 | }
54 | .has-scroll-dragging .c-scrollbar_thumb {
55 |   cursor: -webkit-grabbing;
56 |   cursor: grabbing;
57 | }
58 | 


--------------------------------------------------------------------------------
/src/components/locomotiveScroll.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react"
 2 | 
 3 | // We are excluding this from loading at build time in gatsby-node.js
 4 | import LocomotiveScroll from "locomotive-scroll"
 5 | 
 6 | import { scroll } from "../theme"
 7 | 
 8 | const Scroll = callbacks => {
 9 |   useEffect(() => {
10 |     let locomotiveScroll
11 |     locomotiveScroll = new LocomotiveScroll({
12 |       el: document.querySelector(scroll.container),
13 |       ...scroll.options,
14 |     })
15 |     locomotiveScroll.update()
16 | 
17 |     // Exposing to the global scope for ease of use.
18 |     window.scroll = locomotiveScroll
19 | 
20 |     locomotiveScroll.on("scroll", func => {
21 |       // Update `data-direction` with scroll direction.
22 |       document.documentElement.setAttribute("data-direction", func.direction)
23 |     })
24 | 
25 |     return () => {
26 |       if (locomotiveScroll) locomotiveScroll.destroy()
27 |     }
28 |   }, [callbacks])
29 | 
30 |   return null
31 | }
32 | 
33 | export default Scroll
34 | 


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


--------------------------------------------------------------------------------
/src/images/gatsby-astronaut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fcisio/gatsby-locomotivescroll-starter/0b00fd8eb89b2d23b4b638dd9a891ac990e285c4/src/images/gatsby-astronaut.png


--------------------------------------------------------------------------------
/src/images/gatsby-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fcisio/gatsby-locomotivescroll-starter/0b00fd8eb89b2d23b4b638dd9a891ac990e285c4/src/images/gatsby-icon.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
  1 | import React from "react"
  2 | import { Link } from "gatsby"
  3 | 
  4 | import Layout from "../components/layout"
  5 | import Image from "../components/image"
  6 | import Collapsible from "../components/collapsible"
  7 | import SEO from "../components/seo"
  8 | 
  9 | const IndexPage = () => (
 10 |   <Layout>
 11 |     <SEO title="Home" />
 12 |     <h1>Hi people</h1>
 13 |     <p>Welcome to my quick Locomotive scroll starter.</p>
 14 |     <h2>Locomotive Scroll and innerHeight</h2>
 15 |     <p>
 16 |       Any component that changes the innerHeight of the page should trigger the
 17 |       update method.
 18 |     </p>
 19 |     <p>
 20 |       In our case <code>window.scroll.update()</code>.{" "}
 21 |       <a href="https://github.com/fcisio/gatsby-locomotivescroll-starter/blob/master/src/components/collapsible.js">
 22 |         See the `collapsible` component
 23 |       </a>
 24 |       .
 25 |     </p>
 26 |     <Collapsible>
 27 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 28 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 29 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 30 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 31 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 32 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 33 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 34 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 35 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 36 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 37 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 38 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 39 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 40 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 41 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 42 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 43 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 44 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 45 |     </Collapsible>
 46 |     <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
 47 |       <Image />
 48 |     </div>
 49 |     <Link to="/page-2/">Go to page 2</Link> <br />
 50 |     <p>
 51 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 52 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 53 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 54 |     </p>
 55 |     <p>
 56 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 57 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 58 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 59 |     </p>
 60 |     <p>
 61 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 62 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 63 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 64 |     </p>
 65 |     <p>
 66 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 67 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 68 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 69 |     </p>
 70 |     <p>
 71 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 72 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 73 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 74 |     </p>
 75 |     <p>
 76 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 77 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 78 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 79 |     </p>
 80 |     <p>
 81 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 82 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 83 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 84 |     </p>
 85 |     <p>
 86 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 87 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 88 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 89 |     </p>
 90 |     <p>
 91 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 92 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 93 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 94 |     </p>
 95 |     <p>
 96 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 97 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 98 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 99 |     </p>
100 |     <p>
101 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
102 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
103 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
104 |     </p>
105 |     <p>
106 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
107 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
108 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
109 |     </p>
110 |     <p>
111 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
112 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
113 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
114 |     </p>
115 |     <p>
116 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
117 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
118 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
119 |     </p>
120 |     <p>
121 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
122 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
123 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
124 |     </p>
125 |     <p>
126 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
127 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
128 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
129 |     </p>
130 |     <p>
131 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
132 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
133 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
134 |     </p>
135 |     <p>
136 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
137 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
138 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
139 |     </p>
140 |     <p>
141 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
142 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
143 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
144 |     </p>
145 |     <p>
146 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
147 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
148 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
149 |     </p>
150 |     <p>
151 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
152 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
153 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
154 |     </p>
155 |     <p>
156 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
157 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
158 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
159 |     </p>
160 |     <p>
161 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
162 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
163 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
164 |     </p>
165 |     <p>
166 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
167 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
168 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
169 |     </p>
170 |   </Layout>
171 | )
172 | 
173 | export default IndexPage
174 | 


--------------------------------------------------------------------------------
/src/pages/page-2.js:
--------------------------------------------------------------------------------
  1 | import React from "react"
  2 | import { Link } from "gatsby"
  3 | 
  4 | import Layout from "../components/layout"
  5 | import SEO from "../components/seo"
  6 | 
  7 | const SecondPage = () => (
  8 |   <Layout>
  9 |     <SEO title="Page two" />
 10 |     <h1>Hi from the second page</h1>
 11 |     <p>Welcome to page 2</p>
 12 |     <Link to="/">Go back to the homepage</Link>
 13 |     <p>
 14 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 15 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 16 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 17 |     </p>
 18 |     <p>
 19 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 20 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 21 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 22 |     </p>
 23 |     <p>
 24 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 25 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 26 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 27 |     </p>
 28 |     <p>
 29 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 30 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 31 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 32 |     </p>
 33 |     <p>
 34 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 35 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 36 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 37 |     </p>
 38 |     <p>
 39 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 40 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 41 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 42 |     </p>
 43 |     <p>
 44 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 45 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 46 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 47 |     </p>
 48 |     <p>
 49 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 50 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 51 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 52 |     </p>
 53 |     <p>
 54 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 55 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 56 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 57 |     </p>
 58 |     <p>
 59 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 60 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 61 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 62 |     </p>
 63 |     <p>
 64 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 65 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 66 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 67 |     </p>
 68 |     <p>
 69 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 70 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 71 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 72 |     </p>
 73 |     <p>
 74 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 75 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 76 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 77 |     </p>
 78 |     <p>
 79 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 80 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 81 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 82 |     </p>
 83 |     <p>
 84 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 85 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 86 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 87 |     </p>
 88 |     <p>
 89 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 90 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 91 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 92 |     </p>
 93 |     <p>
 94 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
 95 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
 96 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
 97 |     </p>
 98 |     <p>
 99 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
100 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
101 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
102 |     </p>
103 |     <p>
104 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
105 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
106 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
107 |     </p>
108 |     <p>
109 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
110 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
111 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
112 |     </p>
113 |     <p>
114 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
115 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
116 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
117 |     </p>
118 |     <p>
119 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
120 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
121 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
122 |     </p>
123 |     <p>
124 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
125 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
126 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
127 |     </p>
128 |     <p>
129 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. A libero
130 |       veritatis totam, iste hic quibusdam doloribus, odio aliquid molestiae sunt
131 |       rem. Minima, adipisci modi! Cumque aperiam delectus pariatur quia quo.
132 |     </p>
133 |   </Layout>
134 | )
135 | 
136 | export default SecondPage
137 | 


--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
 1 | export const scroll = {
 2 |   // Locomotive Scroll
 3 |   // https://github.com/locomotivemtl/locomotive-scroll#instance-options
 4 |   container: "#___gatsby",
 5 |   options: {
 6 |     smooth: true,
 7 |     smoothMobile: false,
 8 |     getDirection: true,
 9 |     touchMultiplier: 2.5,
10 |     lerp: 0.15,
11 |   },
12 | }
13 | 


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