├── src ├── assets │ ├── images │ │ ├── .gitignore │ │ ├── bg.jpg │ │ ├── avatar.png │ │ ├── fulls │ │ │ ├── 01.jpg │ │ │ ├── 02.jpg │ │ │ ├── 03.jpg │ │ │ ├── 04.jpg │ │ │ ├── 05.jpg │ │ │ └── 06.jpg │ │ ├── thumbs │ │ │ ├── 01.jpg │ │ │ ├── 02.jpg │ │ │ ├── 03.jpg │ │ │ ├── 04.jpg │ │ │ ├── 05.jpg │ │ │ └── 06.jpg │ │ ├── website-icon.png │ │ └── gatsby+notion+netlify.png │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── scss │ │ ├── images │ │ │ └── overlay.png │ │ ├── libs │ │ │ ├── _functions.scss │ │ │ ├── _vars.scss │ │ │ ├── _mixins.scss │ │ │ └── _skel.scss │ │ ├── ie8.scss │ │ └── main.scss │ └── css │ │ └── font-awesome.min.css ├── pages │ ├── 404.js │ ├── blog.js │ ├── subscribe.js │ └── index.js ├── components │ ├── layout.js │ ├── newsItem.js │ ├── Header.js │ ├── postItem.js │ ├── Footer.js │ └── Gallery.js └── templates │ └── blogPost.js ├── .prettierrc ├── .github └── FUNDING.yml ├── .gitignore ├── gatsby-browser.js ├── gatsby-ssr.js ├── LICENSE ├── README.md ├── package.json ├── gatsby-config.js └── gatsby-node.js /src/assets/images/.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "semi": false, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/bg.jpg -------------------------------------------------------------------------------- /src/assets/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/avatar.png -------------------------------------------------------------------------------- /src/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/images/fulls/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/fulls/01.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/fulls/02.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/fulls/03.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/fulls/04.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/fulls/05.jpg -------------------------------------------------------------------------------- /src/assets/images/fulls/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/fulls/06.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/thumbs/01.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/thumbs/02.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/thumbs/03.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/thumbs/04.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/thumbs/05.jpg -------------------------------------------------------------------------------- /src/assets/images/thumbs/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/thumbs/06.jpg -------------------------------------------------------------------------------- /src/assets/images/website-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/website-icon.png -------------------------------------------------------------------------------- /src/assets/scss/images/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/scss/images/overlay.png -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/assets/images/gatsby+notion+netlify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/conradlin/gatsby-starter-strata-notion/HEAD/src/assets/images/gatsby+notion+netlify.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | ko_fi: codebushi 5 | -------------------------------------------------------------------------------- /.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-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/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | 4 | const NotFoundPage = () => ( 5 | 6 |

NOT FOUND

7 |

You just hit a route that doesn't exist... the sadness.

8 | 9 | ) 10 | 11 | export default NotFoundPage 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Attribution 3.0 2 | 3 | https://html5up.net/license 4 | 5 | All of the site templates I create for HTML5 UP are licensed under the Creative Commons Attribution 3.0 License, which means you can: 6 | 7 | Use them for personal stuff 8 | Use them for commercial stuff 9 | Change them however you like 10 | ... all for free, yo. In exchange, just give HTML5 UP credit for the design and tell your friends about it :) -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import '../assets/scss/main.scss' 3 | 4 | import Header from './Header' 5 | 6 | class Template extends React.Component { 7 | render() { 8 | const { children } = this.props 9 | 10 | return ( 11 |
12 |
13 | {children} 14 |
15 | ) 16 | } 17 | } 18 | 19 | export default Template 20 | -------------------------------------------------------------------------------- /src/components/newsItem.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby"; 3 | 4 | export default ({ data }) => { 5 | const { title, tags, cover_image, publish_date, desc, read_time, url, slug } = data 6 | 7 | return ( 8 |
9 | 10 |

{title}

11 |
Tags: {tags && tags.join(', ')}

Published: {publish_date.startDate}

Read Time: {read_time} mins
12 |

13 | 14 |
15 | ) 16 | } -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from "gatsby"; 3 | import Footer from './Footer' 4 | import avatar from '../assets/images/avatar.png' 5 | 6 | class Header extends React.Component { 7 | render() { 8 | return ( 9 | 17 | ) 18 | } 19 | } 20 | 21 | export default Header 22 | -------------------------------------------------------------------------------- /src/assets/scss/libs/_functions.scss: -------------------------------------------------------------------------------- 1 | /// Gets a duration value. 2 | /// @param {string} $keys Key(s). 3 | /// @return {string} Value. 4 | @function _duration($keys...) { 5 | @return val($duration, $keys...); 6 | } 7 | 8 | /// Gets a font value. 9 | /// @param {string} $keys Key(s). 10 | /// @return {string} Value. 11 | @function _font($keys...) { 12 | @return val($font, $keys...); 13 | } 14 | 15 | /// Gets a misc value. 16 | /// @param {string} $keys Key(s). 17 | /// @return {string} Value. 18 | @function _misc($keys...) { 19 | @return val($misc, $keys...); 20 | } 21 | 22 | /// Gets a palette value. 23 | /// @param {string} $keys Key(s). 24 | /// @return {string} Value. 25 | @function _palette($keys...) { 26 | @return val($palette, $keys...); 27 | } 28 | 29 | /// Gets a size value. 30 | /// @param {string} $keys Key(s). 31 | /// @return {string} Value. 32 | @function _size($keys...) { 33 | @return val($size, $keys...); 34 | } -------------------------------------------------------------------------------- /src/templates/blogPost.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { graphql } from 'gatsby' 3 | import Layout from '../components/layout' 4 | import { parseImageUrl } from '@conradlin/notabase/src/utils' 5 | 6 | 7 | export default ({ data }) => { 8 | const { posts: { title, tags, publish_date, html, url, slug, desc, color, cover_image } } = data 9 | 10 | return ( 11 | 12 |
13 |
{tags && tags.join(', ')}
14 |

{title}

