├── .prettierrc ├── src ├── assets │ ├── img │ │ ├── demo.png │ │ ├── screenshot.jpg │ │ └── website-icon.png │ ├── images │ │ ├── pic01.jpg │ │ ├── pic02.jpg │ │ ├── pic03.jpg │ │ ├── pic04.jpg │ │ ├── pic05.jpg │ │ ├── screen.png │ │ ├── overlay.png │ │ ├── pattern-size1.svg │ │ ├── pattern-size2.svg │ │ └── pattern-size3.svg │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── sass │ │ ├── layout │ │ ├── _main.scss │ │ ├── _footer.scss │ │ └── _header.scss │ │ ├── components │ │ ├── _icon.scss │ │ ├── _box.scss │ │ ├── _row.scss │ │ ├── _list.scss │ │ ├── _section.scss │ │ ├── _spotlight.scss │ │ ├── _wrapper.scss │ │ ├── _actions.scss │ │ ├── _icons.scss │ │ ├── _table.scss │ │ ├── _button.scss │ │ ├── _image.scss │ │ └── _form.scss │ │ ├── noscript.scss │ │ ├── base │ │ ├── _page.scss │ │ ├── _reset.scss │ │ └── _typography.scss │ │ ├── main.scss │ │ ├── libs │ │ ├── _vars.scss │ │ ├── _mixins.scss │ │ ├── _functions.scss │ │ ├── _html-grid.scss │ │ ├── _breakpoints.scss │ │ └── _vendor.scss │ │ └── font-awesome.min.css ├── pages │ ├── 404.js │ ├── index.js │ └── Elements.js └── components │ ├── Footer.js │ ├── Layout.js │ └── Scroll.js ├── .gitignore ├── gatsby-node.js ├── gatsby-browser.js ├── gatsby-ssr.js ├── CONTRIBUTING.md ├── .github └── FUNDING.yml ├── gatsby-config.js ├── LICENSE ├── config.js ├── package.json └── README.md /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/img/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/img/demo.png -------------------------------------------------------------------------------- /src/assets/images/pic01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/images/pic01.jpg -------------------------------------------------------------------------------- /src/assets/images/pic02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/images/pic02.jpg -------------------------------------------------------------------------------- /src/assets/images/pic03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/images/pic03.jpg -------------------------------------------------------------------------------- /src/assets/images/pic04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/images/pic04.jpg -------------------------------------------------------------------------------- /src/assets/images/pic05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/images/pic05.jpg -------------------------------------------------------------------------------- /src/assets/images/screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/images/screen.png -------------------------------------------------------------------------------- /src/assets/images/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/images/overlay.png -------------------------------------------------------------------------------- /src/assets/img/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/img/screenshot.jpg -------------------------------------------------------------------------------- /src/assets/img/website-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/img/website-icon.png -------------------------------------------------------------------------------- /src/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-fractal/HEAD/src/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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-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-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /src/assets/sass/layout/_main.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Main */ 8 | 9 | #main { 10 | @include padding(4em, 0); 11 | 12 | // Small. 13 | @include breakpoint('<=small') { 14 | @include padding(3em, 0); 15 | } 16 | 17 | } -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Layout from '../components/Layout'; 4 | 5 | const IndexPage = () => ( 6 | 7 |
8 |
9 |

10 | Page not found 11 |
12 | Not a valid URL 13 |

