├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── CONTRIBUTING.md ├── README.md ├── config.js ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package.json └── src ├── assets ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── images │ ├── arrow.svg │ ├── banner.svg │ ├── bg-alt.jpg │ ├── bg.jpg │ ├── fulls │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── 03.jpg │ │ ├── 04.jpg │ │ ├── 05.jpg │ │ ├── 06.jpg │ │ ├── 07.jpg │ │ └── 08.jpg │ ├── loader.gif │ ├── overlay.png │ ├── overlayw.png │ ├── pic01.jpg │ ├── pic02.jpg │ ├── poptrox-closer.svg │ ├── poptrox-nav.svg │ └── thumbs │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── 03.jpg │ │ ├── 04.jpg │ │ ├── 05.jpg │ │ ├── 06.jpg │ │ ├── 07.jpg │ │ └── 08.jpg ├── img │ ├── demo.png │ ├── overflow.jpg │ └── website-icon.png └── sass │ ├── font-awesome.min.css │ ├── libs │ ├── _breakpoints.scss │ ├── _functions.scss │ ├── _html-grid.scss │ ├── _mixins.scss │ ├── _vars.scss │ └── _vendor.scss │ ├── main.scss │ └── noscript.scss ├── components ├── Footer.js ├── Gallery.js ├── Header.js ├── Layout.js └── Scroll.js └── pages ├── 404.js ├── Element.js └── index.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [anubhavsrivastava] 4 | patreon: theanubhav 5 | open_collective: onlyanubhav 6 | ko_fi: theanubhav 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: ['https://donorbox.org/theanubhav', 'https://www.buymeacoffee.com/theanubhav','https://paypal.me/onlyanubhav', 'https://theanubhav.com/sponsor'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | .cache 3 | node_modules 4 | yarn-error.log 5 | package-lock.json 6 | yarn.lock 7 | 8 | # Build directory 9 | /public 10 | .DS_Store 11 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please ensure your pull request follow these guidelines: 4 | 5 | - Search previous suggestions before making a new one, as yours may be a duplicate. 6 | - Make an individual pull request for each suggestion. Another way to suggest it opening an issue on this repository. 7 | - Keep descriptions short and simple, but descriptive. 8 | - Check your spelling and grammar. 9 | - Make sure your text editor is set to remove trailing whitespace and not change any other part of except for place you desire. 10 | 11 | Thank you for your contributions/suggestions! 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gatsby-starter-overflow 2 | 3 | Gatsby.js V4 starter template based on Overflow by HTML5 UP 4 | 5 | For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/). 6 | 7 | ![Screenshot](./src/assets/img/overflow.jpg) 8 | 9 | Check online preview [here](https://anubhavsrivastava.github.io/gatsby-starter-overflow/) 10 | 11 | ## Screenshot 12 | 13 | ![Screenshot](./src/assets/img/demo.png) 14 | 15 | ## Install 16 | 17 | Make sure that you have the Gatsby CLI program installed: 18 | 19 | ```sh 20 | npm install --global gatsby-cli 21 | ``` 22 | 23 | And run from your CLI: 24 | 25 | ```sh 26 | gatsby new https://github.com/anubhavsrivastava/gatsby-starter-overflow 27 | ``` 28 | 29 | Then you can run it by: 30 | 31 | ```sh 32 | cd gatsby-example-site 33 | npm install 34 | gatsby develop 35 | ``` 36 | 37 | ### Personalization 38 | 39 | Edit `config.js` to put up your details 40 | 41 | ```javascript 42 | module.exports = { 43 | siteTitle: 'Gatsby Starter overflow', // 44 | ... 45 | authorName: 'Anubhav Srivastava', 46 | heading: 'Web Developer', 47 | // social 48 | socialLinks: [ 49 | { 50 | icon: 'fa-github', 51 | name: 'Github', 52 | url: 'https://github.com/anubhavsrivastava', 53 | } 54 | ... 55 | ], 56 | }; 57 | 58 | ``` 59 | 60 | ### Deploying using Github page 61 | 62 | `package.json` has a default script that uses `gh-pages` module to publish on Github pages. Simply running `npm run deploy` would publish the site on github pages. 63 | 64 | Additionally, it also has [path-prefix](https://www.gatsbyjs.org/docs/path-prefix/) value set for gatsby config in `config.js`. Change `pathPrefix` to relevant path if your gatsby site is hosted on subpath of a domain, `https://theanubhav.com/somePath/`. If you are hosting it as root site, i.e, `https://theanubhav.com/` , remove the pathPrefix configuration. 65 | 66 | ### Checkout other similar starters 67 | 68 | - [gatsby-starter-casual](https://github.com/anubhavsrivastava/gatsby-starter-casual) 69 | - [gatsby-starter-grayscale](https://github.com/anubhavsrivastava/gatsby-starter-grayscale) 70 | - [gatsby-starter-resume](https://github.com/anubhavsrivastava/gatsby-starter-resume) 71 | - [gatsby-starter-spectral](https://github.com/anubhavsrivastava/gatsby-starter-spectral) 72 | - [gatsby-starter-newage](https://github.com/anubhavsrivastava/gatsby-starter-newage) 73 | - [gatsby-starter-stylish](https://github.com/anubhavsrivastava/gatsby-starter-stylish) 74 | - [gatsby-starter-solidstate](https://github.com/anubhavsrivastava/gatsby-starter-solidstate) 75 | - [gatsby-starter-readonly](https://github.com/anubhavsrivastava/gatsby-starter-readonly) 76 | - [gatsby-starter-prologue](https://github.com/anubhavsrivastava/gatsby-starter-prologue) 77 | - [gatsby-starter-phantom](https://github.com/anubhavsrivastava/gatsby-starter-phantom) 78 | - [gatsby-starter-paradigmshift](https://github.com/anubhavsrivastava/gatsby-starter-paradigmshift) 79 | - [gatsby-starter-multiverse](https://github.com/anubhavsrivastava/gatsby-starter-multiverse) 80 | - [gatsby-starter-identity](https://github.com/anubhavsrivastava/gatsby-starter-identity) 81 | - [gatsby-starter-highlights](https://github.com/anubhavsrivastava/gatsby-starter-highlights) 82 | - [gatsby-starter-fractal](https://github.com/anubhavsrivastava/gatsby-starter-fractal) 83 | - [gatsby-starter-eventually](https://github.com/anubhavsrivastava/gatsby-starter-eventually) 84 | - [gatsby-starter-directive](https://github.com/anubhavsrivastava/gatsby-starter-directive) 85 | - [gatsby-starter-creative](https://github.com/anubhavsrivastava/gatsby-starter-creative) 86 | - [gatsby-starter-aerial](https://github.com/anubhavsrivastava/gatsby-starter-aerial) 87 | 88 | ### Contribution 89 | 90 | Suggestions and PRs are welcome! 91 | 92 | Please create issue or open PR request for contribution. 93 | 94 | ### License 95 | 96 | [![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](LICENSE) 97 | 98 | refer `LICENSE` file in this repository. 99 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteTitle: 'Gatsby Starter Overflow', // <title> 3 | manifestName: 'Overflow', 4 | manifestShortName: 'Landing', // max 12 characters 5 | manifestStartUrl: '/', 6 | manifestBackgroundColor: '#663399', 7 | manifestThemeColor: '#663399', 8 | manifestDisplay: 'standalone', 9 | manifestIcon: 'src/assets/img/website-icon.png', 10 | pathPrefix: `/gatsby-starter-overflow/`, // This path is subpath of your hosting https://domain/portfolio 11 | authorName: 'Anubhav', 12 | heading: 'Web Developer', 13 | // social 14 | socialLinks: [ 15 | { 16 | icon: 'fa-github', 17 | name: 'Github', 18 | url: 'https://github.com/anubhavsrivastava', 19 | }, 20 | { 21 | icon: 'fa-twitter', 22 | name: 'Twitter', 23 | url: 'https://twitter.com/onlyanubhav', 24 | }, 25 | { 26 | icon: 'fa-facebook', 27 | name: 'Facebook', 28 | url: 'https://facebook.com/theanubhav', 29 | }, 30 | { 31 | icon: 'fa-envelope-o', 32 | name: 'Email', 33 | url: 'mailto:anubhav.srivastava00@gmail.com', 34 | }, 35 | ], 36 | }; 37 | -------------------------------------------------------------------------------- /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 | const config = require('./config'); 2 | 3 | module.exports = { 4 | pathPrefix: config.pathPrefix, 5 | siteMetadata: { 6 | title: config.siteTitle, 7 | }, 8 | plugins: [ 9 | 'gatsby-plugin-react-helmet', 10 | { 11 | resolve: `gatsby-plugin-manifest`, 12 | options: { 13 | name: config.manifestName, 14 | short_name: config.manifestShortName, 15 | start_url: config.pathPrefix || config.manifestStartUrl, 16 | background_color: config.manifestBackgroundColor, 17 | theme_color: config.manifestThemeColor, 18 | display: config.manifestDisplay, 19 | icon: config.manifestIcon, // This path is relative to the root of the site. 20 | }, 21 | }, 22 | 'gatsby-plugin-sass', 23 | 'gatsby-plugin-offline', 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /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 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /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-starter-overflow", 3 | "version": "0.0.2", 4 | "description": "Gatsby.js V4 starter template based on Overflow by HTML5 UP", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/anubhavsrivastava/gatsby-starter-overflow.git" 8 | }, 9 | "author": { 10 | "name": "Anubhav Srivastava", 11 | "email": "anubhav.srivastava00@gmail.com" 12 | }, 13 | "dependencies": { 14 | "gatsby": "^4.2.0", 15 | "gatsby-plugin-manifest": "^4.2.0", 16 | "gatsby-plugin-offline": "^5.2.0", 17 | "gatsby-plugin-react-helmet": "^5.2.0", 18 | "gatsby-plugin-sass": "^5.2.0", 19 | "node-sass": "^6.0.1", 20 | "react": "^16.13.1", 21 | "react-dom": "^16.13.1", 22 | "react-helmet": "^5.2.1", 23 | "react-images": "^0.5.19", 24 | "react-scrollspy": "^3.4.2", 25 | "sass": "^1.47.0", 26 | "smoothscroll-polyfill": "^0.4.4" 27 | }, 28 | "scripts": { 29 | "develop": "gatsby develop", 30 | "build": "npm run clean && gatsby build", 31 | "deploy": "npm run clean && gatsby build --prefix-paths && gh-pages -d public", 32 | "serve": "gatsby serve", 33 | "clean": "rimraf .cache public", 34 | "format": "prettier --write '**/*.js'", 35 | "test": "echo \"Error: no test specified\" && exit 1" 36 | }, 37 | "devDependencies": { 38 | "gh-pages": "^3.2.3", 39 | "prettier": "^2.4.1", 40 | "rimraf": "^3.0.2" 41 | }, 42 | "keywords": [ 43 | "gatsby", 44 | "gatsby-starter", 45 | "gatsby-starter-overflow" 46 | ], 47 | "license": "MIT", 48 | "bugs": { 49 | "url": "https://github.com/anubhavsrivastava/gatsby-starter-overflow/issues" 50 | }, 51 | "homepage": "https://github.com/anubhavsrivastava/gatsby-starter-overflow#readme" 52 | } 53 | -------------------------------------------------------------------------------- /src/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/assets/images/arrow.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90px" height="66px" viewBox="0 0 90 66" zoomAndPan="disable"> 2 | 3 | <line x1="1" y1="1" x2="90" y2="1" style="stroke:#fff;stroke-width:1" /> 4 | <line x1="1" y1="1" x2="45.5" y2="46" style="stroke:#fff;stroke-width:1" /> 5 | <line x1="90" y1="1" x2="45.5" y2="46" style="stroke:#fff;stroke-width:1" /> 6 | 7 | <line x1="1" y1="21" x2="90" y2="21" style="stroke:#fff;stroke-width:1" /> 8 | <line x1="1" y1="21" x2="45.5" y2="66" style="stroke:#fff;stroke-width:1" /> 9 | <line x1="90" y1="21" x2="45.5" y2="66" style="stroke:#fff;stroke-width:1" /> 10 | 11 | </svg> -------------------------------------------------------------------------------- /src/assets/images/banner.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1800px" height="900px" viewBox="0 0 1800 900" zoomAndPan="disable"> 2 | 3 | <style type="text/css"><![CDATA[ 4 | line 5 | { 6 | stroke: rgba(255,255,255,0.125); 7 | stroke-width: 0.85px; 8 | } 9 | 10 | polygon 11 | { 12 | fill: rgba(255,255,255,0.075); 13 | } 14 | ]]></style> 15 | 16 | <!-- Middle line --> 17 | <line x1="900" y1="0" x2="900" y2="900" /> 18 | 19 | <!-- Lines --> 20 | <line x1="0" y1="0" x2="900" y2="900" /> 21 | <line x1="100" y1="0" x2="900" y2="800" /> 22 | <line x1="200" y1="0" x2="900" y2="700" /> 23 | <line x1="300" y1="0" x2="900" y2="600" /> 24 | <line x1="400" y1="0" x2="900" y2="500" /> 25 | <line x1="300" y1="900" x2="600" y2="600" /> 26 | <line x1="400" y1="900" x2="700" y2="600" /> 27 | <line x1="500" y1="900" x2="800" y2="600" /> 28 | <line x1="600" y1="900" x2="900" y2="600" /> 29 | <line x1="700" y1="900" x2="900" y2="700" /> 30 | <line x1="800" y1="900" x2="900" y2="800" /> 31 | 32 | <line x1="1800" y1="0" x2="900" y2="900" /> 33 | <line x1="1700" y1="0" x2="900" y2="800" /> 34 | <line x1="1600" y1="0" x2="900" y2="700" /> 35 | <line x1="1500" y1="0" x2="900" y2="600" /> 36 | <line x1="1400" y1="0" x2="900" y2="500" /> 37 | <line x1="1500" y1="900" x2="1200" y2="600" /> 38 | <line x1="1400" y1="900" x2="1100" y2="600" /> 39 | <line x1="1300" y1="900" x2="1000" y2="600" /> 40 | <line x1="1200" y1="900" x2="900" y2="600" /> 41 | <line x1="1100" y1="900" x2="900" y2="700" /> 42 | <line x1="1000" y1="900" x2="900" y2="800" /> 43 | 44 | <!-- Fills --> 45 | <polygon points="300,900 600,600 650,650 700,600 750,650 800,600 850,650 900,600 900,900 900,600 950,650 1000,600 1050,650 1100,600 1150,650 1200,600 1500,900" /> 46 | <polygon points="350,950 650,650 700,700 750,650 800,700 850,650 900,700 900,900 900,700 950,650 1000,700 1050,650 1100,700 1150,650 1450,950" /> 47 | 48 | <polygon points="400,1000 700,700 750,750 800,700 850,750 900,700 900,900 900,700 950,750 1000,700 1050,750 1100,700 1300,900" /> 49 | 50 | <polygon points="450,1050 750,750 800,800 850,750 900,800 900,900 900,800 950,750 1000,800 1050,750 1350,1050" /> 51 | <polygon points="500,1100 800,800 850,850 900,800 900,900 900,800 950,850 1000,800 1300,1100" /> 52 | <polygon points="550,1150 850,850 900,900 950,850 1250,1150" /> 53 | 54 | </svg> -------------------------------------------------------------------------------- /src/assets/images/bg-alt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/bg-alt.jpg -------------------------------------------------------------------------------- /src/assets/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/bg.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/fulls/01.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/fulls/02.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/fulls/03.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/fulls/04.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/fulls/05.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/fulls/06.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/fulls/07.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/fulls/08.jpg -------------------------------------------------------------------------------- /src/assets/images/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/loader.gif -------------------------------------------------------------------------------- /src/assets/images/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/overlay.png -------------------------------------------------------------------------------- /src/assets/images/overlayw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/overlayw.png -------------------------------------------------------------------------------- /src/assets/images/pic01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/pic01.jpg -------------------------------------------------------------------------------- /src/assets/images/pic02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/pic02.jpg -------------------------------------------------------------------------------- /src/assets/images/poptrox-closer.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 32 32" zoomAndPan="disable"> 2 | 3 | <line x1="8" y1="8" x2="24" y2="24" style="stroke:#fff;stroke-width:1.5" /> 4 | <line x1="8" y1="24" x2="24" y2="8" style="stroke:#fff;stroke-width:1.5" /> 5 | 6 | </svg> -------------------------------------------------------------------------------- /src/assets/images/poptrox-nav.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="64px" viewBox="0 0 96 64" zoomAndPan="disable"> 2 | 3 | <line x1="32" y1="1" x2="64" y2="32" style="stroke:#fff;stroke-width:1.5" /> 4 | <line x1="32" y1="64" x2="64" y2="32" style="stroke:#fff;stroke-width:1.5" /> 5 | 6 | </svg> -------------------------------------------------------------------------------- /src/assets/images/thumbs/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/thumbs/01.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/thumbs/02.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/thumbs/03.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/thumbs/04.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/thumbs/05.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/thumbs/06.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/thumbs/07.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/images/thumbs/08.jpg -------------------------------------------------------------------------------- /src/assets/img/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/img/demo.png -------------------------------------------------------------------------------- /src/assets/img/overflow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/img/overflow.jpg -------------------------------------------------------------------------------- /src/assets/img/website-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-overflow/b75f320e137dd8d89a130b6fdf57d075adedc139/src/assets/img/website-icon.png -------------------------------------------------------------------------------- /src/assets/sass/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} 5 | -------------------------------------------------------------------------------- /src/assets/sass/libs/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // breakpoints.scss v1.0 | @ajlkn | MIT licensed */ 2 | 3 | // Vars. 4 | 5 | /// Breakpoints. 6 | /// @var {list} 7 | $breakpoints: (); 8 | 9 | // Mixins. 10 | 11 | /// Sets breakpoints. 12 | /// @param {map} $x Breakpoints. 13 | @mixin breakpoints($x: ()) { 14 | $breakpoints: $x !global; 15 | } 16 | 17 | /// Wraps @content in a @media block targeting a specific orientation. 18 | /// @param {string} $orientation Orientation. 19 | @mixin orientation($orientation) { 20 | @media screen and (orientation: #{$orientation}) { 21 | @content; 22 | } 23 | } 24 | 25 | /// Wraps @content in a @media block using a given query. 26 | /// @param {string} $query Query. 27 | @mixin breakpoint($query: null) { 28 | 29 | $breakpoint: null; 30 | $op: null; 31 | $media: null; 32 | 33 | // Determine operator, breakpoint. 34 | 35 | // Greater than or equal. 36 | @if (str-slice($query, 0, 2) == '>=') { 37 | 38 | $op: 'gte'; 39 | $breakpoint: str-slice($query, 3); 40 | 41 | } 42 | 43 | // Less than or equal. 44 | @else if (str-slice($query, 0, 2) == '<=') { 45 | 46 | $op: 'lte'; 47 | $breakpoint: str-slice($query, 3); 48 | 49 | } 50 | 51 | // Greater than. 52 | @else if (str-slice($query, 0, 1) == '>') { 53 | 54 | $op: 'gt'; 55 | $breakpoint: str-slice($query, 2); 56 | 57 | } 58 | 59 | // Less than. 60 | @else if (str-slice($query, 0, 1) == '<') { 61 | 62 | $op: 'lt'; 63 | $breakpoint: str-slice($query, 2); 64 | 65 | } 66 | 67 | // Not. 68 | @else if (str-slice($query, 0, 1) == '!') { 69 | 70 | $op: 'not'; 71 | $breakpoint: str-slice($query, 2); 72 | 73 | } 74 | 75 | // Equal. 76 | @else { 77 | 78 | $op: 'eq'; 79 | $breakpoint: $query; 80 | 81 | } 82 | 83 | // Build media. 84 | @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { 85 | 86 | $a: map-get($breakpoints, $breakpoint); 87 | 88 | // Range. 89 | @if (type-of($a) == 'list') { 90 | 91 | $x: nth($a, 1); 92 | $y: nth($a, 2); 93 | 94 | // Max only. 95 | @if ($x == null) { 96 | 97 | // Greater than or equal (>= 0 / anything) 98 | @if ($op == 'gte') { 99 | $media: 'screen'; 100 | } 101 | 102 | // Less than or equal (<= y) 103 | @else if ($op == 'lte') { 104 | $media: 'screen and (max-width: ' + $y + ')'; 105 | } 106 | 107 | // Greater than (> y) 108 | @else if ($op == 'gt') { 109 | $media: 'screen and (min-width: ' + ($y + 1) + ')'; 110 | } 111 | 112 | // Less than (< 0 / invalid) 113 | @else if ($op == 'lt') { 114 | $media: 'screen and (max-width: -1px)'; 115 | } 116 | 117 | // Not (> y) 118 | @else if ($op == 'not') { 119 | $media: 'screen and (min-width: ' + ($y + 1) + ')'; 120 | } 121 | 122 | // Equal (<= y) 123 | @else { 124 | $media: 'screen and (max-width: ' + $y + ')'; 125 | } 126 | 127 | } 128 | 129 | // Min only. 130 | @else if ($y == null) { 131 | 132 | // Greater than or equal (>= x) 133 | @if ($op == 'gte') { 134 | $media: 'screen and (min-width: ' + $x + ')'; 135 | } 136 | 137 | // Less than or equal (<= inf / anything) 138 | @else if ($op == 'lte') { 139 | $media: 'screen'; 140 | } 141 | 142 | // Greater than (> inf / invalid) 143 | @else if ($op == 'gt') { 144 | $media: 'screen and (max-width: -1px)'; 145 | } 146 | 147 | // Less than (< x) 148 | @else if ($op == 'lt') { 149 | $media: 'screen and (max-width: ' + ($x - 1) + ')'; 150 | } 151 | 152 | // Not (< x) 153 | @else if ($op == 'not') { 154 | $media: 'screen and (max-width: ' + ($x - 1) + ')'; 155 | } 156 | 157 | // Equal (>= x) 158 | @else { 159 | $media: 'screen and (min-width: ' + $x + ')'; 160 | } 161 | 162 | } 163 | 164 | // Min and max. 165 | @else { 166 | 167 | // Greater than or equal (>= x) 168 | @if ($op == 'gte') { 169 | $media: 'screen and (min-width: ' + $x + ')'; 170 | } 171 | 172 | // Less than or equal (<= y) 173 | @else if ($op == 'lte') { 174 | $media: 'screen and (max-width: ' + $y + ')'; 175 | } 176 | 177 | // Greater than (> y) 178 | @else if ($op == 'gt') { 179 | $media: 'screen and (min-width: ' + ($y + 1) + ')'; 180 | } 181 | 182 | // Less than (< x) 183 | @else if ($op == 'lt') { 184 | $media: 'screen and (max-width: ' + ($x - 1) + ')'; 185 | } 186 | 187 | // Not (< x and > y) 188 | @else if ($op == 'not') { 189 | $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')'; 190 | } 191 | 192 | // Equal (>= x and <= y) 193 | @else { 194 | $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')'; 195 | } 196 | 197 | } 198 | 199 | } 200 | 201 | // String. 202 | @else { 203 | 204 | // Missing a media type? Prefix with "screen". 205 | @if (str-slice($a, 0, 1) == '(') { 206 | $media: 'screen and ' + $a; 207 | } 208 | 209 | // Otherwise, use as-is. 210 | @else { 211 | $media: $a; 212 | } 213 | 214 | } 215 | 216 | } 217 | 218 | // Output. 219 | @media #{$media} { 220 | @content; 221 | } 222 | 223 | } -------------------------------------------------------------------------------- /src/assets/sass/libs/_functions.scss: -------------------------------------------------------------------------------- 1 | /// Removes a specific item from a list. 2 | /// @author Hugo Giraudel 3 | /// @param {list} $list List. 4 | /// @param {integer} $index Index. 5 | /// @return {list} Updated list. 6 | @function remove-nth($list, $index) { 7 | 8 | $result: null; 9 | 10 | @if type-of($index) != number { 11 | @warn "$index: #{quote($index)} is not a number for `remove-nth`."; 12 | } 13 | @else if $index == 0 { 14 | @warn "List index 0 must be a non-zero integer for `remove-nth`."; 15 | } 16 | @else if abs($index) > length($list) { 17 | @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; 18 | } 19 | @else { 20 | 21 | $result: (); 22 | $index: if($index < 0, length($list) + $index + 1, $index); 23 | 24 | @for $i from 1 through length($list) { 25 | 26 | @if $i != $index { 27 | $result: append($result, nth($list, $i)); 28 | } 29 | 30 | } 31 | 32 | } 33 | 34 | @return $result; 35 | 36 | } 37 | 38 | /// Gets a value from a map. 39 | /// @author Hugo Giraudel 40 | /// @param {map} $map Map. 41 | /// @param {string} $keys Key(s). 42 | /// @return {string} Value. 43 | @function val($map, $keys...) { 44 | 45 | @if nth($keys, 1) == null { 46 | $keys: remove-nth($keys, 1); 47 | } 48 | 49 | @each $key in $keys { 50 | $map: map-get($map, $key); 51 | } 52 | 53 | @return $map; 54 | 55 | } 56 | 57 | /// Gets a duration value. 58 | /// @param {string} $keys Key(s). 59 | /// @return {string} Value. 60 | @function _duration($keys...) { 61 | @return val($duration, $keys...); 62 | } 63 | 64 | /// Gets a font value. 65 | /// @param {string} $keys Key(s). 66 | /// @return {string} Value. 67 | @function _font($keys...) { 68 | @return val($font, $keys...); 69 | } 70 | 71 | /// Gets a misc value. 72 | /// @param {string} $keys Key(s). 73 | /// @return {string} Value. 74 | @function _misc($keys...) { 75 | @return val($misc, $keys...); 76 | } 77 | 78 | /// Gets a palette value. 79 | /// @param {string} $keys Key(s). 80 | /// @return {string} Value. 81 | @function _palette($keys...) { 82 | @return val($palette, $keys...); 83 | } 84 | 85 | /// Gets a size value. 86 | /// @param {string} $keys Key(s). 87 | /// @return {string} Value. 88 | @function _size($keys...) { 89 | @return val($size, $keys...); 90 | } -------------------------------------------------------------------------------- /src/assets/sass/libs/_html-grid.scss: -------------------------------------------------------------------------------- 1 | // html-grid.scss v1.0 | @ajlkn | MIT licensed */ 2 | 3 | // Mixins. 4 | 5 | /// Initializes the current element as an HTML grid. 6 | /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). 7 | /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). 8 | @use "sass:math"; 9 | 10 | @mixin html-grid($gutters: 1.5em, $suffix: '') { 11 | 12 | // Initialize. 13 | $cols: 12; 14 | $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00; 15 | $unit: math.div(100%, $cols); 16 | 17 | // Suffixes. 18 | $suffixes: null; 19 | 20 | @if (type-of($suffix) == 'list') { 21 | $suffixes: $suffix; 22 | } 23 | @else { 24 | $suffixes: ($suffix); 25 | } 26 | 27 | // Gutters. 28 | $guttersCols: null; 29 | $guttersRows: null; 30 | 31 | @if (type-of($gutters) == 'list') { 32 | 33 | $guttersCols: nth($gutters, 1); 34 | $guttersRows: nth($gutters, 2); 35 | 36 | } 37 | @else { 38 | 39 | $guttersCols: $gutters; 40 | $guttersRows: 0; 41 | 42 | } 43 | 44 | // Row. 45 | display: flex; 46 | flex-wrap: wrap; 47 | box-sizing: border-box; 48 | align-items: stretch; 49 | 50 | // Columns. 51 | > * { 52 | box-sizing: border-box; 53 | } 54 | 55 | // Gutters. 56 | &.gtr-uniform { 57 | > * { 58 | > :last-child { 59 | margin-bottom: 0; 60 | } 61 | } 62 | } 63 | 64 | // Alignment. 65 | &.aln-left { 66 | justify-content: flex-start; 67 | } 68 | 69 | &.aln-center { 70 | justify-content: center; 71 | } 72 | 73 | &.aln-right { 74 | justify-content: flex-end; 75 | } 76 | 77 | &.aln-top { 78 | align-items: flex-start; 79 | } 80 | 81 | &.aln-middle { 82 | align-items: center; 83 | } 84 | 85 | &.aln-bottom { 86 | align-items: flex-end; 87 | } 88 | 89 | // Step through suffixes. 90 | @each $suffix in $suffixes { 91 | 92 | // Suffix. 93 | @if ($suffix != '') { 94 | $suffix: '-' + $suffix; 95 | } 96 | @else { 97 | $suffix: ''; 98 | } 99 | 100 | // Row. 101 | 102 | // Important. 103 | > .imp#{$suffix} { 104 | order: -1; 105 | } 106 | 107 | // Columns, offsets. 108 | @for $i from 1 through $cols { 109 | > .col-#{$i}#{$suffix} { 110 | width: $unit * $i; 111 | } 112 | 113 | > .off-#{$i}#{$suffix} { 114 | margin-left: $unit * $i; 115 | } 116 | } 117 | 118 | // Step through multipliers. 119 | @each $multiplier in $multipliers { 120 | 121 | // Gutters. 122 | $class: null; 123 | 124 | @if ($multiplier != 1) { 125 | $class: '.gtr-' + ($multiplier * 100); 126 | } 127 | 128 | &#{$class} { 129 | margin-top: ($guttersRows * $multiplier * -1); 130 | margin-left: ($guttersCols * $multiplier * -1); 131 | 132 | > * { 133 | padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier); 134 | } 135 | 136 | // Uniform. 137 | &.gtr-uniform { 138 | margin-top: $guttersCols * $multiplier * -1; 139 | 140 | > * { 141 | padding-top: $guttersCols * $multiplier; 142 | } 143 | } 144 | 145 | } 146 | 147 | } 148 | 149 | } 150 | 151 | } -------------------------------------------------------------------------------- /src/assets/sass/libs/_mixins.scss: -------------------------------------------------------------------------------- 1 | /// Makes an element's :before pseudoelement a FontAwesome icon. 2 | /// @param {string} $content Optional content value to use. 3 | /// @param {string} $where Optional pseudoelement to target (before or after). 4 | @mixin icon($content: false, $where: before) { 5 | 6 | text-decoration: none; 7 | 8 | &:#{$where} { 9 | 10 | @if $content { 11 | content: $content; 12 | } 13 | 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-font-smoothing: antialiased; 16 | font-family: FontAwesome; 17 | font-style: normal; 18 | font-weight: normal; 19 | text-transform: none !important; 20 | 21 | } 22 | 23 | } 24 | 25 | /// Applies padding to an element, taking the current element-margin value into account. 26 | /// @param {mixed} $tb Top/bottom padding. 27 | /// @param {mixed} $lr Left/right padding. 28 | /// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) 29 | /// @param {bool} $important If true, adds !important. 30 | @mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { 31 | 32 | @if $important { 33 | $important: '!important'; 34 | } 35 | 36 | $x: 0.1em; 37 | 38 | @if unit(_size(element-margin)) == 'rem' { 39 | $x: 0.1rem; 40 | } 41 | 42 | padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; 43 | 44 | } 45 | 46 | /// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). 47 | /// @param {string} $svg SVG data URL. 48 | /// @return {string} Encoded SVG data URL. 49 | @function svg-url($svg) { 50 | 51 | $svg: str-replace($svg, '"', '\''); 52 | $svg: str-replace($svg, '%', '%25'); 53 | $svg: str-replace($svg, '<', '%3C'); 54 | $svg: str-replace($svg, '>', '%3E'); 55 | $svg: str-replace($svg, '&', '%26'); 56 | $svg: str-replace($svg, '#', '%23'); 57 | $svg: str-replace($svg, '{', '%7B'); 58 | $svg: str-replace($svg, '}', '%7D'); 59 | $svg: str-replace($svg, ';', '%3B'); 60 | 61 | @return url("data:image/svg+xml;charset=utf8,#{$svg}"); 62 | 63 | } -------------------------------------------------------------------------------- /src/assets/sass/libs/_vars.scss: -------------------------------------------------------------------------------- 1 | // Misc. 2 | $misc: ( 3 | z-index-base: 10000 4 | ); 5 | 6 | // Duration. 7 | $duration: ( 8 | navPanel: 0.5s 9 | ); 10 | 11 | // Size. 12 | $size: ( 13 | navPanel: 275px 14 | ); 15 | 16 | // Font. 17 | $font: ( 18 | ); 19 | 20 | // Palette. 21 | $palette: ( 22 | ); -------------------------------------------------------------------------------- /src/assets/sass/libs/_vendor.scss: -------------------------------------------------------------------------------- 1 | // vendor.scss v1.0 | @ajlkn | MIT licensed */ 2 | 3 | // Vars. 4 | 5 | /// Vendor prefixes. 6 | /// @var {list} 7 | $vendor-prefixes: ( 8 | '-moz-', 9 | '-webkit-', 10 | '-ms-', 11 | '' 12 | ); 13 | 14 | /// Properties that should be vendorized. 15 | /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org 16 | /// @var {list} 17 | $vendor-properties: ( 18 | 19 | // Animation. 20 | 'animation', 21 | 'animation-delay', 22 | 'animation-direction', 23 | 'animation-duration', 24 | 'animation-fill-mode', 25 | 'animation-iteration-count', 26 | 'animation-name', 27 | 'animation-play-state', 28 | 'animation-timing-function', 29 | 30 | // Appearance. 31 | 'appearance', 32 | 33 | // Backdrop filter. 34 | 'backdrop-filter', 35 | 36 | // Background image options. 37 | 'background-clip', 38 | 'background-origin', 39 | 'background-size', 40 | 41 | // Box sizing. 42 | 'box-sizing', 43 | 44 | // Clip path. 45 | 'clip-path', 46 | 47 | // Filter effects. 48 | 'filter', 49 | 50 | // Flexbox. 51 | 'align-content', 52 | 'align-items', 53 | 'align-self', 54 | 'flex', 55 | 'flex-basis', 56 | 'flex-direction', 57 | 'flex-flow', 58 | 'flex-grow', 59 | 'flex-shrink', 60 | 'flex-wrap', 61 | 'justify-content', 62 | 'order', 63 | 64 | // Font feature. 65 | 'font-feature-settings', 66 | 'font-language-override', 67 | 'font-variant-ligatures', 68 | 69 | // Font kerning. 70 | 'font-kerning', 71 | 72 | // Fragmented borders and backgrounds. 73 | 'box-decoration-break', 74 | 75 | // Grid layout. 76 | 'grid-column', 77 | 'grid-column-align', 78 | 'grid-column-end', 79 | 'grid-column-start', 80 | 'grid-row', 81 | 'grid-row-align', 82 | 'grid-row-end', 83 | 'grid-row-start', 84 | 'grid-template-columns', 85 | 'grid-template-rows', 86 | 87 | // Hyphens. 88 | 'hyphens', 89 | 'word-break', 90 | 91 | // Masks. 92 | 'mask', 93 | 'mask-border', 94 | 'mask-border-outset', 95 | 'mask-border-repeat', 96 | 'mask-border-slice', 97 | 'mask-border-source', 98 | 'mask-border-width', 99 | 'mask-clip', 100 | 'mask-composite', 101 | 'mask-image', 102 | 'mask-origin', 103 | 'mask-position', 104 | 'mask-repeat', 105 | 'mask-size', 106 | 107 | // Multicolumn. 108 | 'break-after', 109 | 'break-before', 110 | 'break-inside', 111 | 'column-count', 112 | 'column-fill', 113 | 'column-gap', 114 | 'column-rule', 115 | 'column-rule-color', 116 | 'column-rule-style', 117 | 'column-rule-width', 118 | 'column-span', 119 | 'column-width', 120 | 'columns', 121 | 122 | // Object fit. 123 | 'object-fit', 124 | 'object-position', 125 | 126 | // Regions. 127 | 'flow-from', 128 | 'flow-into', 129 | 'region-fragment', 130 | 131 | // Scroll snap points. 132 | 'scroll-snap-coordinate', 133 | 'scroll-snap-destination', 134 | 'scroll-snap-points-x', 135 | 'scroll-snap-points-y', 136 | 'scroll-snap-type', 137 | 138 | // Shapes. 139 | 'shape-image-threshold', 140 | 'shape-margin', 141 | 'shape-outside', 142 | 143 | // Tab size. 144 | 'tab-size', 145 | 146 | // Text align last. 147 | 'text-align-last', 148 | 149 | // Text decoration. 150 | 'text-decoration-color', 151 | 'text-decoration-line', 152 | 'text-decoration-skip', 153 | 'text-decoration-style', 154 | 155 | // Text emphasis. 156 | 'text-emphasis', 157 | 'text-emphasis-color', 158 | 'text-emphasis-position', 159 | 'text-emphasis-style', 160 | 161 | // Text size adjust. 162 | 'text-size-adjust', 163 | 164 | // Text spacing. 165 | 'text-spacing', 166 | 167 | // Transform. 168 | 'transform', 169 | 'transform-origin', 170 | 171 | // Transform 3D. 172 | 'backface-visibility', 173 | 'perspective', 174 | 'perspective-origin', 175 | 'transform-style', 176 | 177 | // Transition. 178 | 'transition', 179 | 'transition-delay', 180 | 'transition-duration', 181 | 'transition-property', 182 | 'transition-timing-function', 183 | 184 | // Unicode bidi. 185 | 'unicode-bidi', 186 | 187 | // User select. 188 | 'user-select', 189 | 190 | // Writing mode. 191 | 'writing-mode', 192 | 193 | ); 194 | 195 | /// Values that should be vendorized. 196 | /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org 197 | /// @var {list} 198 | $vendor-values: ( 199 | 200 | // Cross fade. 201 | 'cross-fade', 202 | 203 | // Element function. 204 | 'element', 205 | 206 | // Filter function. 207 | 'filter', 208 | 209 | // Flexbox. 210 | 'flex', 211 | 'inline-flex', 212 | 213 | // Grab cursors. 214 | 'grab', 215 | 'grabbing', 216 | 217 | // Gradients. 218 | 'linear-gradient', 219 | 'repeating-linear-gradient', 220 | 'radial-gradient', 221 | 'repeating-radial-gradient', 222 | 223 | // Grid layout. 224 | 'grid', 225 | 'inline-grid', 226 | 227 | // Image set. 228 | 'image-set', 229 | 230 | // Intrinsic width. 231 | 'max-content', 232 | 'min-content', 233 | 'fit-content', 234 | 'fill', 235 | 'fill-available', 236 | 'stretch', 237 | 238 | // Sticky position. 239 | 'sticky', 240 | 241 | // Transform. 242 | 'transform', 243 | 244 | // Zoom cursors. 245 | 'zoom-in', 246 | 'zoom-out', 247 | 248 | ); 249 | 250 | // Functions. 251 | 252 | /// Removes a specific item from a list. 253 | /// @author Hugo Giraudel 254 | /// @param {list} $list List. 255 | /// @param {integer} $index Index. 256 | /// @return {list} Updated list. 257 | @function remove-nth($list, $index) { 258 | 259 | $result: null; 260 | 261 | @if type-of($index) != number { 262 | @warn "$index: #{quote($index)} is not a number for `remove-nth`."; 263 | } 264 | @else if $index == 0 { 265 | @warn "List index 0 must be a non-zero integer for `remove-nth`."; 266 | } 267 | @else if abs($index) > length($list) { 268 | @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; 269 | } 270 | @else { 271 | 272 | $result: (); 273 | $index: if($index < 0, length($list) + $index + 1, $index); 274 | 275 | @for $i from 1 through length($list) { 276 | 277 | @if $i != $index { 278 | $result: append($result, nth($list, $i)); 279 | } 280 | 281 | } 282 | 283 | } 284 | 285 | @return $result; 286 | 287 | } 288 | 289 | /// Replaces a substring within another string. 290 | /// @author Hugo Giraudel 291 | /// @param {string} $string String. 292 | /// @param {string} $search Substring. 293 | /// @param {string} $replace Replacement. 294 | /// @return {string} Updated string. 295 | @function str-replace($string, $search, $replace: '') { 296 | 297 | $index: str-index($string, $search); 298 | 299 | @if $index { 300 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 301 | } 302 | 303 | @return $string; 304 | 305 | } 306 | 307 | /// Replaces a substring within each string in a list. 308 | /// @param {list} $strings List of strings. 309 | /// @param {string} $search Substring. 310 | /// @param {string} $replace Replacement. 311 | /// @return {list} Updated list of strings. 312 | @function str-replace-all($strings, $search, $replace: '') { 313 | 314 | @each $string in $strings { 315 | $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); 316 | } 317 | 318 | @return $strings; 319 | 320 | } 321 | 322 | // Mixins. 323 | 324 | /// Wraps @content in vendorized keyframe blocks. 325 | /// @param {string} $name Name. 326 | @mixin keyframes($name) { 327 | 328 | @-moz-keyframes #{$name} { @content; } 329 | @-webkit-keyframes #{$name} { @content; } 330 | @-ms-keyframes #{$name} { @content; } 331 | @keyframes #{$name} { @content; } 332 | 333 | } 334 | 335 | /// Vendorizes a declaration's property and/or value(s). 336 | /// @param {string} $property Property. 337 | /// @param {mixed} $value String/list of value(s). 338 | @mixin vendor($property, $value) { 339 | 340 | // Determine if property should expand. 341 | $expandProperty: index($vendor-properties, $property); 342 | 343 | // Determine if value should expand (and if so, add '-prefix-' placeholder). 344 | $expandValue: false; 345 | 346 | @each $x in $value { 347 | @each $y in $vendor-values { 348 | @if $y == str-slice($x, 1, str-length($y)) { 349 | 350 | $value: set-nth($value, index($value, $x), '-prefix-' + $x); 351 | $expandValue: true; 352 | 353 | } 354 | } 355 | } 356 | 357 | // Expand property? 358 | @if $expandProperty { 359 | @each $vendor in $vendor-prefixes { 360 | #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 361 | } 362 | } 363 | 364 | // Expand just the value? 365 | @else if $expandValue { 366 | @each $vendor in $vendor-prefixes { 367 | #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 368 | } 369 | } 370 | 371 | // Neither? Treat them as a normal declaration. 372 | @else { 373 | #{$property}: #{$value}; 374 | } 375 | 376 | } -------------------------------------------------------------------------------- /src/assets/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/vendor'; 5 | @import 'libs/breakpoints'; 6 | @import 'libs/html-grid'; 7 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600'); 8 | @import url('font-awesome.min.css'); 9 | 10 | /* 11 | Overflow by HTML5 UP 12 | html5up.net | @ajlkn 13 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 14 | */ 15 | 16 | // Breakpoints. 17 | 18 | @include breakpoints(( 19 | wide: ( 1081px, 1680px ), 20 | normal: ( 841px, 1080px ), 21 | narrow: ( 737px, 840px ), 22 | mobile: ( null, 736px ) 23 | )); 24 | 25 | // Reset. 26 | // Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) 27 | 28 | html, body, div, span, applet, object, 29 | iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 30 | pre, a, abbr, acronym, address, big, cite, 31 | code, del, dfn, em, img, ins, kbd, q, s, samp, 32 | small, strike, strong, sub, sup, tt, var, b, 33 | u, i, center, dl, dt, dd, ol, ul, li, fieldset, 34 | form, label, legend, table, caption, tbody, 35 | tfoot, thead, tr, th, td, article, aside, 36 | canvas, details, embed, figure, figcaption, 37 | footer, header, hgroup, menu, nav, output, ruby, 38 | section, summary, time, mark, audio, video { 39 | margin: 0; 40 | padding: 0; 41 | border: 0; 42 | font-size: 100%; 43 | font: inherit; 44 | vertical-align: baseline; 45 | } 46 | 47 | article, aside, details, figcaption, figure, 48 | footer, header, hgroup, menu, nav, section { 49 | display: block; 50 | } 51 | 52 | body { 53 | line-height: 1; 54 | } 55 | 56 | ol, ul { 57 | list-style:none; 58 | } 59 | 60 | blockquote, q { 61 | quotes: none; 62 | 63 | &:before, 64 | &:after { 65 | content: ''; 66 | content: none; 67 | } 68 | } 69 | 70 | table { 71 | border-collapse: collapse; 72 | border-spacing: 0; 73 | } 74 | 75 | body { 76 | -webkit-text-size-adjust: none; 77 | } 78 | 79 | mark { 80 | background-color: transparent; 81 | color: inherit; 82 | } 83 | 84 | input::-moz-focus-inner { 85 | border: 0; 86 | padding: 0; 87 | } 88 | 89 | input, select, textarea { 90 | -moz-appearance: none; 91 | -webkit-appearance: none; 92 | -ms-appearance: none; 93 | appearance: none; 94 | } 95 | 96 | /* Basic */ 97 | 98 | // Set box model to border-box. 99 | // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 100 | html { 101 | box-sizing: border-box; 102 | } 103 | 104 | *, *:before, *:after { 105 | box-sizing: inherit; 106 | } 107 | 108 | body, .main-body { 109 | background-color: #183026; 110 | background-image: url('../images/overlay.png'), url('../images/bg.jpg'); 111 | background-repeat: repeat, no-repeat; 112 | background-size: auto, cover; 113 | background-position: top left, center 0; 114 | background-attachment: fixed, fixed; 115 | font-family: 'Source Sans Pro', sans-serif; 116 | font-size: 18pt; 117 | line-height: 1.75em; 118 | font-weight: 300; 119 | letter-spacing: 1px; 120 | color: #3a3939; 121 | text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25); 122 | -webkit-text-stroke: 0.25px; 123 | 124 | &.is-scroll { 125 | background-attachment: scroll, scroll; 126 | background-size: auto, 100% auto; 127 | } 128 | 129 | // Stops initial animations until page loads. 130 | &.is-preload { 131 | *, *:before, *:after { 132 | @include vendor('animation', 'none !important'); 133 | @include vendor('transition', 'none !important'); 134 | } 135 | } 136 | 137 | } 138 | 139 | input, textarea, select { 140 | font-family: 'Source Sans Pro', sans-serif; 141 | font-size: 18pt; 142 | line-height: 1.75em; 143 | font-weight: 300; 144 | letter-spacing: 1px; 145 | color: #3a3939; 146 | text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25); 147 | -webkit-text-stroke: 0.25px; 148 | } 149 | 150 | h1, h2, h3, h4, h5, h6 { 151 | font-weight: 400; 152 | text-transform: uppercase; 153 | line-height: 1.75em; 154 | } 155 | 156 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 157 | color: inherit; 158 | text-decoration: none; 159 | } 160 | 161 | h2 { 162 | font-size: 1.25em; 163 | letter-spacing: 8px; 164 | } 165 | 166 | h3 { 167 | font-size: 1em; 168 | letter-spacing: 5px; 169 | } 170 | 171 | strong, b { 172 | font-weight: 400; 173 | } 174 | 175 | em, i { 176 | font-style: italic; 177 | } 178 | 179 | a { 180 | @include vendor('transition', ('border-color 0.35s ease-in-out', 'color 0.35s ease-in-out')); 181 | color: #35b88f; 182 | text-shadow: 0 0 0.5px rgba(53, 184, 143, 0.25); 183 | text-decoration: none; 184 | border-bottom: dotted 1px rgba(53, 184, 143, 0.5); 185 | 186 | &:hover { 187 | border-bottom-color: rgba(53, 184, 143, 0); 188 | } 189 | } 190 | 191 | sub { 192 | position: relative; 193 | top: 0.5em; 194 | font-size: 0.8em; 195 | } 196 | 197 | sup { 198 | position: relative; 199 | top: -0.5em; 200 | font-size: 0.8em; 201 | } 202 | 203 | hr { 204 | border: 0; 205 | border-top: solid 1px #dad9d9; 206 | margin: 2em 0 2em 0; 207 | } 208 | 209 | blockquote { 210 | border-left: solid 0.5em #eae9e9; 211 | padding: 1em 0 1em 2em; 212 | font-style: italic; 213 | } 214 | 215 | p, ul, ol, dl, table { 216 | margin-bottom: 1em; 217 | } 218 | 219 | header { 220 | margin-bottom: 1em; 221 | 222 | p { 223 | display: block; 224 | margin: 0.5em 0 0 0; 225 | padding: 0 0 1.5em 0; 226 | } 227 | } 228 | 229 | footer { 230 | margin-top: 1em; 231 | } 232 | 233 | br.clear { 234 | clear: both; 235 | } 236 | 237 | /* Container */ 238 | 239 | .container { 240 | margin: 0 auto; 241 | max-width: 100%; 242 | width: 1140px; 243 | 244 | @include breakpoint('<=wide') { 245 | width: 960px; 246 | } 247 | 248 | @include breakpoint('<=normal') { 249 | width: 95%; 250 | } 251 | } 252 | 253 | /* Row */ 254 | 255 | .row { 256 | @include html-grid((40px, 40px)); 257 | 258 | @include breakpoint('<=wide') { 259 | @include html-grid((40px, 40px), 'wide'); 260 | } 261 | 262 | @include breakpoint('<=normal') { 263 | @include html-grid((40px, 40px), 'normal'); 264 | } 265 | 266 | @include breakpoint('<=narrow') { 267 | @include html-grid((30px, 30px), 'narrow'); 268 | } 269 | 270 | @include breakpoint('<=mobile') { 271 | @include html-grid((20px, 20px), 'mobile'); 272 | } 273 | } 274 | 275 | /* Sections/Article */ 276 | 277 | section, article { 278 | margin-bottom: 3em; 279 | } 280 | 281 | section > :last-child, 282 | article > :last-child, 283 | section:last-child, 284 | article:last-child { 285 | margin-bottom: 0; 286 | } 287 | 288 | .row > { 289 | section, article { 290 | margin-bottom: 0; 291 | } 292 | } 293 | 294 | /* Image */ 295 | 296 | .image { 297 | display: inline-block; 298 | border: 0; 299 | 300 | img { 301 | display: block; 302 | width: 100%; 303 | } 304 | 305 | &.featured { 306 | display: block; 307 | width: 100%; 308 | margin: 0 0 2em 0; 309 | } 310 | 311 | &.fit { 312 | display: block; 313 | width: 100%; 314 | } 315 | 316 | &.left { 317 | float: left; 318 | margin: 0 2em 2em 0; 319 | } 320 | 321 | &.centered { 322 | display: block; 323 | margin: 0 0 2em 0; 324 | 325 | img { 326 | margin: 0 auto; 327 | width: auto; 328 | } 329 | } 330 | } 331 | 332 | /* List */ 333 | 334 | ul { 335 | list-style: disc; 336 | padding-left: 1em; 337 | 338 | li { 339 | padding-left: 1.5em; 340 | margin-top: 1.5em; 341 | 342 | &:first-child { 343 | margin-top: 0; 344 | } 345 | } 346 | } 347 | 348 | ol { 349 | list-style: decimal; 350 | padding-left: 1.25em; 351 | 352 | li { 353 | padding-left: 1.25em; 354 | margin-top: 1.5em; 355 | } 356 | } 357 | 358 | /* Icons */ 359 | 360 | ul.icons { 361 | cursor: default; 362 | list-style: none; 363 | padding-left: 0; 364 | 365 | li { 366 | display: inline-block; 367 | padding-left: 0; 368 | margin-top: 0; 369 | } 370 | 371 | a { 372 | display: inline-block; 373 | width: 2.5em; 374 | height: 2.5em; 375 | line-height: 2.5em; 376 | text-align: center; 377 | border: 0; 378 | } 379 | } 380 | 381 | /* Menu */ 382 | 383 | ul.menu { 384 | cursor: default; 385 | list-style: none; 386 | padding-left: 0; 387 | 388 | li { 389 | display: inline-block; 390 | line-height: 1em; 391 | border-left: solid 1px #dad9d9; 392 | padding: 0 0 0 0.5em; 393 | margin: 0 0 0 0.5em; 394 | 395 | &:first-child { 396 | border-left: 0; 397 | padding-left: 0; 398 | margin-left: 0; 399 | } 400 | } 401 | } 402 | 403 | /* Actions */ 404 | 405 | ul.actions { 406 | cursor: default; 407 | list-style: none; 408 | padding-left: 0; 409 | 410 | li { 411 | display: inline-block; 412 | margin: 0 0 0 0.5em; 413 | padding-left: 0; 414 | margin-top: 0; 415 | 416 | &:first-child { 417 | margin-left: 0; 418 | } 419 | } 420 | } 421 | 422 | /* Form */ 423 | 424 | form { 425 | label { 426 | display: block; 427 | margin: 0 0 0.5em 0; 428 | } 429 | 430 | input[type="text"], 431 | input[type="email"], 432 | input[type="password"], 433 | select, 434 | textarea { 435 | @include vendor('transition', 'background-color 0.35s ease-in-out'); 436 | -webkit-appearance: none; 437 | display: block; 438 | border: 0; 439 | background: #f1f1f1; 440 | width: 100%; 441 | padding: 0.75em; 442 | 443 | &:focus { 444 | background-color: #f8f8f8; 445 | } 446 | } 447 | 448 | input[type="text"], 449 | input[type="email"], 450 | input[type="password"], 451 | select { 452 | line-height: 1em; 453 | } 454 | 455 | select { 456 | background-size: 1.25em; 457 | background-repeat: no-repeat; 458 | background-position: calc(100% - 1em) center; 459 | padding-right: 1.25em; 460 | text-overflow: ellipsis; 461 | background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#5a5959' /></svg>"); 462 | 463 | option { 464 | color: #3a3939; 465 | background: #ffffff; 466 | } 467 | 468 | &:focus { 469 | &::-ms-value { 470 | background-color: transparent; 471 | } 472 | } 473 | 474 | &::-ms-expand { 475 | display: none; 476 | } 477 | } 478 | 479 | textarea { 480 | min-height: 12em; 481 | } 482 | 483 | ::-webkit-input-placeholder { 484 | color: #5a5959 !important; 485 | } 486 | 487 | :-moz-placeholder { 488 | color: #5a5959 !important; 489 | } 490 | 491 | ::-moz-placeholder { 492 | color: #5a5959 !important; 493 | } 494 | 495 | :-ms-input-placeholder { 496 | color: #5a5959 !important; 497 | } 498 | 499 | ::-moz-focus-inner { 500 | border: 0; 501 | } 502 | 503 | ul { 504 | &.actions { 505 | margin-bottom: 0; 506 | text-align: center; 507 | } 508 | } 509 | } 510 | 511 | /* Table */ 512 | 513 | .table-wrapper { 514 | width: 100%; 515 | overflow-x: auto; 516 | -webkit-overflow-scrolling: touch; 517 | } 518 | 519 | table { 520 | width: 100%; 521 | 522 | tbody { 523 | tr { 524 | border-top: solid 1px #eae9e9; 525 | 526 | &:first-child { 527 | border-top: 0; 528 | } 529 | } 530 | } 531 | 532 | td { 533 | padding: 0.75em 1.25em 0.75em 1.25em; 534 | } 535 | 536 | th { 537 | text-align: left; 538 | font-weight: 400; 539 | padding: 0.75em 1.25em 0.75em 1.25em; 540 | } 541 | 542 | thead { 543 | background: #f5f5f5; 544 | } 545 | } 546 | 547 | /* Button */ 548 | 549 | input[type="button"], 550 | input[type="submit"], 551 | input[type="reset"], 552 | button, 553 | .button { 554 | @include vendor('transition', ('background-color 0.35s ease-in-out', 'color 0.35s ease-in-out')); 555 | -webkit-appearance: none; 556 | position: relative; 557 | display: inline-block; 558 | border: 0; 559 | background: #35b88f; 560 | color: #fff; 561 | text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); 562 | cursor: pointer; 563 | text-decoration: none; 564 | outline: 0; 565 | padding: 1em 3em 1em 3em; 566 | text-align: center; 567 | border-radius: 3em; 568 | font-weight: 400; 569 | 570 | &:hover { 571 | background: #45c89f; 572 | } 573 | 574 | &.style2 { 575 | color: #3a3939; 576 | background: #fff; 577 | box-shadow: inset 0 0 0 1px #fff; 578 | 579 | &:hover { 580 | background: rgba(255, 255, 255, 0.1); 581 | color: #fff !important; 582 | text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25) !important; 583 | } 584 | } 585 | 586 | &.style3 { 587 | background: none; 588 | color: #3a3939; 589 | box-shadow: inset 0 0 0 1px #dad9d9; 590 | 591 | &:hover { 592 | background: rgba(58, 57, 57, 0.025); 593 | } 594 | } 595 | } 596 | 597 | /* Box */ 598 | 599 | .box { 600 | position: relative; 601 | margin-top: 9em; 602 | margin-bottom: 0; 603 | 604 | &:after { 605 | content: ''; 606 | display: block; 607 | position: absolute; 608 | top: -9em; 609 | left: 50%; 610 | height: 9em; 611 | border-left: solid 1px #fff; 612 | } 613 | 614 | &:before { 615 | content: ''; 616 | display: block; 617 | width: 90px; 618 | height: 66px; 619 | position: absolute; 620 | left: 50%; 621 | top: -4.5em; 622 | margin-left: -45px; 623 | margin-top: -33px; 624 | background: url('../images/arrow.svg') no-repeat; 625 | } 626 | 627 | :last-child { 628 | margin-bottom: 0; 629 | } 630 | 631 | &.style1 { 632 | background: #fff; 633 | padding: 3em; 634 | 635 | .image { 636 | display: block; 637 | position: absolute; 638 | top: 0; 639 | width: 50%; 640 | height: 100%; 641 | background: #152E33; 642 | overflow: hidden; 643 | 644 | img { 645 | position: absolute; 646 | top: 0; 647 | height: 100%; 648 | width: auto; 649 | } 650 | } 651 | 652 | .inner { 653 | > :last-child { 654 | margin: 0; 655 | } 656 | } 657 | 658 | &.right { 659 | .image { 660 | left: 0; 661 | 662 | img { 663 | right: 0; 664 | } 665 | } 666 | 667 | .inner { 668 | margin-left: 50%; 669 | padding-left: 3em; 670 | } 671 | } 672 | 673 | &.left { 674 | .image { 675 | right: 0; 676 | 677 | img { 678 | left: 0; 679 | } 680 | } 681 | 682 | .inner { 683 | margin-right: 50%; 684 | padding-right: 3em; 685 | } 686 | } 687 | } 688 | 689 | &.style2 { 690 | text-align: center; 691 | 692 | header { 693 | display: inline-block; 694 | background: #fff; 695 | padding: 2em 3em 2em 3em; 696 | margin: 0; 697 | 698 | p { 699 | padding: 0; 700 | } 701 | } 702 | 703 | .inner { 704 | position: relative; 705 | padding: 40px 0 0px 0; 706 | 707 | &:after { 708 | content: ''; 709 | display: block; 710 | position: absolute; 711 | top: 0; 712 | left: 50%; 713 | height: 100%; 714 | border-left: solid 1px #fff; 715 | } 716 | 717 | .row { 718 | position: relative; 719 | 720 | &:before { 721 | content: ''; 722 | display: block; 723 | position: absolute; 724 | top: 50%; 725 | left: 20px; 726 | width: calc(100% - 40px); 727 | border-bottom: solid 1px #fff; 728 | } 729 | } 730 | 731 | .image { 732 | position: relative; 733 | z-index: 1; 734 | padding: 20px; 735 | } 736 | } 737 | } 738 | 739 | &.style3 { 740 | background: #fff; 741 | padding: 3em; 742 | 743 | header { 744 | text-align: center; 745 | } 746 | } 747 | } 748 | 749 | /* Icons */ 750 | 751 | .icon { 752 | text-decoration: none; 753 | 754 | &:before { 755 | display: inline-block; 756 | font-family: FontAwesome; 757 | font-size: 1.25em; 758 | text-decoration: none; 759 | font-style: normal; 760 | font-weight: normal; 761 | line-height: 1; 762 | -webkit-font-smoothing: antialiased; 763 | -moz-osx-font-smoothing: grayscale; 764 | } 765 | 766 | > .label { 767 | display: none; 768 | } 769 | } 770 | 771 | /* Header */ 772 | 773 | #header { 774 | @include vendor('transition', 'opacity 2s ease-in-out'); 775 | position: relative; 776 | color: #fff; 777 | text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); 778 | text-align: center; 779 | margin: 0; 780 | padding: 14em 0 14em 0; 781 | cursor: default; 782 | height: 100vh; 783 | 784 | header { 785 | display: inline-block; 786 | padding: 0 0 4.5em 0; 787 | 788 | h1 { 789 | font-weight: 600; 790 | font-size: 2em; 791 | letter-spacing: 10px; 792 | } 793 | 794 | p { 795 | border-top: solid 1px rgba(255, 255, 255, 0.5); 796 | color: #fff; 797 | 798 | text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.1875); 799 | font-size: 1em; 800 | text-transform: uppercase; 801 | letter-spacing: 3px; 802 | padding: 0; 803 | margin-top: 0.35em; 804 | 805 | &:before { 806 | content: ''; 807 | display: block; 808 | border-top: solid 1px rgba(255, 255, 255, 0.5); 809 | margin: 4px 0 0.8em 0; 810 | } 811 | } 812 | } 813 | 814 | footer { 815 | @include vendor('transition', ( 816 | 'opacity 2s ease-in-out', 817 | 'transform 1s ease-in-out' 818 | )); 819 | @include vendor('transition-delay', '1.25s'); 820 | position: absolute; 821 | bottom: 9em; 822 | margin: 0; 823 | width: 100%; 824 | 825 | &:after { 826 | content: ''; 827 | display: block; 828 | position: absolute; 829 | bottom: -9em; 830 | left: 50%; 831 | height: 9em; 832 | border-left: solid 1px #fff; 833 | } 834 | 835 | &:before { 836 | content: ''; 837 | display: block; 838 | width: 90px; 839 | height: 66px; 840 | position: absolute; 841 | left: 50%; 842 | bottom: -4.5em; 843 | margin-left: -45px; 844 | margin-bottom: -33px; 845 | background: url('../images/arrow.svg') no-repeat; 846 | } 847 | } 848 | 849 | body.is-preload, .main-body.is-preload & { 850 | opacity: 0; 851 | 852 | footer { 853 | @include vendor('transform', 'translateY(1em)'); 854 | opacity: 0; 855 | } 856 | } 857 | } 858 | 859 | /* Banner */ 860 | 861 | #banner { 862 | position: relative; 863 | color: #fff; 864 | text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); 865 | text-align: center; 866 | background: #35b88f url('../images/banner.svg') bottom center no-repeat; 867 | padding: 5em 0 5em 0; 868 | margin: 0; 869 | background-size: 125% auto; 870 | 871 | .button { 872 | color: #35b882; 873 | text-shadow: 0 0 0.5px rgba(53, 184, 130, 0.25); 874 | } 875 | 876 | header { 877 | margin: 0 0 2em 0; 878 | 879 | h2 { 880 | font-weight: 400; 881 | font-size: 1.75em; 882 | letter-spacing: 8px; 883 | } 884 | } 885 | 886 | p { 887 | margin: 0; 888 | } 889 | 890 | footer { 891 | margin: 2em 0 0 0; 892 | } 893 | 894 | a { 895 | color: inherit; 896 | border-bottom-color: rgba(255, 255, 255, 0.5); 897 | 898 | &:hover { 899 | border-bottom-color: rgba(255, 255, 255, 0); 900 | } 901 | } 902 | } 903 | 904 | /* Footer */ 905 | 906 | #footer { 907 | position: relative; 908 | color: #fff; 909 | text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); 910 | text-align: center; 911 | margin: 4.5em 0 0 0; 912 | 913 | &:after { 914 | content: ''; 915 | display: block; 916 | position: absolute; 917 | top: -4.5em; 918 | left: 50%; 919 | height: 4.5em; 920 | border-left: solid 1px #fff; 921 | } 922 | 923 | a { 924 | color: #fff; 925 | text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25); 926 | border-bottom-color: rgba(255, 255, 255, 0.5); 927 | 928 | &:hover { 929 | color: #35b88f; 930 | text-shadow: 0 0 0.5px rgba(69, 200, 159, 0.25); 931 | border-bottom-color: rgba(53, 184, 143, 0.5); 932 | } 933 | } 934 | 935 | .icons { 936 | padding: 0.75em 2em 0.75em 2em; 937 | border-radius: 3em; 938 | border: solid 1px #fff; 939 | display: inline-block; 940 | margin: 0 0 3em 0; 941 | } 942 | 943 | .copyright { 944 | margin: 0 0 9em 0; 945 | font-size: 0.8em; 946 | } 947 | } 948 | 949 | /* Poptrox */ 950 | 951 | .poptrox-popup { 952 | @include vendor('box-sizing', 'content-box'); 953 | background: #fff; 954 | padding-bottom: 3em; 955 | 956 | .loader { 957 | width: 48px; 958 | height: 48px; 959 | background: url('../images/loader.gif'); 960 | position: absolute; 961 | top: 50%; 962 | left: 50%; 963 | margin: -24px 0 0 -24px; 964 | } 965 | 966 | .caption { 967 | position: absolute; 968 | bottom: 0; 969 | left: 0; 970 | background: #fff; 971 | width: 100%; 972 | height: 3em; 973 | line-height: 3em; 974 | text-align: center; 975 | cursor: default; 976 | z-index: 1; 977 | } 978 | 979 | .nav-next, 980 | .nav-previous { 981 | @include vendor('transition', 'opacity 0.5s ease-in-out'); 982 | position: absolute; 983 | top: 0; 984 | width: 50%; 985 | height: 100%; 986 | opacity: 0; 987 | cursor: pointer; 988 | background: rgba(0, 0, 0, 0.01); 989 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 990 | 991 | &:before { 992 | content: ''; 993 | position: absolute; 994 | width: 96px; 995 | height: 64px; 996 | background: url('../images/poptrox-nav.svg'); 997 | top: calc(50% - 1.5em); 998 | margin: -32px 0 0 0; 999 | } 1000 | } 1001 | 1002 | &:hover { 1003 | .nav-next, 1004 | .nav-previous { 1005 | opacity: 0.5; 1006 | 1007 | &:hover { 1008 | opacity: 1.0; 1009 | } 1010 | } 1011 | } 1012 | 1013 | .nav-next { 1014 | right: 0; 1015 | 1016 | &:before { 1017 | right: 0; 1018 | } 1019 | } 1020 | 1021 | .nav-previous { 1022 | left: 0; 1023 | 1024 | &:before { 1025 | @include vendor('transform', 'scaleX(-1)'); 1026 | left: 0; 1027 | -ms-filter: "FlipH"; 1028 | filter: FlipH; 1029 | } 1030 | } 1031 | 1032 | .closer { 1033 | @include vendor('transition', 'opacity 0.5s ease-in-out'); 1034 | position: absolute; 1035 | top: 0; 1036 | right: 0; 1037 | width: 64px; 1038 | height: 64px; 1039 | text-indent: -9999px; 1040 | z-index: 2; 1041 | opacity: 0; 1042 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 1043 | 1044 | &:before { 1045 | @include vendor('transition', 'background-color 0.5s ease-in-out'); 1046 | content: ''; 1047 | display: block; 1048 | position: absolute; 1049 | right: 16px; 1050 | top: 16px; 1051 | width: 40px; 1052 | height: 40px; 1053 | border-radius: 100%; 1054 | box-shadow: inset 0 0 0 1px #fff; 1055 | background: rgba(255, 255, 255, 0.1) url('../images/poptrox-closer.svg') center center; 1056 | color: #fff !important; 1057 | } 1058 | } 1059 | 1060 | &:hover { 1061 | .closer { 1062 | opacity: 0.5; 1063 | 1064 | &:hover { 1065 | opacity: 1.0; 1066 | } 1067 | } 1068 | } 1069 | } 1070 | 1071 | /* Wide */ 1072 | 1073 | @include breakpoint('<=wide') { 1074 | 1075 | /* Basic */ 1076 | 1077 | body, input, textarea, select { 1078 | font-size: 16pt; 1079 | } 1080 | 1081 | /* Header */ 1082 | 1083 | #header { 1084 | padding: 10em 0 12em 0; 1085 | } 1086 | 1087 | } 1088 | 1089 | /* Normal */ 1090 | 1091 | @include breakpoint('<=normal') { 1092 | 1093 | /* Banner */ 1094 | 1095 | #banner { 1096 | padding: 4em 0 4em 0; 1097 | background-size: auto, 175% auto; 1098 | } 1099 | 1100 | /* Header */ 1101 | 1102 | #header { 1103 | padding: 8em 0 10em 0; 1104 | } 1105 | 1106 | } 1107 | 1108 | /* Narrow */ 1109 | 1110 | @include breakpoint('<=narrow') { 1111 | 1112 | /* Basic */ 1113 | 1114 | body { 1115 | background-color: #203936; 1116 | background-image: url('../images/overlay.png'), url('../images/bg-alt.jpg'); 1117 | background-repeat: repeat, no-repeat; 1118 | background-size: auto, 100% auto; 1119 | background-position: top left, top center; 1120 | background-attachment: scroll, scroll; 1121 | font-size: 14pt; 1122 | } 1123 | 1124 | input, textarea, select { 1125 | font-size: 14pt; 1126 | } 1127 | 1128 | h1, h2, h3, h4, h5, h6 { 1129 | line-height: 1.5em; 1130 | } 1131 | 1132 | header { 1133 | p { 1134 | margin: 0.25em 0 0 0; 1135 | padding: 0 0 0.5em 0; 1136 | } 1137 | } 1138 | 1139 | /* Box */ 1140 | .box { 1141 | position: relative; 1142 | 1143 | section { 1144 | margin: 0 0 2em 0; 1145 | } 1146 | 1147 | &.style1 { 1148 | padding: 2.5em 2em 2.5em 2em; 1149 | 1150 | &.right { 1151 | .inner { 1152 | padding-left: 2em; 1153 | } 1154 | } 1155 | 1156 | &.left { 1157 | .inner { 1158 | padding-right: 2em; 1159 | } 1160 | } 1161 | } 1162 | 1163 | &.style2 { 1164 | 1165 | header { 1166 | padding: 2em; 1167 | } 1168 | 1169 | .inner { 1170 | position: relative; 1171 | padding: 30px 0 0 0; 1172 | } 1173 | } 1174 | 1175 | &.style3 { 1176 | padding: 2.5em 2em 2.5em 2em; 1177 | } 1178 | } 1179 | 1180 | /* Header */ 1181 | 1182 | #header { 1183 | padding: 10em 0 12em 0; 1184 | } 1185 | 1186 | /* Banner */ 1187 | 1188 | #banner { 1189 | padding: 3.5em; 1190 | background-size: 200% auto; 1191 | 1192 | br { 1193 | display: none; 1194 | } 1195 | } 1196 | 1197 | } 1198 | 1199 | /* Mobile */ 1200 | 1201 | @include breakpoint('<=mobile') { 1202 | 1203 | /* Basic */ 1204 | 1205 | * { 1206 | text-shadow: none !important; 1207 | } 1208 | 1209 | body, input, textarea, select { 1210 | line-height: 1.5em; 1211 | font-size: 12pt; 1212 | letter-spacing: 0; 1213 | } 1214 | 1215 | h2, h3, h4, h5, h6 { 1216 | font-size: 1em; 1217 | } 1218 | 1219 | h2 { 1220 | font-size: 1.25em; 1221 | letter-spacing: 4px; 1222 | } 1223 | 1224 | /* List */ 1225 | 1226 | ul { 1227 | li { 1228 | padding-left: 0.5em; 1229 | } 1230 | } 1231 | 1232 | ol { 1233 | li { 1234 | padding-left: 0.25em; 1235 | } 1236 | } 1237 | 1238 | /* Icons */ 1239 | 1240 | ul.icons { 1241 | a { 1242 | width: 2em; 1243 | height: 2em; 1244 | line-height: 2em; 1245 | } 1246 | } 1247 | 1248 | /* Menu */ 1249 | 1250 | ul.menu { 1251 | li { 1252 | display: block; 1253 | padding: 0; 1254 | border: 0; 1255 | margin: 1em 0 0 0; 1256 | 1257 | &:first-child { 1258 | margin-top: 0; 1259 | } 1260 | } 1261 | } 1262 | 1263 | /* Actions */ 1264 | 1265 | ul.actions { 1266 | li { 1267 | display: block; 1268 | margin: 1em 0 0 0; 1269 | 1270 | &:first-child { 1271 | margin-top: 0; 1272 | } 1273 | } 1274 | } 1275 | 1276 | /* Button */ 1277 | 1278 | input[type="button"], 1279 | input[type="submit"], 1280 | input[type="reset"], 1281 | button, 1282 | .button { 1283 | padding: 0.75em 0 0.75em 0; 1284 | width: 100%; 1285 | max-width: 320px; 1286 | } 1287 | 1288 | /* Box */ 1289 | 1290 | .box { 1291 | margin-top: 4.5em; 1292 | 1293 | &:after { 1294 | top: -4.5em; 1295 | height: 4.5em; 1296 | } 1297 | 1298 | &:before { 1299 | width: 45px; 1300 | height: 33px; 1301 | top: -2.25em; 1302 | margin-left: -22.5px; 1303 | margin-top: -16.5px; 1304 | background-size: 45px 33px; 1305 | } 1306 | 1307 | &.style1 { 1308 | padding: 0; 1309 | text-align: center; 1310 | 1311 | .image { 1312 | position: relative !important; 1313 | left: 0 !important; 1314 | width: 100% !important; 1315 | height: auto !important; 1316 | 1317 | img { 1318 | position: relative; 1319 | height: auto; 1320 | width: 100%; 1321 | } 1322 | } 1323 | 1324 | .inner { 1325 | margin: 0 !important; 1326 | padding: 2em 1.25em 2em 1.25em !important; 1327 | } 1328 | } 1329 | 1330 | &.style2 { 1331 | .inner { 1332 | .row:before { 1333 | display: none; 1334 | } 1335 | 1336 | .image { 1337 | padding: 0; 1338 | max-width: 250px; 1339 | margin: 0 auto 20px auto; 1340 | } 1341 | } 1342 | } 1343 | 1344 | &.style3 { 1345 | padding: 2em 1.25em 2em 1.25em; 1346 | } 1347 | } 1348 | 1349 | /* Header */ 1350 | #header { 1351 | padding: 6em 0 6em 0; 1352 | 1353 | header { 1354 | padding-left: 2em; 1355 | padding-right: 2em; 1356 | 1357 | h1 { 1358 | font-size: 1.75em; 1359 | letter-spacing: 6px; 1360 | } 1361 | } 1362 | 1363 | footer { 1364 | bottom: 4.5em; 1365 | padding: 0 2em 0 2em; 1366 | 1367 | &:after { 1368 | bottom: -4.5em; 1369 | left: 50%; 1370 | height: 4.5em; 1371 | } 1372 | 1373 | &:before { 1374 | width: 45px; 1375 | height: 33px; 1376 | bottom: -2.25em; 1377 | margin-left: -22.5px; 1378 | margin-bottom: -16.5px; 1379 | background-size: 45px 33px; 1380 | } 1381 | } 1382 | } 1383 | 1384 | /* Banner */ 1385 | #banner { 1386 | padding: 3em 2em 3em 2em; 1387 | background-size: auto 150%; 1388 | 1389 | header { 1390 | margin: 0 0 1em 0; 1391 | 1392 | h2 { 1393 | font-size: 1.5em; 1394 | letter-spacing: 6px; 1395 | } 1396 | } 1397 | } 1398 | 1399 | /* Footer */ 1400 | 1401 | #footer { 1402 | .icons { 1403 | padding: 0.5em 1.25em 0.5em 1.25em; 1404 | } 1405 | 1406 | .copyright { 1407 | font-size: 1em; 1408 | margin: 0 0 4em 0; 1409 | } 1410 | } 1411 | 1412 | /* Poptrox */ 1413 | .poptrox-popup { 1414 | .nav-next, 1415 | .nav-previous { 1416 | opacity: 1.0; 1417 | 1418 | &:before { 1419 | display: none; 1420 | } 1421 | } 1422 | 1423 | .closer { 1424 | opacity: 0.5; 1425 | } 1426 | } 1427 | 1428 | } -------------------------------------------------------------------------------- /src/assets/sass/noscript.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/vendor'; 5 | @import 'libs/breakpoints'; 6 | @import 'libs/html-grid'; 7 | 8 | /* 9 | Overflow by HTML5 UP 10 | html5up.net | @ajlkn 11 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 12 | */ 13 | 14 | /* Header */ 15 | 16 | #header { 17 | body.is-preload, 18 | .main-body.is-preload & { 19 | opacity: 1; 20 | 21 | footer { 22 | @include vendor('transform', 'none'); 23 | opacity: 1; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import config from '../../config'; 3 | 4 | export default function Footer() { 5 | return ( 6 | <section id="footer"> 7 | <ul className="icons"> 8 | {config.socialLinks.map(social => { 9 | const { icon, name, url } = social; 10 | return ( 11 | <li key={url}> 12 | <a href={url} className={`icon ${icon}`}> 13 | <span className="label">{name}</span> 14 | </a> 15 | </li> 16 | ); 17 | })} 18 | </ul> 19 | <div className="copyright"> 20 | <ul className="menu"> 21 | <li>© Untitled. All rights reserved.</li> 22 | <li> 23 | Design: <a href="http://html5up.net">HTML5 UP</a> 24 | </li> 25 | </ul> 26 | </div> 27 | </section> 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/components/Gallery.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React, { Component } from 'react'; 3 | import Lightbox from 'react-images'; 4 | 5 | class Gallery extends Component { 6 | constructor() { 7 | super(); 8 | 9 | this.state = { 10 | lightboxIsOpen: false, 11 | currentImage: 0, 12 | }; 13 | 14 | this.closeLightbox = this.closeLightbox.bind(this); 15 | this.gotoNext = this.gotoNext.bind(this); 16 | this.gotoPrevious = this.gotoPrevious.bind(this); 17 | this.gotoImage = this.gotoImage.bind(this); 18 | this.handleClickImage = this.handleClickImage.bind(this); 19 | this.openLightbox = this.openLightbox.bind(this); 20 | } 21 | openLightbox(index, event) { 22 | event.preventDefault(); 23 | this.setState({ 24 | currentImage: index, 25 | lightboxIsOpen: true, 26 | }); 27 | } 28 | closeLightbox() { 29 | this.setState({ 30 | currentImage: 0, 31 | lightboxIsOpen: false, 32 | }); 33 | } 34 | gotoPrevious() { 35 | this.setState({ 36 | currentImage: this.state.currentImage - 1, 37 | }); 38 | } 39 | gotoNext() { 40 | this.setState({ 41 | currentImage: this.state.currentImage + 1, 42 | }); 43 | } 44 | gotoImage(index) { 45 | this.setState({ 46 | currentImage: index, 47 | }); 48 | } 49 | handleClickImage() { 50 | if (this.state.currentImage === this.props.images.length - 1) return; 51 | 52 | this.gotoNext(); 53 | } 54 | renderGallery() { 55 | const { images } = this.props; 56 | 57 | if (!images) return; 58 | 59 | const gallery = images.map((obj, i) => { 60 | return ( 61 | <div className="col-3 col-12-mobile" key={i}> 62 | <a 63 | href={obj.src} 64 | onClick={e => this.openLightbox(i, e)} 65 | className="image fit" 66 | > 67 | <img src={obj.thumbnail} alt="" title={obj.caption} /> 68 | </a> 69 | </div> 70 | ); 71 | }); 72 | 73 | return <div className="row gtr-0">{gallery}</div>; 74 | } 75 | render() { 76 | return ( 77 | <div> 78 | {this.renderGallery()} 79 | <Lightbox 80 | currentImage={this.state.currentImage} 81 | images={this.props.images} 82 | isOpen={this.state.lightboxIsOpen} 83 | onClickImage={this.handleClickImage} 84 | onClickNext={this.gotoNext} 85 | onClickPrev={this.gotoPrevious} 86 | onClickThumbnail={this.gotoImage} 87 | onClose={this.closeLightbox} 88 | /> 89 | </div> 90 | ); 91 | } 92 | } 93 | 94 | Gallery.displayName = 'Gallery'; 95 | Gallery.propTypes = { 96 | images: PropTypes.array, 97 | }; 98 | 99 | export default Gallery; 100 | -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Scroll from './Scroll'; 3 | import config from '../../config'; 4 | 5 | export default function Header({ title, heading, avatar }) { 6 | return ( 7 | <section id="header"> 8 | <header> 9 | <h1>{config.authorName}</h1> 10 | <p>{config.heading}</p> 11 | </header> 12 | <footer> 13 | <Scroll type="id" element="banner"> 14 | <a href="#banner" className="button style2 "> 15 | Proceed as anticipated 16 | </a> 17 | </Scroll> 18 | </footer> 19 | </section> 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Helmet from 'react-helmet'; 4 | import { StaticQuery, graphql } from 'gatsby'; 5 | 6 | import '../assets/sass/main.scss'; 7 | 8 | class Layout extends Component { 9 | constructor(props) { 10 | super(props); 11 | this.state = { 12 | isPreloaded: true, 13 | }; 14 | } 15 | 16 | componentDidMount() { 17 | this.timeoutId = setTimeout(() => { 18 | this.setState({ isPreloaded: false }); 19 | }, 100); 20 | } 21 | 22 | componentWillUnmount() { 23 | if (this.timeoutId) { 24 | clearTimeout(this.timeoutId); 25 | } 26 | } 27 | 28 | render() { 29 | const { children } = this.props; 30 | const { isPreloaded } = this.state; 31 | return ( 32 | <StaticQuery 33 | query={graphql` 34 | query SiteTitleQuery { 35 | site { 36 | siteMetadata { 37 | title 38 | } 39 | } 40 | } 41 | `} 42 | render={data => ( 43 | <> 44 | <Helmet 45 | title={data.site.siteMetadata.title} 46 | meta={[ 47 | { name: 'description', content: 'Overflow' }, 48 | { name: 'keywords', content: 'site, web' }, 49 | ]} 50 | > 51 | <html lang="en" /> 52 | </Helmet> 53 | <div className={isPreloaded ? 'main-body is-preload' : 'main-body'}> 54 | {children} 55 | </div> 56 | </> 57 | )} 58 | /> 59 | ); 60 | } 61 | } 62 | 63 | Layout.propTypes = { 64 | children: PropTypes.node.isRequired, 65 | }; 66 | 67 | export default Layout; 68 | -------------------------------------------------------------------------------- /src/components/Scroll.js: -------------------------------------------------------------------------------- 1 | import smoothscroll from 'smoothscroll-polyfill'; 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const Element = props => { 6 | return props.children; 7 | }; 8 | 9 | class Scroll extends React.Component { 10 | static propTypes = { 11 | type: PropTypes.string, 12 | element: PropTypes.string, 13 | offset: PropTypes.number, 14 | timeout: PropTypes.number, 15 | children: PropTypes.node.isRequired, 16 | }; 17 | constructor() { 18 | super(); 19 | this.handleClick = this.handleClick.bind(this); 20 | } 21 | componentDidMount() { 22 | smoothscroll.polyfill(); 23 | } 24 | handleClick(e) { 25 | e.preventDefault(); 26 | let elem = 0; 27 | let scroll = true; 28 | const { type, element, offset, timeout } = this.props; 29 | if (type && element) { 30 | switch (type) { 31 | case 'class': 32 | elem = document.getElementsByClassName(element)[0]; 33 | scroll = elem ? true : false; 34 | break; 35 | case 'id': 36 | elem = document.getElementById(element); 37 | scroll = elem ? true : false; 38 | break; 39 | default: 40 | } 41 | } 42 | scroll 43 | ? this.scrollTo(elem, offset, timeout) 44 | : console.log(`Element not found: ${element}`); // eslint-disable-line 45 | } 46 | scrollTo(element, offSet = -150, timeout = null) { 47 | const elemPos = element 48 | ? element.getBoundingClientRect().top + window.pageYOffset 49 | : 0; 50 | if (timeout) { 51 | setTimeout(() => { 52 | window.scroll({ top: elemPos + offSet, left: 0, behavior: 'smooth' }); 53 | }, timeout); 54 | } else { 55 | window.scroll({ top: elemPos + offSet, left: 0, behavior: 'smooth' }); 56 | } 57 | } 58 | render() { 59 | return ( 60 | <Element> 61 | {typeof this.props.children === 'object' ? ( 62 | React.cloneElement(this.props.children, { onClick: this.handleClick }) 63 | ) : ( 64 | <span onClick={this.handleClick}>{this.props.children}</span> 65 | )} 66 | </Element> 67 | ); 68 | } 69 | } 70 | 71 | export default Scroll; 72 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Layout from '../components/Layout'; 4 | 5 | const IndexPage = () => ( 6 | <Layout> 7 | <section id="header"> 8 | <header> 9 | <h2>NOT FOUND</h2> 10 | </header> 11 | <p>Not a valid URL</p> 12 | </section> 13 | </Layout> 14 | ); 15 | 16 | export default IndexPage; 17 | -------------------------------------------------------------------------------- /src/pages/Element.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Layout from '../components/Layout'; 4 | import Footer from '../components/Footer'; 5 | 6 | const IndexPage = () => ( 7 | <Layout> 8 | <article className="container box style3"> 9 | <header> 10 | <h2>Generic Box</h2> 11 | <p>Just a generic box. Nothing to see here.</p> 12 | </header> 13 | <section> 14 | <header> 15 | <h3>Paragraph</h3> 16 | <p>This is a subtitle</p> 17 | </header> 18 | <p> 19 | Phasellus nisl nisl, varius id <sup>porttitor sed pellentesque</sup>{' '} 20 | ac orci. Pellentesque habitant <strong>strong</strong> tristique{' '} 21 | <b>bold</b> et netus <i>italic</i> malesuada <em>emphasized</em> ac 22 | turpis egestas. Morbi leo suscipit ut. Praesent{' '} 23 | <sub>id turpis vitae</sub> turpis pretium ultricies. Vestibulum sit 24 | amet risus elit. 25 | </p> 26 | </section> 27 | <section> 28 | <header> 29 | <h3>Blockquote</h3> 30 | </header> 31 | <blockquote> 32 | Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis 33 | sagittis eget. tempus euismod. Vestibulum ante ipsum primis in 34 | faucibus. 35 | </blockquote> 36 | </section> 37 | <section> 38 | <header> 39 | <h3>Divider</h3> 40 | </header> 41 | <p> 42 | Donec consectetur <a href="/#">vestibulum dolor et pulvinar</a>. Etiam 43 | vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis 44 | eleifend nisi ornare vel. Praesent nec orci facilisis leo magna. Cras 45 | sit amet urna eros, id egestas urna. Quisque aliquam tempus euismod. 46 | Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 47 | posuere cubilia. 48 | </p> 49 | <hr /> 50 | <p> 51 | Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, 52 | at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi 53 | ornare vel. Praesent nec orci facilisis leo magna. Cras sit amet urna 54 | eros, id egestas urna. Quisque aliquam tempus euismod. Vestibulum ante 55 | ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 56 | </p> 57 | </section> 58 | <section> 59 | <header> 60 | <h3>Unordered List</h3> 61 | </header> 62 | <ul> 63 | <li> 64 | Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis 65 | enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend 66 | nisi ornare vel. 67 | </li> 68 | <li> 69 | Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis 70 | enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend 71 | nisi ornare vel. 72 | </li> 73 | <li> 74 | Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis 75 | enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend 76 | nisi ornare vel. 77 | </li> 78 | <li> 79 | Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis 80 | enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend 81 | nisi ornare vel. 82 | </li> 83 | </ul> 84 | </section> 85 | <section> 86 | <header> 87 | <h3>Ordered List</h3> 88 | </header> 89 | <ol> 90 | <li> 91 | Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis 92 | enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend 93 | nisi ornare vel. 94 | </li> 95 | <li> 96 | Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis 97 | enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend 98 | nisi ornare vel. 99 | </li> 100 | <li> 101 | Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis 102 | enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend 103 | nisi ornare vel. 104 | </li> 105 | <li> 106 | Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis 107 | enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend 108 | nisi ornare vel. 109 | </li> 110 | </ol> 111 | </section> 112 | <section> 113 | <header> 114 | <h3>Table</h3> 115 | </header> 116 | <div className="table-wrapper"> 117 | <table> 118 | <thead> 119 | <tr> 120 | <th>ID</th> 121 | <th>Name</th> 122 | <th>Description</th> 123 | <th>Price</th> 124 | </tr> 125 | </thead> 126 | <tbody> 127 | <tr> 128 | <td>45815</td> 129 | <td>Something</td> 130 | <td>Ut porttitor sagittis lorem quis nisi ornare.</td> 131 | <td>29.99</td> 132 | </tr> 133 | <tr> 134 | <td>24524</td> 135 | <td>Nothing</td> 136 | <td>Ut porttitor sagittis lorem quis nisi ornare.</td> 137 | <td>19.99</td> 138 | </tr> 139 | <tr> 140 | <td>45815</td> 141 | <td>Something</td> 142 | <td>Ut porttitor sagittis lorem quis nisi ornare.</td> 143 | <td>29.99</td> 144 | </tr> 145 | <tr> 146 | <td>24524</td> 147 | <td>Nothing</td> 148 | <td>Ut porttitor sagittis lorem quis nisi ornare.</td> 149 | <td>19.99</td> 150 | </tr> 151 | </tbody> 152 | <tfoot> 153 | <tr> 154 | <td colspan="3" /> 155 | <td>100.00</td> 156 | </tr> 157 | </tfoot> 158 | </table> 159 | </div> 160 | </section> 161 | <section> 162 | <header> 163 | <h3>Form</h3> 164 | </header> 165 | <form method="post" action="#"> 166 | <div className="row"> 167 | <div className="col-6 col-12-mobile"> 168 | <input 169 | className="text" 170 | type="text" 171 | name="name" 172 | id="name" 173 | value="" 174 | placeholder="John Doe" 175 | /> 176 | </div> 177 | <div className="col-6 col-12-mobile"> 178 | <input 179 | className="text" 180 | type="text" 181 | name="email" 182 | id="email" 183 | value="" 184 | placeholder="johndoe@domain.tld" 185 | /> 186 | </div> 187 | <div className="col-12"> 188 | <select name="department" id="department"> 189 | <option value="">Choose a department</option> 190 | <option value="1">Manufacturing</option> 191 | <option value="2">Administration</option> 192 | <option value="3">Support</option> 193 | </select> 194 | </div> 195 | <div className="col-12"> 196 | <input 197 | className="text" 198 | type="text" 199 | name="subject" 200 | id="subject" 201 | value="" 202 | placeholder="Enter your subject" 203 | /> 204 | </div> 205 | <div className="col-12"> 206 | <textarea 207 | name="message" 208 | id="message" 209 | placeholder="Enter your message" 210 | /> 211 | </div> 212 | <div className="col-12"> 213 | <ul className="actions"> 214 | <li> 215 | <input type="submit" value="Submit" /> 216 | </li> 217 | <li> 218 | <input type="reset" className="style3" value="Clear Form" /> 219 | </li> 220 | </ul> 221 | </div> 222 | </div> 223 | </form> 224 | </section> 225 | </article> 226 | 227 | <Footer /> 228 | </Layout> 229 | ); 230 | 231 | export default IndexPage; 232 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Layout from '../components/Layout'; 4 | import Header from '../components/Header'; 5 | import Footer from '../components/Footer'; 6 | import { Link } from 'gatsby'; 7 | import pic1 from '../assets/images/pic01.jpg'; 8 | import pic2 from '../assets/images/pic02.jpg'; 9 | import Scroll from '../components/Scroll'; 10 | import Gallery from '../components/Gallery'; 11 | 12 | const ROW1_IMAGES = [ 13 | { 14 | src: require('../assets/images/fulls/01.jpg'), 15 | thumbnail: require('../assets/images/thumbs/01.jpg'), 16 | caption: 'Ad infinitum', 17 | }, 18 | { 19 | src: require('../assets/images/fulls/02.jpg'), 20 | thumbnail: require('../assets/images/thumbs/02.jpg'), 21 | caption: 'Dressed in Clarity', 22 | }, 23 | { 24 | src: require('../assets/images/fulls/03.jpg'), 25 | thumbnail: require('../assets/images/thumbs/03.jpg'), 26 | caption: 'Raven', 27 | }, 28 | { 29 | src: require('../assets/images/fulls/04.jpg'), 30 | thumbnail: require('../assets/images/thumbs/04.jpg'), 31 | caption: "I'll have a cup of Disneyland, please", 32 | }, 33 | ]; 34 | 35 | const ROW2_IMAGES = [ 36 | { 37 | src: require('../assets/images/fulls/05.jpg'), 38 | thumbnail: require('../assets/images/thumbs/05.jpg'), 39 | caption: 'Cherish', 40 | }, 41 | { 42 | src: require('../assets/images/fulls/06.jpg'), 43 | thumbnail: require('../assets/images/thumbs/06.jpg'), 44 | caption: 'Different.', 45 | }, 46 | { 47 | src: require('../assets/images/fulls/07.jpg'), 48 | thumbnail: require('../assets/images/thumbs/07.jpg'), 49 | caption: 'History was made here', 50 | }, 51 | { 52 | src: require('../assets/images/fulls/08.jpg'), 53 | thumbnail: require('../assets/images/thumbs/08.jpg'), 54 | caption: 'People come and go and walk away', 55 | }, 56 | ]; 57 | const IndexPage = () => ( 58 | <Layout> 59 | <Header /> 60 | 61 | <section id="banner"> 62 | <header> 63 | <h2>This is Overflow</h2> 64 | </header> 65 | <p> 66 | A brand new site template designed by{' '} 67 | <a href="http://twitter.com/ajlkn">AJ</a> for{' '} 68 | <a href="http://html5up.net">HTML5 UP</a>.<br /> 69 | It’s responsive, built on HTML5/CSS3, and entirely free 70 | <br /> 71 | under the{' '} 72 | <a href="http://html5up.net/license">Creative Commons license</a>. 73 | </p> 74 | <footer> 75 | <Scroll type="id" element="first"> 76 | <a href="#first" className="button style2 scrolly"> 77 | Act on this message 78 | </a> 79 | </Scroll> 80 | </footer> 81 | </section> 82 | 83 | <article id="first" className="container box style1 right"> 84 | <a href="/#" className="image fit"> 85 | <img src={pic1} alt="" /> 86 | </a> 87 | <div className="inner"> 88 | <header> 89 | <h2> 90 | Lorem ipsum 91 | <br /> 92 | dolor sit amet 93 | </h2> 94 | </header> 95 | <p> 96 | Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia 97 | pellentesque eleifend vitae est elit tristique velit tempus etiam. 98 | </p> 99 | </div> 100 | </article> 101 | 102 | <article className="container box style1 left"> 103 | <a href="/#" className="image fit"> 104 | <img src={pic2} alt="" /> 105 | </a> 106 | <div className="inner"> 107 | <header> 108 | <h2> 109 | Mollis posuere 110 | <br /> 111 | lectus lacus 112 | </h2> 113 | </header> 114 | <p> 115 | Rhoncus mattis egestas sed fusce sodales rutrum et etiam ullamcorper. 116 | Etiam egestas scelerisque ac duis magna lorem ipsum dolor. 117 | </p> 118 | </div> 119 | </article> 120 | 121 | <article className="container box style2"> 122 | <header> 123 | <h2>Magnis parturient</h2> 124 | <p> 125 | Justo phasellus et aenean dignissim 126 | <br /> 127 | placerat cubilia purus lectus. 128 | </p> 129 | </header> 130 | 131 | <div className="inner gallery"> 132 | <Gallery 133 | images={ROW1_IMAGES.map(({ src, thumbnail, caption }) => ({ 134 | src, 135 | thumbnail, 136 | caption, 137 | }))} 138 | /> 139 | <Gallery 140 | images={ROW2_IMAGES.map(({ src, thumbnail, caption }) => ({ 141 | src, 142 | thumbnail, 143 | caption, 144 | }))} 145 | /> 146 | </div> 147 | </article> 148 | 149 | <article className="container box style3"> 150 | <header> 151 | <h2>Nisl sed ultricies</h2> 152 | <p>Diam dignissim lectus eu ornare volutpat orci.</p> 153 | </header> 154 | <form method="post" action="#"> 155 | <div className="row gtr-50"> 156 | <div className="col-6 col-12-mobile"> 157 | <input 158 | type="text" 159 | className="text" 160 | name="name" 161 | placeholder="Name" 162 | /> 163 | </div> 164 | <div className="col-6 col-12-mobile"> 165 | <input 166 | type="text" 167 | className="text" 168 | name="email" 169 | placeholder="Email" 170 | /> 171 | </div> 172 | <div className="col-12"> 173 | <textarea name="message" placeholder="Message" /> 174 | </div> 175 | <div className="col-12"> 176 | <ul className="actions"> 177 | <li> 178 | <input type="submit" value="Send Message" /> 179 | </li> 180 | </ul> 181 | </div> 182 | </div> 183 | </form> 184 | </article> 185 | 186 | <article className="container box style3"> 187 | <header> 188 | <h2>Elements</h2> 189 | <p>This starter has other elements.</p> 190 | <br /> 191 | Check it out 192 | <Link to="/Element"> here </Link> 193 | </header> 194 | </article> 195 | 196 | <Footer /> 197 | </Layout> 198 | ); 199 | 200 | export default IndexPage; 201 | --------------------------------------------------------------------------------