15 |
16 |
17 | 18 | ) 19 | } 20 | 21 | export const query = graphql` 22 | query($slug: String!) { 23 | posts(slug: { eq: $slug }) { 24 | html 25 | title 26 | tags 27 | publish_date{ 28 | startDate(formatString: "YYYY-MMM-DD", fromNow: false) 29 | } 30 | url 31 | desc 32 | color 33 | cover_image 34 | } 35 | } 36 | ` -------------------------------------------------------------------------------- /src/pages/blog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { graphql } from 'gatsby' 3 | import PostItem from "../components/postItem" 4 | import Layout from '../components/layout' 5 | 6 | const Blog = (props) => { 7 | const { data: { allPosts } } = props 8 | return ( 9 | 10 |
11 | { 12 | allPosts.nodes.map(node => ) 13 | } 14 |
15 | 16 | ) 17 | } 18 | 19 | export default Blog 20 | export const query = graphql` 21 | query { 22 | allPosts(filter: {status: {eq: "published"}, content_type: {eq: "article"}} sort: { fields: [publish_date___startDate], order: DESC }) { 23 | nodes { 24 | title 25 | tags 26 | desc 27 | content_type 28 | status 29 | url 30 | read_time 31 | cover_image 32 | slug 33 | publish_date{ 34 | startDate(formatString: "YYYY-MMM-DD", fromNow: false) 35 | } 36 | } 37 | } 38 | } 39 | ` -------------------------------------------------------------------------------- /src/pages/subscribe.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { graphql } from 'gatsby' 3 | import NewsItem from "../components/newsItem" 4 | import Layout from '../components/layout' 5 | 6 | const Subscribe = (props) => { 7 | const { data: { allPosts } } = props 8 | return ( 9 | 10 |
11 | { 12 | allPosts.nodes.map(node => ) 13 | } 14 |
15 | 16 | ) 17 | } 18 | 19 | export default Subscribe 20 | export const query = graphql` 21 | query { 22 | allPosts(filter: {status: {eq: "published"}, content_type: {eq: "newsletter"}} sort: { fields: [publish_date___startDate], order: DESC }) { 23 | nodes { 24 | title 25 | tags 26 | desc 27 | content_type 28 | status 29 | url 30 | read_time 31 | cover_image 32 | slug 33 | publish_date{ 34 | startDate(formatString: "YYYY-MMM-DD", fromNow: false) 35 | } 36 | } 37 | } 38 | } 39 | ` -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gatsby-starter-strata-notion 2 | 3 | **This is a starter for Gatsby.js V2, demonstrating successful integration with notion as a CMS** 4 | 5 | Gatsby starter based on the Strata site template, designed by [HTML5 UP](https://html5up.net/strata). 6 | 7 | Integrated with notion as a CMS for demonstration purposes by [Conrad Lin](https://www.conradlin.com/blog/posts/host-gatsbyjs-blog-with-notion-cms-and-netlify-for-free/) 8 | 9 | [Watch the Video Guide 👇🏻](https://www.youtube.com/watch?v=dMYKXVf88J0) 10 | 11 | [![Video Guide](https://github.com/conradlin/gatsby-starter-strata-notion/blob/master/src/assets/images/gatsby%2Bnotion%2Bnetlify.png)](https://www.youtube.com/watch?v=dMYKXVf88J0) 12 | 13 | ## Preview 14 | 15 | https://gatsby-notion-demo.netlify.com/ 16 | 17 | ## Installation 18 | 19 | Install this starter (assuming Gatsby is installed) by running from your CLI: 20 | `gatsby new gatsby-starter-strata-notion https://github.com/conradlin/gatsby-starter-strata-notion` 21 | 22 | Run `gatsby develop` or `yarn develop` in the terminal to start. 23 | -------------------------------------------------------------------------------- /src/components/postItem.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import { parseImageUrl } from '@conradlin/notabase/src/utils' 4 | 5 | export default ({ data }) => { 6 | const { title, tags, cover_image, publish_date, desc, read_time, url, slug } = data 7 | let coverimageURL = parseImageUrl(cover_image[0], 1000, slug) 8 | 9 | return ( 10 |
11 | 12 | {`${title} 17 |

{title}

18 |
Tags: {tags && tags.join(', ')}

Published: {publish_date.startDate}

Read Time: {read_time} mins
19 |

20 | 21 |
22 | ) 23 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-default", 3 | "description": "Gatsby default starter", 4 | "version": "1.0.0", 5 | "author": "Hunter Chang", 6 | "dependencies": { 7 | "@conradlin/gatsby-source-notion-database": "^0.7.5", 8 | "gatsby": "^2.15.14", 9 | "gatsby-plugin-manifest": "^2.2.16", 10 | "gatsby-plugin-offline": "^3.0.6", 11 | "gatsby-plugin-react-helmet": "^3.1.7", 12 | "gatsby-plugin-sass": "^2.1.14", 13 | "node-sass": "^4.12.0", 14 | "react": "^16.9.0", 15 | "react-dom": "^16.9.0", 16 | "react-helmet": "^5.2.1", 17 | "react-images": "^1.0.0" 18 | }, 19 | "keywords": [ 20 | "gatsby" 21 | ], 22 | "license": "MIT", 23 | "scripts": { 24 | "build": "gatsby build", 25 | "develop": "gatsby develop", 26 | "format": "prettier --write '**/*.js'", 27 | "test": "echo \"Error: no test specified\" && exit 1" 28 | }, 29 | "devDependencies": { 30 | "prettier": "^1.18.2" 31 | }, 32 | "repository": { 33 | "type": "git", 34 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class Footer extends React.Component { 4 | render() { 5 | return ( 6 | 18 | ) 19 | } 20 | } 21 | 22 | export default Footer 23 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: "Gatsby Starter - Strata by HTML5 UP", 4 | author: "Hunter Chang", 5 | description: "A Gatsby.js Starter based on Strata by HTML5 UP" 6 | }, 7 | plugins: [ 8 | 'gatsby-plugin-react-helmet', 9 | { 10 | resolve: `gatsby-plugin-manifest`, 11 | options: { 12 | name: 'gatsby-starter-default', 13 | short_name: 'starter', 14 | start_url: '/', 15 | background_color: '#663399', 16 | theme_color: '#663399', 17 | display: 'minimal-ui', 18 | icon: 'src/assets/images/website-icon.png', // This path is relative to the root of the site. 19 | }, 20 | }, 21 | { 22 | resolve: `@conradlin/gatsby-source-notion-database`, 23 | options: { 24 | sourceConfig: [ 25 | { 26 | name: 'posts', 27 | table: 'https://www.notion.so/conradlin/1aa283fcd5ae4a73ba0f73c062de745e?v=6a40014bee144152b55203e2caf0c02e', 28 | cacheType: 'html' 29 | } 30 | ] 31 | } 32 | }, 33 | 'gatsby-plugin-sass', 34 | 'gatsby-plugin-offline' 35 | ], 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/scss/libs/_vars.scss: -------------------------------------------------------------------------------- 1 | // Misc. 2 | $misc: ( 3 | z-index-base: 10000 4 | ); 5 | 6 | // Duration. 7 | $duration: ( 8 | transition: 0.2s 9 | ); 10 | 11 | // Size. 12 | $size: ( 13 | border-radius: 0.35em, 14 | element-height: 2.75em, 15 | element-margin: 2em 16 | ); 17 | 18 | // Font. 19 | $font: ( 20 | family: ('Source Sans Pro', Helvetica, sans-serif), 21 | family-fixed: ('Courier New', monospace), 22 | weight: 400, 23 | weight-bold: 400 24 | ); 25 | 26 | // Palette. 27 | $palette: ( 28 | bg: #fff, 29 | fg: #a2a2a2, 30 | fg-bold: #787878, 31 | fg-light: #b2b2b2, 32 | border: #efefef, 33 | border-bg: #f7f7f7, 34 | border2: #dfdfdf, 35 | border2-bg: #e7e7e7, 36 | 37 | accent1: ( 38 | bg: #49bf9d, 39 | fg: mix(#49bf9d, #ffffff, 25%), 40 | fg-bold: #ffffff, 41 | fg-light: mix(#49bf9d, #ffffff, 40%), 42 | border: rgba(255,255,255,0.25), 43 | border-bg: rgba(255,255,255,0.075), 44 | border2: rgba(255,255,255,0.5), 45 | border2-bg: rgba(255,255,255,0.2) 46 | ), 47 | 48 | accent2: ( 49 | bg: #1f1815, 50 | fg: rgba(255,255,255,0.5), 51 | fg-bold: #ffffff, 52 | fg-light: rgba(255,255,255,0.4), 53 | border: rgba(255,255,255,0.25), 54 | border-bg: rgba(255,255,255,0.075), 55 | border2: rgba(255,255,255,0.5), 56 | border2-bg: rgba(255,255,255,0.2) 57 | ) 58 | ); -------------------------------------------------------------------------------- /src/assets/scss/ie8.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/skel'; 5 | 6 | /* 7 | Strata by HTML5 UP 8 | html5up.net | @ajlkn 9 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 10 | */ 11 | 12 | /* Button */ 13 | 14 | input[type="submit"], 15 | input[type="reset"], 16 | input[type="button"], 17 | .button { 18 | position: relative; 19 | -ms-behavior: url('assets/js/ie/PIE.htc'); 20 | } 21 | 22 | /* Form */ 23 | 24 | input[type="text"], 25 | input[type="password"], 26 | input[type="email"], 27 | select, 28 | textarea { 29 | position: relative; 30 | -ms-behavior: url('assets/js/ie/PIE.htc'); 31 | } 32 | 33 | input[type="text"], 34 | input[type="password"], 35 | input[type="email"], 36 | select { 37 | height: _size(element-height); 38 | line-height: _size(element-height); 39 | } 40 | 41 | input[type="checkbox"], 42 | input[type="radio"] { 43 | & + label { 44 | &:before { 45 | display: none; 46 | } 47 | } 48 | } 49 | 50 | /* Image */ 51 | 52 | .image { 53 | position: relative; 54 | -ms-behavior: url('assets/js/ie/PIE.htc'); 55 | 56 | &:before, &:after { 57 | display: none !important; 58 | } 59 | 60 | img { 61 | position: relative; 62 | -ms-behavior: url('assets/js/ie/PIE.htc'); 63 | } 64 | } 65 | 66 | /* Header */ 67 | 68 | #header { 69 | background-image: url('../../images/bg.jpg'); 70 | background-repeat: no-repeat; 71 | background-size: cover; 72 | -ms-behavior: url('assets/js/ie/backgroundsize.min.htc'); 73 | 74 | h1 { 75 | color: _palette(accent2, fg-bold); 76 | } 77 | } 78 | 79 | /* Footer */ 80 | 81 | #footer { 82 | .icons { 83 | a { 84 | color: _palette(accent2, fg-bold); 85 | } 86 | } 87 | } -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | // graphql function doesn't throw an error so we have to check to check for the result.errors to throw manually 2 | const path = require(`path`) 3 | 4 | exports.createPages = async ({ graphql, actions }) => { 5 | const { createPage } = actions 6 | 7 | const blogPost = await graphql(` 8 | query { 9 | allPosts(filter: {status: {eq: "published"}, content_type: {eq: "article"}}) { 10 | nodes { 11 | slug 12 | url 13 | } 14 | } 15 | } 16 | `).then(result => { 17 | if (result.errors) { 18 | Promise.reject(result.errors); 19 | } 20 | 21 | result.data.allPosts.nodes.forEach(({ slug, url }) => { 22 | createPage({ 23 | path: `blog/posts/${url}`, 24 | component: path.resolve(`./src/templates/blogPost.js`), 25 | context: { 26 | // Data passed to context is available 27 | // in page queries as GraphQL variables. 28 | slug: slug, 29 | }, 30 | }); 31 | }); 32 | }); 33 | const newsPost = await graphql(` 34 | query { 35 | allPosts(filter: {status: {eq: "published"}, content_type: {eq: "newsletter"}}) { 36 | nodes { 37 | slug 38 | url 39 | } 40 | } 41 | } 42 | `).then(result => { 43 | if (result.errors) { 44 | Promise.reject(result.errors); 45 | } 46 | 47 | result.data.allPosts.nodes.forEach(({ slug, url }) => { 48 | createPage({ 49 | path: `subscribe/posts/${url}`, 50 | component: path.resolve(`./src/templates/blogPost.js`), 51 | context: { 52 | // Data passed to context is available 53 | // in page queries as GraphQL variables. 54 | slug: slug, 55 | }, 56 | }); 57 | }); 58 | }); 59 | 60 | return Promise.all([blogPost, newsPost]); 61 | }; -------------------------------------------------------------------------------- /src/components/Gallery.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React, { Component } from 'react'; 3 | import Carousel, { Modal, ModalGateway } from "react-images"; 4 | 5 | class Gallery extends Component { 6 | constructor () { 7 | super(); 8 | 9 | this.state = { 10 | lightboxIsOpen: false, 11 | selectedIndex: 0 12 | }; 13 | 14 | this.toggleLightbox = this.toggleLightbox.bind(this); 15 | } 16 | toggleLightbox(selectedIndex) { 17 | this.setState(state => ({ 18 | lightboxIsOpen: !state.lightboxIsOpen, 19 | selectedIndex 20 | })); 21 | } 22 | renderGallery (images) { 23 | if (!images) return; 24 | 25 | const gallery = images.map((obj, i) => { 26 | return ( 27 | 42 | ); 43 | }); 44 | 45 | return ( 46 |
47 | {gallery} 48 |
49 | ); 50 | } 51 | render () { 52 | const { images } = this.props; 53 | const { selectedIndex, lightboxIsOpen } = this.state; 54 | 55 | return ( 56 |
57 | {this.renderGallery(images)} 58 | 59 | {lightboxIsOpen && ( 60 | 61 | 62 | 63 | )} 64 | 65 |
66 | ); 67 | } 68 | } 69 | 70 | Gallery.displayName = 'Gallery'; 71 | Gallery.propTypes = { 72 | images: PropTypes.array 73 | }; 74 | 75 | export default Gallery; -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Helmet from 'react-helmet' 3 | import { Link } from "gatsby"; 4 | 5 | import Layout from '../components/layout' 6 | 7 | class HomeIndex extends React.Component { 8 | 9 | render() { 10 | const siteTitle = "Gatsby Starter - Strata" 11 | const siteDescription = "Site description" 12 | 13 | return ( 14 | 15 | 16 | {siteTitle} 17 | 18 | 19 | 20 |
21 | 22 |
23 |
24 |

This is a starter for Gatsby.js V2, demonstrating successful integration with notion as a CMS

25 |
26 |

Based on the Strata site template, designed by HTML5 UP.
Integrated with notion as a CMS for demonstration purposes by Conrad Lin

27 | 30 |
31 | 32 |
33 |

Recent Sharing

34 | 35 |
    36 |
  • All Articles
    • 37 |
  • All Newsletters
    • 38 |
39 |
40 | 41 |
42 |

Get In Touch

43 |

Accumsan pellentesque commodo blandit enim arcu non at amet id arcu magna. Accumsan orci faucibus id eu lorem semper nunc nisi lorem vulputate lorem neque lorem ipsum dolor.

44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
    54 |
    • 55 |
56 |
57 |
58 |
    59 |
  • 60 |

    Address

    61 | 1234 Somewhere Rd.
    62 | Nashville, TN 00000
    63 | United States 64 |
    • 65 |
  • 66 |

    Phone

    67 | 000-000-0000 68 |
    • 69 |
  • 70 |

    Email

    71 | lets.talk@conradlin.com 72 |
    • 73 |
74 |
75 |
76 |
77 | 78 |
79 | 80 | 81 | ) 82 | } 83 | } 84 | 85 | export default HomeIndex -------------------------------------------------------------------------------- /src/assets/scss/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 | } 64 | 65 | /// Initializes base flexgrid classes. 66 | /// @param {string} $vertical-align Vertical alignment of cells. 67 | /// @param {string} $horizontal-align Horizontal alignment of cells. 68 | @mixin flexgrid-base($vertical-align: null, $horizontal-align: null) { 69 | 70 | // Grid. 71 | @include vendor('display', 'flex'); 72 | @include vendor('flex-wrap', 'wrap'); 73 | 74 | // Vertical alignment. 75 | @if ($vertical-align == top) { 76 | @include vendor('align-items', 'flex-start'); 77 | } 78 | @else if ($vertical-align == bottom) { 79 | @include vendor('align-items', 'flex-end'); 80 | } 81 | @else if ($vertical-align == center) { 82 | @include vendor('align-items', 'center'); 83 | } 84 | @else { 85 | @include vendor('align-items', 'stretch'); 86 | } 87 | 88 | // Horizontal alignment. 89 | @if ($horizontal-align != null) { 90 | text-align: $horizontal-align; 91 | } 92 | 93 | // Cells. 94 | > * { 95 | @include vendor('flex-shrink', '1'); 96 | @include vendor('flex-grow', '0'); 97 | } 98 | 99 | } 100 | 101 | /// Sets up flexgrid columns. 102 | /// @param {integer} $columns Columns. 103 | @mixin flexgrid-columns($columns) { 104 | 105 | > * { 106 | $cell-width: 100% / $columns; 107 | width: #{$cell-width}; 108 | } 109 | 110 | } 111 | 112 | /// Sets up flexgrid gutters. 113 | /// @param {integer} $columns Columns. 114 | /// @param {number} $gutters Gutters. 115 | @mixin flexgrid-gutters($columns, $gutters) { 116 | 117 | // Apply padding. 118 | > * { 119 | $cell-width: 100% / $columns; 120 | 121 | padding: ($gutters * 0.5); 122 | width: $cell-width; 123 | } 124 | 125 | } 126 | 127 | /// Sets up flexgrid gutters (flush). 128 | /// @param {integer} $columns Columns. 129 | /// @param {number} $gutters Gutters. 130 | @mixin flexgrid-gutters-flush($columns, $gutters) { 131 | 132 | // Apply padding. 133 | > * { 134 | $cell-width: 100% / $columns; 135 | $cell-width-pad: $gutters / $columns; 136 | 137 | padding: ($gutters * 0.5); 138 | width: calc(#{$cell-width} + #{$cell-width-pad}); 139 | } 140 | 141 | // Clear top/bottom gutters. 142 | > :nth-child(-n + #{$columns}) { 143 | padding-top: 0; 144 | } 145 | 146 | > :nth-last-child(-n + #{$columns}) { 147 | padding-bottom: 0; 148 | } 149 | 150 | // Clear left/right gutters. 151 | > :nth-child(#{$columns}n + 1) { 152 | padding-left: 0; 153 | } 154 | 155 | > :nth-child(#{$columns}n) { 156 | padding-right: 0; 157 | } 158 | 159 | // Adjust widths of leftmost and rightmost cells. 160 | > :nth-child(#{$columns}n + 1), 161 | > :nth-child(#{$columns}n) { 162 | $cell-width: 100% / $columns; 163 | $cell-width-pad: ($gutters / $columns) - ($gutters / 2); 164 | 165 | width: calc(#{$cell-width} + #{$cell-width-pad}); 166 | } 167 | 168 | } 169 | 170 | /// Reset flexgrid gutters (flush only). 171 | /// Used to override a previous set of flexgrid gutter classes. 172 | /// @param {integer} $columns Columns. 173 | /// @param {number} $gutters Gutters. 174 | /// @param {integer} $prev-columns Previous columns. 175 | @mixin flexgrid-gutters-flush-reset($columns, $gutters, $prev-columns) { 176 | 177 | // Apply padding. 178 | > * { 179 | $cell-width: 100% / $prev-columns; 180 | $cell-width-pad: $gutters / $prev-columns; 181 | 182 | padding: ($gutters * 0.5); 183 | width: calc(#{$cell-width} + #{$cell-width-pad}); 184 | } 185 | 186 | // Clear top/bottom gutters. 187 | > :nth-child(-n + #{$prev-columns}) { 188 | padding-top: ($gutters * 0.5); 189 | } 190 | 191 | > :nth-last-child(-n + #{$prev-columns}) { 192 | padding-bottom: ($gutters * 0.5); 193 | } 194 | 195 | // Clear left/right gutters. 196 | > :nth-child(#{$prev-columns}n + 1) { 197 | padding-left: ($gutters * 0.5); 198 | } 199 | 200 | > :nth-child(#{$prev-columns}n) { 201 | padding-right: ($gutters * 0.5); 202 | } 203 | 204 | // Adjust widths of leftmost and rightmost cells. 205 | > :nth-child(#{$prev-columns}n + 1), 206 | > :nth-child(#{$prev-columns}n) { 207 | $cell-width: 100% / $columns; 208 | $cell-width-pad: $gutters / $columns; 209 | 210 | padding: ($gutters * 0.5); 211 | width: calc(#{$cell-width} + #{$cell-width-pad}); 212 | } 213 | 214 | } 215 | 216 | /// Adds debug styles to current flexgrid element. 217 | @mixin flexgrid-debug() { 218 | 219 | box-shadow: 0 0 0 1px red; 220 | 221 | > * { 222 | box-shadow: inset 0 0 0 1px blue; 223 | position: relative; 224 | 225 | > * { 226 | position: relative; 227 | box-shadow: inset 0 0 0 1px green; 228 | } 229 | } 230 | 231 | } 232 | 233 | /// Initializes the current element as a flexgrid. 234 | /// @param {integer} $columns Columns (optional). 235 | /// @param {number} $gutters Gutters (optional). 236 | /// @param {bool} $flush If true, clears padding around the very edge of the grid. 237 | @mixin flexgrid($settings: ()) { 238 | 239 | // Settings. 240 | 241 | // Debug. 242 | $debug: false; 243 | 244 | @if (map-has-key($settings, 'debug')) { 245 | $debug: map-get($settings, 'debug'); 246 | } 247 | 248 | // Vertical align. 249 | $vertical-align: null; 250 | 251 | @if (map-has-key($settings, 'vertical-align')) { 252 | $vertical-align: map-get($settings, 'vertical-align'); 253 | } 254 | 255 | // Horizontal align. 256 | $horizontal-align: null; 257 | 258 | @if (map-has-key($settings, 'horizontal-align')) { 259 | $horizontal-align: map-get($settings, 'horizontal-align'); 260 | } 261 | 262 | // Columns. 263 | $columns: null; 264 | 265 | @if (map-has-key($settings, 'columns')) { 266 | $columns: map-get($settings, 'columns'); 267 | } 268 | 269 | // Gutters. 270 | $gutters: 0; 271 | 272 | @if (map-has-key($settings, 'gutters')) { 273 | $gutters: map-get($settings, 'gutters'); 274 | } 275 | 276 | // Flush. 277 | $flush: true; 278 | 279 | @if (map-has-key($settings, 'flush')) { 280 | $flush: map-get($settings, 'flush'); 281 | } 282 | 283 | // Initialize base grid. 284 | @include flexgrid-base($vertical-align, $horizontal-align); 285 | 286 | // Debug? 287 | @if ($debug) { 288 | @include flexgrid-debug; 289 | } 290 | 291 | // Columns specified? 292 | @if ($columns != null) { 293 | 294 | // Initialize columns. 295 | @include flexgrid-columns($columns); 296 | 297 | // Gutters specified? 298 | @if ($gutters > 0) { 299 | 300 | // Flush gutters? 301 | @if ($flush) { 302 | 303 | // Initialize gutters (flush). 304 | @include flexgrid-gutters-flush($columns, $gutters); 305 | 306 | } 307 | 308 | // Otherwise ... 309 | @else { 310 | 311 | // Initialize gutters. 312 | @include flexgrid-gutters($columns, $gutters); 313 | 314 | } 315 | 316 | } 317 | 318 | } 319 | 320 | } 321 | 322 | /// Resizes a previously-initialized grid. 323 | /// @param {integer} $columns Columns. 324 | /// @param {number} $gutters Gutters (optional). 325 | /// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true). 326 | /// @param {bool} $flush If true, clears padding around the very edge of the grid. 327 | @mixin flexgrid-resize($settings: ()) { 328 | 329 | // Settings. 330 | 331 | // Columns. 332 | $columns: 1; 333 | 334 | @if (map-has-key($settings, 'columns')) { 335 | $columns: map-get($settings, 'columns'); 336 | } 337 | 338 | // Gutters. 339 | $gutters: 0; 340 | 341 | @if (map-has-key($settings, 'gutters')) { 342 | $gutters: map-get($settings, 'gutters'); 343 | } 344 | 345 | // Previous columns. 346 | $prev-columns: false; 347 | 348 | @if (map-has-key($settings, 'prev-columns')) { 349 | $prev-columns: map-get($settings, 'prev-columns'); 350 | } 351 | 352 | // Flush. 353 | $flush: true; 354 | 355 | @if (map-has-key($settings, 'flush')) { 356 | $flush: map-get($settings, 'flush'); 357 | } 358 | 359 | // Resize columns. 360 | @include flexgrid-columns($columns); 361 | 362 | // Gutters specified? 363 | @if ($gutters > 0) { 364 | 365 | // Flush gutters? 366 | @if ($flush) { 367 | 368 | // Previous columns specified? 369 | @if ($prev-columns) { 370 | 371 | // Convert to list if it isn't one already. 372 | @if (type-of($prev-columns) != list) { 373 | $prev-columns: ($prev-columns); 374 | } 375 | 376 | // Step through list of previous columns and reset them. 377 | @each $x in $prev-columns { 378 | @include flexgrid-gutters-flush-reset($columns, $gutters, $x); 379 | } 380 | 381 | } 382 | 383 | // Resize gutters (flush). 384 | @include flexgrid-gutters-flush($columns, $gutters); 385 | 386 | } 387 | 388 | // Otherwise ... 389 | @else { 390 | 391 | // Resize gutters. 392 | @include flexgrid-gutters($columns, $gutters); 393 | 394 | } 395 | 396 | } 397 | 398 | } -------------------------------------------------------------------------------- /src/assets/scss/libs/_skel.scss: -------------------------------------------------------------------------------- 1 | // skel.scss v3.0.2-dev | (c) skel.io | MIT licensed */ 2 | 3 | // Vars. 4 | 5 | /// Breakpoints. 6 | /// @var {list} 7 | $breakpoints: () !global; 8 | 9 | /// Vendor prefixes. 10 | /// @var {list} 11 | $vendor-prefixes: ( 12 | '-moz-', 13 | '-webkit-', 14 | '-ms-', 15 | '' 16 | ); 17 | 18 | /// Properties that should be vendorized. 19 | /// @var {list} 20 | $vendor-properties: ( 21 | 'align-content', 22 | 'align-items', 23 | 'align-self', 24 | 'animation', 25 | 'animation-delay', 26 | 'animation-direction', 27 | 'animation-duration', 28 | 'animation-fill-mode', 29 | 'animation-iteration-count', 30 | 'animation-name', 31 | 'animation-play-state', 32 | 'animation-timing-function', 33 | 'appearance', 34 | 'backface-visibility', 35 | 'box-sizing', 36 | 'filter', 37 | 'flex', 38 | 'flex-basis', 39 | 'flex-direction', 40 | 'flex-flow', 41 | 'flex-grow', 42 | 'flex-shrink', 43 | 'flex-wrap', 44 | 'justify-content', 45 | 'object-fit', 46 | 'object-position', 47 | 'order', 48 | 'perspective', 49 | 'pointer-events', 50 | 'transform', 51 | 'transform-origin', 52 | 'transform-style', 53 | 'transition', 54 | 'transition-delay', 55 | 'transition-duration', 56 | 'transition-property', 57 | 'transition-timing-function', 58 | 'user-select' 59 | ); 60 | 61 | /// Values that should be vendorized. 62 | /// @var {list} 63 | $vendor-values: ( 64 | 'filter', 65 | 'flex', 66 | 'linear-gradient', 67 | 'radial-gradient', 68 | 'transform' 69 | ); 70 | 71 | // Functions. 72 | 73 | /// Removes a specific item from a list. 74 | /// @author Hugo Giraudel 75 | /// @param {list} $list List. 76 | /// @param {integer} $index Index. 77 | /// @return {list} Updated list. 78 | @function remove-nth($list, $index) { 79 | 80 | $result: null; 81 | 82 | @if type-of($index) != number { 83 | @warn "$index: #{quote($index)} is not a number for `remove-nth`."; 84 | } 85 | @else if $index == 0 { 86 | @warn "List index 0 must be a non-zero integer for `remove-nth`."; 87 | } 88 | @else if abs($index) > length($list) { 89 | @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; 90 | } 91 | @else { 92 | 93 | $result: (); 94 | $index: if($index < 0, length($list) + $index + 1, $index); 95 | 96 | @for $i from 1 through length($list) { 97 | 98 | @if $i != $index { 99 | $result: append($result, nth($list, $i)); 100 | } 101 | 102 | } 103 | 104 | } 105 | 106 | @return $result; 107 | 108 | } 109 | 110 | /// Replaces a substring within another string. 111 | /// @author Hugo Giraudel 112 | /// @param {string} $string String. 113 | /// @param {string} $search Substring. 114 | /// @param {string} $replace Replacement. 115 | /// @return {string} Updated string. 116 | @function str-replace($string, $search, $replace: '') { 117 | 118 | $index: str-index($string, $search); 119 | 120 | @if $index { 121 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 122 | } 123 | 124 | @return $string; 125 | 126 | } 127 | 128 | /// Replaces a substring within each string in a list. 129 | /// @param {list} $strings List of strings. 130 | /// @param {string} $search Substring. 131 | /// @param {string} $replace Replacement. 132 | /// @return {list} Updated list of strings. 133 | @function str-replace-all($strings, $search, $replace: '') { 134 | 135 | @each $string in $strings { 136 | $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); 137 | } 138 | 139 | @return $strings; 140 | 141 | } 142 | 143 | /// Gets a value from a map. 144 | /// @author Hugo Giraudel 145 | /// @param {map} $map Map. 146 | /// @param {string} $keys Key(s). 147 | /// @return {string} Value. 148 | @function val($map, $keys...) { 149 | 150 | @if nth($keys, 1) == null { 151 | $keys: remove-nth($keys, 1); 152 | } 153 | 154 | @each $key in $keys { 155 | $map: map-get($map, $key); 156 | } 157 | 158 | @return $map; 159 | 160 | } 161 | 162 | // Mixins. 163 | 164 | /// Sets the global box model. 165 | /// @param {string} $model Model (default is content). 166 | @mixin boxModel($model: 'content') { 167 | 168 | $x: $model + '-box'; 169 | 170 | *, *:before, *:after { 171 | -moz-box-sizing: #{$x}; 172 | -webkit-box-sizing: #{$x}; 173 | box-sizing: #{$x}; 174 | } 175 | 176 | } 177 | 178 | /// Wraps @content in a @media block using a given breakpoint. 179 | /// @param {string} $breakpoint Breakpoint. 180 | /// @param {map} $queries Additional queries. 181 | @mixin breakpoint($breakpoint: null, $queries: null) { 182 | 183 | $query: 'screen'; 184 | 185 | // Breakpoint. 186 | @if $breakpoint and map-has-key($breakpoints, $breakpoint) { 187 | $query: $query + ' and ' + map-get($breakpoints, $breakpoint); 188 | } 189 | 190 | // Queries. 191 | @if $queries { 192 | @each $k, $v in $queries { 193 | $query: $query + ' and (' + $k + ':' + $v + ')'; 194 | } 195 | } 196 | 197 | @media #{$query} { 198 | @content; 199 | } 200 | 201 | } 202 | 203 | /// Wraps @content in a @media block targeting a specific orientation. 204 | /// @param {string} $orientation Orientation. 205 | @mixin orientation($orientation) { 206 | @media screen and (orientation: #{$orientation}) { 207 | @content; 208 | } 209 | } 210 | 211 | /// Utility mixin for containers. 212 | /// @param {mixed} $width Width. 213 | @mixin containers($width) { 214 | 215 | // Locked? 216 | $lock: false; 217 | 218 | @if length($width) == 2 { 219 | $width: nth($width, 1); 220 | $lock: true; 221 | } 222 | 223 | // Modifiers. 224 | .container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; } 225 | .container.\37 5\25 { width: $width * 0.75; } 226 | .container.\35 0\25 { width: $width * 0.5; } 227 | .container.\32 5\25 { width: $width * 0.25; } 228 | 229 | // Main class. 230 | .container { 231 | @if $lock { 232 | width: $width !important; 233 | } 234 | @else { 235 | width: $width; 236 | } 237 | } 238 | 239 | } 240 | 241 | /// Utility mixin for grid. 242 | /// @param {list} $gutters Column and row gutters (default is 40px). 243 | /// @param {string} $breakpointName Optional breakpoint name. 244 | @mixin grid($gutters: 40px, $breakpointName: null) { 245 | 246 | // Gutters. 247 | @include grid-gutters($gutters); 248 | @include grid-gutters($gutters, \32 00\25, 2); 249 | @include grid-gutters($gutters, \31 50\25, 1.5); 250 | @include grid-gutters($gutters, \35 0\25, 0.5); 251 | @include grid-gutters($gutters, \32 5\25, 0.25); 252 | 253 | // Cells. 254 | $x: ''; 255 | 256 | @if $breakpointName { 257 | $x: '\\28' + $breakpointName + '\\29'; 258 | } 259 | 260 | .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; } 261 | .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; } 262 | .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; } 263 | .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; } 264 | .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; } 265 | .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; } 266 | .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; } 267 | .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; } 268 | .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; } 269 | .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; } 270 | .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; } 271 | .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; } 272 | 273 | .\31 2u\24#{$x} + *, 274 | .\31 1u\24#{$x} + *, 275 | .\31 0u\24#{$x} + *, 276 | .\39 u\24#{$x} + *, 277 | .\38 u\24#{$x} + *, 278 | .\37 u\24#{$x} + *, 279 | .\36 u\24#{$x} + *, 280 | .\35 u\24#{$x} + *, 281 | .\34 u\24#{$x} + *, 282 | .\33 u\24#{$x} + *, 283 | .\32 u\24#{$x} + *, 284 | .\31 u\24#{$x} + * { 285 | clear: left; 286 | } 287 | 288 | .\-11u#{$x} { margin-left: 91.6666666667% } 289 | .\-10u#{$x} { margin-left: 83.3333333333% } 290 | .\-9u#{$x} { margin-left: 75% } 291 | .\-8u#{$x} { margin-left: 66.6666666667% } 292 | .\-7u#{$x} { margin-left: 58.3333333333% } 293 | .\-6u#{$x} { margin-left: 50% } 294 | .\-5u#{$x} { margin-left: 41.6666666667% } 295 | .\-4u#{$x} { margin-left: 33.3333333333% } 296 | .\-3u#{$x} { margin-left: 25% } 297 | .\-2u#{$x} { margin-left: 16.6666666667% } 298 | .\-1u#{$x} { margin-left: 8.3333333333% } 299 | 300 | } 301 | 302 | /// Utility mixin for grid. 303 | /// @param {list} $gutters Gutters. 304 | /// @param {string} $class Optional class name. 305 | /// @param {integer} $multiplier Multiplier (default is 1). 306 | @mixin grid-gutters($gutters, $class: null, $multiplier: 1) { 307 | 308 | // Expand gutters if it's not a list. 309 | @if length($gutters) == 1 { 310 | $gutters: ($gutters, 0); 311 | } 312 | 313 | // Get column and row gutter values. 314 | $c: nth($gutters, 1); 315 | $r: nth($gutters, 2); 316 | 317 | // Get class (if provided). 318 | $x: ''; 319 | 320 | @if $class { 321 | $x: '.' + $class; 322 | } 323 | 324 | // Default. 325 | .row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); } 326 | .row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } 327 | 328 | // Uniform. 329 | .row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); } 330 | .row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } 331 | 332 | } 333 | 334 | /// Wraps @content in vendorized keyframe blocks. 335 | /// @param {string} $name Name. 336 | @mixin keyframes($name) { 337 | 338 | @-moz-keyframes #{$name} { @content; } 339 | @-webkit-keyframes #{$name} { @content; } 340 | @-ms-keyframes #{$name} { @content; } 341 | @keyframes #{$name} { @content; } 342 | 343 | } 344 | 345 | /// 346 | /// Sets breakpoints. 347 | /// @param {map} $x Breakpoints. 348 | /// 349 | @mixin skel-breakpoints($x: ()) { 350 | $breakpoints: $x !global; 351 | } 352 | 353 | /// 354 | /// Initializes layout module. 355 | /// @param {map} config Config. 356 | /// 357 | @mixin skel-layout($config: ()) { 358 | 359 | // Config. 360 | $configPerBreakpoint: (); 361 | 362 | $z: map-get($config, 'breakpoints'); 363 | 364 | @if $z { 365 | $configPerBreakpoint: $z; 366 | } 367 | 368 | // Reset. 369 | $x: map-get($config, 'reset'); 370 | 371 | @if $x { 372 | 373 | /* Reset */ 374 | 375 | @include reset($x); 376 | 377 | } 378 | 379 | // Box model. 380 | $x: map-get($config, 'boxModel'); 381 | 382 | @if $x { 383 | 384 | /* Box Model */ 385 | 386 | @include boxModel($x); 387 | 388 | } 389 | 390 | // Containers. 391 | $containers: map-get($config, 'containers'); 392 | 393 | @if $containers { 394 | 395 | /* Containers */ 396 | 397 | .container { 398 | margin-left: auto; 399 | margin-right: auto; 400 | } 401 | 402 | // Use default is $containers is just "true". 403 | @if $containers == true { 404 | $containers: 960px; 405 | } 406 | 407 | // Apply base. 408 | @include containers($containers); 409 | 410 | // Apply per-breakpoint. 411 | @each $name in map-keys($breakpoints) { 412 | 413 | // Get/use breakpoint setting if it exists. 414 | $x: map-get($configPerBreakpoint, $name); 415 | 416 | // Per-breakpoint config exists? 417 | @if $x { 418 | $y: map-get($x, 'containers'); 419 | 420 | // Setting exists? Use it. 421 | @if $y { 422 | $containers: $y; 423 | } 424 | 425 | } 426 | 427 | // Create @media block. 428 | @media screen and #{map-get($breakpoints, $name)} { 429 | @include containers($containers); 430 | } 431 | 432 | } 433 | 434 | } 435 | 436 | // Grid. 437 | $grid: map-get($config, 'grid'); 438 | 439 | @if $grid { 440 | 441 | /* Grid */ 442 | 443 | // Use defaults if $grid is just "true". 444 | @if $grid == true { 445 | $grid: (); 446 | } 447 | 448 | // Sub-setting: Gutters. 449 | $grid-gutters: 40px; 450 | $x: map-get($grid, 'gutters'); 451 | 452 | @if $x { 453 | $grid-gutters: $x; 454 | } 455 | 456 | // Rows. 457 | .row { 458 | border-bottom: solid 1px transparent; 459 | -moz-box-sizing: border-box; 460 | -webkit-box-sizing: border-box; 461 | box-sizing: border-box; 462 | } 463 | 464 | .row > * { 465 | float: left; 466 | -moz-box-sizing: border-box; 467 | -webkit-box-sizing: border-box; 468 | box-sizing: border-box; 469 | } 470 | 471 | .row:after, .row:before { 472 | content: ''; 473 | display: block; 474 | clear: both; 475 | height: 0; 476 | } 477 | 478 | .row.uniform > * > :first-child { 479 | margin-top: 0; 480 | } 481 | 482 | .row.uniform > * > :last-child { 483 | margin-bottom: 0; 484 | } 485 | 486 | // Gutters (0%). 487 | @include grid-gutters($grid-gutters, \30 \25, 0); 488 | 489 | // Apply base. 490 | @include grid($grid-gutters); 491 | 492 | // Apply per-breakpoint. 493 | @each $name in map-keys($breakpoints) { 494 | 495 | // Get/use breakpoint setting if it exists. 496 | $x: map-get($configPerBreakpoint, $name); 497 | 498 | // Per-breakpoint config exists? 499 | @if $x { 500 | $y: map-get($x, 'grid'); 501 | 502 | // Setting exists? 503 | @if $y { 504 | 505 | // Sub-setting: Gutters. 506 | $x: map-get($y, 'gutters'); 507 | 508 | @if $x { 509 | $grid-gutters: $x; 510 | } 511 | 512 | } 513 | 514 | } 515 | 516 | // Create @media block. 517 | @media screen and #{map-get($breakpoints, $name)} { 518 | @include grid($grid-gutters, $name); 519 | } 520 | 521 | } 522 | 523 | } 524 | 525 | } 526 | 527 | /// Resets browser styles. 528 | /// @param {string} $mode Mode (default is 'normalize'). 529 | @mixin reset($mode: 'normalize') { 530 | 531 | @if $mode == 'normalize' { 532 | 533 | // normalize.css v3.0.2 | MIT License | git.io/normalize 534 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} 535 | 536 | } 537 | @else if $mode == 'full' { 538 | 539 | // meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain) 540 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} 541 | 542 | } 543 | 544 | } 545 | 546 | /// Vendorizes a declaration's property and/or value(s). 547 | /// @param {string} $property Property. 548 | /// @param {mixed} $value String/list of value(s). 549 | @mixin vendor($property, $value) { 550 | 551 | // Determine if property should expand. 552 | $expandProperty: index($vendor-properties, $property); 553 | 554 | // Determine if value should expand (and if so, add '-prefix-' placeholder). 555 | $expandValue: false; 556 | 557 | @each $x in $value { 558 | @each $y in $vendor-values { 559 | @if $y == str-slice($x, 1, str-length($y)) { 560 | 561 | $value: set-nth($value, index($value, $x), '-prefix-' + $x); 562 | $expandValue: true; 563 | 564 | } 565 | } 566 | } 567 | 568 | // Expand property? 569 | @if $expandProperty { 570 | @each $vendor in $vendor-prefixes { 571 | #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 572 | } 573 | } 574 | 575 | // Expand just the value? 576 | @elseif $expandValue { 577 | @each $vendor in $vendor-prefixes { 578 | #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 579 | } 580 | } 581 | 582 | // Neither? Treat them as a normal declaration. 583 | @else { 584 | #{$property}: #{$value}; 585 | } 586 | 587 | } -------------------------------------------------------------------------------- /src/assets/css/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} -------------------------------------------------------------------------------- /src/assets/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import '../css/font-awesome.min.css'; 5 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic"); 6 | 7 | /* 8 | Strata by HTML5 UP 9 | html5up.net | @ajlkn 10 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 11 | */ 12 | 13 | @import "libs/skel"; 14 | 15 | @include skel-breakpoints(( 16 | xlarge: '(max-width: 1800px)', 17 | large: '(max-width: 1280px)', 18 | medium: '(max-width: 980px)', 19 | small: '(max-width: 736px)', 20 | xsmall: '(max-width: 480px)' 21 | )); 22 | 23 | @include skel-layout(( 24 | reset: 'full', 25 | boxModel: 'border', 26 | grid: ( gutters: 2.5em ), 27 | conditionals: true, 28 | containers: true, 29 | breakpoints: ( 30 | large: ( 31 | grid: ( 32 | gutters: 2em 33 | ), 34 | ), 35 | small: ( 36 | grid: ( 37 | gutters: 1.5em 38 | ), 39 | ) 40 | ) 41 | )); 42 | 43 | $size-header-width: 35%; 44 | $size-header-pad: 4em; 45 | 46 | /* Basic */ 47 | [data-block-id] { 48 | max-width: 100%!important; 49 | } 50 | 51 | body { 52 | background: _palette(bg); 53 | 54 | &.is-loading { 55 | *, *:before, *:after { 56 | @include vendor('animation', 'none !important'); 57 | @include vendor('transition', 'none !important'); 58 | } 59 | } 60 | } 61 | 62 | body, input, select, textarea { 63 | color: _palette(fg); 64 | font-family: _font(family); 65 | font-size: 16pt; 66 | font-weight: _font(weight); 67 | line-height: 1.75em; 68 | } 69 | 70 | a { 71 | @include vendor('transition', ('color #{_duration(transition)} ease-in-out', 'border-color #{_duration(transition)} ease-in-out')); 72 | border-bottom: dotted 1px; 73 | color: _palette(accent1, bg); 74 | text-decoration: none; 75 | 76 | &:hover { 77 | border-bottom-color: transparent; 78 | color: _palette(accent1, bg) !important; 79 | text-decoration: none; 80 | } 81 | } 82 | 83 | strong, b { 84 | color: _palette(fg-bold); 85 | font-weight: _font(weight-bold); 86 | } 87 | 88 | em, i { 89 | font-style: italic; 90 | } 91 | 92 | p { 93 | margin: 0 0 _size(element-margin) 0; 94 | } 95 | 96 | h1, h2, h3, h4, h5, h6 { 97 | color: _palette(fg-bold); 98 | font-weight: _font(weight-bold); 99 | line-height: 1em; 100 | margin: 0 0 (_size(element-margin) * 0.5) 0; 101 | 102 | a { 103 | color: inherit; 104 | text-decoration: none; 105 | } 106 | } 107 | 108 | h1 { 109 | font-size: 2em; 110 | line-height: 1.5em; 111 | } 112 | 113 | h2 { 114 | font-size: 1.5em; 115 | line-height: 1.5em; 116 | } 117 | 118 | h3 { 119 | font-size: 1.25em; 120 | line-height: 1.5em; 121 | } 122 | 123 | h4 { 124 | font-size: 1.1em; 125 | line-height: 1.5em; 126 | } 127 | 128 | h5 { 129 | font-size: 0.9em; 130 | line-height: 1.5em; 131 | } 132 | 133 | h6 { 134 | font-size: 0.7em; 135 | line-height: 1.5em; 136 | } 137 | 138 | sub { 139 | font-size: 0.8em; 140 | position: relative; 141 | top: 0.5em; 142 | } 143 | 144 | sup { 145 | font-size: 0.8em; 146 | position: relative; 147 | top: -0.5em; 148 | } 149 | 150 | hr { 151 | border: 0; 152 | border-bottom: solid 2px _palette(border); 153 | 154 | // This is the *only* instance where we need to rely on margin collapse. 155 | margin: _size(element-margin) 0; 156 | 157 | &.major { 158 | margin: (_size(element-margin) * 1.5) 0; 159 | } 160 | } 161 | 162 | blockquote { 163 | border-left: solid 6px _palette(border); 164 | font-style: italic; 165 | margin: 0 0 _size(element-margin) 0; 166 | padding: 0.5em 0 0.5em 1.5em; 167 | } 168 | 169 | code { 170 | background: _palette(border-bg); 171 | border-radius: _size(border-radius); 172 | border: solid 2px _palette(border); 173 | font-family: _font(family-fixed); 174 | font-size: 0.9em; 175 | margin: 0 0.25em; 176 | padding: 0.25em 0.65em; 177 | } 178 | 179 | pre { 180 | -webkit-overflow-scrolling: touch; 181 | font-family: _font(family-fixed); 182 | font-size: 0.9em; 183 | margin: 0 0 _size(element-margin) 0; 184 | 185 | code { 186 | display: block; 187 | line-height: 1.75em; 188 | padding: 1em 1.5em; 189 | overflow-x: auto; 190 | } 191 | } 192 | 193 | .align-left { 194 | text-align: left; 195 | } 196 | 197 | .align-center { 198 | text-align: center; 199 | } 200 | 201 | .align-right { 202 | text-align: right; 203 | } 204 | 205 | /* Section/Article */ 206 | 207 | section, article { 208 | &.special { 209 | text-align: center; 210 | } 211 | } 212 | 213 | header { 214 | p { 215 | color: _palette(fg-light); 216 | position: relative; 217 | margin: 0 0 (_size(element-margin) * 0.75) 0; 218 | } 219 | 220 | h2 + p { 221 | font-size: 1.25em; 222 | margin-top: (_size(element-margin) * -0.5); 223 | line-height: 1.5em; 224 | } 225 | 226 | h3 + p { 227 | font-size: 1.1em; 228 | margin-top: (_size(element-margin) * -0.4); 229 | line-height: 1.5em; 230 | } 231 | 232 | h4 + p, 233 | h5 + p, 234 | h6 + p { 235 | font-size: 0.9em; 236 | margin-top: (_size(element-margin) * -0.3); 237 | line-height: 1.5em; 238 | } 239 | 240 | &.major { 241 | h2 { 242 | font-size: 2em; 243 | } 244 | } 245 | } 246 | 247 | /* Form */ 248 | 249 | form { 250 | margin: 0 0 _size(element-margin) 0; 251 | } 252 | 253 | label { 254 | color: _palette(fg-bold); 255 | display: block; 256 | font-size: 0.9em; 257 | font-weight: _font(weight-bold); 258 | margin: 0 0 (_size(element-margin) * 0.5) 0; 259 | } 260 | 261 | input[type="text"], 262 | input[type="password"], 263 | input[type="email"], 264 | select, 265 | textarea { 266 | @include vendor('appearance', 'none'); 267 | background: _palette(border-bg); 268 | border-radius: _size(border-radius); 269 | border: solid 2px transparent; 270 | color: inherit; 271 | display: block; 272 | outline: 0; 273 | padding: 0 0.75em; 274 | text-decoration: none; 275 | width: 100%; 276 | 277 | &:invalid { 278 | box-shadow: none; 279 | } 280 | 281 | &:focus { 282 | border-color: _palette(accent1, bg); 283 | } 284 | } 285 | 286 | .select-wrapper { 287 | @include icon; 288 | display: block; 289 | position: relative; 290 | 291 | &:before { 292 | color: _palette(border2); 293 | content: '\f078'; 294 | display: block; 295 | height: _size(element-height); 296 | line-height: _size(element-height); 297 | pointer-events: none; 298 | position: absolute; 299 | right: 0; 300 | text-align: center; 301 | top: 0; 302 | width: _size(element-height); 303 | } 304 | 305 | select::-ms-expand { 306 | display: none; 307 | } 308 | } 309 | 310 | input[type="text"], 311 | input[type="password"], 312 | input[type="email"], 313 | select { 314 | height: _size(element-height); 315 | } 316 | 317 | textarea { 318 | padding: 0.75em; 319 | } 320 | 321 | input[type="checkbox"], 322 | input[type="radio"] { 323 | @include vendor('appearance', 'none'); 324 | display: block; 325 | float: left; 326 | margin-right: -2em; 327 | opacity: 0; 328 | width: 1em; 329 | z-index: -1; 330 | 331 | & + label { 332 | @include icon; 333 | color: _palette(fg); 334 | cursor: pointer; 335 | display: inline-block; 336 | font-size: 1em; 337 | font-weight: _font(weight); 338 | padding-left: (_size(element-height) * 0.6) + 0.75em; 339 | padding-right: 0.75em; 340 | position: relative; 341 | 342 | &:before { 343 | background: _palette(border-bg); 344 | border-radius: _size(border-radius); 345 | border: solid 2px transparent; 346 | content: ''; 347 | display: inline-block; 348 | height: (_size(element-height) * 0.6); 349 | left: 0; 350 | line-height: (_size(element-height) * 0.575); 351 | position: absolute; 352 | text-align: center; 353 | top: 0; 354 | width: (_size(element-height) * 0.6); 355 | } 356 | } 357 | 358 | &:checked + label { 359 | &:before { 360 | background: _palette(fg-bold); 361 | border-color: _palette(fg-bold); 362 | color: _palette(bg); 363 | content: '\f00c'; 364 | } 365 | } 366 | 367 | &:focus + label { 368 | &:before { 369 | border-color: _palette(accent1, bg); 370 | } 371 | } 372 | } 373 | 374 | input[type="checkbox"] { 375 | & + label { 376 | &:before { 377 | border-radius: _size(border-radius); 378 | } 379 | } 380 | } 381 | 382 | input[type="radio"] { 383 | & + label { 384 | &:before { 385 | border-radius: 100%; 386 | } 387 | } 388 | } 389 | 390 | ::-webkit-input-placeholder { 391 | color: _palette(fg-light) !important; 392 | opacity: 1.0; 393 | } 394 | 395 | :-moz-placeholder { 396 | color: _palette(fg-light) !important; 397 | opacity: 1.0; 398 | } 399 | 400 | ::-moz-placeholder { 401 | color: _palette(fg-light) !important; 402 | opacity: 1.0; 403 | } 404 | 405 | :-ms-input-placeholder { 406 | color: _palette(fg-light) !important; 407 | opacity: 1.0; 408 | } 409 | 410 | .formerize-placeholder { 411 | color: _palette(fg-light) !important; 412 | opacity: 1.0; 413 | } 414 | 415 | /* Box */ 416 | 417 | .box { 418 | border-radius: _size(border-radius); 419 | border: solid 2px _palette(border); 420 | margin-bottom: _size(element-margin); 421 | padding: 1.5em; 422 | 423 | > :last-child, 424 | > :last-child > :last-child, 425 | > :last-child > :last-child > :last-child { 426 | margin-bottom: 0; 427 | } 428 | 429 | &.alt { 430 | border: 0; 431 | border-radius: 0; 432 | padding: 0; 433 | } 434 | } 435 | 436 | /* Icon */ 437 | 438 | .icon { 439 | @include icon; 440 | border-bottom: none; 441 | position: relative; 442 | 443 | > .label { 444 | display: none; 445 | } 446 | } 447 | 448 | /* Image */ 449 | 450 | .image { 451 | border-radius: _size(border-radius); 452 | border: 0; 453 | display: inline-block; 454 | position: relative; 455 | 456 | &:before { 457 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); 458 | background: url('images/overlay.png'); 459 | border-radius: _size(border-radius); 460 | content: ''; 461 | display: block; 462 | height: 100%; 463 | left: 0; 464 | opacity: 0.5; 465 | position: absolute; 466 | top: 0; 467 | width: 100%; 468 | } 469 | 470 | &.thumb { 471 | text-align: center; 472 | 473 | &:after { 474 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); 475 | border-radius: _size(border-radius); 476 | border: solid 3px rgba(255,255,255,0.5); 477 | color: #fff; 478 | content: 'View'; 479 | display: inline-block; 480 | font-size: 0.8em; 481 | font-weight: _font(weight-bold); 482 | left: 50%; 483 | line-height: 2.25em; 484 | margin: -1.25em 0 0 -3em; 485 | opacity: 0; 486 | padding: 0 1.5em; 487 | position: absolute; 488 | text-align: center; 489 | text-decoration: none; 490 | top: 50%; 491 | white-space: nowrap; 492 | } 493 | 494 | &:hover { 495 | &:after { 496 | opacity: 1.0; 497 | } 498 | 499 | &:before { 500 | background: url('images/overlay.png'), url('images/overlay.png'); 501 | opacity: 1.0; 502 | } 503 | } 504 | } 505 | 506 | img { 507 | border-radius: _size(border-radius); 508 | display: block; 509 | } 510 | 511 | &.left { 512 | float: left; 513 | margin: 0 1.5em 1em 0; 514 | top: 0.25em; 515 | } 516 | 517 | &.right { 518 | float: right; 519 | margin: 0 0 1em 1.5em; 520 | top: 0.25em; 521 | } 522 | 523 | &.left, 524 | &.right { 525 | max-width: 40%; 526 | 527 | img { 528 | width: 100%; 529 | } 530 | } 531 | 532 | &.fit { 533 | display: block; 534 | margin: 0 0 _size(element-margin) 0; 535 | width: 100%; 536 | 537 | img { 538 | width: 100%; 539 | } 540 | } 541 | 542 | &.avatar { 543 | border-radius: 100%; 544 | 545 | &:before { 546 | display: none; 547 | } 548 | 549 | img { 550 | border-radius: 100%; 551 | width: 100%; 552 | } 553 | } 554 | } 555 | 556 | /* List */ 557 | 558 | ol { 559 | list-style: decimal; 560 | margin: 0 0 _size(element-margin) 0; 561 | padding-left: 1.25em; 562 | 563 | li { 564 | padding-left: 0.25em; 565 | } 566 | } 567 | 568 | ul { 569 | list-style: disc; 570 | margin: 0 0 _size(element-margin) 0; 571 | padding-left: 1em; 572 | 573 | li { 574 | padding-left: 0.5em; 575 | } 576 | 577 | &.alt { 578 | list-style: none; 579 | padding-left: 0; 580 | 581 | li { 582 | border-top: solid 2px _palette(border); 583 | padding: 0.5em 0; 584 | 585 | &:first-child { 586 | border-top: 0; 587 | padding-top: 0; 588 | } 589 | } 590 | } 591 | 592 | &.icons { 593 | cursor: default; 594 | list-style: none; 595 | padding-left: 0; 596 | 597 | li { 598 | display: inline-block; 599 | padding: 0 1em 0 0; 600 | 601 | &:last-child { 602 | padding-right: 0; 603 | } 604 | 605 | .icon { 606 | &:before { 607 | font-size: 1.5em; 608 | } 609 | } 610 | } 611 | } 612 | 613 | &.actions { 614 | cursor: default; 615 | list-style: none; 616 | padding-left: 0; 617 | 618 | li { 619 | display: inline-block; 620 | padding: 0 (_size(element-margin) * 0.5) 0 0; 621 | vertical-align: middle; 622 | 623 | &:last-child { 624 | padding-right: 0; 625 | } 626 | } 627 | 628 | &.small { 629 | li { 630 | padding: 0 (_size(element-margin) * 0.25) 0 0; 631 | } 632 | } 633 | 634 | &.vertical { 635 | li { 636 | display: block; 637 | padding: (_size(element-margin) * 0.5) 0 0 0; 638 | 639 | &:first-child { 640 | padding-top: 0; 641 | } 642 | 643 | > * { 644 | margin-bottom: 0; 645 | } 646 | } 647 | 648 | &.small { 649 | li { 650 | padding: (_size(element-margin) * 0.25) 0 0 0; 651 | 652 | &:first-child { 653 | padding-top: 0; 654 | } 655 | } 656 | } 657 | } 658 | 659 | &.fit { 660 | display: table; 661 | margin-left: (_size(element-margin) * -0.5); 662 | padding: 0; 663 | table-layout: fixed; 664 | width: calc(100% + #{(_size(element-margin) * 0.5)}); 665 | 666 | li { 667 | display: table-cell; 668 | padding: 0 0 0 (_size(element-margin) * 0.5); 669 | 670 | > * { 671 | margin-bottom: 0; 672 | } 673 | } 674 | 675 | &.small { 676 | margin-left: (_size(element-margin) * -0.25); 677 | width: calc(100% + #{(_size(element-margin) * 0.25)}); 678 | 679 | li { 680 | padding: 0 0 0 (_size(element-margin) * 0.25); 681 | } 682 | } 683 | } 684 | } 685 | 686 | &.labeled-icons { 687 | list-style: none; 688 | padding: 0; 689 | 690 | li { 691 | line-height: 1.75em; 692 | margin: 1.5em 0 0 0; 693 | padding-left: 2.25em; 694 | position: relative; 695 | 696 | &:first-child { 697 | margin-top: 0; 698 | } 699 | 700 | a { 701 | color: inherit; 702 | } 703 | 704 | h3 { 705 | color: _palette(fg-light); 706 | left: 0; 707 | position: absolute; 708 | text-align: center; 709 | top: 0; 710 | width: 1em; 711 | } 712 | } 713 | } 714 | } 715 | 716 | dl { 717 | margin: 0 0 _size(element-margin) 0; 718 | } 719 | 720 | /* Table */ 721 | 722 | .table-wrapper { 723 | -webkit-overflow-scrolling: touch; 724 | overflow-x: auto; 725 | } 726 | 727 | table { 728 | margin: 0 0 _size(element-margin) 0; 729 | width: 100%; 730 | 731 | tbody { 732 | tr { 733 | border: solid 1px _palette(border); 734 | border-left: 0; 735 | border-right: 0; 736 | 737 | &:nth-child(2n + 1) { 738 | background-color: _palette(border-bg); 739 | } 740 | } 741 | } 742 | 743 | td { 744 | padding: 0.75em 0.75em; 745 | } 746 | 747 | th { 748 | color: _palette(fg-bold); 749 | font-size: 0.9em; 750 | font-weight: _font(weight-bold); 751 | padding: 0 0.75em 0.75em 0.75em; 752 | text-align: left; 753 | } 754 | 755 | thead { 756 | border-bottom: solid 2px _palette(border); 757 | } 758 | 759 | tfoot { 760 | border-top: solid 2px _palette(border); 761 | } 762 | 763 | &.alt { 764 | border-collapse: separate; 765 | 766 | tbody { 767 | tr { 768 | td { 769 | border: solid 2px _palette(border); 770 | border-left-width: 0; 771 | border-top-width: 0; 772 | 773 | &:first-child { 774 | border-left-width: 2px; 775 | } 776 | } 777 | 778 | &:first-child { 779 | td { 780 | border-top-width: 2px; 781 | } 782 | } 783 | } 784 | } 785 | 786 | thead { 787 | border-bottom: 0; 788 | } 789 | 790 | tfoot { 791 | border-top: 0; 792 | } 793 | } 794 | } 795 | 796 | /* Button */ 797 | 798 | input[type="submit"], 799 | input[type="reset"], 800 | input[type="button"], 801 | .button { 802 | @include vendor('appearance', 'none'); 803 | @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out', 'border-color #{_duration(transition)} ease-in-out')); 804 | background-color: transparent; 805 | border-radius: _size(border-radius); 806 | border: solid 3px _palette(border); 807 | color: _palette(fg-bold) !important; 808 | cursor: pointer; 809 | display: inline-block; 810 | font-weight: _font(weight-bold); 811 | height: 3.15em; 812 | height: calc(2.75em + 6px); 813 | line-height: 2.75em; 814 | min-width: 10em; 815 | padding: 0 1.5em; 816 | text-align: center; 817 | text-decoration: none; 818 | white-space: nowrap; 819 | 820 | &:hover { 821 | border-color: _palette(accent1, bg); 822 | color: _palette(accent1, bg) !important; 823 | } 824 | 825 | &:active { 826 | background-color: transparentize(_palette(accent1, bg), 0.9); 827 | border-color: _palette(accent1, bg); 828 | color: _palette(accent1, bg) !important; 829 | } 830 | 831 | &.icon { 832 | padding-left: 1.35em; 833 | 834 | &:before { 835 | margin-right: 0.5em; 836 | } 837 | } 838 | 839 | &.fit { 840 | display: block; 841 | margin: 0 0 (_size(element-margin) * 0.5) 0; 842 | min-width: 0; 843 | width: 100%; 844 | } 845 | 846 | &.small { 847 | font-size: 0.8em; 848 | } 849 | 850 | &.big { 851 | font-size: 1.35em; 852 | } 853 | 854 | &.special { 855 | background-color: _palette(accent1, bg); 856 | border-color: _palette(accent1, bg); 857 | color: _palette(accent1, fg-bold) !important; 858 | 859 | &:hover { 860 | background-color: lighten(_palette(accent1, bg), 5); 861 | border-color: lighten(_palette(accent1, bg), 5); 862 | } 863 | 864 | &:active { 865 | background-color: darken(_palette(accent1, bg), 5); 866 | border-color: darken(_palette(accent1, bg), 5); 867 | } 868 | } 869 | 870 | &.disabled, 871 | &:disabled { 872 | background-color: _palette(border2-bg) !important; 873 | border-color: _palette(border2-bg) !important; 874 | color: _palette(fg-light) !important; 875 | cursor: default; 876 | } 877 | } 878 | 879 | /* Work Item */ 880 | 881 | .work-item { 882 | margin: 0 0 _size(element-margin) 0; 883 | 884 | .image { 885 | margin: 0 0 (_size(element-margin) * 0.75) 0; 886 | } 887 | 888 | h3 { 889 | font-size: 1em; 890 | margin: 0 0 (_size(element-margin) * 0.25) 0; 891 | } 892 | 893 | p { 894 | font-size: 0.8em; 895 | line-height: 1.5em; 896 | margin: 0; 897 | } 898 | } 899 | 900 | /* Header */ 901 | 902 | #header { 903 | @include vendor('display', 'flex'); 904 | @include vendor('flex-direction', 'column'); 905 | @include vendor('align-items', 'flex-end'); 906 | @include vendor('justify-content', 'space-between'); 907 | background-color: _palette(accent2, bg); 908 | background-attachment: scroll, fixed; 909 | background-image: url('images/overlay.png'), url('../images/bg.jpg'); 910 | background-position: top left, top left; 911 | background-repeat: repeat, no-repeat; 912 | background-size: auto, auto 100%; 913 | color: _palette(accent2, fg); 914 | height: 100%; 915 | left: 0; 916 | padding: ($size-header-pad * 2) $size-header-pad; 917 | position: fixed; 918 | text-align: right; 919 | top: 0; 920 | width: $size-header-width; 921 | 922 | > * { 923 | @include vendor('flex-shrink', '0'); 924 | width: 100%; 925 | } 926 | 927 | > .inner { 928 | @include vendor('flex-grow', '1'); 929 | margin: 0 0 ($size-header-pad * 0.5) 0; 930 | } 931 | 932 | strong, b { 933 | color: _palette(accent2, fg-bold); 934 | } 935 | 936 | h2, h3, h4, h5, h6 { 937 | color: _palette(accent2, fg-bold); 938 | } 939 | 940 | h1 { 941 | color: _palette(accent2, fg); 942 | font-size: 1.35em; 943 | line-height: 1.75em; 944 | margin: 0; 945 | } 946 | 947 | .image.avatar { 948 | margin: 0 0 (_size(element-margin) * 0.5) 0; 949 | width: 6.25em; 950 | } 951 | } 952 | 953 | /* Footer */ 954 | 955 | #footer { 956 | .icons { 957 | margin: (_size(element-margin) * 0.5) 0 0 0; 958 | 959 | a { 960 | color: _palette(accent2, fg-light); 961 | } 962 | } 963 | 964 | .copyright { 965 | color: _palette(accent2, fg-light); 966 | font-size: 0.8em; 967 | list-style: none; 968 | margin: (_size(element-margin) * 0.5) 0 0 0; 969 | padding: 0; 970 | 971 | li { 972 | border-left: solid 1px _palette(accent2, border); 973 | display: inline-block; 974 | line-height: 1em; 975 | margin-left: 0.75em; 976 | padding-left: 0.75em; 977 | 978 | &:first-child { 979 | border-left: 0; 980 | margin-left: 0; 981 | padding-left: 0; 982 | } 983 | 984 | a { 985 | color: inherit; 986 | } 987 | } 988 | } 989 | } 990 | 991 | /* Main */ 992 | 993 | #main { 994 | margin-left: $size-header-width; 995 | max-width: 50em + $size-header-pad; 996 | padding: ($size-header-pad * 2) $size-header-pad $size-header-pad $size-header-pad; 997 | width: calc(100% - #{$size-header-width}); 998 | 999 | > section { 1000 | border-top: solid 2px _palette(border); 1001 | margin: $size-header-pad 0 0 0; 1002 | padding: $size-header-pad 0 0 0; 1003 | 1004 | &:first-child { 1005 | border-top: 0; 1006 | margin-top: 0; 1007 | padding-top: 0; 1008 | } 1009 | } 1010 | } 1011 | 1012 | /* Poptrox */ 1013 | 1014 | @include keyframes('spin') { 1015 | 0% { @include vendor('transform', 'rotate(0deg)'); } 1016 | 100% { @include vendor('transform', 'rotate(360deg)'); } 1017 | }; 1018 | 1019 | .poptrox-popup { 1020 | @include vendor('box-sizing', 'content-box'); 1021 | -webkit-tap-highlight-color: rgba(255,255,255,0); 1022 | background: #fff; 1023 | border-radius: _size(border-radius); 1024 | box-shadow: 0 0.1em 0.15em 0 rgba(0,0,0,0.15); 1025 | overflow: hidden; 1026 | padding-bottom: 3em; 1027 | 1028 | .loader { 1029 | @include icon; 1030 | @include vendor('animation', 'spin 1s linear infinite'); 1031 | font-size: 1.5em; 1032 | height: 1em; 1033 | left: 50%; 1034 | line-height: 1em; 1035 | margin: -0.5em 0 0 -0.5em; 1036 | position: absolute; 1037 | top: 50%; 1038 | width: 1em; 1039 | 1040 | &:before { 1041 | content: '\f1ce'; 1042 | } 1043 | } 1044 | 1045 | .caption { 1046 | background: #fff; 1047 | bottom: 0; 1048 | cursor: default; 1049 | font-size: 0.9em; 1050 | height: 3em; 1051 | left: 0; 1052 | line-height: 2.8em; 1053 | position: absolute; 1054 | text-align: center; 1055 | width: 100%; 1056 | z-index: 1; 1057 | } 1058 | 1059 | .nav-next, 1060 | .nav-previous { 1061 | @include icon; 1062 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); 1063 | -webkit-tap-highlight-color: rgba(255,255,255,0); 1064 | background: rgba(0,0,0,0.01); 1065 | cursor: pointer; 1066 | height: 100%; 1067 | opacity: 0; 1068 | position: absolute; 1069 | top: 0; 1070 | width: 50%; 1071 | 1072 | &:before { 1073 | color: #fff; 1074 | font-size: 2.5em; 1075 | height: 1em; 1076 | line-height: 1em; 1077 | margin-top: -0.75em; 1078 | position: absolute; 1079 | text-align: center; 1080 | top: 50%; 1081 | width: 1.5em; 1082 | } 1083 | } 1084 | 1085 | .nav-next { 1086 | right: 0; 1087 | 1088 | &:before { 1089 | content: '\f105'; 1090 | right: 0; 1091 | } 1092 | } 1093 | 1094 | .nav-previous { 1095 | left: 0; 1096 | 1097 | &:before { 1098 | content: '\f104'; 1099 | left: 0; 1100 | } 1101 | } 1102 | 1103 | .closer { 1104 | @include icon; 1105 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); 1106 | -webkit-tap-highlight-color: rgba(255,255,255,0); 1107 | color: #fff; 1108 | height: 4em; 1109 | line-height: 4em; 1110 | opacity: 0; 1111 | position: absolute; 1112 | right: 0; 1113 | text-align: center; 1114 | top: 0; 1115 | width: 4em; 1116 | z-index: 2; 1117 | 1118 | &:before { 1119 | @include vendor('box-sizing', 'content-box'); 1120 | border-radius: 100%; 1121 | border: solid 3px rgba(255,255,255,0.5); 1122 | content: '\f00d'; 1123 | display: block; 1124 | font-size: 1em; 1125 | height: 1.75em; 1126 | left: 50%; 1127 | line-height: 1.75em; 1128 | margin: -0.875em 0 0 -0.875em; 1129 | position: absolute; 1130 | top: 50%; 1131 | width: 1.75em; 1132 | } 1133 | } 1134 | 1135 | &:hover { 1136 | .nav-next, 1137 | .nav-previous { 1138 | opacity: 0.5; 1139 | 1140 | &:hover { 1141 | opacity: 1.0; 1142 | } 1143 | } 1144 | 1145 | .closer { 1146 | opacity: 0.5; 1147 | 1148 | &:hover { 1149 | opacity: 1.0; 1150 | } 1151 | } 1152 | } 1153 | } 1154 | 1155 | /* Touch */ 1156 | 1157 | body.is-touch { 1158 | 1159 | .image { 1160 | &.thumb { 1161 | &:before { 1162 | opacity: 0.5 !important; 1163 | } 1164 | 1165 | &:after { 1166 | display: none !important; 1167 | } 1168 | } 1169 | } 1170 | 1171 | #header { 1172 | background-attachment: scroll; 1173 | background-size: auto, cover; 1174 | } 1175 | 1176 | .poptrox-popup { 1177 | .nav-next, 1178 | .nav-previous, 1179 | .closer { 1180 | opacity: 1.0 !important; 1181 | } 1182 | } 1183 | 1184 | } 1185 | 1186 | /* XLarge */ 1187 | 1188 | @include breakpoint(xlarge) { 1189 | 1190 | /* Basic */ 1191 | 1192 | body, input, select, textarea { 1193 | font-size: 12pt; 1194 | } 1195 | 1196 | } 1197 | 1198 | /* Large */ 1199 | 1200 | @include breakpoint(large) { 1201 | 1202 | $size-header-width: 30%; 1203 | $size-header-pad: 3em; 1204 | 1205 | /* Header */ 1206 | 1207 | #header { 1208 | padding: ($size-header-pad * 2) $size-header-pad $size-header-pad $size-header-pad; 1209 | width: $size-header-width; 1210 | 1211 | h1 { 1212 | font-size: 1.25em; 1213 | 1214 | br { 1215 | display: none; 1216 | } 1217 | } 1218 | } 1219 | 1220 | /* Footer */ 1221 | 1222 | #footer { 1223 | .copyright { 1224 | li { 1225 | border-left-width: 0; 1226 | display: block; 1227 | line-height: 2.25em; 1228 | margin-left: 0; 1229 | padding-left: 0; 1230 | } 1231 | } 1232 | } 1233 | 1234 | /* Main */ 1235 | 1236 | #main { 1237 | margin-left: $size-header-width; 1238 | max-width: none; 1239 | padding: ($size-header-pad * 2) $size-header-pad $size-header-pad $size-header-pad; 1240 | width: calc(100% - #{$size-header-width}); 1241 | } 1242 | 1243 | } 1244 | 1245 | /* Medium */ 1246 | 1247 | @include breakpoint(medium) { 1248 | 1249 | $size-header-pad: 4em; 1250 | 1251 | /* Basic */ 1252 | 1253 | h1, h2, h3, h4, h5, h6 { 1254 | br { 1255 | display: none; 1256 | } 1257 | } 1258 | 1259 | /* List */ 1260 | 1261 | ul { 1262 | &.icons { 1263 | li { 1264 | .icon { 1265 | font-size: 1.25em; 1266 | } 1267 | } 1268 | } 1269 | } 1270 | 1271 | /* Header */ 1272 | 1273 | #header { 1274 | background-attachment: scroll; 1275 | background-position: top left, center center; 1276 | background-size: auto, cover; 1277 | left: auto; 1278 | padding: ($size-header-pad * 1.5) $size-header-pad; 1279 | position: relative; 1280 | text-align: center; 1281 | top: auto; 1282 | width: 100%; 1283 | display: block; 1284 | 1285 | h1 { 1286 | font-size: 1.75em; 1287 | 1288 | br { 1289 | display: inline; 1290 | } 1291 | } 1292 | } 1293 | 1294 | /* Footer */ 1295 | 1296 | #footer { 1297 | bottom: auto; 1298 | left: auto; 1299 | padding: $size-header-pad $size-header-pad ($size-header-pad * 1.5) $size-header-pad; 1300 | position: relative; 1301 | text-align: center; 1302 | width: 100%; 1303 | 1304 | .icons { 1305 | margin: 0 0 (_size(element-margin) * 0.5) 0; 1306 | } 1307 | 1308 | .copyright { 1309 | margin: 0 0 (_size(element-margin) * 0.5) 0; 1310 | 1311 | li { 1312 | border-left-width: 1px; 1313 | display: inline-block; 1314 | line-height: 1em; 1315 | margin-left: 0.75em; 1316 | padding-left: 0.75em; 1317 | } 1318 | } 1319 | } 1320 | 1321 | /* Main */ 1322 | 1323 | #main { 1324 | margin: 0; 1325 | padding: ($size-header-pad * 1.5) $size-header-pad; 1326 | width: 100%; 1327 | } 1328 | 1329 | } 1330 | 1331 | /* Small */ 1332 | 1333 | @include breakpoint(small) { 1334 | 1335 | $size-header-pad: 1.5em; 1336 | 1337 | /* Basic */ 1338 | 1339 | h1 { 1340 | font-size: 1.5em; 1341 | } 1342 | 1343 | h2 { 1344 | font-size: 1.2em; 1345 | } 1346 | 1347 | h3 { 1348 | font-size: 1em; 1349 | } 1350 | 1351 | /* Section/Article */ 1352 | 1353 | section, article { 1354 | &.special { 1355 | text-align: center; 1356 | } 1357 | } 1358 | 1359 | header { 1360 | &.major { 1361 | h2 { 1362 | font-size: 1.35em; 1363 | } 1364 | } 1365 | } 1366 | 1367 | /* List */ 1368 | 1369 | ul { 1370 | &.labeled-icons { 1371 | li { 1372 | padding-left: 2em; 1373 | 1374 | h3 { 1375 | line-height: 1.75em; 1376 | } 1377 | } 1378 | } 1379 | } 1380 | 1381 | /* Header */ 1382 | 1383 | #header { 1384 | padding: ($size-header-pad * 1.5) $size-header-pad; 1385 | 1386 | h1 { 1387 | font-size: 1.35em; 1388 | } 1389 | } 1390 | 1391 | /* Footer */ 1392 | 1393 | #footer { 1394 | padding: ($size-header-pad * 1.5) $size-header-pad; 1395 | } 1396 | 1397 | /* Main */ 1398 | 1399 | #main { 1400 | padding: ($size-header-pad * 1.5) $size-header-pad (($size-header-pad * 1.5) - _size(element-margin)) $size-header-pad; 1401 | 1402 | > section { 1403 | margin: ($size-header-pad * 1.5) 0 0 0; 1404 | padding: ($size-header-pad * 1.5) 0 0 0; 1405 | } 1406 | } 1407 | 1408 | /* Poptrox */ 1409 | 1410 | .poptrox-popup { 1411 | border-radius: 0; 1412 | 1413 | .nav-next, 1414 | .nav-previous { 1415 | &:before { 1416 | margin-top: -1em; 1417 | } 1418 | } 1419 | } 1420 | 1421 | } 1422 | 1423 | /* XSmall */ 1424 | 1425 | @include breakpoint(xsmall) { 1426 | 1427 | $size-header-pad: 1.5em; 1428 | 1429 | /* List */ 1430 | 1431 | ul { 1432 | &.actions { 1433 | margin: 0 0 _size(element-margin) 0; 1434 | 1435 | li { 1436 | display: block; 1437 | padding: (_size(element-margin) * 0.5) 0 0 0; 1438 | text-align: center; 1439 | width: 100%; 1440 | 1441 | &:first-child { 1442 | padding-top: 0; 1443 | } 1444 | 1445 | > * { 1446 | margin: 0 !important; 1447 | width: 100%; 1448 | 1449 | &.icon { 1450 | &:before { 1451 | margin-left: -2em; 1452 | } 1453 | } 1454 | } 1455 | } 1456 | 1457 | &.small { 1458 | li { 1459 | padding: (_size(element-margin) * 0.25) 0 0 0; 1460 | 1461 | &:first-child { 1462 | padding-top: 0; 1463 | } 1464 | } 1465 | } 1466 | } 1467 | } 1468 | 1469 | /* Header */ 1470 | 1471 | #header { 1472 | padding: ($size-header-pad * 3) $size-header-pad; 1473 | 1474 | h1 { 1475 | br { 1476 | display: none; 1477 | } 1478 | } 1479 | } 1480 | 1481 | /* Footer */ 1482 | 1483 | #footer { 1484 | .copyright { 1485 | li { 1486 | border-left-width: 0; 1487 | display: block; 1488 | line-height: 2.25em; 1489 | margin-left: 0; 1490 | padding-left: 0; 1491 | } 1492 | } 1493 | } 1494 | 1495 | } 1496 | 1497 | @media screen and (max-width: 480px) { 1498 | .\36 u, 1499 | .\36 u24, 1500 | .\38 u, 1501 | .\38 u24, 1502 | .\34 u, 1503 | .\34 u24 { 1504 | width: 100%; 1505 | } 1506 | } --------------------------------------------------------------------------------