14 |
15 |
16 | 17 | ); 18 | 19 | export default IndexPage; 20 | -------------------------------------------------------------------------------- /src/assets/sass/components/_icon.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Icon */ 8 | 9 | .icon { 10 | @include icon; 11 | border-bottom: none; 12 | position: relative; 13 | 14 | > .label { 15 | display: none; 16 | } 17 | } 18 | 19 | @mixin color-icon($p: null) { 20 | .icon { 21 | color: _palette($p, fg-light); 22 | } 23 | } 24 | 25 | @include color-icon; -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/assets/sass/components/_box.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Box */ 8 | 9 | .box { 10 | border-radius: _size(border-radius); 11 | border: solid _size(border-width) _palette(border); 12 | margin-bottom: _size(element-margin); 13 | padding: 1.5em; 14 | 15 | > :last-child, 16 | > :last-child > :last-child, 17 | > :last-child > :last-child > :last-child { 18 | margin-bottom: 0; 19 | } 20 | 21 | &.alt { 22 | border: 0; 23 | border-radius: 0; 24 | padding: 0; 25 | } 26 | } -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/assets/images/pattern-size1.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/images/pattern-size2.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/images/pattern-size3.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import config from '../../config'; 3 | export default function Footer() { 4 | return ( 5 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /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 | Fractal 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 | .main-body.is-preload &, 18 | body.is-preload & { 19 | .content { 20 | @include vendor('transform', 'none'); 21 | opacity: 1; 22 | } 23 | 24 | .image { 25 | @include vendor('transform', 'none'); 26 | opacity: 1; 27 | 28 | img { 29 | opacity: 1; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/assets/sass/components/_row.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Row */ 8 | 9 | .row { 10 | @include html-grid(1.5em); 11 | 12 | @include breakpoint('<=xlarge') { 13 | @include html-grid(1.5em, 'xlarge'); 14 | } 15 | 16 | @include breakpoint('<=large') { 17 | @include html-grid(1.5em, 'large'); 18 | } 19 | 20 | @include breakpoint('<=medium') { 21 | @include html-grid(1.5em, 'medium'); 22 | } 23 | 24 | @include breakpoint('<=small') { 25 | @include html-grid(1.5em, 'small'); 26 | } 27 | 28 | @include breakpoint('<=xsmall') { 29 | @include html-grid(1.5em, 'xsmall'); 30 | } 31 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/assets/sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Footer */ 8 | 9 | #footer { 10 | @include color-typography(accent3); 11 | @include padding(4.5em, 0); 12 | color: _palette(accent3, fg-light); 13 | text-align: center; 14 | 15 | a { 16 | color: inherit; 17 | } 18 | 19 | .copyright { 20 | font-size: 0.8em; 21 | } 22 | 23 | // Medium. 24 | @include breakpoint('<=medium') { 25 | @include padding(4em, 4em); 26 | } 27 | 28 | // Small. 29 | @include breakpoint('<=small') { 30 | 31 | // Landscape. 32 | @include orientation(landscape) { 33 | @include padding(3em, 3em); 34 | } 35 | 36 | // Portrait. 37 | @include orientation(portrait) { 38 | @include padding(3em, 1.5em); 39 | } 40 | 41 | } 42 | 43 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Anubhav Srivastava 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/assets/sass/base/_page.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Basic */ 8 | 9 | // MSIE: Required for IEMobile. 10 | @-ms-viewport { 11 | width: device-width; 12 | } 13 | 14 | // MSIE: Prevents scrollbar from overlapping content. 15 | body { 16 | -ms-overflow-style: scrollbar; 17 | } 18 | 19 | // Ensures page width is always >=320px. 20 | @include breakpoint('<=xxsmall') { 21 | html, 22 | body { 23 | min-width: 320px; 24 | } 25 | } 26 | 27 | // Set box model to border-box. 28 | // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 29 | html { 30 | box-sizing: border-box; 31 | } 32 | 33 | *, 34 | *:before, 35 | *:after { 36 | box-sizing: inherit; 37 | } 38 | 39 | body, 40 | .main-body { 41 | background: _palette(bg); 42 | 43 | // Stops initial animations until page loads. 44 | &.is-preload { 45 | *, 46 | *:before, 47 | *:after { 48 | @include vendor('animation', 'none !important'); 49 | @include vendor('transition', 'none !important'); 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteTitle: 'Gatsby Starter Fractal', // 3 | manifestName: 'Fractal', 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-fractal/`, // This path is subpath of your hosting https://domain/portfolio 11 | heading: 'Anubhav Srivastava', 12 | subHeading: 'Full time Web Developer. Part time Open source contributor ', 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 | phone: '000-00000', 37 | address: '305 Del Sol, Sunnyvale, CA', 38 | }; 39 | -------------------------------------------------------------------------------- /src/assets/sass/components/_list.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* List */ 8 | 9 | ol { 10 | list-style: decimal; 11 | margin: 0 0 _size(element-margin) 0; 12 | padding-left: 1.25em; 13 | 14 | li { 15 | padding-left: 0.25em; 16 | } 17 | } 18 | 19 | ul { 20 | list-style: disc; 21 | margin: 0 0 _size(element-margin) 0; 22 | padding-left: 1em; 23 | 24 | li { 25 | padding-left: 0.5em; 26 | } 27 | 28 | &.alt { 29 | list-style: none; 30 | padding-left: 0; 31 | 32 | li { 33 | border-top-style: solid; 34 | border-top-width: _size(border-width); 35 | padding: 0.5em 0; 36 | 37 | &:first-child { 38 | border-top: 0; 39 | padding-top: 0; 40 | } 41 | } 42 | } 43 | } 44 | 45 | dl { 46 | margin: 0 0 _size(element-margin) 0; 47 | 48 | dt { 49 | display: block; 50 | font-weight: _font(weight-bold); 51 | margin: 0 0 (_size(element-margin) * 0.5) 0; 52 | } 53 | 54 | dd { 55 | margin-left: _size(element-margin); 56 | } 57 | } 58 | 59 | @mixin color-list($p: null) { 60 | ul { 61 | &.alt { 62 | > li { 63 | border-top-color: _palette($p, border); 64 | } 65 | } 66 | } 67 | } 68 | 69 | @include color-list; -------------------------------------------------------------------------------- /src/assets/sass/components/_section.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Section/Article */ 8 | 9 | section, article { 10 | &.special { 11 | text-align: center; 12 | } 13 | } 14 | 15 | header { 16 | p { 17 | position: relative; 18 | margin: 0 0 (_size(element-margin) * 0.75) 0; 19 | 20 | // Small. 21 | @include breakpoint('<=small') { 22 | br { 23 | display: none; 24 | } 25 | } 26 | 27 | } 28 | 29 | h2 + p { 30 | font-size: 1.25em; 31 | margin-top: (_size(element-margin) * -0.25); 32 | line-height: 1.5em; 33 | } 34 | 35 | h3 + p { 36 | font-size: 1.1em; 37 | margin-top: (_size(element-margin) * -0.125); 38 | line-height: 1.5em; 39 | } 40 | 41 | h4 + p, 42 | h5 + p, 43 | h6 + p { 44 | font-size: 0.9em; 45 | margin-top: (_size(element-margin) * -0.3); 46 | line-height: 1.5em; 47 | } 48 | 49 | &.major { 50 | margin: 0 0 (_size(element-margin) * 1.25) 0; 51 | text-align: center; 52 | 53 | &:after { 54 | content: ''; 55 | border-bottom: solid (_size(border-width) * 2) _palette(border); 56 | display: block; 57 | width: 4em; 58 | margin: _size(element-margin) auto 0 auto; 59 | } 60 | 61 | // Small. 62 | @include breakpoint('<=small') { 63 | margin: 0 0 _size(element-margin) 0; 64 | 65 | p { 66 | font-size: 1em; 67 | } 68 | } 69 | 70 | } 71 | } -------------------------------------------------------------------------------- /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 'font-awesome.min.css'; 8 | 9 | /* 10 | Fractal by HTML5 UP 11 | html5up.net | @ajlkn 12 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 13 | */ 14 | 15 | // Breakpoints. 16 | 17 | @include breakpoints(( 18 | xlarge: ( 1281px, 1680px ), 19 | large: ( 981px, 1280px ), 20 | medium: ( 737px, 980px ), 21 | small: ( 481px, 736px ), 22 | xsmall: ( 361px, 480px ), 23 | xxsmall: ( null, 360px ) 24 | )); 25 | 26 | // Mixins. 27 | 28 | @mixin color($p: null) { 29 | @include color-button($p); 30 | @include color-form($p); 31 | @include color-icon($p); 32 | @include color-image($p); 33 | @include color-list($p); 34 | @include color-table($p); 35 | @include color-typography($p); 36 | } 37 | 38 | // Base. 39 | 40 | @import 'base/reset'; 41 | @import 'base/page'; 42 | @import 'base/typography'; 43 | 44 | // Component. 45 | 46 | @import 'components/row'; 47 | @import 'components/box'; 48 | @import 'components/button'; 49 | @import 'components/form'; 50 | @import 'components/icon'; 51 | @import 'components/image'; 52 | @import 'components/list'; 53 | @import 'components/actions'; 54 | @import 'components/icons'; 55 | @import 'components/section'; 56 | @import 'components/spotlight'; 57 | @import 'components/table'; 58 | @import 'components/wrapper'; 59 | 60 | // Layout. 61 | 62 | @import 'layout/header'; 63 | @import 'layout/main'; 64 | @import 'layout/footer'; -------------------------------------------------------------------------------- /src/assets/sass/libs/_vars.scss: -------------------------------------------------------------------------------- 1 | // Misc. 2 | $misc: ( 3 | ); 4 | 5 | // Duration. 6 | $duration: ( 7 | transition: 0.2s 8 | ); 9 | 10 | // Size. 11 | $size: ( 12 | border-radius: 6px, 13 | border-width: 1px, 14 | element-height: 2.75em, 15 | element-margin: 2em 16 | ); 17 | 18 | // Font. 19 | $font: ( 20 | family: (Arial, Helvetica, sans-serif), 21 | family-fixed: ('Courier New', monospace), 22 | weight: normal, 23 | weight-bold: bold 24 | ); 25 | 26 | // Palette. 27 | $palette: ( 28 | bg: #ffffff, 29 | fg: #999999, 30 | fg-bold: #828282, 31 | fg-light: #e0e0e0, 32 | border: #e6e6e6, 33 | border-bg: rgba(144,144,144,0.075), 34 | border2: #d6d6d6, 35 | border2-bg: rgba(144,144,144,0.15), 36 | 37 | accent1: ( 38 | bg: #4696e5, 39 | fg: mix(#4696e5, #ffffff, 25%), 40 | fg-bold: #ffffff, 41 | fg-light: mix(#4696e5, #ffffff, 40%), 42 | border: rgba(255,255,255,0.25), 43 | border-bg: rgba(255,255,255,0.075), 44 | border2: rgba(255,255,255,0.5), 45 | border2-bg: rgba(255,255,255,0.2), 46 | invert: true 47 | ), 48 | 49 | accent2: ( 50 | bg: #fbfbfb, 51 | fg: #999999, 52 | fg-bold: #828282, 53 | fg-light: #e0e0e0, 54 | border: #e6e6e6, 55 | border-bg: rgba(144,144,144,0.075), 56 | border2: #d6d6d6, 57 | border2-bg: rgba(144,144,144,0.15), 58 | invert: false 59 | ), 60 | 61 | accent3: ( 62 | bg: #f7f7f7, 63 | fg: #999999, 64 | fg-bold: #828282, 65 | fg-light: #b0b0b0, 66 | border: #d6d6d6, 67 | border-bg: rgba(144,144,144,0.075), 68 | border2: #c6c6c6, 69 | border2-bg: rgba(144,144,144,0.15), 70 | invert: false 71 | ) 72 | ); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-fractal", 3 | "version": "0.0.3", 4 | "description": "Gatsby.js V4 starter template based on Fractal by HTML5 UP", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/anubhavsrivastava/gatsby-starter-fractal.git" 8 | }, 9 | "author": { 10 | "name": "Anubhav Srivastava", 11 | "email": "anubhav.srivastava00@gmail.com" 12 | }, 13 | "dependencies": { 14 | "gatsby": "^4.2.0", 15 | "gatsby-link": "^4.4.0", 16 | "gatsby-plugin-manifest": "^4.2.0", 17 | "gatsby-plugin-offline": "^5.2.0", 18 | "gatsby-plugin-react-helmet": "^5.2.0", 19 | "gatsby-plugin-sass": "^5.2.0", 20 | "gatsby-react-router-scroll": "^5.4.0", 21 | "node-sass": "^6.0.1", 22 | "react": "^16.13.1", 23 | "react-dom": "^16.13.1", 24 | "react-helmet": "^5.2.1", 25 | "react-images": "^1.1.0", 26 | "react-scrollspy": "^3.4.2", 27 | "smoothscroll-polyfill": "^0.4.4" 28 | }, 29 | "scripts": { 30 | "develop": "gatsby develop", 31 | "build": "npm run clean && gatsby build", 32 | "deploy": "npm run clean && gatsby build --prefix-paths && gh-pages -d public", 33 | "serve": "gatsby serve", 34 | "clean": "rimraf .cache public", 35 | "format": "prettier --write '**/*.js'", 36 | "test": "echo \"Error: no test specified\" && exit 1" 37 | }, 38 | "devDependencies": { 39 | "gh-pages": "^3.2.3", 40 | "prettier": "^2.4.1", 41 | "rimraf": "^3.0.2" 42 | }, 43 | "keywords": [ 44 | "gatsby", 45 | "gatsby-starter", 46 | "gatsby-starter-fractal" 47 | ], 48 | "license": "MIT", 49 | "bugs": { 50 | "url": "https://github.com/anubhavsrivastava/gatsby-starter-fractal/issues" 51 | }, 52 | "homepage": "https://github.com/anubhavsrivastava/gatsby-starter-fractal#readme" 53 | } -------------------------------------------------------------------------------- /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: 'Solid State' }, 48 | { name: 'keywords', content: 'site, web' }, 49 | ]} 50 | > 51 | <html lang="en" /> 52 | </Helmet> 53 | <div 54 | className={isPreloaded ? ' main-body is-preload' : ' main-body'} 55 | > 56 | <div id="page-wrapper">{children}</div> 57 | </div> 58 | </> 59 | )} 60 | /> 61 | ); 62 | } 63 | } 64 | 65 | Layout.propTypes = { 66 | children: PropTypes.node.isRequired, 67 | }; 68 | 69 | export default Layout; 70 | -------------------------------------------------------------------------------- /src/assets/sass/components/_spotlight.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Spotlight */ 8 | 9 | .spotlight { 10 | @include vendor('display', 'flex'); 11 | @include vendor('align-items', 'center'); 12 | margin: 0 0 _size(element-margin) 0; 13 | 14 | .image { 15 | width: 30%; 16 | border-radius: 100%; 17 | margin: 0 (_size(element-margin) * 1.5) 0 0; 18 | display: block; 19 | 20 | img { 21 | display: block; 22 | border-radius: 100%; 23 | width: 100%; 24 | } 25 | } 26 | 27 | .content { 28 | width: 70%; 29 | 30 | > :last-child { 31 | margin-bottom: 0; 32 | } 33 | } 34 | 35 | &:nth-child(2n) { 36 | @include vendor('flex-direction', 'row-reverse'); 37 | 38 | .image { 39 | margin: 0 0 0 (_size(element-margin) * 1.5); 40 | } 41 | 42 | .content { 43 | text-align: right; 44 | } 45 | } 46 | 47 | // Small. 48 | @include breakpoint('<=small') { 49 | 50 | // Landscape. 51 | @include orientation(landscape) { 52 | .image { 53 | margin: 0 _size(element-margin) 0 0; 54 | } 55 | 56 | &:nth-child(2n) { 57 | .image { 58 | margin: 0 0 0 _size(element-margin); 59 | } 60 | } 61 | } 62 | 63 | // Portrait. 64 | @include orientation(portrait) { 65 | @include vendor('flex-direction', 'column !important'); 66 | 67 | .image { 68 | width: 100%; 69 | max-width: 60%; 70 | margin: 0 0 _size(element-margin) 0 !important; 71 | } 72 | 73 | .content { 74 | width: 100%; 75 | text-align: center !important; 76 | } 77 | } 78 | 79 | } 80 | 81 | } -------------------------------------------------------------------------------- /src/assets/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | // Reset. 8 | // Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) 9 | 10 | html, body, div, span, applet, object, 11 | iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 12 | pre, a, abbr, acronym, address, big, cite, 13 | code, del, dfn, em, img, ins, kbd, q, s, samp, 14 | small, strike, strong, sub, sup, tt, var, b, 15 | u, i, center, dl, dt, dd, ol, ul, li, fieldset, 16 | form, label, legend, table, caption, tbody, 17 | tfoot, thead, tr, th, td, article, aside, 18 | canvas, details, embed, figure, figcaption, 19 | footer, header, hgroup, menu, nav, output, ruby, 20 | section, summary, time, mark, audio, video { 21 | margin: 0; 22 | padding: 0; 23 | border: 0; 24 | font-size: 100%; 25 | font: inherit; 26 | vertical-align: baseline; 27 | } 28 | 29 | article, aside, details, figcaption, figure, 30 | footer, header, hgroup, menu, nav, section { 31 | display: block; 32 | } 33 | 34 | body { 35 | line-height: 1; 36 | } 37 | 38 | ol, ul { 39 | list-style:none; 40 | } 41 | 42 | blockquote, q { 43 | quotes: none; 44 | 45 | &:before, 46 | &:after { 47 | content: ''; 48 | content: none; 49 | } 50 | } 51 | 52 | table { 53 | border-collapse: collapse; 54 | border-spacing: 0; 55 | } 56 | 57 | body { 58 | -webkit-text-size-adjust: none; 59 | } 60 | 61 | mark { 62 | background-color: transparent; 63 | color: inherit; 64 | } 65 | 66 | input::-moz-focus-inner { 67 | border: 0; 68 | padding: 0; 69 | } 70 | 71 | input, select, textarea { 72 | -moz-appearance: none; 73 | -webkit-appearance: none; 74 | -ms-appearance: none; 75 | appearance: none; 76 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_wrapper.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Wrapper */ 8 | 9 | .wrapper { 10 | @include padding(4.5em, 0); 11 | background-color: _palette(bg); 12 | border-bottom: solid (_size(border-width) * 2) lighten(_palette(border), 3); 13 | 14 | > .inner { 15 | margin-left: auto; 16 | margin-right: auto; 17 | width: 50em; 18 | 19 | &.alt { 20 | > * { 21 | border-top: solid (_size(border-width) * 2) lighten(_palette(border), 3); 22 | margin-bottom: 0; 23 | margin-top: 3em; 24 | padding-top: 3em; 25 | 26 | &:first-child { 27 | border-top: 0; 28 | margin-top: 0; 29 | padding-top: 0; 30 | } 31 | } 32 | } 33 | } 34 | 35 | &.style1 { 36 | @include color(accent1); 37 | } 38 | 39 | &.style2 { 40 | @include color(accent2); 41 | } 42 | 43 | &.style3 { 44 | @include color(accent3); 45 | } 46 | 47 | // Medium. 48 | @include breakpoint('<=medium') { 49 | @include padding(4em, 4em); 50 | 51 | > .inner { 52 | width: 100%; 53 | } 54 | } 55 | 56 | // Small. 57 | @include breakpoint('<=small') { 58 | 59 | // Landscape. 60 | @include orientation(landscape) { 61 | @include padding(3em, 3em); 62 | } 63 | 64 | // Portrait. 65 | @include orientation(portrait) { 66 | @include padding(3em, 1.5em); 67 | } 68 | 69 | } 70 | 71 | // XSmall. 72 | @include breakpoint('<=xsmall') { 73 | 74 | // Landscape. 75 | @include orientation(landscape) { 76 | @include padding(2em, 1.5em); 77 | } 78 | 79 | // Portrait. 80 | @include orientation(portrait) { 81 | @include padding(2em, 1em); 82 | } 83 | 84 | } 85 | 86 | } -------------------------------------------------------------------------------- /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/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 = 0, 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/assets/sass/components/_actions.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Actions */ 8 | 9 | ul.actions { 10 | @include vendor('display', 'flex'); 11 | cursor: default; 12 | list-style: none; 13 | margin-left: (_size(element-margin) * -0.5); 14 | padding-left: 0; 15 | 16 | li { 17 | padding: 0 0 0 (_size(element-margin) * 0.5); 18 | vertical-align: middle; 19 | } 20 | 21 | &.special { 22 | @include vendor('justify-content', 'center'); 23 | width: 100%; 24 | margin-left: 0; 25 | 26 | li { 27 | &:first-child { 28 | padding-left: 0; 29 | } 30 | } 31 | } 32 | 33 | &.stacked { 34 | @include vendor('flex-direction', 'column'); 35 | margin-left: 0; 36 | 37 | li { 38 | padding: (_size(element-margin) * 0.65) 0 0 0; 39 | 40 | &:first-child { 41 | padding-top: 0; 42 | } 43 | } 44 | } 45 | 46 | &.fit { 47 | width: calc(100% + #{_size(element-margin) * 0.5}); 48 | 49 | li { 50 | @include vendor('flex-grow', '1'); 51 | @include vendor('flex-shrink', '1'); 52 | width: 100%; 53 | 54 | > * { 55 | width: 100%; 56 | } 57 | } 58 | 59 | &.stacked { 60 | width: 100%; 61 | } 62 | } 63 | 64 | @include breakpoint('<=xsmall') { 65 | &:not(.fixed) { 66 | @include vendor('flex-direction', 'column'); 67 | margin-left: 0; 68 | width: 100% !important; 69 | 70 | li { 71 | @include vendor('flex-grow', '1'); 72 | @include vendor('flex-shrink', '1'); 73 | padding: (_size(element-margin) * 0.5) 0 0 0; 74 | text-align: center; 75 | width: 100%; 76 | 77 | > * { 78 | width: 100%; 79 | } 80 | 81 | &:first-child { 82 | padding-top: 0; 83 | } 84 | 85 | input[type="submit"], 86 | input[type="reset"], 87 | input[type="button"], 88 | button, 89 | .button { 90 | width: 100%; 91 | 92 | &.icon { 93 | &:before { 94 | margin-left: -0.5em; 95 | } 96 | } 97 | } 98 | } 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_icons.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Icons */ 8 | 9 | ul.icons { 10 | cursor: default; 11 | list-style: none; 12 | padding-left: 0; 13 | 14 | li { 15 | display: inline-block; 16 | padding: 0 1.5em 0 0; 17 | 18 | &:last-child { 19 | padding-right: 0 !important; 20 | } 21 | 22 | .icon { 23 | &:before { 24 | font-size: 1.75rem; 25 | } 26 | } 27 | } 28 | 29 | &.major { 30 | li { 31 | padding: 0 2.5em 0 0; 32 | 33 | .icon { 34 | &:before { 35 | font-size: 2.75rem; 36 | } 37 | } 38 | } 39 | 40 | // Small. 41 | @include breakpoint('<=small') { 42 | li { 43 | padding: 0 1.25em 0 0; 44 | 45 | .icon { 46 | &:before { 47 | font-size: 1.75rem; 48 | } 49 | } 50 | } 51 | } 52 | 53 | } 54 | 55 | &.labeled { 56 | li { 57 | margin: 1em 0; 58 | padding: 0 2em 0 0; 59 | 60 | .icon { 61 | &:before { 62 | vertical-align: middle; 63 | font-size: 2.25rem; 64 | margin-right: 0.5em; 65 | } 66 | 67 | .label { 68 | display: inline-block; 69 | vertical-align: middle; 70 | color: _palette(fg); 71 | } 72 | } 73 | } 74 | 75 | // Small. 76 | @include breakpoint('<=small') { 77 | 78 | // Portrait. 79 | @include orientation(portrait) { 80 | text-align: left; 81 | margin-right: auto; 82 | margin-left: auto; 83 | display: inline-block; 84 | white-space: nowrap; 85 | 86 | li { 87 | display: block; 88 | padding: 0; 89 | margin: 1.5em 0 0 0; 90 | 91 | .icon { 92 | &:before { 93 | width: 1.5em; 94 | display: block; 95 | float: left; 96 | margin-right: 0; 97 | } 98 | 99 | &:after { 100 | content: ''; 101 | display: block; 102 | clear: both; 103 | } 104 | } 105 | 106 | &:first-child { 107 | margin-top: 0; 108 | } 109 | } 110 | } 111 | 112 | } 113 | 114 | } 115 | } -------------------------------------------------------------------------------- /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/components/_table.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Table */ 8 | 9 | .table-wrapper { 10 | -webkit-overflow-scrolling: touch; 11 | overflow-x: auto; 12 | } 13 | 14 | table { 15 | margin: 0 0 _size(element-margin) 0; 16 | width: 100%; 17 | 18 | tbody { 19 | tr { 20 | border-style: solid; 21 | border-width: _size(border-width); 22 | border-left: 0; 23 | border-right: 0; 24 | } 25 | } 26 | 27 | td { 28 | padding: 0.75em 0.75em; 29 | } 30 | 31 | th { 32 | font-size: 0.9em; 33 | font-weight: _font(weight-bold); 34 | padding: 0 0.75em 0.75em 0.75em; 35 | text-align: left; 36 | } 37 | 38 | thead { 39 | border-bottom-style: solid; 40 | border-bottom-width: (_size(border-width) * 2); 41 | } 42 | 43 | tfoot { 44 | border-top-style: solid; 45 | border-top-width: (_size(border-width) * 2); 46 | } 47 | 48 | &.alt { 49 | border-collapse: separate; 50 | 51 | tbody { 52 | tr { 53 | td { 54 | border-style: solid; 55 | border-width: _size(border-width); 56 | border-left-width: 0; 57 | border-top-width: 0; 58 | 59 | &:first-child { 60 | border-left-width: _size(border-width); 61 | } 62 | } 63 | 64 | &:first-child { 65 | td { 66 | border-top-width: _size(border-width); 67 | } 68 | } 69 | } 70 | } 71 | 72 | thead { 73 | border-bottom: 0; 74 | } 75 | 76 | tfoot { 77 | border-top: 0; 78 | } 79 | } 80 | } 81 | 82 | @mixin color-table($p: null) { 83 | table { 84 | 85 | tbody { 86 | tr { 87 | border-color: _palette($p, border); 88 | 89 | &:nth-child(2n + 1) { 90 | background-color: _palette($p, border-bg); 91 | } 92 | } 93 | } 94 | 95 | th { 96 | color: _palette($p, fg-bold); 97 | } 98 | 99 | thead { 100 | border-bottom-color: _palette($p, border); 101 | } 102 | 103 | tfoot { 104 | border-top-color: _palette($p, border); 105 | } 106 | 107 | &.alt { 108 | 109 | tbody { 110 | tr { 111 | td { 112 | border-color: _palette($p, border); 113 | } 114 | } 115 | } 116 | } 117 | } 118 | } 119 | 120 | @include color-table; -------------------------------------------------------------------------------- /src/assets/sass/components/_button.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Button */ 8 | 9 | input[type="submit"], 10 | input[type="reset"], 11 | input[type="button"], 12 | button, 13 | .button { 14 | @include vendor('appearance', 'none'); 15 | @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out'); 16 | border-radius: _size(border-radius); 17 | border: 0; 18 | cursor: pointer; 19 | display: inline-block; 20 | font-weight: _font(weight-bold); 21 | height: 2.85em; 22 | line-height: 2.95em; 23 | padding: 0 1.75em; 24 | text-align: center; 25 | text-decoration: none; 26 | white-space: nowrap; 27 | 28 | &.icon { 29 | padding-left: 1.35em; 30 | 31 | &:before { 32 | margin-right: 0.5em; 33 | } 34 | } 35 | 36 | &.fit { 37 | width: 100%; 38 | } 39 | 40 | &.small { 41 | font-size: 0.8em; 42 | } 43 | 44 | &.large { 45 | font-size: 1.35em; 46 | } 47 | 48 | &.disabled, 49 | &:disabled { 50 | @include vendor('pointer-events', 'none'); 51 | cursor: default; 52 | opacity: 0.25; 53 | } 54 | 55 | // XSmall. 56 | @include breakpoint('<=xsmall') { 57 | 58 | &.icon { 59 | padding: 0; 60 | } 61 | 62 | // Portrait. 63 | @include orientation(portrait) { 64 | padding: 0; 65 | } 66 | 67 | } 68 | 69 | } 70 | 71 | @mixin color-button($p: null) { 72 | input[type="submit"], 73 | input[type="reset"], 74 | input[type="button"], 75 | button, 76 | .button { 77 | background-color: transparent; 78 | color: _palette($p, fg-bold) !important; 79 | box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette($p, border); 80 | 81 | &:hover { 82 | background-color: _palette($p, border-bg); 83 | } 84 | 85 | &:active { 86 | background-color: _palette($p, border2-bg); 87 | } 88 | 89 | &.primary { 90 | box-shadow: none; 91 | 92 | @if _palette($p, invert) == true { 93 | background-color: _palette($p, fg-bold); 94 | color: _palette($p, bg) !important; 95 | 96 | &:hover { 97 | } 98 | 99 | &:active { 100 | } 101 | } 102 | @else { 103 | background-color: _palette(accent1, bg); 104 | color: _palette(accent1, fg-bold) !important; 105 | 106 | &:hover { 107 | background-color: lighten(_palette(accent1, bg), 5); 108 | } 109 | 110 | &:active { 111 | background-color: darken(_palette(accent1, bg), 5); 112 | } 113 | } 114 | } 115 | } 116 | } 117 | 118 | @include color-button; -------------------------------------------------------------------------------- /src/assets/sass/components/_image.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Image */ 8 | 9 | .image { 10 | border-radius: _size(border-radius); 11 | border: 0; 12 | display: inline-block; 13 | position: relative; 14 | overflow: hidden; 15 | 16 | img { 17 | border-radius: _size(border-radius); 18 | display: block; 19 | } 20 | 21 | &.left, 22 | &.right { 23 | max-width: 40%; 24 | 25 | img { 26 | width: 100%; 27 | } 28 | } 29 | 30 | &.left { 31 | float: left; 32 | margin: 0 1.5em 1em 0; 33 | top: 0.25em; 34 | } 35 | 36 | &.right { 37 | float: right; 38 | margin: 0 0 1em 1.5em; 39 | top: 0.25em; 40 | } 41 | 42 | &.fit { 43 | display: block; 44 | margin: 0 0 _size(element-margin) 0; 45 | width: 100%; 46 | 47 | img { 48 | width: 100%; 49 | } 50 | } 51 | 52 | &.main { 53 | display: block; 54 | margin: 0 0 (_size(element-margin) * 1.5) 0; 55 | width: 100%; 56 | 57 | img { 58 | width: 100%; 59 | } 60 | } 61 | 62 | &.phone { 63 | box-shadow: none; 64 | border-radius: 0; 65 | margin: 0 0 (_size(element-margin) * 1.5) 0; 66 | width: 13em; 67 | 68 | img { 69 | border-radius: 0; 70 | display: block; 71 | position: relative; 72 | width: 100%; 73 | } 74 | 75 | .inner, &:before, &:after { 76 | display: block; 77 | border: solid (_size(border-width) * 2) _palette(accent1, border); 78 | } 79 | 80 | .inner { 81 | position: relative; 82 | 83 | &:before, &:after { 84 | content: ''; 85 | position: absolute; 86 | left: 50%; 87 | } 88 | 89 | &:before { 90 | top: -1.375em; 91 | margin-left: -1em; 92 | width: 2em; 93 | height: 0.25em; 94 | border-radius: 0.5em; 95 | background: _palette(accent1, border); 96 | } 97 | 98 | &:after { 99 | bottom: -2.75em; 100 | margin-left: -1em; 101 | width: 2em; 102 | height: 2em; 103 | border-radius: 100%; 104 | border: solid (_size(border-width) * 2) _palette(accent1, border); 105 | } 106 | } 107 | 108 | &:before, &:after { 109 | content: ''; 110 | } 111 | 112 | &:before { 113 | height: 2.5em; 114 | border-radius: 1em 1em 0 0; 115 | border-bottom: 0; 116 | } 117 | 118 | &:after { 119 | height: 3.5em; 120 | border-radius: 0 0 1em 1em; 121 | border-top: 0; 122 | } 123 | } 124 | } 125 | 126 | @mixin color-image($p: null) { 127 | .image { 128 | box-shadow: 0 0 0 4px _palette($p, bg), 0 0 0 5px _palette($p, border); 129 | 130 | &.phone { 131 | box-shadow: none; 132 | 133 | .inner, &:before, &:after { 134 | border-color: _palette($p, border); 135 | } 136 | 137 | .inner { 138 | &:before { 139 | background: _palette($p, border); 140 | } 141 | 142 | &:after { 143 | border-color: _palette($p, border); 144 | } 145 | } 146 | } 147 | } 148 | } 149 | 150 | @include color-image; -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gatsby-starter-fractal 2 | 3 | Gatsby.js V4 starter template based on Fractal 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/screenshot.jpg) 8 | 9 | Check online preview [here](https://anubhavsrivastava.github.io/gatsby-starter-fractal/) 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 <site-name> https://github.com/anubhavsrivastava/gatsby-starter-fractal 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 fractal', // <title> 44 | ... 45 | heading: 'Anubhav', 46 | subHeading: '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-overflow](https://github.com/anubhavsrivastava/gatsby-starter-overflow) 80 | - [gatsby-starter-multiverse](https://github.com/anubhavsrivastava/gatsby-starter-multiverse) 81 | - [gatsby-starter-identity](https://github.com/anubhavsrivastava/gatsby-starter-identity) 82 | - [gatsby-starter-highlights](https://github.com/anubhavsrivastava/gatsby-starter-highlights) 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 | -------------------------------------------------------------------------------- /src/assets/sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Type */ 8 | 9 | html, body { 10 | background: _palette(bg-alt); 11 | } 12 | 13 | body { 14 | color: _palette(fg); 15 | } 16 | 17 | html, input, select, textarea { 18 | font-size: 16pt; 19 | 20 | // XLarge. 21 | @include breakpoint('<=xlarge') { 22 | font-size: 13pt; 23 | } 24 | 25 | // Large. 26 | @include breakpoint('<=large') { 27 | font-size: 12pt; 28 | } 29 | 30 | // XXSmall. 31 | @include breakpoint('<=xxsmall') { 32 | font-size: 11pt; 33 | } 34 | 35 | } 36 | 37 | body, input, select, textarea { 38 | font-family: _font(family); 39 | font-weight: _font(weight); 40 | line-height: 1.5em; 41 | letter-spacing: -0.015em; 42 | } 43 | 44 | a { 45 | @include vendor('transition', ('color #{_duration(transition)} ease-in-out', 'border-bottom-color #{_duration(transition)} ease-in-out')); 46 | text-decoration: none; 47 | border-bottom: dotted 1px; 48 | 49 | &:hover { 50 | border-bottom-color: transparent !important; 51 | } 52 | } 53 | 54 | strong, b { 55 | font-weight: _font(weight-bold); 56 | } 57 | 58 | em, i { 59 | font-style: italic; 60 | } 61 | 62 | p { 63 | margin: 0 0 _size(element-margin) 0; 64 | } 65 | 66 | h1, h2, h3, h4, h5, h6 { 67 | font-weight: _font(weight); 68 | line-height: 1em; 69 | margin: 0 0 (_size(element-margin) * 0.5) 0; 70 | letter-spacing: -0.0125em; 71 | 72 | a { 73 | color: inherit; 74 | text-decoration: none; 75 | border-bottom: none; 76 | } 77 | 78 | // Medium. 79 | @include breakpoint('<=medium') { 80 | br { 81 | display: none; 82 | } 83 | } 84 | 85 | } 86 | 87 | h2 { 88 | font-size: 1.75em; 89 | line-height: 1.5em; 90 | } 91 | 92 | h3 { 93 | font-size: 1.5em; 94 | line-height: 1.5em; 95 | } 96 | 97 | h4 { 98 | font-size: 1.1em; 99 | line-height: 1.5em; 100 | } 101 | 102 | h5 { 103 | font-size: 0.9em; 104 | line-height: 1.5em; 105 | } 106 | 107 | h6 { 108 | font-size: 0.7em; 109 | line-height: 1.5em; 110 | } 111 | 112 | // Small. 113 | @include breakpoint('<=small') { 114 | h2 { 115 | font-size: 1.25em; 116 | } 117 | 118 | h3 { 119 | font-size: 1.2em; 120 | } 121 | 122 | h4 { 123 | font-size: 1em; 124 | } 125 | } 126 | 127 | sub { 128 | font-size: 0.8em; 129 | position: relative; 130 | top: 0.5em; 131 | } 132 | 133 | sup { 134 | font-size: 0.8em; 135 | position: relative; 136 | top: -0.5em; 137 | } 138 | 139 | blockquote { 140 | border-left-style: solid; 141 | border-left-width: (_size(border-width) * 4); 142 | font-style: italic; 143 | margin: 0 0 _size(element-margin) 0; 144 | padding: (_size(element-margin) * 0.25) 0 (_size(element-margin) * 0.25) _size(element-margin); 145 | } 146 | 147 | code { 148 | border-radius: _size(border-radius); 149 | border-style: solid; 150 | border-width: _size(border-width); 151 | font-family: _font(family-fixed); 152 | font-size: 0.9em; 153 | margin: 0 0.25em; 154 | padding: 0.25em 0.65em; 155 | } 156 | 157 | pre { 158 | -webkit-overflow-scrolling: touch; 159 | font-family: _font(family-fixed); 160 | font-size: 0.9em; 161 | margin: 0 0 _size(element-margin) 0; 162 | 163 | code { 164 | display: block; 165 | line-height: 1.75em; 166 | padding: 1em 1.5em; 167 | overflow-x: auto; 168 | } 169 | } 170 | 171 | hr { 172 | border: 0; 173 | border-bottom-style: solid; 174 | border-bottom-width: _size(border-width); 175 | margin: _size(element-margin) 0; 176 | 177 | &.major { 178 | margin: (_size(element-margin) * 1.5) 0; 179 | } 180 | } 181 | 182 | .align-left { 183 | text-align: left; 184 | } 185 | 186 | .align-center { 187 | text-align: center; 188 | } 189 | 190 | .align-right { 191 | text-align: right; 192 | } 193 | 194 | @mixin color-typography($p: null) { 195 | @if $p != null { 196 | background-color: _palette($p, bg); 197 | color: _palette($p, fg); 198 | } 199 | 200 | input, select, textarea { 201 | color: _palette($p, fg); 202 | } 203 | 204 | a { 205 | color: inherit; 206 | border-bottom-color: _palette($p, border2); 207 | 208 | @if _palette($p, invert) == true { 209 | color: _palette($p, fg-bold); 210 | } 211 | @else { 212 | &:hover { 213 | color: _palette(accent1, bg); 214 | } 215 | } 216 | } 217 | 218 | strong, b { 219 | color: _palette($p, fg-bold); 220 | } 221 | 222 | h1, h2, h3, h4, h5, h6 { 223 | color: _palette($p, fg-bold); 224 | } 225 | 226 | blockquote { 227 | border-left-color: _palette($p, border); 228 | } 229 | 230 | code { 231 | background: _palette($p, border-bg); 232 | border-color: _palette($p, border); 233 | } 234 | 235 | hr { 236 | border-bottom-color: _palette($p, border); 237 | } 238 | } 239 | 240 | @include color-typography; -------------------------------------------------------------------------------- /src/assets/sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Header */ 8 | 9 | #header { 10 | @include color(accent1); 11 | @include padding(4.5em, 0); 12 | @include vendor('align-items', 'center'); 13 | @include vendor('display', 'flex'); 14 | @include vendor('justify-content', 'center'); 15 | background-image: url('../images/overlay.png'), 16 | url('../images/pattern-size1.svg'); 17 | background-position: top left, center center; 18 | background-attachment: fixed, fixed; 19 | background-size: auto, cover; 20 | height: 100vh; 21 | min-height: 35em; 22 | 23 | h1 { 24 | font-size: 3.25em; 25 | font-weight: _font(weight-bold); 26 | margin-bottom: _size(element-margin) * 0.25; 27 | } 28 | 29 | p { 30 | font-size: 1.5em; 31 | line-height: 1.35em; 32 | 33 | br { 34 | display: inline; 35 | } 36 | } 37 | 38 | .content { 39 | @include vendor('transition', ('opacity 0.5s ease', 'transform 1s ease')); 40 | @include vendor('transform', 'translateX(0)'); 41 | opacity: 1; 42 | text-align: right; 43 | margin: (_size(element-margin) * -1.75) (_size(element-margin) * 2) 0 0; 44 | 45 | > :last-child { 46 | margin-bottom: 0; 47 | } 48 | 49 | .actions { 50 | @include vendor('justify-content', 'flex-end'); 51 | } 52 | } 53 | 54 | .image { 55 | @include vendor('transition', ('opacity 1s ease', 'transform 1s ease')); 56 | @include vendor('transform', 'translateY(0)'); 57 | opacity: 1; 58 | 59 | img { 60 | @include vendor('transition', 'opacity 0.75s ease'); 61 | @include vendor('transition-delay', '0.75s'); 62 | opacity: 1; 63 | } 64 | } 65 | 66 | // Large. 67 | @include breakpoint('<=large') { 68 | background-image: url('../images/overlay.png'), 69 | url('../images/pattern-size2.svg'); 70 | } 71 | 72 | // Medium. 73 | @include breakpoint('<=medium') { 74 | height: auto; 75 | min-height: 0; 76 | 77 | .content { 78 | margin: (_size(element-margin) * -1) (_size(element-margin) * 2) 0 0; 79 | 80 | .actions { 81 | @include vendor('justify-content', 'center'); 82 | } 83 | } 84 | 85 | // Portrait. 86 | @include orientation(portrait) { 87 | @include padding(6em, 3em); 88 | @include vendor('flex-direction', 'column-reverse'); 89 | 90 | .content { 91 | display: block; 92 | width: 100%; 93 | text-align: center; 94 | margin: 0 0 _size(element-margin) 0; 95 | } 96 | 97 | .image { 98 | overflow: hidden; 99 | } 100 | } 101 | } 102 | 103 | // Small. 104 | @include breakpoint('<=small') { 105 | background-image: url('../images/overlay.png'), 106 | url('../images/pattern-size3.svg'); 107 | 108 | h1 { 109 | font-size: 2em; 110 | } 111 | 112 | p { 113 | font-size: 1em; 114 | line-height: inherit; 115 | } 116 | 117 | // Landscape. 118 | @include orientation(landscape) { 119 | @include padding(2em, 2em); 120 | 121 | .content { 122 | margin: 0 _size(element-margin) _size(element-margin) 0; 123 | } 124 | 125 | .image { 126 | font-size: 0.8em; 127 | width: 15em; 128 | max-width: 20vw; 129 | 130 | .inner, 131 | &:before, 132 | &:after { 133 | font-size: 0.8em; 134 | } 135 | } 136 | } 137 | 138 | // Portrait. 139 | @include orientation(portrait) { 140 | @include padding(3em, 1.5em); 141 | 142 | .image { 143 | font-size: 0.6em; 144 | max-width: 60vw; 145 | } 146 | } 147 | } 148 | 149 | // XSmall. 150 | @include breakpoint('<=xsmall') { 151 | // Landscape. 152 | @include orientation(landscape) { 153 | @include padding(2em, 1.5em); 154 | 155 | .image { 156 | font-size: 0.7em; 157 | } 158 | 159 | .actions { 160 | font-size: 0.8em; 161 | } 162 | } 163 | 164 | // Portrait. 165 | @include orientation(portrait) { 166 | @include padding(2em, 1em); 167 | } 168 | } 169 | 170 | // Mobile. 171 | body.is-mobile & { 172 | background-attachment: scroll, scroll; 173 | } 174 | 175 | // Preload. 176 | .main-body.is-preload &, 177 | body.is-preload & { 178 | .content { 179 | @include vendor('transform', 'translateX(2em)'); 180 | opacity: 0; 181 | } 182 | 183 | .image { 184 | @include vendor('transform', 'translateY(4em)'); 185 | opacity: 0; 186 | 187 | img { 188 | opacity: 0; 189 | } 190 | } 191 | 192 | // Medium. 193 | @include breakpoint('<=medium') { 194 | // Portrait. 195 | @include orientation(portrait) { 196 | .content { 197 | @include vendor('transform', 'none'); 198 | opacity: 1; 199 | } 200 | 201 | .image { 202 | @include vendor('transform', 'translateY(2em)'); 203 | } 204 | } 205 | } 206 | } 207 | } 208 | -------------------------------------------------------------------------------- /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/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Layout from '../components/Layout'; 4 | import Scroll from '../components/Scroll'; 5 | 6 | import config from '../../config'; 7 | import Footer from '../components/Footer'; 8 | import screen from '../assets/images/screen.png'; 9 | import pic1 from '../assets/images/pic01.jpg'; 10 | import pic2 from '../assets/images/pic02.jpg'; 11 | import pic3 from '../assets/images/pic03.jpg'; 12 | import { Link } from 'gatsby'; 13 | 14 | const IndexPage = () => ( 15 | <Layout> 16 | <header id="header"> 17 | <div className="content"> 18 | <h1> 19 | <a href="/#">{config.heading}</a> 20 | </h1> 21 | <p>{config.subHeading}</p> 22 | <ul className="actions"> 23 | <li> 24 | <a 25 | href="https://github.com/anubhavsrivastava/gatsby-starter-fractal/archive/master.zip" 26 | className="button primary icon fa-download" 27 | > 28 | Download Starter 29 | </a> 30 | </li> 31 | <li> 32 | <Scroll type="id" element="one"> 33 | <a href="#one" className="button icon fa-chevron-down"> 34 | Learn More 35 | </a> 36 | </Scroll> 37 | </li> 38 | </ul> 39 | </div> 40 | <div className="image phone"> 41 | <div className="inner"> 42 | <img src={screen} alt="" /> 43 | </div> 44 | </div> 45 | </header> 46 | 47 | <section id="one" className="wrapper style2 special"> 48 | <header className="major"> 49 | <h2> 50 | Sed ipsum magna lorem tempus amet 51 | <br /> 52 | vehicula et gravida elementum 53 | </h2> 54 | </header> 55 | <ul className="icons major"> 56 | <li> 57 | <span className="icon fa-camera-retro"> 58 | <span className="label">Shoot</span> 59 | </span> 60 | </li> 61 | <li> 62 | <span className="icon fa-refresh"> 63 | <span className="label">Process</span> 64 | </span> 65 | </li> 66 | <li> 67 | <span className="icon fa-cloud"> 68 | <span className="label">Upload</span> 69 | </span> 70 | </li> 71 | </ul> 72 | </section> 73 | 74 | <section id="two" className="wrapper"> 75 | <div className="inner alt"> 76 | <section className="spotlight"> 77 | <div className="image"> 78 | <img src={pic1} alt="" /> 79 | </div> 80 | <div className="content"> 81 | <h3>Magna sed ultrices</h3> 82 | <p> 83 | Morbi mattis ornare ornare. Duis quam turpis, gravida at leo 84 | elementum elit fusce accumsan dui libero, quis vehicula lectus 85 | ultricies eu. In convallis amet leo non sapien iaculis efficitur 86 | consequat lorem ipsum. 87 | </p> 88 | </div> 89 | </section> 90 | <section className="spotlight"> 91 | <div className="image"> 92 | <img src={pic2} alt="" /> 93 | </div> 94 | <div className="content"> 95 | <h3>Ultrices nullam aliquam</h3> 96 | <p> 97 | Morbi mattis ornare ornare. Duis quam turpis, gravida at leo 98 | elementum elit fusce accumsan dui libero, quis vehicula lectus 99 | ultricies eu. In convallis amet leo non sapien iaculis efficitur 100 | consequat lorem ipsum. 101 | </p> 102 | </div> 103 | </section> 104 | <section className="spotlight"> 105 | <div className="image"> 106 | <img src={pic3} alt="" /> 107 | </div> 108 | <div className="content"> 109 | <h3>Aliquam sed magna</h3> 110 | <p> 111 | Morbi mattis ornare ornare. Duis quam turpis, gravida at leo 112 | elementum elit fusce accumsan dui libero, quis vehicula lectus 113 | ultricies eu. In convallis amet leo non sapien iaculis efficitur 114 | consequat lorem ipsum. 115 | </p> 116 | </div> 117 | </section> 118 | <section className="special"> 119 | <ul className="icons labeled"> 120 | <li> 121 | <span className="icon fa-camera-retro"> 122 | <span className="label">Ipsum lorem accumsan</span> 123 | </span> 124 | </li> 125 | <li> 126 | <span className="icon fa-refresh"> 127 | <span className="label">Sed vehicula elementum</span> 128 | </span> 129 | </li> 130 | <li> 131 | <span className="icon fa-cloud"> 132 | <span className="label">Elit fusce consequat</span> 133 | </span> 134 | </li> 135 | <li> 136 | <span className="icon fa-code"> 137 | <span className="label">Lorem nullam tempus</span> 138 | </span> 139 | </li> 140 | <li> 141 | <span className="icon fa-desktop"> 142 | <span className="label">Adipiscing amet sapien</span> 143 | </span> 144 | </li> 145 | </ul> 146 | </section> 147 | </div> 148 | </section> 149 | 150 | <section id="three" className="wrapper style2 special"> 151 | <header className="major"> 152 | <h2>Elements Page</h2> 153 | <p>This starter is included with Elements demo for the starter</p> 154 | </header> 155 | <ul className="actions special"> 156 | <li> 157 | <Link to="/Elements" className="button primary icon fa-plus"> 158 | Check Elements 159 | </Link> 160 | </li> 161 | </ul> 162 | </section> 163 | 164 | <Footer /> 165 | </Layout> 166 | ); 167 | 168 | export default IndexPage; 169 | -------------------------------------------------------------------------------- /src/assets/sass/components/_form.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Fractal by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Form */ 8 | 9 | form { 10 | margin: 0 0 _size(element-margin) 0; 11 | } 12 | 13 | label { 14 | display: block; 15 | font-size: 0.9em; 16 | font-weight: _font(weight-bold); 17 | margin: 0 0 (_size(element-margin) * 0.5) 0; 18 | } 19 | 20 | input[type="text"], 21 | input[type="password"], 22 | input[type="email"], 23 | select, 24 | textarea { 25 | @include vendor('appearance', 'none'); 26 | border-radius: _size(border-radius); 27 | border: none; 28 | border-style: solid; 29 | border-width: _size(border-width); 30 | color: inherit; 31 | display: block; 32 | outline: 0; 33 | padding: 0 1em; 34 | text-decoration: none; 35 | width: 100%; 36 | 37 | &:invalid { 38 | box-shadow: none; 39 | } 40 | } 41 | 42 | select { 43 | 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='#{_palette(border)}' /></svg>"); 44 | background-size: 1.25rem; 45 | background-repeat: no-repeat; 46 | background-position: calc(100% - 1rem) center; 47 | height: _size(element-height); 48 | padding-right: _size(element-height); 49 | text-overflow: ellipsis; 50 | 51 | option { 52 | color: _palette(fg-bold); 53 | background: _palette(bg); 54 | } 55 | 56 | &:focus { 57 | &::-ms-value { 58 | background-color: transparent; 59 | } 60 | } 61 | 62 | &::-ms-expand { 63 | display: none; 64 | } 65 | } 66 | 67 | input[type="text"], 68 | input[type="password"], 69 | input[type="email"], 70 | select { 71 | height: _size(element-height); 72 | } 73 | 74 | textarea { 75 | padding: 0.75em 1em; 76 | } 77 | 78 | input[type="checkbox"], 79 | input[type="radio"], { 80 | @include vendor('appearance', 'none'); 81 | display: block; 82 | float: left; 83 | margin-right: -2em; 84 | opacity: 0; 85 | width: 1em; 86 | z-index: -1; 87 | 88 | & + label { 89 | @include icon; 90 | cursor: pointer; 91 | display: inline-block; 92 | font-size: 1em; 93 | font-weight: _font(weight); 94 | padding-left: (_size(element-height) * 0.6) + 0.75em; 95 | padding-right: 0.75em; 96 | position: relative; 97 | 98 | &:before { 99 | border-radius: _size(border-radius); 100 | border-style: solid; 101 | border-width: _size(border-width); 102 | content: ''; 103 | display: inline-block; 104 | height: (_size(element-height) * 0.6); 105 | left: 0; 106 | line-height: (_size(element-height) * 0.575); 107 | position: absolute; 108 | text-align: center; 109 | top: 0; 110 | width: (_size(element-height) * 0.6); 111 | } 112 | } 113 | 114 | &:checked + label { 115 | &:before { 116 | content: '\f00c'; 117 | } 118 | } 119 | } 120 | 121 | input[type="checkbox"] { 122 | & + label { 123 | &:before { 124 | border-radius: _size(border-radius); 125 | } 126 | } 127 | } 128 | 129 | input[type="radio"] { 130 | & + label { 131 | &:before { 132 | border-radius: 100%; 133 | } 134 | } 135 | } 136 | 137 | ::-webkit-input-placeholder { 138 | opacity: 1.0; 139 | } 140 | 141 | :-moz-placeholder { 142 | opacity: 1.0; 143 | } 144 | 145 | ::-moz-placeholder { 146 | opacity: 1.0; 147 | } 148 | 149 | :-ms-input-placeholder { 150 | opacity: 1.0; 151 | } 152 | 153 | .formerize-placeholder { 154 | opacity: 1.0; 155 | } 156 | 157 | @mixin color-form($p: null) { 158 | 159 | label { 160 | color: _palette($p, fg-bold); 161 | } 162 | 163 | input[type="text"], 164 | input[type="password"], 165 | input[type="email"], 166 | select, 167 | textarea { 168 | color: inherit; 169 | background-color: _palette($p, border-bg); 170 | border-color: _palette($p, border); 171 | 172 | &:focus { 173 | @if _palette($p, invert) == true { 174 | border-color: _palette($p, fg-bold); 175 | box-shadow: 0 0 0 _size(border-width) _palette($p, fg-bold); 176 | } 177 | @else { 178 | border-color: _palette(accent1, bg); 179 | box-shadow: 0 0 0 _size(border-width) _palette(accent1, bg); 180 | } 181 | } 182 | } 183 | 184 | .select-wrapper:before { 185 | color: _palette($p, border); 186 | } 187 | 188 | input[type="checkbox"], 189 | input[type="radio"], { 190 | 191 | & + label { 192 | color: _palette($p, fg); 193 | 194 | &:before { 195 | background-color: _palette($p, border-bg); 196 | border-color: _palette($p, border); 197 | } 198 | } 199 | 200 | &:checked + label { 201 | &:before { 202 | @if _palette($p, invert) == true { 203 | background-color: _palette($p, fg-bold); 204 | border-color: _palette($p, fg-bold); 205 | color: _palette($p, bg); 206 | } 207 | @else { 208 | background-color: _palette(accent1, bg); 209 | border-color: _palette(accent1, bg); 210 | color: _palette(accent1, fg-bold); 211 | } 212 | } 213 | } 214 | 215 | &:focus + label { 216 | &:before { 217 | @if _palette($p, invert) == true { 218 | border-color: _palette($p, fg-bold); 219 | box-shadow: 0 0 0 _size(border-width) _palette($p, fg-bold); 220 | } 221 | @else { 222 | border-color: _palette(accent1, bg); 223 | box-shadow: 0 0 0 _size(border-width) _palette(accent1, bg); 224 | } 225 | } 226 | } 227 | } 228 | 229 | ::-webkit-input-placeholder { 230 | color: _palette($p, fg-light) !important; 231 | } 232 | 233 | :-moz-placeholder { 234 | color: _palette($p, fg-light) !important; 235 | } 236 | 237 | ::-moz-placeholder { 238 | color: _palette($p, fg-light) !important; 239 | } 240 | 241 | :-ms-input-placeholder { 242 | color: _palette($p, fg-light) !important; 243 | } 244 | 245 | .formerize-placeholder { 246 | color: _palette($p, fg-light) !important; 247 | } 248 | } 249 | 250 | @include color-form; -------------------------------------------------------------------------------- /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/pages/Elements.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Layout from '../components/Layout'; 4 | 5 | import pic1 from '../assets/images/pic01.jpg'; 6 | import pic2 from '../assets/images/pic02.jpg'; 7 | import pic3 from '../assets/images/pic03.jpg'; 8 | import pic4 from '../assets/images/pic04.jpg'; 9 | import pic5 from '../assets/images/pic05.jpg'; 10 | import Footer from '../components/Footer'; 11 | 12 | const IndexPage = () => ( 13 | <Layout> 14 | <section id="four" className="wrapper"> 15 | <div className="inner"> 16 | 17 | <header className="major"> 18 | <h2>Elements</h2> 19 | </header> 20 | 21 | <section> 22 | <h4>Text</h4> 23 | <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>. 24 | This is <sup>superscript</sup> text and this is <sub>subscript</sub> text. 25 | This is <u>underlined</u> and this is code: <code>for (;;) { `{ ... }` }</code>. Finally, <a href="/#">this is a link</a>.</p> 26 | <hr /> 27 | <header> 28 | <h4>Heading with a Subtitle</h4> 29 | <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p> 30 | </header> 31 | <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p> 32 | <header> 33 | <h5>Heading with a Subtitle</h5> 34 | <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p> 35 | </header> 36 | <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p> 37 | <hr /> 38 | <h2>Heading Level 2</h2> 39 | <h3>Heading Level 3</h3> 40 | <h4>Heading Level 4</h4> 41 | <h5>Heading Level 5</h5> 42 | <h6>Heading Level 6</h6> 43 | <hr /> 44 | <h5>Blockquote</h5> 45 | <blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote> 46 | <h5>Preformatted</h5> 47 | <pre><code>i = 0; 48 | 49 | while (!deck.isInOrder()) {` { 50 | print 'Iteration ' + i; 51 | deck.shuffle(); 52 | i++;` 53 | } 54 | } 55 | 56 | print 'It took ' + i + ' iterations to sort the deck.';</code></pre> 57 | </section> 58 | 59 | <section> 60 | <h4>Lists</h4> 61 | <div className="row"> 62 | <div className="col-6 col-12-medium"> 63 | <h5>Unordered</h5> 64 | <ul> 65 | <li>Dolor pulvinar etiam.</li> 66 | <li>Sagittis adipiscing.</li> 67 | <li>Felis enim feugiat.</li> 68 | </ul> 69 | <h5>Alternate</h5> 70 | <ul className="alt"> 71 | <li>Dolor pulvinar etiam.</li> 72 | <li>Sagittis adipiscing.</li> 73 | <li>Felis enim feugiat.</li> 74 | </ul> 75 | </div> 76 | <div className="col-6 col-12-medium"> 77 | <h5>Ordered</h5> 78 | <ol> 79 | <li>Dolor pulvinar etiam.</li> 80 | <li>Etiam vel felis viverra.</li> 81 | <li>Felis enim feugiat.</li> 82 | <li>Dolor pulvinar etiam.</li> 83 | <li>Etiam vel felis lorem.</li> 84 | <li>Felis enim et feugiat.</li> 85 | </ol> 86 | <h5>Icons</h5> 87 | <ul className="icons"> 88 | <li><a href="/#" className="icon fa-twitter"><span className="label">Twitter</span></a></li> 89 | <li><a href="/#" className="icon fa-facebook"><span className="label">Facebook</span></a></li> 90 | <li><a href="/#" className="icon fa-instagram"><span className="label">Instagram</span></a></li> 91 | <li><a href="/#" className="icon fa-github"><span className="label">Github</span></a></li> 92 | </ul> 93 | </div> 94 | </div> 95 | <h5>Actions</h5> 96 | <div className="row"> 97 | <div className="col-6 col-12-medium"> 98 | <ul className="actions"> 99 | <li><a href="/#" className="button primary">Default</a></li> 100 | <li><a href="/#" className="button">Default</a></li> 101 | </ul> 102 | <ul className="actions small"> 103 | <li><a href="/#" className="button primary small">Small</a></li> 104 | <li><a href="/#" className="button small">Small</a></li> 105 | </ul> 106 | <ul className="actions stacked"> 107 | <li><a href="/#" className="button primary">Default</a></li> 108 | <li><a href="/#" className="button">Default</a></li> 109 | </ul> 110 | <ul className="actions stacked"> 111 | <li><a href="/#" className="button primary small">Small</a></li> 112 | <li><a href="/#" className="button small">Small</a></li> 113 | </ul> 114 | </div> 115 | <div className="col-6 col-12-medium"> 116 | <ul className="actions stacked"> 117 | <li><a href="/#" className="button primary fit">Default</a></li> 118 | <li><a href="/#" className="button fit">Default</a></li> 119 | </ul> 120 | <ul className="actions stacked"> 121 | <li><a href="/#" className="button primary small fit">Small</a></li> 122 | <li><a href="/#" className="button small fit">Small</a></li> 123 | </ul> 124 | </div> 125 | </div> 126 | </section> 127 | 128 | <section> 129 | <h4>Table</h4> 130 | <h5>Default</h5> 131 | <div className="table-wrapper"> 132 | <table> 133 | <thead> 134 | <tr> 135 | <th>Name</th> 136 | <th>Description</th> 137 | <th>Price</th> 138 | </tr> 139 | </thead> 140 | <tbody> 141 | <tr> 142 | <td>Item One</td> 143 | <td>Ante turpis integer aliquet porttitor.</td> 144 | <td>29.99</td> 145 | </tr> 146 | <tr> 147 | <td>Item Two</td> 148 | <td>Vis ac commodo adipiscing arcu aliquet.</td> 149 | <td>19.99</td> 150 | </tr> 151 | <tr> 152 | <td>Item Three</td> 153 | <td> Morbi faucibus arcu accumsan lorem.</td> 154 | <td>29.99</td> 155 | </tr> 156 | <tr> 157 | <td>Item Four</td> 158 | <td>Vitae integer tempus condimentum.</td> 159 | <td>19.99</td> 160 | </tr> 161 | <tr> 162 | <td>Item Five</td> 163 | <td>Ante turpis integer aliquet porttitor.</td> 164 | <td>29.99</td> 165 | </tr> 166 | </tbody> 167 | <tfoot> 168 | <tr> 169 | <td colSpan="2"></td> 170 | <td>100.00</td> 171 | </tr> 172 | </tfoot> 173 | </table> 174 | </div> 175 | 176 | <h5>Alternate</h5> 177 | <div className="table-wrapper"> 178 | <table className="alt"> 179 | <thead> 180 | <tr> 181 | <th>Name</th> 182 | <th>Description</th> 183 | <th>Price</th> 184 | </tr> 185 | </thead> 186 | <tbody> 187 | <tr> 188 | <td>Item One</td> 189 | <td>Ante turpis integer aliquet porttitor.</td> 190 | <td>29.99</td> 191 | </tr> 192 | <tr> 193 | <td>Item Two</td> 194 | <td>Vis ac commodo adipiscing arcu aliquet.</td> 195 | <td>19.99</td> 196 | </tr> 197 | <tr> 198 | <td>Item Three</td> 199 | <td> Morbi faucibus arcu accumsan lorem.</td> 200 | <td>29.99</td> 201 | </tr> 202 | <tr> 203 | <td>Item Four</td> 204 | <td>Vitae integer tempus condimentum.</td> 205 | <td>19.99</td> 206 | </tr> 207 | <tr> 208 | <td>Item Five</td> 209 | <td>Ante turpis integer aliquet porttitor.</td> 210 | <td>29.99</td> 211 | </tr> 212 | </tbody> 213 | <tfoot> 214 | <tr> 215 | <td colSpan="2"></td> 216 | <td>100.00</td> 217 | </tr> 218 | </tfoot> 219 | </table> 220 | </div> 221 | </section> 222 | 223 | <section> 224 | <h4>Buttons</h4> 225 | <ul className="actions"> 226 | <li><a href="/#" className="button primary">Primary</a></li> 227 | <li><a href="/#" className="button">Default</a></li> 228 | </ul> 229 | <ul className="actions"> 230 | <li><a href="/#" className="button large">Large</a></li> 231 | <li><a href="/#" className="button">Default</a></li> 232 | <li><a href="/#" className="button small">Small</a></li> 233 | </ul> 234 | <ul className="actions fit"> 235 | <li><a href="/#" className="button fit">Fit</a></li> 236 | <li><a href="/#" className="button primary fit">Fit</a></li> 237 | <li><a href="/#" className="button fit">Fit</a></li> 238 | </ul> 239 | <ul className="actions fit small"> 240 | <li><a href="/#" className="button primary fit small">Fit + Small</a></li> 241 | <li><a href="/#" className="button fit small">Fit + Small</a></li> 242 | <li><a href="/#" className="button primary fit small">Fit + Small</a></li> 243 | </ul> 244 | <ul className="actions"> 245 | <li><a href="/#" className="button primary icon fa-download">Icon</a></li> 246 | <li><a href="/#" className="button icon fa-download">Icon</a></li> 247 | </ul> 248 | <ul className="actions"> 249 | <li><span className="button primary disabled">Disabled</span></li> 250 | <li><span className="button disabled">Disabled</span></li> 251 | </ul> 252 | </section> 253 | 254 | <section> 255 | <h4>Form</h4> 256 | <form method="post" action="#"> 257 | <div className="row gtr-uniform"> 258 | <div className="col-6 col-12-xsmall"> 259 | <input type="text" name="demo-name" id="demo-name" defaultValue="" placeholder="Name" /> 260 | </div> 261 | <div className="col-6 col-12-xsmall"> 262 | <input type="email" name="demo-email" id="demo-email" defaultValue="" placeholder="Email" /> 263 | </div> 264 | <div className="col-12"> 265 | <select name="demo-category" id="demo-category"> 266 | <option value="">- Category -</option> 267 | <option value="1">Manufacturing</option> 268 | <option value="1">Shipping</option> 269 | <option value="1">Administration</option> 270 | <option value="1">Human Resources</option> 271 | </select> 272 | </div> 273 | <div className="col-4 col-12-small"> 274 | <input type="radio" id="demo-priority-low" name="demo-priority" defaultChecked /> 275 | <label htmlFor="demo-priority-low">Low</label> 276 | </div> 277 | <div className="col-4 col-12-small"> 278 | <input type="radio" id="demo-priority-normal" name="demo-priority"/> 279 | <label htmlFor="demo-priority-normal">Normal</label> 280 | </div> 281 | <div className="col-4 col-12-small"> 282 | <input type="radio" id="demo-priority-high" name="demo-priority"/> 283 | <label htmlFor="demo-priority-high">High</label> 284 | </div> 285 | <div className="col-6 col-12-small"> 286 | <input type="checkbox" id="demo-copy" name="demo-copy" /> 287 | <label htmlFor="demo-copy">Email me a copy</label> 288 | </div> 289 | <div className="col-6 col-12-small"> 290 | <input type="checkbox" id="demo-human" name="demo-human" defaultChecked /> 291 | <label htmlFor="demo-human">Not a robot</label> 292 | </div> 293 | <div className="col-12"> 294 | <textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea> 295 | </div> 296 | <div className="col-12"> 297 | <ul className="actions"> 298 | <li><input type="submit" value="Send Message" className="primary" /></li> 299 | <li><input type="reset" value="Reset" /></li> 300 | </ul> 301 | </div> 302 | </div> 303 | </form> 304 | </section> 305 | 306 | <section> 307 | <h4>Image</h4> 308 | <h5>Fit</h5> 309 | <div className="box alt"> 310 | <div className="row gtr-uniform"> 311 | <div className="col-12"><span className="image fit"><img src={pic4}alt="" /></span></div> 312 | <div className="col-4"><span className="image fit"><img src={pic1} alt="" /></span></div> 313 | <div className="col-4"><span className="image fit"><img src={pic2} alt="" /></span></div> 314 | <div className="col-4"><span className="image fit"><img src={pic3} alt="" /></span></div> 315 | <div className="col-4"><span className="image fit"><img src={pic2} alt="" /></span></div> 316 | <div className="col-4"><span className="image fit"><img src={pic3} alt="" /></span></div> 317 | <div className="col-4"><span className="image fit"><img src={pic1} alt="" /></span></div> 318 | <div className="col-4"><span className="image fit"><img src={pic3} alt="" /></span></div> 319 | <div className="col-4"><span className="image fit"><img src={pic1} alt="" /></span></div> 320 | <div className="col-4"><span className="image fit"><img src={pic2} alt="" /></span></div> 321 | </div> 322 | </div> 323 | <h5>Left & Right</h5> 324 | <p><span className="image left"><img src={pic5} alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p> 325 | <p><span className="image right"><img src={pic5} alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p> 326 | </section> 327 | 328 | </div> 329 | </section> 330 | 331 | <Footer /> 332 | </Layout> 333 | ); 334 | 335 | export default IndexPage; 336 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------