├── .prettierrc ├── src ├── assets │ ├── images │ │ ├── bg.jpg │ │ ├── pic01.jpg │ │ ├── pic02.jpg │ │ ├── pic03.jpg │ │ ├── pic04.jpg │ │ ├── pic05.jpg │ │ ├── pic06.jpg │ │ ├── pic07.jpg │ │ ├── pic08.jpg │ │ ├── pic08 (1).jpg │ │ └── close.svg │ ├── img │ │ ├── demo.png │ │ ├── screenshot.jpg │ │ └── website-icon.png │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── sass │ │ ├── components │ │ ├── _section.scss │ │ ├── _icon.scss │ │ ├── _icons.scss │ │ ├── _box.scss │ │ ├── _row.scss │ │ ├── _contact.scss │ │ ├── _list.scss │ │ ├── _image.scss │ │ ├── _table.scss │ │ ├── _pagination.scss │ │ ├── _button.scss │ │ ├── _features.scss │ │ ├── _actions.scss │ │ └── _form.scss │ │ ├── noscript.scss │ │ ├── libs │ │ ├── _vars.scss │ │ ├── _mixins.scss │ │ ├── _functions.scss │ │ ├── _html-grid.scss │ │ ├── _breakpoints.scss │ │ └── _vendor.scss │ │ ├── base │ │ ├── _page.scss │ │ ├── _reset.scss │ │ └── _typography.scss │ │ ├── main.scss │ │ ├── layout │ │ ├── _header.scss │ │ ├── _menu.scss │ │ ├── _footer.scss │ │ ├── _banner.scss │ │ └── _wrapper.scss │ │ └── font-awesome.min.css ├── pages │ ├── 404.js │ ├── Generic.js │ ├── index.js │ └── Elements.js └── components │ ├── Sidebar.js │ ├── Nav.js │ ├── Layout.js │ ├── Footer.js │ └── Scroll.js ├── .gitignore ├── gatsby-node.js ├── gatsby-browser.js ├── gatsby-ssr.js ├── CONTRIBUTING.md ├── .github └── FUNDING.yml ├── gatsby-config.js ├── config.js ├── package.json └── README.md /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/bg.jpg -------------------------------------------------------------------------------- /src/assets/img/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/img/demo.png -------------------------------------------------------------------------------- /src/assets/images/pic01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/pic01.jpg -------------------------------------------------------------------------------- /src/assets/images/pic02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/pic02.jpg -------------------------------------------------------------------------------- /src/assets/images/pic03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/pic03.jpg -------------------------------------------------------------------------------- /src/assets/images/pic04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/pic04.jpg -------------------------------------------------------------------------------- /src/assets/images/pic05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/pic05.jpg -------------------------------------------------------------------------------- /src/assets/images/pic06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/pic06.jpg -------------------------------------------------------------------------------- /src/assets/images/pic07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/pic07.jpg -------------------------------------------------------------------------------- /src/assets/images/pic08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/pic08.jpg -------------------------------------------------------------------------------- /src/assets/img/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/img/screenshot.jpg -------------------------------------------------------------------------------- /src/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/images/pic08 (1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/images/pic08 (1).jpg -------------------------------------------------------------------------------- /src/assets/img/website-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/img/website-icon.png -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/HEAD/src/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anubhavsrivastava/gatsby-starter-solidstate/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/images/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/sass/components/_section.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_icon.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | } -------------------------------------------------------------------------------- /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 |

Not a valid URL

12 |
13 |
14 |
15 | 16 | ); 17 | 18 | export default IndexPage; 19 | -------------------------------------------------------------------------------- /src/assets/sass/components/_icons.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 1em 0 0; 17 | 18 | &:last-child { 19 | padding-right: 0; 20 | } 21 | 22 | .icon { 23 | &:before { 24 | font-size: 1.25em; 25 | } 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /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 | /// Solid State 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 2px _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 | -------------------------------------------------------------------------------- /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/components/_row.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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.75em); 11 | 12 | @include breakpoint('<=xlarge') { 13 | @include html-grid(1.75em, xlarge); 14 | } 15 | 16 | @include breakpoint('<=large') { 17 | @include html-grid(1.75em, large); 18 | } 19 | 20 | @include breakpoint('<=medium') { 21 | @include html-grid(1.75em, medium); 22 | } 23 | 24 | @include breakpoint('<=small') { 25 | @include html-grid(1.25em, small); 26 | } 27 | 28 | @include breakpoint('<=xsmall') { 29 | @include html-grid(1.25em, xsmall); 30 | } 31 | 32 | @include breakpoint('<=xxsmall') { 33 | @include html-grid(1.25em, xxsmall); 34 | } 35 | } -------------------------------------------------------------------------------- /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 | Solid State 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 | /* Banner */ 15 | 16 | #banner { 17 | .main-body.is-preload &, 18 | body.is-preload & { 19 | .logo { 20 | @include vendor('transform', 'none'); 21 | opacity: 1; 22 | } 23 | 24 | h2 { 25 | opacity: 1; 26 | @include vendor('transform', 'none'); 27 | @include vendor('filter', 'none'); 28 | } 29 | 30 | p { 31 | opacity: 01; 32 | @include vendor('transform', 'none'); 33 | @include vendor('filter', 'none'); 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Nav from './Nav'; 3 | import { Link } from 'gatsby'; 4 | export default function SideBar({ fullMenu }) { 5 | const [headerOpen, toggleHeader] = useState(false); 6 | return ( 7 | <> 8 | 26 |
27 |
29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/assets/sass/components/_contact.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | /* Contact */ 8 | 9 | ul.contact { 10 | list-style: none; 11 | padding: 0; 12 | 13 | li { 14 | @include icon; 15 | margin: (_size(element-margin) * 1.25) 0 0 0; 16 | padding: 0 0 0 3.25em; 17 | position: relative; 18 | 19 | &:before { 20 | border-radius: 100%; 21 | border: solid 2px _palette(border); 22 | display: inline-block; 23 | font-size: 0.8em; 24 | height: 2.5em; 25 | left: 0; 26 | line-height: 2.35em; 27 | position: absolute; 28 | text-align: center; 29 | top: 0; 30 | width: 2.5em; 31 | } 32 | 33 | &:first-child { 34 | margin-top: 0; 35 | } 36 | } 37 | 38 | @include breakpoint('<=small') { 39 | li { 40 | margin: (_size(element-margin) * 0.75) 0 0 0; 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_list.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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: solid 1px _palette(border); 34 | padding: 0.5em 0; 35 | 36 | &:first-child { 37 | border-top: 0; 38 | padding-top: 0; 39 | } 40 | } 41 | } 42 | } 43 | 44 | dl { 45 | margin: 0 0 _size(element-margin) 0; 46 | 47 | dt { 48 | display: block; 49 | font-weight: _font(weight-bold); 50 | margin: 0 0 (_size(element-margin) * 0.5) 0; 51 | } 52 | 53 | dd { 54 | margin-left: _size(element-margin); 55 | } 56 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_image.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | 15 | img { 16 | border-radius: _size(border-radius); 17 | display: block; 18 | } 19 | 20 | &.left, 21 | &.right { 22 | max-width: 40%; 23 | 24 | img { 25 | width: 100%; 26 | } 27 | } 28 | 29 | &.left { 30 | float: left; 31 | padding: 0 1.5em 1em 0; 32 | top: 0.25em; 33 | } 34 | 35 | &.right { 36 | float: right; 37 | padding: 0 0 1em 1.5em; 38 | top: 0.25em; 39 | } 40 | 41 | &.fit { 42 | display: block; 43 | margin: 0 0 _size(element-margin) 0; 44 | width: 100%; 45 | 46 | img { 47 | width: 100%; 48 | } 49 | } 50 | 51 | &.main { 52 | display: block; 53 | margin: 0 0 (_size(element-margin) * 1.5) 0; 54 | width: 100%; 55 | 56 | img { 57 | width: 100%; 58 | } 59 | } 60 | } -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteTitle: 'Gatsby Starter SolidState', // 3 | manifestName: 'SolidState', 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-solidstate/`, // 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/libs/_vars.scss: -------------------------------------------------------------------------------- 1 | // Misc. 2 | $misc: ( 3 | z-index-base: 10000, 4 | max-wrapper-styles: 6 5 | ); 6 | 7 | // Duration. 8 | $duration: ( 9 | menu: 0.35s, 10 | transition: 0.2s 11 | ); 12 | 13 | // Size. 14 | $size: ( 15 | border-radius: 5px, 16 | element-height: 2.75em, 17 | element-margin: 2em, 18 | inner: 55em, 19 | section-spacing: ( 20 | large: 3em, 21 | medium: 2em, 22 | small: 1.75em 23 | ), 24 | wrapper-edges: ( 25 | large: 6.5em, 26 | medium: 4.75em, 27 | small: 2.5em 28 | ) 29 | ); 30 | 31 | // Font. 32 | $font: ( 33 | family: ('Source Sans Pro', Helvetica, sans-serif), 34 | family-fixed: ('Courier New', monospace), 35 | family-heading: (Raleway, Helvetica, sans-serif), 36 | weight: 300, 37 | weight-bold: 600, 38 | weight-heading: 200, 39 | weight-heading-bold: 700, 40 | kern-heading: 0.1em 41 | ); 42 | 43 | // Palette. 44 | $palette: ( 45 | bg: #2e3141, 46 | fg: #ffffff, 47 | fg-bold: #ffffff, 48 | fg-light: rgba(255,255,255,0.35), 49 | border: rgba(255,255,255,0.125), 50 | border-bg: rgba(255,255,255,0.025), 51 | border2: rgba(255,255,255,0.25), 52 | border2-bg: rgba(255,255,255,0.075), 53 | accent: #4c5c96 54 | ); -------------------------------------------------------------------------------- /src/components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'gatsby'; 3 | 4 | export default function Nav({ onMenuToggle = () => {} }) { 5 | return ( 6 | <nav id="menu"> 7 | <div className="inner"> 8 | <h2>Menu</h2> 9 | <ul className="links"> 10 | <li> 11 | <Link 12 | onClick={e => { 13 | onMenuToggle(); 14 | }} 15 | to="/" 16 | > 17 | Home 18 | </Link> 19 | </li> 20 | <li> 21 | <Link 22 | onClick={e => { 23 | onMenuToggle(); 24 | }} 25 | to="/Generic" 26 | > 27 | Generic Page 28 | </Link> 29 | </li> 30 | <li> 31 | <Link 32 | onClick={e => { 33 | onMenuToggle(); 34 | }} 35 | to="/Elements" 36 | > 37 | Elements 38 | </Link> 39 | </li> 40 | </ul> 41 | <a 42 | className="close" 43 | onClick={e => { 44 | e.preventDefault(); 45 | onMenuToggle(); 46 | }} 47 | href="#menu" 48 | > 49 | {''} 50 | </a> 51 | </div> 52 | </nav> 53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /src/assets/sass/base/_page.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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('<=xsmall') { 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 | .main-body { 40 | background-color: _palette(bg); 41 | 42 | background-image: linear-gradient( 43 | to top, 44 | transparentize(_palette(bg), 0.2), 45 | transparentize(_palette(bg), 0.2) 46 | ), 47 | url('../images/bg.jpg'); 48 | 49 | background-size: auto, cover; 50 | 51 | background-attachment: fixed, fixed; 52 | 53 | background-position: center, center; 54 | 55 | // Stops initial animations until page loads. 56 | &.is-preload { 57 | *, 58 | *:before, 59 | *:after { 60 | @include vendor('animation', 'none !important'); 61 | @include vendor('transition', 'none !important'); 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/assets/sass/components/_table.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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: solid 1px _palette(border); 21 | border-left: 0; 22 | border-right: 0; 23 | 24 | &:nth-child(2n + 1) { 25 | background-color: _palette(border-bg); 26 | } 27 | } 28 | } 29 | 30 | td { 31 | padding: 0.75em 0.75em; 32 | } 33 | 34 | th { 35 | color: _palette(fg-bold); 36 | font-size: 0.9em; 37 | font-weight: _font(weight-bold); 38 | padding: 0 0.75em 0.75em 0.75em; 39 | text-align: left; 40 | } 41 | 42 | thead { 43 | border-bottom: solid 2px _palette(border); 44 | } 45 | 46 | tfoot { 47 | border-top: solid 2px _palette(border); 48 | } 49 | 50 | &.alt { 51 | border-collapse: separate; 52 | 53 | tbody { 54 | tr { 55 | td { 56 | border: solid 1px _palette(border); 57 | border-left-width: 0; 58 | border-top-width: 0; 59 | 60 | &:first-child { 61 | border-left-width: 1px; 62 | } 63 | } 64 | 65 | &:first-child { 66 | td { 67 | border-top-width: 1px; 68 | } 69 | } 70 | } 71 | } 72 | 73 | thead { 74 | border-bottom: 0; 75 | } 76 | 77 | tfoot { 78 | border-top: 0; 79 | } 80 | } 81 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_pagination.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | /* Pagination */ 8 | 9 | ul.pagination { 10 | cursor: default; 11 | list-style: none; 12 | padding-left: 0; 13 | 14 | li { 15 | display: inline-block; 16 | padding-left: 0; 17 | vertical-align: middle; 18 | 19 | > .page { 20 | @include vendor('transition', ( 21 | 'background-color #{_duration(transition)} ease-in-out', 22 | 'color #{_duration(transition)} ease-in-out' 23 | )); 24 | border-bottom: 0; 25 | border-radius: _size(border-radius); 26 | display: inline-block; 27 | height: 1.5em; 28 | line-height: 1.5em; 29 | margin: 0 0.125em; 30 | min-width: 1.5em; 31 | padding: 0 0.5em; 32 | text-align: center; 33 | 34 | &:hover { 35 | background-color: _palette(border-bg); 36 | } 37 | 38 | &.active { 39 | background-color: _palette(accent); 40 | } 41 | } 42 | 43 | &:first-child { 44 | padding-right: 0.75em; 45 | } 46 | 47 | &:last-child { 48 | padding-left: 0.75em; 49 | } 50 | } 51 | 52 | @include breakpoint('<=xsmall') { 53 | li { 54 | &:nth-child(n+2):nth-last-child(n+2) { 55 | display: none; 56 | } 57 | 58 | .button { 59 | width: 100%; 60 | } 61 | 62 | &:first-child { 63 | width: calc(50% - 2px); 64 | text-align: left; 65 | padding-right: 0.325em; 66 | } 67 | 68 | &:last-child { 69 | width: calc(50% - 2px); 70 | text-align: right; 71 | padding-left: 0.325em; 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-solidstate", 3 | "version": "0.0.2", 4 | "description": "Gatsby.js V4 starter template based on Solid State by HTML5 UP", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/anubhavsrivastava/gatsby-starter-solidstate.git" 8 | }, 9 | "author": { 10 | "name": "Anubhav Srivastava", 11 | "email": "anubhav.srivastava00@gmail.com" 12 | }, 13 | "dependencies": { 14 | "gatsby": "^4.2.0", 15 | "gatsby-plugin-manifest": "^4.2.0", 16 | "gatsby-plugin-offline": "^5.2.0", 17 | "gatsby-plugin-react-helmet": "^5.2.0", 18 | "gatsby-plugin-sass": "^5.2.0", 19 | "node-sass": "^6.0.1", 20 | "react": "^16.13.1", 21 | "react-dom": "^16.13.1", 22 | "react-helmet": "^5.2.1", 23 | "react-images": "^1.1.0", 24 | "react-scrollspy": "^3.4.2", 25 | "sass": "^1.47.0", 26 | "smoothscroll-polyfill": "^0.4.4" 27 | }, 28 | "scripts": { 29 | "develop": "gatsby develop", 30 | "build": "npm run clean && gatsby build", 31 | "deploy": "npm run clean && gatsby build --prefix-paths && gh-pages -d public", 32 | "serve": "gatsby serve", 33 | "clean": "rimraf .cache public", 34 | "format": "prettier --write '**/*.js'", 35 | "test": "echo \"Error: no test specified\" && exit 1" 36 | }, 37 | "devDependencies": { 38 | "gh-pages": "^3.2.3", 39 | "prettier": "^2.4.1", 40 | "rimraf": "^3.0.2" 41 | }, 42 | "keywords": [ 43 | "gatsby", 44 | "gatsby-starter", 45 | "gatsby-starter-solidstate" 46 | ], 47 | "license": "MIT", 48 | "bugs": { 49 | "url": "https://github.com/anubhavsrivastava/gatsby-starter-solidstate/issues" 50 | }, 51 | "homepage": "https://github.com/anubhavsrivastava/gatsby-starter-solidstate#readme" 52 | } 53 | -------------------------------------------------------------------------------- /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 | @import url('https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic'); 9 | 10 | /* 11 | Solid State by HTML5 UP 12 | html5up.net | @ajlkn 13 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 14 | */ 15 | 16 | // Breakpoints. 17 | 18 | @include breakpoints( 19 | ( 20 | xlarge: ( 21 | 1281px, 22 | 1680px, 23 | ), 24 | large: ( 25 | 981px, 26 | 1280px, 27 | ), 28 | medium: ( 29 | 737px, 30 | 980px, 31 | ), 32 | small: ( 33 | 481px, 34 | 736px, 35 | ), 36 | xsmall: ( 37 | 361px, 38 | 480px, 39 | ), 40 | xxsmall: ( 41 | null, 42 | 360px, 43 | ), 44 | ) 45 | ); 46 | 47 | // Base. 48 | 49 | @import 'base/reset'; 50 | @import 'base/page'; 51 | @import 'base/typography'; 52 | 53 | // Component. 54 | 55 | @import 'components/row'; 56 | @import 'components/section'; 57 | @import 'components/form'; 58 | @import 'components/box'; 59 | @import 'components/icon'; 60 | @import 'components/image'; 61 | @import 'components/list'; 62 | @import 'components/actions'; 63 | @import 'components/icons'; 64 | @import 'components/contact'; 65 | @import 'components/pagination'; 66 | @import 'components/table'; 67 | @import 'components/button'; 68 | @import 'components/features'; 69 | 70 | // Layout. 71 | 72 | @import 'layout/header'; 73 | @import 'layout/banner'; 74 | @import 'layout/wrapper'; 75 | @import 'layout/footer'; 76 | @import 'layout/menu'; 77 | -------------------------------------------------------------------------------- /src/assets/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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/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 | import Footer from './Footer'; 8 | import SideBar from './Sidebar'; 9 | 10 | class Layout extends Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | isPreloaded: true, 15 | }; 16 | } 17 | 18 | componentDidMount() { 19 | this.timeoutId = setTimeout(() => { 20 | this.setState({ isPreloaded: false }); 21 | }, 100); 22 | } 23 | 24 | componentWillUnmount() { 25 | if (this.timeoutId) { 26 | clearTimeout(this.timeoutId); 27 | } 28 | } 29 | 30 | render() { 31 | const { children, fullMenu } = this.props; 32 | const { isPreloaded } = this.state; 33 | return ( 34 | <StaticQuery 35 | query={graphql` 36 | query SiteTitleQuery { 37 | site { 38 | siteMetadata { 39 | title 40 | } 41 | } 42 | } 43 | `} 44 | render={data => ( 45 | <> 46 | <Helmet 47 | title={data.site.siteMetadata.title} 48 | meta={[ 49 | { name: 'description', content: 'Solid State' }, 50 | { name: 'keywords', content: 'site, web' }, 51 | ]} 52 | > 53 | <html lang="en" /> 54 | </Helmet> 55 | <div 56 | className={isPreloaded ? ' main-body is-preload' : ' main-body'} 57 | > 58 | <div id="page-wrapper"> 59 | <SideBar fullMenu={fullMenu} /> 60 | {children} 61 | <Footer /> 62 | </div> 63 | </div> 64 | </> 65 | )} 66 | /> 67 | ); 68 | } 69 | } 70 | 71 | Layout.propTypes = { 72 | children: PropTypes.node.isRequired, 73 | }; 74 | 75 | export default Layout; 76 | -------------------------------------------------------------------------------- /src/assets/sass/libs/_mixins.scss: -------------------------------------------------------------------------------- 1 | /// Makes an element's :before pseudoelement a FontAwesome icon. 2 | /// @param {string} $content Optional content value to use. 3 | /// @param {string} $where Optional pseudoelement to target (before or after). 4 | @mixin icon($content: false, $where: before) { 5 | 6 | text-decoration: none; 7 | 8 | &:#{$where} { 9 | 10 | @if $content { 11 | content: $content; 12 | } 13 | 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-font-smoothing: antialiased; 16 | font-family: FontAwesome; 17 | font-style: normal; 18 | font-weight: normal; 19 | text-transform: none !important; 20 | 21 | } 22 | 23 | } 24 | 25 | /// Applies padding to an element, taking the current element-margin value into account. 26 | /// @param {mixed} $tb Top/bottom padding. 27 | /// @param {mixed} $lr Left/right padding. 28 | /// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) 29 | /// @param {bool} $important If true, adds !important. 30 | @mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { 31 | 32 | @if $important { 33 | $important: '!important'; 34 | } 35 | 36 | $x: 0.1em; 37 | 38 | @if unit(_size(element-margin)) == 'rem' { 39 | $x: 0.1rem; 40 | } 41 | 42 | padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; 43 | 44 | } 45 | 46 | /// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). 47 | /// @param {string} $svg SVG data URL. 48 | /// @return {string} Encoded SVG data URL. 49 | @function svg-url($svg) { 50 | 51 | $svg: str-replace($svg, '"', '\''); 52 | $svg: str-replace($svg, '%', '%25'); 53 | $svg: str-replace($svg, '<', '%3C'); 54 | $svg: str-replace($svg, '>', '%3E'); 55 | $svg: str-replace($svg, '&', '%26'); 56 | $svg: str-replace($svg, '#', '%23'); 57 | $svg: str-replace($svg, '{', '%7B'); 58 | $svg: str-replace($svg, '}', '%7D'); 59 | $svg: str-replace($svg, ';', '%3B'); 60 | 61 | @return url("data:image/svg+xml;charset=utf8,#{$svg}"); 62 | 63 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_button.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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'); 16 | background-color: transparent; 17 | border-radius: _size(border-radius); 18 | border: 0; 19 | box-shadow: inset 0 0 0 2px _palette(border); 20 | color: _palette(fg-bold) !important; 21 | cursor: pointer; 22 | display: inline-block; 23 | font-family: _font(family-heading); 24 | font-size: 0.8em; 25 | font-weight: _font(weight-heading-bold); 26 | height: 3.75em; 27 | letter-spacing: _font(kern-heading); 28 | line-height: 3.75em; 29 | padding: 0 2.25em; 30 | text-align: center; 31 | text-decoration: none; 32 | text-transform: uppercase; 33 | white-space: nowrap; 34 | 35 | &:hover { 36 | background-color: _palette(border-bg); 37 | } 38 | 39 | &:active { 40 | background-color: _palette(border2-bg); 41 | } 42 | 43 | &.icon { 44 | &:before { 45 | margin-right: 0.5em; 46 | color: _palette(fg-light); 47 | } 48 | } 49 | 50 | &.primary { 51 | background-color: _palette(accent); 52 | box-shadow: none; 53 | 54 | &:hover { 55 | background-color: desaturate(lighten(_palette(accent), 3), 1.5); 56 | } 57 | 58 | &:active { 59 | background-color: saturate(darken(_palette(accent), 3), 1.5); 60 | } 61 | 62 | &.icon { 63 | &:before { 64 | color: mix(_palette(fg-bold), _palette(accent), 25%); 65 | } 66 | } 67 | } 68 | 69 | &.fit { 70 | width: 100%; 71 | } 72 | 73 | &.small { 74 | font-size: 0.6em; 75 | } 76 | 77 | &.large { 78 | font-size: 1em; 79 | } 80 | 81 | &.disabled, 82 | &:disabled { 83 | opacity: 0.25; 84 | } 85 | 86 | @include breakpoint('<=xsmall') { 87 | padding: 0; 88 | } 89 | } -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import config from '../../config'; 3 | export default function Footer() { 4 | return ( 5 | <section id="footer"> 6 | <div className="inner"> 7 | <h2 className="major">Get in touch</h2> 8 | <p> 9 | Cras mattis ante fermentum, malesuada neque vitae, eleifend erat. 10 | Phasellus non pulvinar erat. Fusce tincidunt, nisl eget mattis 11 | egestas, purus ipsum consequat orci, sit amet lobortis lorem lacus in 12 | tellus. Sed ac elementum arcu. Quisque placerat auctor laoreet. 13 | </p> 14 | <form method="post" action="/#"> 15 | <div className="fields"> 16 | <div className="field"> 17 | <label htmlFor="name">Name</label> 18 | <input type="text" name="name" id="name" /> 19 | </div> 20 | <div className="field"> 21 | <label htmlFor="email">Email</label> 22 | <input type="email" name="email" id="email" /> 23 | </div> 24 | <div className="field"> 25 | <label htmlFor="message">Message</label> 26 | <textarea name="message" id="message" rows="4"></textarea> 27 | </div> 28 | </div> 29 | <ul className="actions"> 30 | <li> 31 | <input type="submit" value="Send Message" /> 32 | </li> 33 | </ul> 34 | </form> 35 | <ul className="contact"> 36 | <li className="fa-home">{config.address}</li> 37 | 38 | <li className="fa-phone">{config.phone}</li> 39 | 40 | {config.socialLinks.map(social => { 41 | const { icon, url } = social; 42 | return ( 43 | <li className={`${icon}`} key={url}> 44 | <a href={url}>{url}</a> 45 | </li> 46 | ); 47 | })} 48 | </ul> 49 | <ul className="copyright"> 50 | <li>© Solid State. All rights reserved.</li> 51 | <li> 52 | Design: <a href="http://html5up.net">HTML5 UP</a> 53 | </li> 54 | </ul> 55 | </div> 56 | </section> 57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /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/_features.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | /* Features */ 8 | 9 | .features { 10 | @include vendor('display', 'flex'); 11 | @include vendor('flex-wrap', 'wrap'); 12 | margin: 0 0 _size(element-margin) 0; 13 | 14 | article { 15 | @include padding(1.75em, 1.75em); 16 | background-color: desaturate(lighten(_palette(bg), 3), 1.5); 17 | border-radius: _size(border-radius); 18 | margin: (_size(section-spacing, large) * 0.5) _size(section-spacing, large) (_size(section-spacing, large) * 0.5) 0; 19 | width: calc(50% - #{_size(section-spacing, large) * 0.5}); 20 | 21 | &:nth-child(2n) { 22 | margin-right: 0; 23 | } 24 | 25 | .image { 26 | border-radius: _size(border-radius) _size(border-radius) 0 0; 27 | display: block; 28 | margin-bottom: 1.75em; 29 | margin-left: -1.75em; 30 | margin-top: -1.75em; 31 | position: relative; 32 | width: calc(100% + #{3.5em}); 33 | 34 | img { 35 | border-radius: _size(border-radius) _size(border-radius) 0 0; 36 | width: 100%; 37 | } 38 | } 39 | } 40 | 41 | @include breakpoint('<=medium') { 42 | article { 43 | margin: (_size(section-spacing, medium) * 0.5) _size(section-spacing, medium) (_size(section-spacing, medium) * 0.5) 0; 44 | width: calc(50% - #{_size(section-spacing, medium) * 0.5}); 45 | } 46 | } 47 | 48 | @include breakpoint('<=small') { 49 | article { 50 | @include padding(1.5em, 1.5em); 51 | margin: (_size(section-spacing, small) * 0.5) _size(section-spacing, small) (_size(section-spacing, small) * 0.5) 0; 52 | width: calc(50% - #{_size(section-spacing, small) * 0.5} - 1px); 53 | 54 | .image { 55 | margin-bottom: 1.5em; 56 | margin-left: -1.5em; 57 | margin-top: -1.5em; 58 | width: calc(100% + #{3em}); 59 | } 60 | } 61 | } 62 | 63 | @include breakpoint('<=xsmall') { 64 | display: block; 65 | 66 | article { 67 | width: 100%; 68 | margin: 0 0 _size(element-margin) 0 !important; 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_actions.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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.5rem; 95 | } 96 | } 97 | } 98 | } 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /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/layout/_header.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); 11 | background-color: transparentize(desaturate(lighten(_palette(bg), 3), 1.5), 0.05); 12 | height: 3.5em; 13 | left: 0; 14 | line-height: 3.5em; 15 | padding: 0 1.25em; 16 | position: fixed; 17 | top: 0; 18 | width: 100%; 19 | z-index: _misc(z-index-base); 20 | 21 | h1 { 22 | @include vendor('transition', ( 23 | 'opacity #{_duration(transition)} ease-in-out', 24 | 'visibility #{_duration(transition)}' 25 | )); 26 | border-bottom: 0; 27 | font-size: 0.8em; 28 | margin-bottom: 0; 29 | opacity: 1; 30 | visibility: visible; 31 | 32 | a { 33 | border: 0; 34 | } 35 | } 36 | 37 | nav { 38 | font-family: _font(family-heading); 39 | font-size: 0.8em; 40 | font-weight: _font(weight-heading-bold); 41 | height: 3em; 42 | letter-spacing: _font(kern-heading); 43 | line-height: 3em; 44 | position: absolute; 45 | right: 0.7em; 46 | text-transform: uppercase; 47 | top: 0.7em; 48 | 49 | a { 50 | border: 0; 51 | display: inline-block; 52 | padding: 0 1em; 53 | 54 | &:before { 55 | float: right; 56 | margin-left: 0.75em; 57 | } 58 | 59 | &[href="#menu"] { 60 | @include icon; 61 | @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); 62 | border-radius: _size(border-radius); 63 | box-shadow: inset 0 0 0 2px _palette(border); 64 | padding: 0 1.35em; 65 | 66 | &:before { 67 | content: '\f0c9'; 68 | } 69 | 70 | &:hover { 71 | background-color: _palette(border-bg); 72 | } 73 | 74 | &:active { 75 | background-color: _palette(border2-bg); 76 | } 77 | } 78 | } 79 | } 80 | 81 | &.alt { 82 | background-color: transparent; 83 | 84 | h1 { 85 | opacity: 0; 86 | visibility: hidden; 87 | } 88 | } 89 | 90 | @include breakpoint('<=small') { 91 | height: 2.75em; 92 | line-height: 2.75em; 93 | 94 | nav { 95 | top: 0; 96 | right: 0; 97 | height: inherit; 98 | line-height: inherit; 99 | 100 | a { 101 | height: inherit; 102 | line-height: inherit; 103 | 104 | &[href="#menu"] { 105 | box-shadow: none; 106 | padding: 0 1em; 107 | border-radius: 0; 108 | 109 | &:hover, &:active { 110 | background-color: inherit; 111 | } 112 | } 113 | } 114 | } 115 | } 116 | 117 | @include breakpoint('<=xsmall') { 118 | nav { 119 | a { 120 | &[href="#menu"] { 121 | width: 4em; 122 | white-space: nowrap; 123 | text-indent: 4em; 124 | position: relative; 125 | 126 | &:before { 127 | width: inherit; 128 | position: absolute; 129 | top: 0; 130 | left: 0; 131 | text-indent: 0; 132 | text-align: right; 133 | margin-left: 0; 134 | padding-right: 1.25em; 135 | } 136 | } 137 | } 138 | } 139 | } 140 | } -------------------------------------------------------------------------------- /src/assets/sass/libs/_html-grid.scss: -------------------------------------------------------------------------------- 1 | // html-grid.scss v1.0 | @ajlkn | MIT licensed */ 2 | 3 | // Mixins. 4 | 5 | /// Initializes the current element as an HTML grid. 6 | /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). 7 | /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). 8 | @use "sass:math"; 9 | 10 | @mixin html-grid($gutters: 1.5em, $suffix: '') { 11 | 12 | // Initialize. 13 | $cols: 12; 14 | $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00; 15 | $unit: math.div(100%, $cols); 16 | 17 | // Suffixes. 18 | $suffixes: null; 19 | 20 | @if (type-of($suffix) == 'list') { 21 | $suffixes: $suffix; 22 | } 23 | @else { 24 | $suffixes: ($suffix); 25 | } 26 | 27 | // Gutters. 28 | $guttersCols: null; 29 | $guttersRows: null; 30 | 31 | @if (type-of($gutters) == 'list') { 32 | 33 | $guttersCols: nth($gutters, 1); 34 | $guttersRows: nth($gutters, 2); 35 | 36 | } 37 | @else { 38 | 39 | $guttersCols: $gutters; 40 | $guttersRows: 0; 41 | 42 | } 43 | 44 | // Row. 45 | display: flex; 46 | flex-wrap: wrap; 47 | box-sizing: border-box; 48 | align-items: stretch; 49 | 50 | // Columns. 51 | > * { 52 | box-sizing: border-box; 53 | } 54 | 55 | // Gutters. 56 | &.gtr-uniform { 57 | > * { 58 | > :last-child { 59 | margin-bottom: 0; 60 | } 61 | } 62 | } 63 | 64 | // Alignment. 65 | &.aln-left { 66 | justify-content: flex-start; 67 | } 68 | 69 | &.aln-center { 70 | justify-content: center; 71 | } 72 | 73 | &.aln-right { 74 | justify-content: flex-end; 75 | } 76 | 77 | &.aln-top { 78 | align-items: flex-start; 79 | } 80 | 81 | &.aln-middle { 82 | align-items: center; 83 | } 84 | 85 | &.aln-bottom { 86 | align-items: flex-end; 87 | } 88 | 89 | // Step through suffixes. 90 | @each $suffix in $suffixes { 91 | 92 | // Suffix. 93 | @if ($suffix != '') { 94 | $suffix: '-' + $suffix; 95 | } 96 | @else { 97 | $suffix: ''; 98 | } 99 | 100 | // Row. 101 | 102 | // Important. 103 | > .imp#{$suffix} { 104 | order: -1; 105 | } 106 | 107 | // Columns, offsets. 108 | @for $i from 1 through $cols { 109 | > .col-#{$i}#{$suffix} { 110 | width: $unit * $i; 111 | } 112 | 113 | > .off-#{$i}#{$suffix} { 114 | margin-left: $unit * $i; 115 | } 116 | } 117 | 118 | // Step through multipliers. 119 | @each $multiplier in $multipliers { 120 | 121 | // Gutters. 122 | $class: null; 123 | 124 | @if ($multiplier != 1) { 125 | $class: '.gtr-' + ($multiplier * 100); 126 | } 127 | 128 | &#{$class} { 129 | margin-top: ($guttersRows * $multiplier * -1); 130 | margin-left: ($guttersCols * $multiplier * -1); 131 | 132 | > * { 133 | padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier); 134 | } 135 | 136 | // Uniform. 137 | &.gtr-uniform { 138 | margin-top: $guttersCols * $multiplier * -1; 139 | 140 | > * { 141 | padding-top: $guttersCols * $multiplier; 142 | } 143 | } 144 | 145 | } 146 | 147 | } 148 | 149 | } 150 | 151 | } -------------------------------------------------------------------------------- /src/pages/Generic.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Layout from '../components/Layout'; 4 | import pic4 from '../assets/images/pic04.jpg'; 5 | import pic5 from '../assets/images/pic05.jpg'; 6 | 7 | const IndexPage = () => ( 8 | <Layout fullMenu> 9 | <section id="wrapper"> 10 | <header> 11 | <div className="inner"> 12 | <h2>Generic</h2> 13 | <p>Phasellus non pulvinar erat. Fusce tincidunt nisl eget ipsum.</p> 14 | </div> 15 | </header> 16 | 17 | <div className="wrapper"> 18 | <div className="inner"> 19 | <h3 className="major">Lorem ipsum dolor</h3> 20 | <p> 21 | Morbi mattis mi consectetur tortor elementum, varius pellentesque 22 | velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac 23 | scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis 24 | lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. 25 | Maecenas sagittis felis ac sagittis semper. Curabitur purus leo 26 | donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada 27 | fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. 28 | Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci 29 | fringilla tincidunt. Aliquam eleifend ligula non velit accumsan 30 | cursus. Etiam ut gravida sapien. 31 | </p> 32 | 33 | <p> 34 | Vestibulum ultrices risus velit, sit amet blandit massa auctor sit 35 | amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis 36 | id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. 37 | Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. 38 | Proin nec commodo, vel scelerisque nisi scelerisque. Suspendisse id 39 | quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor 40 | consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec 41 | felis elementum varius. 42 | </p> 43 | 44 | <h3 className="major">Vitae phasellus</h3> 45 | <p> 46 | Cras mattis ante fermentum, malesuada neque vitae, eleifend erat. 47 | Phasellus non pulvinar erat. Fusce tincidunt, nisl eget mattis 48 | egestas, purus ipsum consequat orci, sit amet lobortis lorem lacus 49 | in tellus. Sed ac elementum arcu. Quisque placerat auctor laoreet. 50 | </p> 51 | 52 | <section className="features"> 53 | <article> 54 | <a href="/#" className="image"> 55 | <img src={pic4} alt="" /> 56 | </a> 57 | <h3 className="major">Sed feugiat lorem</h3> 58 | <p> 59 | Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id 60 | nulla dignissim dapibus ultrices. 61 | </p> 62 | <a href="/#" className="special"> 63 | Learn more 64 | </a> 65 | </article> 66 | <article> 67 | <a href="/#" className="image"> 68 | <img src={pic5} alt="" /> 69 | </a> 70 | <h3 className="major">Nisl placerat</h3> 71 | <p> 72 | Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id 73 | nulla dignissim dapibus ultrices. 74 | </p> 75 | <a href="/#" className="special"> 76 | Learn more 77 | </a> 78 | </article> 79 | </section> 80 | </div> 81 | </div> 82 | </section> 83 | </Layout> 84 | ); 85 | 86 | export default IndexPage; 87 | -------------------------------------------------------------------------------- /src/assets/sass/layout/_menu.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | /* Menu */ 8 | 9 | #page-wrapper { 10 | @include vendor('transition', 'filter 0.25s ease'); 11 | } 12 | 13 | #menu { 14 | @include vendor('align-items', 'center'); 15 | @include vendor('display', 'flex'); 16 | @include vendor('justify-content', 'center'); 17 | @include vendor('pointer-events', 'none'); 18 | @include vendor( 19 | 'transition', 20 | ('opacity #{_duration(menu)} ease', 'visibility #{_duration(menu)}') 21 | ); 22 | -moz-user-select: none; 23 | -webkit-user-select: none; 24 | -ms-user-select: none; 25 | user-select: none; 26 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 27 | background: transparentize(_palette(bg), 0.2); 28 | cursor: default; 29 | height: 100%; 30 | left: 0; 31 | opacity: 0; 32 | position: fixed; 33 | text-align: center; 34 | top: 0; 35 | visibility: hidden; 36 | width: 100%; 37 | z-index: 1001; 38 | 39 | .inner { 40 | @include padding(2.5em, 1.5em); 41 | @include vendor('transform', 'translateY(0.5em)'); 42 | @include vendor( 43 | 'transition', 44 | ('opacity #{_duration(menu)} ease', 'transform #{_duration(menu)} ease') 45 | ); 46 | -webkit-overflow-scrolling: touch; 47 | background: _palette(accent); 48 | border-radius: _size(border-radius); 49 | display: block; 50 | max-width: 100%; 51 | opacity: 0; 52 | position: relative; 53 | width: 18em; 54 | } 55 | 56 | h2 { 57 | border-bottom: solid 2px _palette(border); 58 | padding-bottom: 1em; 59 | } 60 | 61 | .close { 62 | background-image: url('../images/close.svg'); 63 | background-position: 75% 25%; 64 | background-repeat: no-repeat; 65 | background-size: 2em 2em; 66 | border: 0; 67 | content: ''; 68 | display: block; 69 | height: 4em; 70 | overflow: hidden; 71 | position: absolute; 72 | right: 0; 73 | text-align: center; 74 | text-indent: 4em; 75 | top: 0; 76 | width: 4em; 77 | } 78 | 79 | .links { 80 | list-style: none !important; 81 | margin-bottom: (_size(element-margin) - 0.5em); 82 | padding: 0; 83 | 84 | li { 85 | padding: 0; 86 | 87 | a { 88 | border-radius: _size(border-radius); 89 | border: 0; 90 | display: block; 91 | font-family: _font(family-heading); 92 | font-size: 0.8em; 93 | font-weight: _font(weight-heading); 94 | letter-spacing: _font(kern-heading); 95 | line-height: 1.85em; 96 | padding: 0.75em 0; 97 | text-transform: uppercase; 98 | 99 | &:hover { 100 | background: saturate(darken(_palette(accent), 3), 1.5); 101 | } 102 | } 103 | } 104 | } 105 | 106 | @include breakpoint('<=small') { 107 | .inner { 108 | max-height: 100%; 109 | overflow-y: auto; 110 | overflow-x: hidden; 111 | 112 | .close { 113 | background-size: 1.5em 1.5em; 114 | } 115 | } 116 | } 117 | } 118 | 119 | .main-body { 120 | .is-menu-visible { 121 | #page-wrapper { 122 | @include vendor('filter', 'blur(1.5px)'); 123 | } 124 | 125 | #menu { 126 | @include vendor('pointer-events', 'auto'); 127 | opacity: 1; 128 | visibility: visible; 129 | 130 | .inner { 131 | @include vendor('transform', 'translateY(0)'); 132 | opacity: 1; 133 | } 134 | } 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /src/assets/sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | .inner { 11 | @include padding(5em, 0); 12 | @include vendor('display', 'flex'); 13 | @include vendor('flex-direction', 'row'); 14 | @include vendor('flex-wrap', 'wrap'); 15 | margin: 0 auto; 16 | width: _size(inner); 17 | 18 | > * { 19 | width: 100%; 20 | } 21 | 22 | form { 23 | margin: 0 _size(section-spacing, large) 0 0; 24 | width: calc(50% - #{_size(section-spacing, large) * 0.5}); 25 | } 26 | 27 | .contact { 28 | width: calc(50% - #{_size(section-spacing, large) * 0.5}); 29 | } 30 | 31 | .copyright { 32 | border-top: solid 2px _palette(border); 33 | list-style: none; 34 | margin: (_size(element-margin) * 2) 0 _size(element-margin) 0; 35 | padding: _size(element-margin) 0 0 0; 36 | width: 100%; 37 | 38 | li { 39 | border-left: solid 2px _palette(border); 40 | color: _palette(fg-light); 41 | display: inline-block; 42 | font-size: 0.9em; 43 | line-height: 1; 44 | margin-left: 1em; 45 | padding: 0; 46 | padding-left: 1em; 47 | 48 | &:first-child { 49 | border-left: 0; 50 | margin-left: 0; 51 | padding-left: 0; 52 | } 53 | 54 | a { 55 | color: inherit; 56 | } 57 | } 58 | } 59 | } 60 | 61 | @include breakpoint('<=large') { 62 | background-color: _palette(bg); 63 | 64 | background-image: linear-gradient( 65 | to top, 66 | transparentize(_palette(bg), 0.2), 67 | transparentize(_palette(bg), 0.2) 68 | ), 69 | url('../images/bg.jpg'); 70 | 71 | background-size: auto, cover; 72 | 73 | background-position: center, center; 74 | 75 | margin-top: (_size(wrapper-edges, large) * -1); 76 | padding-top: _size(wrapper-edges, large); 77 | } 78 | 79 | @include breakpoint('<=medium') { 80 | margin-top: (_size(wrapper-edges, medium) * -1); 81 | padding-top: _size(wrapper-edges, medium); 82 | 83 | .inner { 84 | @include padding(3em, 3em); 85 | display: block; 86 | width: 100%; 87 | 88 | form { 89 | width: 100%; 90 | margin: 0 0 (_size(element-margin) * 2) 0; 91 | } 92 | 93 | .contact { 94 | width: 100%; 95 | margin: 0 0 (_size(element-margin) * 2) 0; 96 | } 97 | 98 | .copyright { 99 | margin: (_size(element-margin) * 2) 0 _size(element-margin) 0; 100 | } 101 | } 102 | } 103 | 104 | @include breakpoint('<=small') { 105 | margin-top: (_size(wrapper-edges, small) * -1); 106 | padding-top: _size(wrapper-edges, small); 107 | 108 | .inner { 109 | @include padding(2em, 2em); 110 | 111 | form { 112 | margin: 0 0 (_size(element-margin) * 1.5) 0; 113 | } 114 | 115 | .contact { 116 | margin: 0 0 (_size(element-margin) * 1.5) 0; 117 | } 118 | } 119 | } 120 | 121 | @include breakpoint('<=xsmall') { 122 | .inner { 123 | .copyright { 124 | li { 125 | border-left: 0; 126 | display: block; 127 | margin: 1em 0 0 0; 128 | padding-left: 0; 129 | 130 | &:first-child { 131 | margin-top: 0; 132 | } 133 | } 134 | } 135 | } 136 | } 137 | 138 | @include breakpoint('<=xxsmall') { 139 | .inner { 140 | @include padding(2em, 1.5em); 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /src/assets/sass/layout/_banner.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | /* Banner */ 8 | 9 | #banner { 10 | @include padding(10em, 0, (0, 0, _size(wrapper-edges, large) * -0.5, 0)); 11 | 12 | .inner { 13 | margin: 0 auto; 14 | width: _size(inner); 15 | } 16 | 17 | .logo { 18 | @include vendor('transition', ('opacity 2s ease', 'transform 1s ease')); 19 | @include vendor('transform', 'translateY(0)'); 20 | opacity: 1; 21 | margin: 0 0 (_size(element-margin) * 0.65) 0; 22 | 23 | .icon { 24 | border-radius: 100%; 25 | border: solid 2px _palette(border); 26 | cursor: default; 27 | display: inline-block; 28 | font-size: 2em; 29 | height: 2.25em; 30 | line-height: 2.25em; 31 | text-align: center; 32 | width: 2.25em; 33 | } 34 | } 35 | 36 | h2 { 37 | @include vendor( 38 | 'transition', 39 | ('opacity 0.5s ease', 'transform 0.5s ease', 'filter 0.25s ease') 40 | ); 41 | @include vendor('transform', 'translateX(0)'); 42 | @include vendor('transition-delay', '0.65s'); 43 | @include vendor('filter', 'blur(0)'); 44 | opacity: 1; 45 | border-bottom: solid 2px _palette(border); 46 | font-size: 2.25em; 47 | margin-bottom: _size(element-margin) * 0.4; 48 | padding-bottom: _size(element-margin) * 0.2; 49 | } 50 | 51 | p { 52 | @include vendor( 53 | 'transition', 54 | ('opacity 0.5s ease', 'transform 0.5s ease', 'filter 0.25s ease') 55 | ); 56 | @include vendor('transform', 'translateX(0)'); 57 | @include vendor('transition-delay', '0.8s'); 58 | @include vendor('filter', 'blur(0)'); 59 | opacity: 1; 60 | font-family: _font(family-heading); 61 | font-size: 1em; 62 | font-weight: _font(weight-heading); 63 | letter-spacing: _font(kern-heading); 64 | line-height: 2; 65 | text-transform: uppercase; 66 | } 67 | 68 | @include breakpoint('<=large') { 69 | @include padding(7em, 0, (0, 0, _size(wrapper-edges, large) * 0.5, 0)); 70 | 71 | background-color: _palette(bg); 72 | 73 | background-image: linear-gradient( 74 | to top, 75 | transparentize(_palette(bg), 0.2), 76 | transparentize(_palette(bg), 0.2) 77 | ), 78 | url('../images/bg.jpg'); 79 | 80 | background-size: auto, cover; 81 | 82 | background-position: center, center; 83 | 84 | margin-bottom: (_size(wrapper-edges, large) * -1); 85 | } 86 | 87 | @include breakpoint('<=medium') { 88 | @include padding(12em, 3em, (0, 0, _size(wrapper-edges, medium) * 0.5, 0)); 89 | 90 | margin-bottom: (_size(wrapper-edges, medium) * -1); 91 | 92 | .inner { 93 | width: 100%; 94 | } 95 | } 96 | 97 | @include breakpoint('<=small') { 98 | @include padding(5em, 2em, (0, 0, _size(wrapper-edges, small) * 0.5, 0)); 99 | 100 | margin-bottom: (_size(wrapper-edges, small) * -1); 101 | 102 | .logo { 103 | margin: 0 0 (_size(element-margin) * 0.5) 0; 104 | 105 | .icon { 106 | font-size: 1.5em; 107 | } 108 | } 109 | 110 | h2 { 111 | font-size: 1.5em; 112 | } 113 | 114 | p { 115 | font-size: 0.8em; 116 | } 117 | } 118 | 119 | .main-body.is-preload &, 120 | body.is-preload & { 121 | .logo { 122 | @include vendor('transform', 'translateY(0.5em)'); 123 | opacity: 0; 124 | } 125 | 126 | h2 { 127 | opacity: 0; 128 | @include vendor('transform', 'translateX(0.25em)'); 129 | @include vendor('filter', 'blur(2px)'); 130 | } 131 | 132 | p { 133 | opacity: 0; 134 | @include vendor('transform', 'translateX(0.5em)'); 135 | @include vendor('filter', 'blur(2px)'); 136 | } 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gatsby-starter-solidstate 2 | 3 | Gatsby.js V4 starter template based on Solid State 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-solidstate/) 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-solidstate 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 solidstate', // <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-readonly](https://github.com/anubhavsrivastava/gatsby-starter-readonly) 75 | - [gatsby-starter-prologue](https://github.com/anubhavsrivastava/gatsby-starter-prologue) 76 | - [gatsby-starter-phantom](https://github.com/anubhavsrivastava/gatsby-starter-phantom) 77 | - [gatsby-starter-paradigmshift](https://github.com/anubhavsrivastava/gatsby-starter-paradigmshift) 78 | - [gatsby-starter-overflow](https://github.com/anubhavsrivastava/gatsby-starter-overflow) 79 | - [gatsby-starter-multiverse](https://github.com/anubhavsrivastava/gatsby-starter-multiverse) 80 | - [gatsby-starter-identity](https://github.com/anubhavsrivastava/gatsby-starter-identity) 81 | - [gatsby-starter-highlights](https://github.com/anubhavsrivastava/gatsby-starter-highlights) 82 | - [gatsby-starter-fractal](https://github.com/anubhavsrivastava/gatsby-starter-fractal) 83 | - [gatsby-starter-eventually](https://github.com/anubhavsrivastava/gatsby-starter-eventually) 84 | - [gatsby-starter-directive](https://github.com/anubhavsrivastava/gatsby-starter-directive) 85 | - [gatsby-starter-creative](https://github.com/anubhavsrivastava/gatsby-starter-creative) 86 | - [gatsby-starter-aerial](https://github.com/anubhavsrivastava/gatsby-starter-aerial) 87 | 88 | ### Contribution 89 | 90 | Suggestions and PRs are welcome! 91 | 92 | Please create issue or open PR request for contribution. 93 | 94 | ### License 95 | 96 | [![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](LICENSE) 97 | 98 | refer `LICENSE` file in this repository. 99 | -------------------------------------------------------------------------------- /src/assets/sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | body, input, select, textarea { 10 | color: _palette(fg); 11 | font-family: _font(family); 12 | font-size: 16.5pt; 13 | font-weight: _font(weight); 14 | line-height: 1.65; 15 | 16 | @include breakpoint('<=xlarge') { 17 | font-size: 13pt; 18 | } 19 | 20 | @include breakpoint('<=large') { 21 | font-size: 12pt; 22 | } 23 | 24 | @include breakpoint('<=medium') { 25 | font-size: 12pt; 26 | } 27 | 28 | @include breakpoint('<=small') { 29 | font-size: 12pt; 30 | } 31 | 32 | @include breakpoint('<=xsmall') { 33 | font-size: 12pt; 34 | } 35 | } 36 | 37 | a { 38 | @include vendor('transition', 'color #{_duration(transition)} ease-in-out, border-bottom-color #{_duration(transition)} ease-in-out'); 39 | border-bottom: dotted 1px _palette(fg-light); 40 | color: _palette(fg-bold); 41 | text-decoration: none; 42 | 43 | &:hover { 44 | border-bottom-color: transparent; 45 | color: _palette(fg-bold) !important; 46 | } 47 | 48 | &.special:not(.button) { 49 | @include icon; 50 | border-bottom: 0; 51 | display: block; 52 | font-family: _font(family-heading); 53 | font-size: 0.8em; 54 | font-weight: _font(weight-heading-bold); 55 | letter-spacing: _font(kern-heading); 56 | margin: 0 0 _size(element-margin) 0; 57 | text-transform: uppercase; 58 | 59 | &:before { 60 | @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); 61 | border-radius: 100%; 62 | border: solid 2px _palette(border); 63 | content: '\f105'; 64 | display: inline-block; 65 | font-size: 1.25em; 66 | height: 2em; 67 | line-height: 1.65em; 68 | margin-right: 0.85em; 69 | text-align: center; 70 | text-indent: 0.15em; 71 | vertical-align: middle; 72 | width: 2em; 73 | } 74 | 75 | &:hover { 76 | &:before { 77 | background-color: _palette(border-bg); 78 | } 79 | } 80 | 81 | &:active { 82 | &:before { 83 | background-color: _palette(border2-bg); 84 | } 85 | } 86 | } 87 | } 88 | 89 | strong, b { 90 | color: _palette(fg-bold); 91 | font-weight: _font(weight-bold); 92 | } 93 | 94 | em, i { 95 | font-style: italic; 96 | } 97 | 98 | p { 99 | margin: 0 0 _size(element-margin) 0; 100 | } 101 | 102 | h1, h2, h3, h4, h5, h6 { 103 | color: _palette(fg-bold); 104 | font-family: _font(family-heading); 105 | font-weight: _font(weight-heading-bold); 106 | letter-spacing: _font(kern-heading); 107 | margin: 0 0 (_size(element-margin) * 0.5) 0; 108 | text-transform: uppercase; 109 | 110 | a { 111 | color: inherit; 112 | text-decoration: none; 113 | border-bottom: 0; 114 | } 115 | 116 | span { 117 | font-weight: _font(weight-heading); 118 | } 119 | 120 | &.major { 121 | padding-bottom: 1em; 122 | border-bottom: solid 2px _palette(border); 123 | } 124 | } 125 | 126 | h2 { 127 | font-size: 1.2em; 128 | } 129 | 130 | h3 { 131 | font-size: 0.9em; 132 | } 133 | 134 | h4 { 135 | font-size: 0.7em; 136 | } 137 | 138 | h5 { 139 | font-size: 0.7em; 140 | } 141 | 142 | h6 { 143 | font-size: 0.7em; 144 | } 145 | 146 | @include breakpoint('<=small') { 147 | h2 { 148 | font-size: 1em; 149 | } 150 | 151 | h3 { 152 | font-size: 0.8em 153 | } 154 | } 155 | 156 | sub { 157 | font-size: 0.8em; 158 | position: relative; 159 | top: 0.5em; 160 | } 161 | 162 | sup { 163 | font-size: 0.8em; 164 | position: relative; 165 | top: -0.5em; 166 | } 167 | 168 | blockquote { 169 | border-left: solid 4px _palette(border); 170 | font-style: italic; 171 | margin: 0 0 _size(element-margin) 0; 172 | padding: (_size(element-margin) * 0.25) 0 (_size(element-margin) * 0.25) _size(element-margin); 173 | } 174 | 175 | code { 176 | background: _palette(border-bg); 177 | border-radius: _size(border-radius); 178 | border: solid 2px _palette(border); 179 | font-family: _font(family-fixed); 180 | font-size: 0.9em; 181 | margin: 0 0.25em; 182 | padding: 0.25em 0.65em; 183 | } 184 | 185 | pre { 186 | -webkit-overflow-scrolling: touch; 187 | font-family: _font(family-fixed); 188 | font-size: 0.9em; 189 | margin: 0 0 _size(element-margin) 0; 190 | 191 | code { 192 | display: block; 193 | line-height: 1.75em; 194 | padding: 1em 1.5em; 195 | overflow-x: auto; 196 | } 197 | } 198 | 199 | hr { 200 | border: 0; 201 | border-bottom: solid 2px _palette(border); 202 | margin: (_size(element-margin) * 1.25) 0; 203 | 204 | &.major { 205 | margin: (_size(element-margin) * 2) 0; 206 | } 207 | } 208 | 209 | .align-left { 210 | text-align: left; 211 | } 212 | 213 | .align-center { 214 | text-align: center; 215 | } 216 | 217 | .align-right { 218 | text-align: right; 219 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_form.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Phantom 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 | @use "sass:math"; 10 | 11 | form { 12 | margin: 0 0 _size(element-margin) 0; 13 | overflow-x: hidden; 14 | 15 | > :last-child { 16 | margin-bottom: 0; 17 | } 18 | 19 | > .fields { 20 | $gutter: (_size(element-margin) * 0.75); 21 | 22 | @include vendor("display", "flex"); 23 | @include vendor("flex-wrap", "wrap"); 24 | width: calc(100% + #{$gutter * 2}); 25 | margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); 26 | 27 | > .field { 28 | @include vendor("flex-grow", "0"); 29 | @include vendor("flex-shrink", "0"); 30 | padding: $gutter 0 0 $gutter; 31 | width: calc(100% - #{$gutter * 1}); 32 | 33 | &.half { 34 | width: calc(50% - #{$gutter * 0.5}); 35 | } 36 | 37 | &.third { 38 | width: calc(#{100% / 3} - #{$gutter * math.div(1, 3)}); 39 | } 40 | 41 | &.quarter { 42 | width: calc(25% - #{$gutter * 0.25}); 43 | } 44 | } 45 | } 46 | 47 | @include breakpoint("<=xsmall") { 48 | > .fields { 49 | $gutter: (_size(element-margin) * 0.75); 50 | 51 | width: calc(100% + #{$gutter * 2}); 52 | margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); 53 | 54 | > .field { 55 | padding: $gutter 0 0 $gutter; 56 | width: calc(100% - #{$gutter * 1}); 57 | 58 | &.half { 59 | width: calc(100% - #{$gutter * 1}); 60 | } 61 | 62 | &.third { 63 | width: calc(100% - #{$gutter * 1}); 64 | } 65 | 66 | &.quarter { 67 | width: calc(100% - #{$gutter * 1}); 68 | } 69 | } 70 | } 71 | } 72 | } 73 | 74 | label { 75 | display: block; 76 | font-size: 0.9em; 77 | font-weight: _font(weight-bold); 78 | margin: 0 0 (_size(element-margin) * 0.5) 0; 79 | } 80 | 81 | input[type="text"], 82 | input[type="password"], 83 | input[type="email"], 84 | input[type="tel"], 85 | select, 86 | textarea { 87 | @include vendor("appearance", "none"); 88 | background-color: transparent; 89 | border: none; 90 | border-radius: 0; 91 | border-bottom: solid _size(border-width) _palette(border); 92 | color: inherit; 93 | display: block; 94 | outline: 0; 95 | padding: 0; 96 | text-decoration: none; 97 | width: 100%; 98 | 99 | &:invalid { 100 | box-shadow: none; 101 | } 102 | 103 | &:focus { 104 | border-bottom-color: _palette(accent1); 105 | box-shadow: inset 0 -1px 0 0 _palette(accent1); 106 | } 107 | } 108 | 109 | select { 110 | background-image: svg-url( 111 | "<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>" 112 | ); 113 | background-size: 1.25rem; 114 | background-repeat: no-repeat; 115 | background-position: calc(100% - 1rem) center; 116 | height: _size(element-height); 117 | padding-right: _size(element-height); 118 | text-overflow: ellipsis; 119 | 120 | option { 121 | color: _palette(fg-bold); 122 | background: _palette(bg); 123 | } 124 | 125 | &:focus { 126 | &::-ms-value { 127 | background-color: transparent; 128 | } 129 | } 130 | 131 | &::-ms-expand { 132 | display: none; 133 | } 134 | } 135 | 136 | input[type="text"], 137 | input[type="password"], 138 | input[type="email"], 139 | select { 140 | height: _size(element-height); 141 | } 142 | 143 | textarea { 144 | padding: 0; 145 | min-height: (_size(element-height) * 1.25); 146 | } 147 | 148 | input[type="checkbox"], 149 | input[type="radio"] { 150 | @include vendor("appearance", "none"); 151 | display: block; 152 | float: left; 153 | margin-right: -2em; 154 | opacity: 0; 155 | width: 1em; 156 | z-index: -1; 157 | 158 | & + label { 159 | @include icon; 160 | color: _palette(fg); 161 | cursor: pointer; 162 | display: inline-block; 163 | font-size: 1em; 164 | font-weight: _font(weight); 165 | padding-left: (_size(element-height) * 0.6) + 0.75em; 166 | padding-right: 0.75em; 167 | position: relative; 168 | 169 | &:before { 170 | border-radius: _size(border-radius); 171 | border: solid _size(border-width) _palette(border); 172 | content: ""; 173 | display: inline-block; 174 | height: (_size(element-height) * 0.6); 175 | left: 0; 176 | line-height: (_size(element-height) * 0.575); 177 | position: absolute; 178 | text-align: center; 179 | top: 0; 180 | width: (_size(element-height) * 0.6); 181 | } 182 | } 183 | 184 | &:checked + label { 185 | &:before { 186 | background: _palette(fg); 187 | border-color: _palette(fg); 188 | color: _palette(bg); 189 | content: "\f00c"; 190 | } 191 | } 192 | 193 | &:focus + label { 194 | &:before { 195 | border-color: _palette(accent1); 196 | box-shadow: 0 0 0 _size(border-width) _palette(accent1); 197 | } 198 | } 199 | } 200 | 201 | input[type="checkbox"] { 202 | & + label { 203 | &:before { 204 | border-radius: _size(border-radius); 205 | } 206 | } 207 | } 208 | 209 | input[type="radio"] { 210 | & + label { 211 | &:before { 212 | border-radius: 100%; 213 | } 214 | } 215 | } 216 | -------------------------------------------------------------------------------- /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 | 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 pic6 from '../assets/images/pic06.jpg'; 11 | import pic7 from '../assets/images/pic07.jpg'; 12 | 13 | import config from '../../config'; 14 | const IndexPage = () => ( 15 | <Layout> 16 | <section id="banner"> 17 | <div className="inner"> 18 | <div className="logo"> 19 | <span className="icon fa-diamond"></span> 20 | </div> 21 | <h2>{config.heading}</h2> 22 | <p>{config.subHeading}</p> 23 | </div> 24 | </section> 25 | 26 | <section id="wrapper"> 27 | <section id="one" className="wrapper spotlight style1"> 28 | <div className="inner"> 29 | <a href="/#" className="image"> 30 | <img src={pic1} alt="" /> 31 | </a> 32 | <div className="content"> 33 | <h2 className="major">Magna arcu feugiat</h2> 34 | <p> 35 | Lorem ipsum dolor sit amet, etiam lorem adipiscing elit. Cras 36 | turpis ante, nullam sit amet turpis non, sollicitudin posuere 37 | urna. Mauris id tellus arcu. Nunc vehicula id nulla dignissim 38 | dapibus. Nullam ultrices, neque et faucibus viverra, ex nulla 39 | cursus. 40 | </p> 41 | <a href="/#" className="special"> 42 | Learn more 43 | </a> 44 | </div> 45 | </div> 46 | </section> 47 | 48 | <section id="two" className="wrapper alt spotlight style2"> 49 | <div className="inner"> 50 | <a href="/#" className="image"> 51 | <img src={pic2} alt="" /> 52 | </a> 53 | <div className="content"> 54 | <h2 className="major">Tempus adipiscing</h2> 55 | <p> 56 | Lorem ipsum dolor sit amet, etiam lorem adipiscing elit. Cras 57 | turpis ante, nullam sit amet turpis non, sollicitudin posuere 58 | urna. Mauris id tellus arcu. Nunc vehicula id nulla dignissim 59 | dapibus. Nullam ultrices, neque et faucibus viverra, ex nulla 60 | cursus. 61 | </p> 62 | <a href="/#" className="special"> 63 | Learn more 64 | </a> 65 | </div> 66 | </div> 67 | </section> 68 | 69 | <section id="three" className="wrapper spotlight style3"> 70 | <div className="inner"> 71 | <a href="/#" className="image"> 72 | <img src={pic3} alt="" /> 73 | </a> 74 | <div className="content"> 75 | <h2 className="major">Nullam dignissim</h2> 76 | <p> 77 | Lorem ipsum dolor sit amet, etiam lorem adipiscing elit. Cras 78 | turpis ante, nullam sit amet turpis non, sollicitudin posuere 79 | urna. Mauris id tellus arcu. Nunc vehicula id nulla dignissim 80 | dapibus. Nullam ultrices, neque et faucibus viverra, ex nulla 81 | cursus. 82 | </p> 83 | <a href="/#" className="special"> 84 | Learn more 85 | </a> 86 | </div> 87 | </div> 88 | </section> 89 | 90 | <section id="four" className="wrapper alt style1"> 91 | <div className="inner"> 92 | <h2 className="major">Vitae phasellus</h2> 93 | <p> 94 | Cras mattis ante fermentum, malesuada neque vitae, eleifend erat. 95 | Phasellus non pulvinar erat. Fusce tincidunt, nisl eget mattis 96 | egestas, purus ipsum consequat orci, sit amet lobortis lorem lacus 97 | in tellus. Sed ac elementum arcu. Quisque placerat auctor laoreet. 98 | </p> 99 | <section className="features"> 100 | <article> 101 | <a href="/#" className="image"> 102 | <img src={pic4} alt="" /> 103 | </a> 104 | <h3 className="major">Sed feugiat lorem</h3> 105 | <p> 106 | Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id 107 | nulla dignissim dapibus ultrices. 108 | </p> 109 | <a href="/#" className="special"> 110 | Learn more 111 | </a> 112 | </article> 113 | <article> 114 | <a href="/#" className="image"> 115 | <img src={pic5} alt="" /> 116 | </a> 117 | <h3 className="major">Nisl placerat</h3> 118 | <p> 119 | Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id 120 | nulla dignissim dapibus ultrices. 121 | </p> 122 | <a href="/#" className="special"> 123 | Learn more 124 | </a> 125 | </article> 126 | <article> 127 | <a href="/#" className="image"> 128 | <img src={pic6} alt="" /> 129 | </a> 130 | <h3 className="major">Ante fermentum</h3> 131 | <p> 132 | Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id 133 | nulla dignissim dapibus ultrices. 134 | </p> 135 | <a href="/#" className="special"> 136 | Learn more 137 | </a> 138 | </article> 139 | <article> 140 | <a href="/#" className="image"> 141 | <img src={pic7} alt="" /> 142 | </a> 143 | <h3 className="major">Fusce consequat</h3> 144 | <p> 145 | Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id 146 | nulla dignissim dapibus ultrices. 147 | </p> 148 | <a href="/#" className="special"> 149 | Learn more 150 | </a> 151 | </article> 152 | </section> 153 | <ul className="actions"> 154 | <li> 155 | <a href="/#" className="button"> 156 | Browse All 157 | </a> 158 | </li> 159 | </ul> 160 | </div> 161 | </section> 162 | </section> 163 | </Layout> 164 | ); 165 | 166 | export default IndexPage; 167 | -------------------------------------------------------------------------------- /src/assets/sass/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Solid State 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 | /// Sets the colors of the wrapper's top/bottom edges. 10 | /// @param {string} $color Color. 11 | @mixin wrapper-edges-color($color: black) { 12 | &:before, 13 | &:after { 14 | background-image: svg-url( 15 | '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,100 100,0 100,100" style="fill:#{$color};" /></svg>' 16 | ); 17 | } 18 | 19 | &:before { 20 | box-shadow: inset 0 -1px 0 0 $color, 0 1px 0 0 $color; 21 | } 22 | 23 | &:after { 24 | box-shadow: inset 0 -1px 0 0 $color, 0 1px 0 0 $color; 25 | } 26 | } 27 | 28 | #wrapper { 29 | > header { 30 | @include padding( 31 | 7.5em, 32 | 0, 33 | (3.5em, 0, _size(wrapper-edges, large) * -0.5, 0) 34 | ); 35 | 36 | .inner { 37 | margin: 0 auto; 38 | width: _size(inner); 39 | } 40 | 41 | h2 { 42 | border-bottom: solid 2px _palette(border); 43 | font-size: 2em; 44 | margin-bottom: _size(element-margin) * 0.4; 45 | padding-bottom: _size(element-margin) * 0.2; 46 | } 47 | 48 | p { 49 | font-family: _font(family-heading); 50 | font-size: 1em; 51 | font-weight: _font(weight-heading); 52 | letter-spacing: _font(kern-heading); 53 | line-height: 2; 54 | text-transform: uppercase; 55 | } 56 | } 57 | 58 | @include breakpoint('<=large') { 59 | > header { 60 | @include padding(5em, 0, (4em, 0, _size(wrapper-edges, large) * 0.5, 0)); 61 | 62 | background-color: _palette(bg); 63 | 64 | background-image: linear-gradient( 65 | to top, 66 | transparentize(_palette(bg), 0.2), 67 | transparentize(_palette(bg), 0.2) 68 | ), 69 | url('../images/bg.jpg'); 70 | 71 | background-size: auto, cover; 72 | 73 | background-position: center, 0% 30%; 74 | 75 | margin-bottom: (_size(wrapper-edges, large) * -1); 76 | } 77 | } 78 | 79 | @include breakpoint('<=medium') { 80 | > header { 81 | @include padding( 82 | 7em, 83 | 3em, 84 | (4em, 0, _size(wrapper-edges, medium) * 0.5, 0) 85 | ); 86 | 87 | background-size: auto, cover; 88 | 89 | background-position: center, 0% 0%; 90 | 91 | margin-bottom: (_size(wrapper-edges, medium) * -1); 92 | 93 | .inner { 94 | width: 100%; 95 | } 96 | } 97 | } 98 | 99 | @include breakpoint('<=small') { 100 | > header { 101 | @include padding( 102 | 3.75em, 103 | 2em, 104 | (2.75em, 0, _size(wrapper-edges, small) * 0.5, 0) 105 | ); 106 | 107 | background-size: auto, 125%; 108 | 109 | margin-bottom: (_size(wrapper-edges, small) * -1); 110 | 111 | h2 { 112 | font-size: 1.25em; 113 | } 114 | 115 | p { 116 | font-size: 0.8em; 117 | } 118 | } 119 | } 120 | } 121 | 122 | .wrapper { 123 | background-color: _palette(bg); 124 | margin: _size(wrapper-edges, large) 0; 125 | position: relative; 126 | @include wrapper-edges-color(_palette(bg)); 127 | 128 | &:before, 129 | &:after { 130 | background-repeat: no-repeat; 131 | background-size: 100% 100%; 132 | content: ''; 133 | display: block; 134 | height: _size(wrapper-edges, large); 135 | position: absolute; 136 | width: 100%; 137 | } 138 | 139 | &:before { 140 | left: 0; 141 | top: (_size(wrapper-edges, large) * -1); 142 | } 143 | 144 | &:after { 145 | @include vendor('transform', 'scaleY(-1)'); 146 | bottom: (_size(wrapper-edges, large) * -1); 147 | left: 0; 148 | } 149 | 150 | &.alt { 151 | &:before { 152 | @include vendor('transform', 'scaleX(-1)'); 153 | } 154 | 155 | &:after { 156 | @include vendor('transform', 'scaleY(-1) scaleX(-1)'); 157 | } 158 | } 159 | 160 | .inner { 161 | @include padding(3em, 0); 162 | margin: 0 auto; 163 | width: _size(inner); 164 | } 165 | 166 | @for $i from 2 through _misc(max-wrapper-styles) { 167 | $j: 3 * ($i - 1); 168 | $color: desaturate(lighten(_palette(bg), $j), $j * 0.5); 169 | 170 | &.style#{$i} { 171 | background-color: $color; 172 | @include wrapper-edges-color($color); 173 | } 174 | } 175 | 176 | &.spotlight { 177 | @include wrapper-edges-color(_palette(accent)); 178 | background-color: _palette(accent); 179 | 180 | .inner { 181 | @include vendor('display', 'flex'); 182 | @include vendor('align-items', 'center'); 183 | @include vendor('flex-direction', 'row'); 184 | } 185 | 186 | .image { 187 | border-radius: 100%; 188 | margin: 0 _size(section-spacing, large) _size(element-margin) 0; 189 | width: 22em; 190 | overflow: hidden; 191 | -ms-flex: 1; 192 | 193 | img { 194 | border-radius: 100%; 195 | width: 100%; 196 | } 197 | } 198 | 199 | .content { 200 | width: 100%; 201 | -ms-flex: 2; 202 | } 203 | 204 | &:nth-child(2n - 1) { 205 | .inner { 206 | @include vendor('flex-direction', 'row-reverse'); 207 | text-align: right; 208 | } 209 | 210 | .image { 211 | margin: 0 0 _size(element-margin) _size(section-spacing, large); 212 | } 213 | } 214 | 215 | @for $i from 2 through _misc(max-wrapper-styles) { 216 | $j: 3 * ($i - 1); 217 | $color: saturate(darken(_palette(accent), $j), $j * 0.5); 218 | 219 | &.style#{$i} { 220 | background-color: $color; 221 | @include wrapper-edges-color($color); 222 | } 223 | } 224 | } 225 | 226 | @include breakpoint('<=medium') { 227 | margin: _size(wrapper-edges, medium) 0; 228 | 229 | &:before, 230 | &:after { 231 | height: _size(wrapper-edges, medium); 232 | } 233 | 234 | &:before { 235 | top: (_size(wrapper-edges, medium) * -1); 236 | } 237 | 238 | &:after { 239 | bottom: (_size(wrapper-edges, medium) * -1); 240 | left: 0; 241 | } 242 | 243 | .inner { 244 | @include padding(3em, 3em); 245 | width: 100%; 246 | } 247 | 248 | &.spotlight { 249 | .image { 250 | margin: 0 _size(section-spacing, medium) _size(element-margin) 0; 251 | width: 32em; 252 | } 253 | 254 | &:nth-child(2n - 1) { 255 | .image { 256 | margin: 0 0 _size(element-margin) _size(section-spacing, medium); 257 | } 258 | } 259 | } 260 | } 261 | 262 | @include breakpoint('<=small') { 263 | margin: _size(wrapper-edges, small) 0; 264 | 265 | &:before, 266 | &:after { 267 | height: _size(wrapper-edges, small); 268 | } 269 | 270 | &:before { 271 | top: (_size(wrapper-edges, small) * -1); 272 | } 273 | 274 | &:after { 275 | bottom: (_size(wrapper-edges, small) * -1); 276 | left: 0; 277 | } 278 | 279 | .inner { 280 | @include padding(2em, 2em); 281 | } 282 | 283 | &.spotlight { 284 | .inner { 285 | @include vendor('align-items', 'flex-start'); 286 | } 287 | 288 | .image { 289 | width: 19em; 290 | margin: 0 _size(section-spacing, small) _size(element-margin) 0; 291 | } 292 | 293 | &:nth-child(2n - 1) { 294 | .image { 295 | margin: 0 0 _size(element-margin) _size(section-spacing, small); 296 | } 297 | } 298 | } 299 | } 300 | 301 | @include breakpoint('<=xsmall') { 302 | &.spotlight { 303 | .inner { 304 | display: block; 305 | } 306 | 307 | .image { 308 | margin: 0 0 (_size(element-margin) * 0.5) 0 !important; 309 | max-width: 85%; 310 | width: 12em; 311 | } 312 | } 313 | } 314 | 315 | @include breakpoint('<=xxsmall') { 316 | .inner { 317 | @include padding(2em, 1.5em); 318 | } 319 | } 320 | } 321 | -------------------------------------------------------------------------------- /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 pic5 from '../assets/images/pic05.jpg'; 8 | import pic6 from '../assets/images/pic06.jpg'; 9 | import pic7 from '../assets/images/pic07.jpg'; 10 | import pic8 from '../assets/images/pic08.jpg'; 11 | const IndexPage = () => <Layout fullMenu> 12 | <section id="wrapper"> 13 | <header> 14 | <div className="inner"> 15 | <h2>Elements</h2> 16 | <p>Phasellus non pulvinar erat. Fusce tincidunt nisl eget ipsum.</p> 17 | </div> 18 | </header> 19 | 20 | <div className="wrapper"> 21 | <div className="inner"> 22 | 23 | <section> 24 | <h3 className="major">Text</h3> 25 | <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>. 26 | This is <sup>superscript</sup> text and this is <sub>subscript</sub> text. 27 | This is <u>underlined</u> and this is code: <code>for (;;) { `{...}` }</code>. Finally, <a href="/#">this is a link</a>.</p> 28 | <h4>Blockquote</h4> 29 | <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> 30 | <h4>Preformatted</h4> 31 | <pre> 32 | <code>i = 0; 33 | 34 | while (!deck.isInOrder()) {`{ 35 | print 'Iteration ' + i; 36 | deck.shuffle(); 37 | i++; 38 | }`} 39 | 40 | print 'It took ' + i + ' iterations to sort the deck.'; 41 | </code> 42 | </pre> 43 | </section> 44 | 45 | <section> 46 | <h3 className="major">Lists</h3> 47 | <div className="row"> 48 | <div className="col-6 col-12-medium"> 49 | <h4>Unordered</h4> 50 | <ul> 51 | <li>Dolor pulvinar etiam.</li> 52 | <li>Sagittis adipiscing.</li> 53 | <li>Felis enim feugiat.</li> 54 | </ul> 55 | <h4>Alternate</h4> 56 | <ul className="alt"> 57 | <li>Dolor pulvinar etiam.</li> 58 | <li>Sagittis adipiscing.</li> 59 | <li>Felis enim feugiat.</li> 60 | </ul> 61 | </div> 62 | <div className="col-6 col-12-medium"> 63 | <h4>Ordered</h4> 64 | <ol> 65 | <li>Dolor pulvinar etiam.</li> 66 | <li>Etiam vel felis viverra.</li> 67 | <li>Felis enim feugiat.</li> 68 | <li>Dolor pulvinar etiam.</li> 69 | <li>Etiam vel felis lorem.</li> 70 | <li>Felis enim et feugiat.</li> 71 | </ol> 72 | <h4>Icons</h4> 73 | <ul className="icons"> 74 | <li><a href="/#" className="icon fa-twitter"><span className="label">Twitter</span></a></li> 75 | <li><a href="/#" className="icon fa-facebook"><span className="label">Facebook</span></a></li> 76 | <li><a href="/#" className="icon fa-instagram"><span className="label">Instagram</span></a></li> 77 | <li><a href="/#" className="icon fa-github"><span className="label">Github</span></a></li> 78 | </ul> 79 | </div> 80 | </div> 81 | <h4>Actions</h4> 82 | <div className="row"> 83 | <div className="col-6 col-12-medium"> 84 | <ul className="actions"> 85 | <li><a href="/#" className="button primary">Default</a></li> 86 | <li><a href="/#" className="button">Default</a></li> 87 | </ul> 88 | <ul className="actions small"> 89 | <li><a href="/#" className="button primary small">Small</a></li> 90 | <li><a href="/#" className="button small">Small</a></li> 91 | </ul> 92 | <ul className="actions stacked"> 93 | <li><a href="/#" className="button primary">Default</a></li> 94 | <li><a href="/#" className="button">Default</a></li> 95 | </ul> 96 | <ul className="actions stacked small"> 97 | <li><a href="/#" className="button primary small">Small</a></li> 98 | <li><a href="/#" className="button small">Small</a></li> 99 | </ul> 100 | </div> 101 | <div className="col-6 col-12-medium"> 102 | <ul className="actions stacked"> 103 | <li><a href="/#" className="button primary fit">Default</a></li> 104 | <li><a href="/#" className="button fit">Default</a></li> 105 | </ul> 106 | <ul className="actions stacked small"> 107 | <li><a href="/#" className="button primary small fit">Small</a></li> 108 | <li><a href="/#" className="button small fit">Small</a></li> 109 | </ul> 110 | </div> 111 | </div> 112 | <h4>Pagination</h4> 113 | <ul className="pagination"> 114 | <li><span className="button small disabled">Prev</span></li> 115 | <li><a href="/#" className="page active">1</a></li> 116 | <li><a href="/#" className="page">2</a></li> 117 | <li><a href="/#" className="page">3</a></li> 118 | <li><span>…</span></li> 119 | <li><a href="/#" className="page">8</a></li> 120 | <li><a href="/#" className="page">9</a></li> 121 | <li><a href="/#" className="page">10</a></li> 122 | <li><a href="/#" className="button small">Next</a></li> 123 | </ul> 124 | </section> 125 | 126 | <section> 127 | <h3 className="major">Table</h3> 128 | <h4>Default</h4> 129 | <div className="table-wrapper"> 130 | <table> 131 | <thead> 132 | <tr> 133 | <th>Name</th> 134 | <th>Description</th> 135 | <th>Price</th> 136 | </tr> 137 | </thead> 138 | <tbody> 139 | <tr> 140 | <td>Item One</td> 141 | <td>Ante turpis integer aliquet porttitor.</td> 142 | <td>29.99</td> 143 | </tr> 144 | <tr> 145 | <td>Item Two</td> 146 | <td>Vis ac commodo adipiscing arcu aliquet.</td> 147 | <td>19.99</td> 148 | </tr> 149 | <tr> 150 | <td>Item Three</td> 151 | <td> Morbi faucibus arcu accumsan lorem.</td> 152 | <td>29.99</td> 153 | </tr> 154 | <tr> 155 | <td>Item Four</td> 156 | <td>Vitae integer tempus condimentum.</td> 157 | <td>19.99</td> 158 | </tr> 159 | <tr> 160 | <td>Item Five</td> 161 | <td>Ante turpis integer aliquet porttitor.</td> 162 | <td>29.99</td> 163 | </tr> 164 | </tbody> 165 | <tfoot> 166 | <tr> 167 | <td colSpan="2"></td> 168 | <td>100.00</td> 169 | </tr> 170 | </tfoot> 171 | </table> 172 | </div> 173 | 174 | <h4>Alternate</h4> 175 | <div className="table-wrapper"> 176 | <table className="alt"> 177 | <thead> 178 | <tr> 179 | <th>Name</th> 180 | <th>Description</th> 181 | <th>Price</th> 182 | </tr> 183 | </thead> 184 | <tbody> 185 | <tr> 186 | <td>Item One</td> 187 | <td>Ante turpis integer aliquet porttitor.</td> 188 | <td>29.99</td> 189 | </tr> 190 | <tr> 191 | <td>Item Two</td> 192 | <td>Vis ac commodo adipiscing arcu aliquet.</td> 193 | <td>19.99</td> 194 | </tr> 195 | <tr> 196 | <td>Item Three</td> 197 | <td> Morbi faucibus arcu accumsan lorem.</td> 198 | <td>29.99</td> 199 | </tr> 200 | <tr> 201 | <td>Item Four</td> 202 | <td>Vitae integer tempus condimentum.</td> 203 | <td>19.99</td> 204 | </tr> 205 | <tr> 206 | <td>Item Five</td> 207 | <td>Ante turpis integer aliquet porttitor.</td> 208 | <td>29.99</td> 209 | </tr> 210 | </tbody> 211 | <tfoot> 212 | <tr> 213 | <td colSpan="2"></td> 214 | <td>100.00</td> 215 | </tr> 216 | </tfoot> 217 | </table> 218 | </div> 219 | </section> 220 | 221 | <section> 222 | <h3 className="major">Buttons</h3> 223 | <ul className="actions"> 224 | <li><a href="/#" className="button primary">Primary</a></li> 225 | <li><a href="/#" className="button">Default</a></li> 226 | </ul> 227 | <ul className="actions"> 228 | <li><a href="/#" className="button large">Large</a></li> 229 | <li><a href="/#" className="button small">Small</a></li> 230 | </ul> 231 | <ul className="actions fit"> 232 | <li><a href="/#" className="button fit">Fit</a></li> 233 | <li><a href="/#" className="button primary fit">Fit</a></li> 234 | <li><a href="/#" className="button fit">Fit</a></li> 235 | </ul> 236 | <ul className="actions fit small"> 237 | <li><a href="/#" className="button primary fit small">Fit + Small</a></li> 238 | <li><a href="/#" className="button fit small">Fit + Small</a></li> 239 | <li><a href="/#" className="button primary fit small">Fit + Small</a></li> 240 | </ul> 241 | <ul className="actions"> 242 | <li><a href="/#" className="button primary icon fa-download">Icon</a></li> 243 | <li><a href="/#" className="button icon fa-download">Icon</a></li> 244 | </ul> 245 | <ul className="actions"> 246 | <li><span className="button primary disabled">Disabled</span></li> 247 | <li><span className="button disabled">Disabled</span></li> 248 | </ul> 249 | </section> 250 | 251 | <section> 252 | <h3 className="major">Form</h3> 253 | <form method="post" action="#"> 254 | <div className="row gtr-uniform"> 255 | <div className="col-6 col-12-xsmall"> 256 | <label htmlFor="demo-name">Name</label> 257 | <input type="text" name="demo-name" id="demo-name" defaultValue="" /> 258 | </div> 259 | <div className="col-6 col-12-xsmall"> 260 | <label htmlFor="demo-email">Email</label> 261 | <input type="email" name="demo-email" id="demo-email" defaultValue="" /> 262 | </div> 263 | <div className="col-12"> 264 | <label htmlFor="demo-category">Category</label> 265 | <select name="demo-category" id="demo-category"> 266 | <option value="">-</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 Priority</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 Priority</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 Priority</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 | <label htmlFor="demo-message">Message</label> 295 | <textarea name="demo-message" id="demo-message" rows="6"></textarea> 296 | </div> 297 | <div className="col-12"> 298 | <ul className="actions"> 299 | <li><input type="submit" value="Send Message" className="primary" /></li> 300 | <li><input type="reset" value="Reset" /></li> 301 | </ul> 302 | </div> 303 | </div> 304 | </form> 305 | </section> 306 | 307 | <section> 308 | <h3 className="major">Image</h3> 309 | <h4>Fit</h4> 310 | <div className="box alt"> 311 | <div className="row gtr-uniform"> 312 | <div className="col-12"><span className="image fit"><img src={pic8} alt="" /></span></div> 313 | <div className="col-4"><span className="image fit"><img src={pic5} alt="" /></span></div> 314 | <div className="col-4"><span className="image fit"><img src={pic6} alt="" /></span></div> 315 | <div className="col-4"><span className="image fit"><img src={pic7} alt="" /></span></div> 316 | <div className="col-4"><span className="image fit"><img src={pic7} alt="" /></span></div> 317 | <div className="col-4"><span className="image fit"><img src={pic5} alt="" /></span></div> 318 | <div className="col-4"><span className="image fit"><img src={pic6} alt="" /></span></div> 319 | <div className="col-4"><span className="image fit"><img src={pic6} alt="" /></span></div> 320 | <div className="col-4"><span className="image fit"><img src={pic7} alt="" /></span></div> 321 | <div className="col-4"><span className="image fit"><img src={pic5} alt="" /></span></div> 322 | </div> 323 | </div> 324 | <h4>Left & Right</h4> 325 | <p><span className="image left"><img src={pic1} alt="" /></span>Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.</p> 326 | <p><span className="image right"><img src={pic2} alt="" /></span>Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui.</p> 327 | </section> 328 | 329 | </div> 330 | </div> 331 | 332 | </section> 333 | 334 | </Layout>; 335 | 336 | export default IndexPage; 337 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------