├── .github
└── FUNDING.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package.json
└── src
├── assets
├── css
│ └── font-awesome.min.css
├── fonts
│ ├── FontAwesome.otf
│ ├── fontawesome-webfont.eot
│ ├── fontawesome-webfont.svg
│ ├── fontawesome-webfont.ttf
│ ├── fontawesome-webfont.woff
│ └── fontawesome-webfont.woff2
├── images
│ ├── .gitignore
│ ├── header.jpg
│ ├── overlay1.png
│ ├── overlay2.png
│ ├── overlay3.svg
│ ├── overlay4.svg
│ ├── pic01.jpg
│ ├── pic02.jpg
│ ├── pic03.jpg
│ ├── pic04.jpg
│ ├── pic05.jpg
│ ├── pic06.jpg
│ └── website-icon.png
└── scss
│ ├── _css-grid.scss
│ ├── ie8.scss
│ ├── ie9.scss
│ ├── libs
│ ├── _functions.scss
│ ├── _mixins.scss
│ ├── _skel.scss
│ └── _vars.scss
│ └── main.scss
├── components
├── Footer.js
├── Header.js
└── layout.js
└── pages
├── 404.js
└── index.js
/.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 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "es5",
3 | "semi": false,
4 | "singleQuote": true
5 | }
6 |
--------------------------------------------------------------------------------
/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 :)
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # gatsby-starter-photon
2 |
3 | Gatsby.js V2 starter based on the Photon site template, designed by HTML5 UP. Check out https://codebushi.com/gatsby-starters-and-themes/ for more Gatsby starters and templates.
4 |
5 | ## Preview
6 |
7 | https://gatsby-photon.surge.sh
8 |
9 | ## Installation
10 |
11 | Install this starter (assuming Gatsby is installed) by running from your CLI:
12 | `gatsby new gatsby-starter-photon https://github.com/codebushi/gatsby-starter-photon`
13 |
14 | Run `gatsby develop` in the terminal to start.
15 |
16 | ## CSS Grid
17 |
18 | The grid on this site was replaced with a custom version, built using CSS Grid. It's a very simple 12 column grid that is disabled on mobile. To start using the grid, wrap the desired items with `grid-wrapper`. Items inside the `grid-wrapper` use the class `col-` followed by a number, which should add up to 12.
19 |
20 | Here is an example of using the grid, for a 3 column layout:
21 |
22 | ```
23 |
24 |
25 |
Adipiscing a commodo ante nunc accumsan et interdum mi ante adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus nascetur ac non. Lorem curae et ante amet sapien sed tempus adipiscing id accumsan.
26 |
27 |
30 |
31 |
Adipiscing a commodo ante nunc accumsan et interdum mi ante adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus nascetur ac non. Lorem curae et ante amet sapien sed tempus adipiscing id accumsan.
32 |
33 |
34 | ```
35 |
--------------------------------------------------------------------------------
/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Implement Gatsby's Browser APIs in this file.
3 | *
4 | * See: https://www.gatsbyjs.org/docs/browser-apis/
5 | */
6 |
7 | // You can delete this file if you're not using it
8 |
--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | siteMetadata: {
3 | title: "Gatsby Starter - Photon",
4 | author: "Hunter Chang",
5 | description: "A Gatsby.js Starter based on Photon 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 | 'gatsby-plugin-sass',
22 | 'gatsby-plugin-offline'
23 | ],
24 | }
25 |
--------------------------------------------------------------------------------
/gatsby-node.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Implement Gatsby's Node APIs in this file.
3 | *
4 | * See: https://www.gatsbyjs.org/docs/node-apis/
5 | */
6 |
7 | // You can delete this file if you're not using it
8 |
--------------------------------------------------------------------------------
/gatsby-ssr.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
3 | *
4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/
5 | */
6 |
7 | // You can delete this file if you're not using it
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gatsby-starter-photon",
3 | "description": "Gatsby photon starter",
4 | "version": "1.0.0",
5 | "author": "Hunter Chang",
6 | "dependencies": {
7 | "gatsby": "^2.15.14",
8 | "gatsby-plugin-manifest": "^2.2.16",
9 | "gatsby-plugin-offline": "^3.0.6",
10 | "gatsby-plugin-react-helmet": "^3.1.7",
11 | "gatsby-plugin-sass": "^2.1.14",
12 | "node-sass": "^4.12.0",
13 | "react": "^16.9.0",
14 | "react-dom": "^16.9.0",
15 | "react-helmet": "^5.2.1"
16 | },
17 | "keywords": [
18 | "gatsby"
19 | ],
20 | "license": "MIT",
21 | "scripts": {
22 | "build": "gatsby build",
23 | "develop": "gatsby develop",
24 | "format": "prettier --write '**/*.js'",
25 | "test": "echo \"Error: no test specified\" && exit 1"
26 | },
27 | "devDependencies": {
28 | "prettier": "^1.18.2"
29 | },
30 | "repository": {
31 | "type": "git",
32 | "url": "https://github.com/gatsbyjs/gatsby-starter-photon"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/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}
5 |
--------------------------------------------------------------------------------
/src/assets/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/fonts/FontAwesome.otf
--------------------------------------------------------------------------------
/src/assets/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/fonts/fontawesome-webfont.eot
--------------------------------------------------------------------------------
/src/assets/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/fonts/fontawesome-webfont.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/fonts/fontawesome-webfont.woff
--------------------------------------------------------------------------------
/src/assets/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/fonts/fontawesome-webfont.woff2
--------------------------------------------------------------------------------
/src/assets/images/.gitignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/.gitignore
--------------------------------------------------------------------------------
/src/assets/images/header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/header.jpg
--------------------------------------------------------------------------------
/src/assets/images/overlay1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/overlay1.png
--------------------------------------------------------------------------------
/src/assets/images/overlay2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/overlay2.png
--------------------------------------------------------------------------------
/src/assets/images/overlay3.svg:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/assets/images/overlay4.svg:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/assets/images/pic01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/pic01.jpg
--------------------------------------------------------------------------------
/src/assets/images/pic02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/pic02.jpg
--------------------------------------------------------------------------------
/src/assets/images/pic03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/pic03.jpg
--------------------------------------------------------------------------------
/src/assets/images/pic04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/pic04.jpg
--------------------------------------------------------------------------------
/src/assets/images/pic05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/pic05.jpg
--------------------------------------------------------------------------------
/src/assets/images/pic06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/pic06.jpg
--------------------------------------------------------------------------------
/src/assets/images/website-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codebushi/gatsby-starter-photon/acb0bfd3a34190a9b917a333739884d1631bc49f/src/assets/images/website-icon.png
--------------------------------------------------------------------------------
/src/assets/scss/_css-grid.scss:
--------------------------------------------------------------------------------
1 | /* CSS Grid */
2 |
3 | @media screen and (min-width: 981px) {
4 |
5 | .grid-wrapper {
6 | display: grid;
7 | grid-gap: 0 2.25em;
8 | grid-template-columns: repeat(12, 1fr);
9 | margin: 0 auto;
10 | width: 90%;
11 | }
12 |
13 | /* Generate Columns 1 through 12 */
14 | /*
15 | Example:
16 | .col-6 { grid-column: span 6; }
17 | */
18 |
19 | $columns: 12;
20 | @mixin col-x-list {
21 | @for $i from 1 through $columns {
22 | .col-#{$i} {
23 | grid-column: span #{$i}
24 | }
25 | }
26 | }
27 | @include col-x-list;
28 |
29 | }
30 |
31 | @media screen and (min-width: 1141px) {
32 |
33 | .grid-wrapper {
34 | grid-gap: 0 3em;
35 | width: 60em;
36 | }
37 |
38 | }
--------------------------------------------------------------------------------
/src/assets/scss/ie8.scss:
--------------------------------------------------------------------------------
1 | @import 'libs/vars';
2 | @import 'libs/functions';
3 | @import 'libs/mixins';
4 | @import 'libs/skel';
5 |
6 | /*
7 | Photon 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 | // Vars
13 |
14 | $ie-palette-border: #ccc;
15 | $ie-palette-border-bg: transparent;
16 | $ie-palette-border2: #ccc;
17 | $ie-palette-border2-bg: transparent;
18 | $ie-palette-dark-bg: #666666;
19 | $ie-palette-dark-fg-bold: #ffffff;
20 | $ie-palette-dark-fg: #ffffff;
21 | $ie-palette-dark-fg-light: #ffffff;
22 | $ie-palette-dark-border: #ffffff;
23 | $ie-palette-dark-border-bg: transparent;
24 | $ie-palette-dark-border2: #ffffff;
25 | $ie-palette-dark-border2-bg: transparent;
26 |
27 | /* Basic */
28 |
29 | hr {
30 | border-bottom: solid 1px $ie-palette-border;
31 | }
32 |
33 | blockquote {
34 | border-left: solid 4px $ie-palette-border;
35 | }
36 |
37 | code {
38 | border: solid 1px $ie-palette-border;
39 | }
40 |
41 | /* Section/Article */
42 |
43 | header {
44 | &.major {
45 | &:after {
46 | background: $ie-palette-border;
47 | }
48 | }
49 | }
50 |
51 | /* Form */
52 |
53 | input[type="text"],
54 | input[type="password"],
55 | input[type="email"],
56 | select,
57 | textarea {
58 | -ms-behavior: url('assets/js/ie/PIE.htc');
59 | border: solid 1px $ie-palette-border;
60 | position: relative;
61 | }
62 |
63 | /* List */
64 |
65 | ul {
66 | &.alt {
67 | li {
68 | border-top: solid 1px $ie-palette-border;
69 | }
70 | }
71 |
72 | &.major-icons {
73 | li {
74 | .icon {
75 | -ms-behavior: url('assets/js/ie/PIE.htc');
76 | border: solid 1px $ie-palette-border;
77 | position: relative;
78 | }
79 | }
80 | }
81 | }
82 |
83 | /* Table */
84 |
85 | table {
86 | thead {
87 | border-bottom: solid 1px $ie-palette-border;
88 | }
89 |
90 | tfoot {
91 | border-top: solid 1px $ie-palette-border;
92 | }
93 |
94 | &.alt {
95 | tbody {
96 | tr {
97 | td {
98 | border: solid 1px $ie-palette-border;
99 | border-left-width: 0;
100 | border-top-width: 0;
101 | }
102 | }
103 | }
104 | }
105 | }
106 |
107 | /* Button */
108 |
109 | input[type="submit"],
110 | input[type="reset"],
111 | input[type="button"],
112 | button,
113 | .button {
114 | -ms-behavior: url('assets/js/ie/PIE.htc');
115 | border: solid 1px $ie-palette-border;
116 | position: relative;
117 | }
118 |
119 | /* Image */
120 |
121 | .image {
122 | -ms-behavior: url('assets/js/ie/PIE.htc');
123 |
124 | img {
125 | -ms-behavior: url('assets/js/ie/PIE.htc');
126 | position: relative;
127 | }
128 | }
129 |
130 | // Dark (mixin)
131 |
132 | @mixin dark($ie-palette-this-bg: $ie-palette-dark-bg) {
133 | background-color: $ie-palette-this-bg;
134 | color: $ie-palette-dark-fg;
135 |
136 | a {
137 | border-bottom-color: $ie-palette-dark-fg;
138 |
139 | &:hover {
140 | color: $ie-palette-dark-fg-bold;
141 | }
142 | }
143 |
144 | h1, h2, h3, h4, h5, h6, strong, b {
145 | color: $ie-palette-dark-fg-bold;
146 | }
147 |
148 | header {
149 | p {
150 | color: $ie-palette-dark-fg-bold;
151 | }
152 |
153 | &.major {
154 | &:after {
155 | background: $ie-palette-dark-border;
156 | }
157 | }
158 | }
159 |
160 | input[type="submit"],
161 | input[type="reset"],
162 | input[type="button"],
163 | button,
164 | .button {
165 | border: solid 1px $ie-palette-dark-border !important;
166 | color: $ie-palette-dark-fg-bold !important;
167 |
168 | &:hover {
169 | background-color: $ie-palette-dark-border-bg;
170 | }
171 |
172 | &:active {
173 | background-color: $ie-palette-dark-border2-bg;
174 | }
175 |
176 | &.special {
177 | background-color: $ie-palette-dark-fg-bold;
178 | border: solid 1px $ie-palette-dark-border !important;
179 | color: $ie-palette-this-bg !important;
180 |
181 | &:hover {
182 | background-color: $ie-palette-dark-border-bg !important;
183 | color: $ie-palette-dark-fg-bold !important;
184 | }
185 |
186 | &:active {
187 | background-color: $ie-palette-dark-border2-bg !important;
188 | }
189 | }
190 | }
191 |
192 | ul {
193 | &.major-icons {
194 | li {
195 | .icon {
196 | border-color: $ie-palette-dark-border;
197 | }
198 | }
199 | }
200 | }
201 |
202 | .icon {
203 | &.major {
204 | color: $ie-palette-dark-fg-bold;
205 | }
206 | }
207 | }
208 |
209 | /* Main */
210 |
211 | .main {
212 | &.style2 {
213 | @include dark(#333);
214 | -ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
215 | background-image: url('../../images/header.jpg');
216 | background-size: cover;
217 | position: relative;
218 |
219 | &:before {
220 | background-image: url('images/overlay1.png');
221 | content: '';
222 | height: 100%;
223 | left: 0;
224 | position: absolute;
225 | top: 0;
226 | width: 100%;
227 | }
228 |
229 | > * {
230 | position: relative;
231 | z-index: 1;
232 | }
233 | }
234 | }
235 |
236 | /* Header */
237 |
238 | #header {
239 | @include dark(#4686a0);
240 | }
241 |
242 | /* Footer */
243 |
244 | #footer {
245 | @include dark(#4686a0);
246 | }
--------------------------------------------------------------------------------
/src/assets/scss/ie9.scss:
--------------------------------------------------------------------------------
1 | @import 'libs/vars';
2 | @import 'libs/functions';
3 | @import 'libs/mixins';
4 | @import 'libs/skel';
5 |
6 | /*
7 | Photon 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 | /* Header */
13 |
14 | #header {
15 | $from: _palette(accent3-alt);
16 | $to: _palette(accent6-alt);
17 |
18 | background-image: none;
19 | filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#{$from}", endColorStr="#{$to}", GradientType=1);
20 | position: relative;
21 |
22 | &:before {
23 | background-image: url('images/overlay2.png'), url('images/overlay3.svg');
24 | background-position: top left, center center;
25 | background-size: auto, cover;
26 | content: '';
27 | height: 100%;
28 | left: 0;
29 | position: absolute;
30 | top: 0;
31 | width: 100%;
32 | }
33 |
34 | > * {
35 | position: relative;
36 | z-index: 1;
37 | }
38 | }
39 |
40 | /* Footer */
41 |
42 | #footer {
43 | $from: _palette(accent6-alt);
44 | $to: _palette(accent3-alt);
45 |
46 | background-image: none;
47 | filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#{$from}", endColorStr="#{$to}", GradientType=1);
48 | position: relative;
49 |
50 | &:before {
51 | background-image: url('images/overlay2.png'), url('images/overlay4.svg');
52 | background-position: top left, center center;
53 | background-size: auto, cover;
54 | content: '';
55 | height: 100%;
56 | left: 0;
57 | position: absolute;
58 | top: 0;
59 | width: 100%;
60 | }
61 |
62 | > * {
63 | position: relative;
64 | z-index: 1;
65 | }
66 | }
--------------------------------------------------------------------------------
/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/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/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: 4px,
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: 300,
23 | weight-bold: 400
24 | );
25 |
26 | // Palette.
27 | $palette: (
28 | bg: #fff,
29 | fg: #666,
30 | fg-bold: #555,
31 | fg-light: #999,
32 | border: rgba(144,144,144,0.5),
33 | border-bg: rgba(144,144,144,0.075),
34 | border2: rgba(144,144,144,0.75),
35 | border2-bg: rgba(144,144,144,0.2),
36 | accent1: #c3e895,
37 | accent2: #8addaa,
38 | accent3: #6bd4c8,
39 | accent4: #57aed3,
40 | accent5: #4a87d3,
41 | accent6: #6b88e6,
42 | accent1-alt: desaturate(darken(#c3e895, 15), 20),
43 | accent2-alt: desaturate(darken(#8addaa, 15), 20),
44 | accent3-alt: desaturate(darken(#6bd4c8, 15), 20),
45 | accent4-alt: desaturate(darken(#57aed3, 15), 20),
46 | accent5-alt: desaturate(darken(#4a87d3, 15), 20),
47 | accent6-alt: desaturate(darken(#6b88e6, 15), 20),
48 |
49 | dark: (
50 | bg: #666666,
51 | fg-bold: #ffffff,
52 | fg: rgba(255,255,255,0.75),
53 | fg-light: rgba(255,255,255,0.5),
54 | border: #ffffff,
55 | border-bg: rgba(255,255,255,0.125),
56 | border2: rgba(255,255,255,0.75),
57 | border2-bg: rgba(255,255,255,0.25)
58 | )
59 | );
--------------------------------------------------------------------------------
/src/assets/scss/main.scss:
--------------------------------------------------------------------------------
1 | @import 'libs/vars';
2 | @import 'libs/functions';
3 | @import 'libs/mixins';
4 | @import "libs/skel";
5 | @import url('../css/font-awesome.min.css');
6 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic");
7 |
8 | @import "css-grid";
9 | /*
10 | Photon by HTML5 UP
11 | html5up.net | @ajlkn
12 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
13 | */
14 |
15 | @include skel-breakpoints((
16 | xlarge: '(max-width: 1680px)',
17 | large: '(max-width: 1280px)',
18 | medium: '(max-width: 980px)',
19 | small: '(max-width: 736px)',
20 | xsmall: '(max-width: 480px)',
21 | xxsmall: '(max-width: 360px)'
22 | ));
23 |
24 | @include skel-layout((
25 | reset: 'full',
26 | boxModel: 'border'
27 | ));
28 |
29 | /* Basic */
30 |
31 | body {
32 | background: _palette(bg);
33 |
34 | .body.is-loading {
35 | *, *:before, *:after {
36 | @include vendor('animation', 'none !important');
37 | @include vendor('transition', 'none !important');
38 | }
39 | }
40 | }
41 |
42 | body, input, select, textarea {
43 | color: _palette(fg);
44 | font-family: _font(family);
45 | font-size: 16pt;
46 | font-weight: _font(weight);
47 | line-height: 1.65em;
48 | }
49 |
50 | a {
51 | @include vendor('transition', ('color #{_duration(transition)} ease-in-out', 'border-color #{_duration(transition)} ease-in-out'));
52 | border-bottom: dotted 1px _palette(fg);
53 | color: inherit;
54 | text-decoration: none;
55 |
56 | &:hover {
57 | border-bottom-color: transparent !important;
58 | color: _palette(accent3);
59 | }
60 | }
61 |
62 | strong, b {
63 | color: _palette(fg-bold);
64 | font-weight: _font(weight-bold);
65 | }
66 |
67 | em, i {
68 | font-style: italic;
69 | }
70 |
71 | p {
72 | margin: 0 0 _size(element-margin) 0;
73 | }
74 |
75 | h1, h2, h3, h4, h5, h6 {
76 | color: _palette(fg-bold);
77 | line-height: 1em;
78 | margin: 0 0 (_size(element-margin) * 0.5) 0;
79 |
80 | a {
81 | color: inherit;
82 | text-decoration: none;
83 | }
84 | }
85 |
86 | h1 {
87 | font-size: 2.25em;
88 | line-height: 1.35em;
89 | }
90 |
91 | h2 {
92 | font-size: 2em;
93 | line-height: 1.35em;
94 | }
95 |
96 | h3 {
97 | font-size: 1.35em;
98 | line-height: 1.5em;
99 | }
100 |
101 | h4 {
102 | font-size: 1.25em;
103 | line-height: 1.5em;
104 | }
105 |
106 | h5 {
107 | font-size: 0.9em;
108 | line-height: 1.5em;
109 | }
110 |
111 | h6 {
112 | font-size: 0.7em;
113 | line-height: 1.5em;
114 | }
115 |
116 | sub {
117 | font-size: 0.8em;
118 | position: relative;
119 | top: 0.5em;
120 | }
121 |
122 | sup {
123 | font-size: 0.8em;
124 | position: relative;
125 | top: -0.5em;
126 | }
127 |
128 | hr {
129 | border: 0;
130 | border-bottom: solid 1px _palette(border);
131 |
132 | // This is the *only* instance where we need to rely on margin collapse.
133 | margin: _size(element-margin) 0;
134 |
135 | &.major {
136 | margin: (_size(element-margin) * 1.5) 0;
137 | }
138 | }
139 |
140 | blockquote {
141 | border-left: solid 4px _palette(border);
142 | font-style: italic;
143 | margin: 0 0 _size(element-margin) 0;
144 | padding: 0.5em 0 0.5em 2em;
145 | }
146 |
147 | code {
148 | background: _palette(border-bg);
149 | border-radius: _size(border-radius);
150 | border: solid 1px _palette(border);
151 | font-family: _font(family-fixed);
152 | font-size: 0.9em;
153 | margin: 0 0.25em;
154 | padding: 0.25em 0.65em;
155 | }
156 |
157 | pre {
158 | -webkit-overflow-scrolling: touch;
159 | font-family: _font(family-fixed);
160 | font-size: 0.9em;
161 | margin: 0 0 _size(element-margin) 0;
162 |
163 | code {
164 | display: block;
165 | line-height: 1.75em;
166 | padding: 1em 1.5em;
167 | overflow-x: auto;
168 | }
169 | }
170 |
171 | .align-left {
172 | text-align: left;
173 | }
174 |
175 | .align-center {
176 | text-align: center;
177 | }
178 |
179 | .align-right {
180 | text-align: right;
181 | }
182 |
183 | /* Section/Article */
184 |
185 | section, article {
186 | &.special {
187 | text-align: center;
188 | }
189 | }
190 |
191 | header {
192 | p {
193 | color: _palette(fg-light);
194 | margin: 0 0 (_size(element-margin) * 0.75) 0;
195 | position: relative;
196 | }
197 |
198 | h2 + p {
199 | font-size: 1.25em;
200 | line-height: 1.5em;
201 | margin-top: (_size(element-margin) * -0.5);
202 | }
203 |
204 | h3 + p {
205 | font-size: 1.1em;
206 | line-height: 1.5em;
207 | margin-top: (_size(element-margin) * -0.4);
208 | }
209 |
210 | h4 + p,
211 | h5 + p,
212 | h6 + p {
213 | font-size: 0.9em;
214 | line-height: 1.5em;
215 | margin-top: (_size(element-margin) * -0.3);
216 | }
217 |
218 | &.major {
219 | margin: 0 0 (_size(element-margin) * 0.5) 0;
220 |
221 | &:after {
222 | background: _palette(border);
223 | content: '';
224 | display: inline-block;
225 | height: 1px;
226 | margin-top: (_size(element-margin) * 0.75);
227 | width: 6em;
228 | }
229 |
230 | h2, h3, h4, h5, h6 {
231 | margin: 0;
232 | }
233 |
234 | p {
235 | margin: (_size(element-margin) * 0.35) 0 0 0;
236 | }
237 | }
238 |
239 | &.special {
240 | text-align: center;
241 | }
242 | }
243 |
244 | /* Form */
245 |
246 | form {
247 | margin: 0 0 _size(element-margin) 0;
248 | }
249 |
250 | label {
251 | color: _palette(fg-bold);
252 | display: block;
253 | font-size: 0.9em;
254 | font-weight: _font(weight-bold);
255 | margin: 0 0 (_size(element-margin) * 0.5) 0;
256 | }
257 |
258 | input[type="text"],
259 | input[type="password"],
260 | input[type="email"],
261 | select,
262 | textarea {
263 | @include vendor('appearance', 'none');
264 | background: _palette(border-bg);
265 | border-radius: _size(border-radius);
266 | border: none;
267 | border: solid 1px _palette(border);
268 | color: inherit;
269 | display: block;
270 | outline: 0;
271 | padding: 0 1em;
272 | text-decoration: none;
273 | width: 100%;
274 |
275 | &:invalid {
276 | box-shadow: none;
277 | }
278 |
279 | &:focus {
280 | border-color: _palette(accent3);
281 | }
282 | }
283 |
284 | .select-wrapper {
285 | @include icon;
286 | display: block;
287 | position: relative;
288 |
289 | &:before {
290 | color: _palette(border);
291 | content: '\f078';
292 | display: block;
293 | height: _size(element-height);
294 | line-height: _size(element-height);
295 | pointer-events: none;
296 | position: absolute;
297 | right: 0;
298 | text-align: center;
299 | top: 0;
300 | width: _size(element-height);
301 | }
302 |
303 | select::-ms-expand {
304 | display: none;
305 | }
306 | }
307 |
308 | input[type="text"],
309 | input[type="password"],
310 | input[type="email"],
311 | select {
312 | height: _size(element-height);
313 | }
314 |
315 | textarea {
316 | padding: 0.75em 1em;
317 | }
318 |
319 | input[type="checkbox"],
320 | input[type="radio"], {
321 | @include vendor('appearance', 'none');
322 | display: block;
323 | float: left;
324 | margin-right: -2em;
325 | opacity: 0;
326 | width: 1em;
327 | z-index: -1;
328 |
329 | & + label {
330 | @include icon;
331 | color: _palette(fg);
332 | cursor: pointer;
333 | display: inline-block;
334 | font-size: 1em;
335 | font-weight: _font(weight);
336 | padding-left: (_size(element-height) * 0.6) + 0.75em;
337 | padding-right: 0.75em;
338 | position: relative;
339 |
340 | &:before {
341 | background: _palette(border-bg);
342 | border-radius: _size(border-radius);
343 | border: solid 1px _palette(border);
344 | content: '';
345 | display: inline-block;
346 | height: (_size(element-height) * 0.6);
347 | left: 0;
348 | line-height: (_size(element-height) * 0.575);
349 | position: absolute;
350 | text-align: center;
351 | top: 0;
352 | width: (_size(element-height) * 0.6);
353 | }
354 | }
355 |
356 | &:checked + label {
357 | &:before {
358 | background: _palette(dark, bg);
359 | border-color: _palette(dark, bg);
360 | color: _palette(dark, fg-bold);
361 | content: '\f00c';
362 | }
363 | }
364 |
365 | &:focus + label {
366 | &:before {
367 | border-color: _palette(accent3);
368 | }
369 | }
370 | }
371 |
372 | input[type="checkbox"] {
373 | & + label {
374 | &:before {
375 | border-radius: _size(border-radius);
376 | }
377 | }
378 | }
379 |
380 | input[type="radio"] {
381 | & + label {
382 | &:before {
383 | border-radius: 100%;
384 | }
385 | }
386 | }
387 |
388 | ::-webkit-input-placeholder {
389 | color: _palette(fg-light) !important;
390 | opacity: 1.0;
391 | }
392 |
393 | :-moz-placeholder {
394 | color: _palette(fg-light) !important;
395 | opacity: 1.0;
396 | }
397 |
398 | ::-moz-placeholder {
399 | color: _palette(fg-light) !important;
400 | opacity: 1.0;
401 | }
402 |
403 | :-ms-input-placeholder {
404 | color: _palette(fg-light) !important;
405 | opacity: 1.0;
406 | }
407 |
408 | .formerize-placeholder {
409 | color: _palette(fg-light) !important;
410 | opacity: 1.0;
411 | }
412 |
413 | /* Box */
414 |
415 | .box {
416 | border-radius: _size(border-radius);
417 | border: solid 1px _palette(border);
418 | margin-bottom: _size(element-margin);
419 | padding: 1.5em;
420 |
421 | > :last-child,
422 | > :last-child > :last-child,
423 | > :last-child > :last-child > :last-child {
424 | margin-bottom: 0;
425 | }
426 |
427 | &.alt {
428 | border: 0;
429 | border-radius: 0;
430 | padding: 0;
431 | }
432 | }
433 |
434 | /* Icon */
435 |
436 | .icon {
437 | @include icon;
438 | border-bottom: none;
439 | position: relative;
440 |
441 | > .label {
442 | display: none;
443 | }
444 |
445 | &.style1 { &:before { color: _palette(accent1); } }
446 | &.style2 { &:before { color: _palette(accent2); } }
447 | &.style3 { &:before { color: _palette(accent3); } }
448 | &.style4 { &:before { color: _palette(accent4); } }
449 | &.style5 { &:before { color: _palette(accent5); } }
450 | &.style6 { &:before { color: _palette(accent6); } }
451 |
452 | &.major {
453 | @include icon;
454 | color: _palette(fg-bold);
455 | cursor: default;
456 | display: inline-block;
457 | margin: 0 0 (_size(element-margin) * 0.75) 0;
458 |
459 | &:before {
460 | font-size: 4em;
461 | line-height: 1em;
462 | }
463 | }
464 | }
465 |
466 | /* Image */
467 |
468 | .image {
469 | border-radius: _size(border-radius);
470 | border: 0;
471 | display: inline-block;
472 | position: relative;
473 |
474 | img {
475 | border-radius: _size(border-radius);
476 | display: block;
477 | }
478 |
479 | &.left {
480 | float: left;
481 | padding: 0 1.5em 1em 0;
482 | top: 0.25em;
483 | }
484 |
485 | &.right {
486 | float: right;
487 | padding: 0 0 1em 1.5em;
488 | top: 0.25em;
489 | }
490 |
491 | &.left,
492 | &.right {
493 | max-width: 40%;
494 |
495 | img {
496 | width: 100%;
497 | }
498 | }
499 |
500 | &.fit {
501 | display: block;
502 | margin: 0 0 _size(element-margin) 0;
503 | width: 100%;
504 |
505 | img {
506 | width: 100%;
507 | }
508 | }
509 | }
510 |
511 | /* List */
512 |
513 | ol {
514 | list-style: decimal;
515 | margin: 0 0 _size(element-margin) 0;
516 | padding-left: 1.25em;
517 |
518 | li {
519 | padding-left: 0.25em;
520 | }
521 | }
522 |
523 | ul {
524 | list-style: disc;
525 | margin: 0 0 _size(element-margin) 0;
526 | padding-left: 1em;
527 |
528 | li {
529 | padding-left: 0.5em;
530 | }
531 |
532 | &.alt {
533 | list-style: none;
534 | padding-left: 0;
535 |
536 | li {
537 | border-top: solid 1px _palette(border);
538 | padding: 0.5em 0;
539 |
540 | &:first-child {
541 | border-top: 0;
542 | padding-top: 0;
543 | }
544 | }
545 | }
546 |
547 | &.icons {
548 | cursor: default;
549 | list-style: none;
550 | padding-left: 0;
551 |
552 | li {
553 | display: inline-block;
554 | padding: 0 1.25em 0 0;
555 |
556 | &:last-child {
557 | padding-right: 0;
558 | }
559 |
560 | .icon {
561 | &:before {
562 | font-size: 1.5em;
563 | }
564 | }
565 | }
566 | }
567 |
568 | &.major-icons {
569 | list-style: none;
570 | padding-left: 0;
571 |
572 | li {
573 | display: inline-block;
574 | padding: 2.5em;
575 | text-align: center;
576 |
577 | .icon {
578 | @include vendor('transform', 'rotate(45deg)');
579 | border-radius: _size(border-radius);
580 | border: solid 1px _palette(border);
581 | display: inline-block;
582 | height: 8em;
583 | line-height: 8em;
584 | margin: 0;
585 | text-align: center;
586 | width: 8em;
587 |
588 | &:before {
589 | @include vendor('transform', 'rotate(-45deg)');
590 | display: inline-block;
591 | line-height: inherit;
592 | }
593 | }
594 | }
595 | }
596 |
597 | &.actions {
598 | cursor: default;
599 | list-style: none;
600 | padding-left: 0;
601 |
602 | li {
603 | display: inline-block;
604 | padding: 0 (_size(element-margin) * 0.5) 0 0;
605 | vertical-align: middle;
606 |
607 | &:last-child {
608 | padding-right: 0;
609 | }
610 | }
611 |
612 | &.small {
613 | li {
614 | padding: 0 (_size(element-margin) * 0.25) 0 0;
615 | }
616 | }
617 |
618 | &.vertical {
619 | li {
620 | display: block;
621 | padding: (_size(element-margin) * 0.5) 0 0 0;
622 |
623 | &:first-child {
624 | padding-top: 0;
625 | }
626 |
627 | > * {
628 | margin-bottom: 0;
629 | }
630 | }
631 |
632 | &.small {
633 | li {
634 | padding: (_size(element-margin) * 0.25) 0 0 0;
635 |
636 | &:first-child {
637 | padding-top: 0;
638 | }
639 | }
640 | }
641 | }
642 |
643 | &.uniform {
644 | li {
645 | > * {
646 | min-width: 12em;
647 | }
648 | }
649 | }
650 |
651 | &.fit {
652 | display: table;
653 | margin-left: (_size(element-margin) * -0.5);
654 | padding: 0;
655 | table-layout: fixed;
656 | width: calc(100% + #{(_size(element-margin) * 0.5)});
657 |
658 | li {
659 | display: table-cell;
660 | padding: 0 0 0 (_size(element-margin) * 0.5);
661 |
662 | > * {
663 | margin-bottom: 0;
664 | }
665 | }
666 |
667 | &.small {
668 | margin-left: (_size(element-margin) * -0.25);
669 | width: calc(100% + #{(_size(element-margin) * 0.25)});
670 |
671 | li {
672 | padding: 0 0 0 (_size(element-margin) * 0.25);
673 | }
674 | }
675 | }
676 | }
677 | }
678 |
679 | dl {
680 | margin: 0 0 _size(element-margin) 0;
681 | }
682 |
683 | /* Table */
684 |
685 | .table-wrapper {
686 | -webkit-overflow-scrolling: touch;
687 | overflow-x: auto;
688 | }
689 |
690 | table {
691 | margin: 0 0 _size(element-margin) 0;
692 | width: 100%;
693 |
694 | tbody {
695 | tr {
696 | border-left: 0;
697 | border-right: 0;
698 |
699 | &:nth-child(2n + 1) {
700 | background-color: _palette(border-bg);
701 | }
702 | }
703 | }
704 |
705 | td {
706 | padding: 0.75em 0.75em;
707 | }
708 |
709 | th {
710 | color: _palette(fg-bold);
711 | font-size: 0.9em;
712 | font-weight: _font(weight-bold);
713 | padding: 0 0.75em 0.75em 0.75em;
714 | text-align: left;
715 | }
716 |
717 | thead {
718 | border-bottom: solid 1px _palette(border);
719 | }
720 |
721 | tfoot {
722 | border-top: solid 1px _palette(border);
723 | }
724 |
725 | &.alt {
726 | border-collapse: separate;
727 |
728 | tbody {
729 | tr {
730 | td {
731 | border: solid 1px _palette(border);
732 | border-left-width: 0;
733 | border-top-width: 0;
734 |
735 | &:first-child {
736 | border-left-width: 1px;
737 | }
738 | }
739 |
740 | &:first-child {
741 | td {
742 | border-top-width: 1px;
743 | }
744 | }
745 | }
746 | }
747 |
748 | thead {
749 | border-bottom: 0;
750 | }
751 |
752 | tfoot {
753 | border-top: 0;
754 | }
755 | }
756 | }
757 |
758 | /* Button */
759 |
760 | input[type="submit"],
761 | input[type="reset"],
762 | input[type="button"],
763 | button,
764 | .button {
765 | @include vendor('appearance', 'none');
766 | @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out'));
767 | background-color: transparent;
768 | border-radius: _size(border-radius);
769 | border: 0;
770 | box-shadow: inset 0 0 0 1px _palette(border);
771 | color: _palette(fg-bold) !important;
772 | cursor: pointer;
773 | display: inline-block;
774 | font-size: 0.9em;
775 | font-weight: _font(weight-bold);
776 | height: 2.75em;
777 | letter-spacing: 0.125em;
778 | line-height: 2.75em;
779 | padding: 0 2em;
780 | text-align: center;
781 | text-decoration: none;
782 | text-indent: 0.125em;
783 | text-transform: uppercase;
784 | white-space: nowrap;
785 |
786 | &:hover {
787 | background-color: _palette(border-bg);
788 | }
789 |
790 | &:active {
791 | background-color: _palette(border2-bg);
792 | }
793 |
794 | &.icon {
795 | padding-left: 1.35em;
796 |
797 | &:before {
798 | margin-right: 0.5em;
799 | }
800 | }
801 |
802 | &.fit {
803 | display: block;
804 | margin: 0 0 (_size(element-margin) * 0.5) 0;
805 | width: 100%;
806 | }
807 |
808 | &.small {
809 | font-size: 0.7em;
810 | }
811 |
812 | &.big {
813 | font-size: 1.25em;
814 | }
815 |
816 | &.special {
817 | background-color: _palette(fg-bold);
818 | box-shadow: none !important;
819 | color: _palette(bg) !important;
820 |
821 | &:hover {
822 | background-color: lighten(_palette(fg-bold), 5);
823 | }
824 |
825 | &:active {
826 | background-color: darken(_palette(fg-bold), 5);
827 | }
828 | }
829 |
830 | &.disabled,
831 | &:disabled {
832 | cursor: default;
833 | opacity: 0.25;
834 | }
835 | }
836 |
837 | // Dark (mixin)
838 |
839 | @mixin dark($color-this-bg: _palette(dark, bg)) {
840 | background-color: $color-this-bg;
841 | color: _palette(dark, fg);
842 |
843 | a {
844 | border-bottom-color: transparentize(_palette(dark, fg), 0.25);
845 |
846 | &:hover {
847 | color: _palette(dark, fg-bold);
848 | }
849 | }
850 |
851 | h1, h2, h3, h4, h5, h6, strong, b {
852 | color: _palette(dark, fg-bold);
853 | }
854 |
855 | header {
856 | p {
857 | color: _palette(dark, fg-bold);
858 | }
859 |
860 | &.major {
861 | &:after {
862 | background: _palette(dark, border);
863 | }
864 | }
865 | }
866 |
867 | input[type="submit"],
868 | input[type="reset"],
869 | input[type="button"],
870 | button,
871 | .button {
872 | box-shadow: inset 0 0 0 1px _palette(dark, border);
873 | color: _palette(dark, fg-bold) !important;
874 |
875 | &:hover {
876 | background-color: _palette(dark, border-bg);
877 | }
878 |
879 | &:active {
880 | background-color: _palette(dark, border2-bg);
881 | }
882 |
883 | &.special {
884 | background-color: _palette(dark, fg-bold);
885 | box-shadow: inset 0 0 0 1px _palette(dark, border) !important;
886 | color: $color-this-bg !important;
887 |
888 | &:hover {
889 | background-color: _palette(dark, border-bg) !important;
890 | color: _palette(dark, fg-bold) !important;
891 | }
892 |
893 | &:active {
894 | background-color: _palette(dark, border2-bg) !important;
895 | }
896 | }
897 | }
898 |
899 | ul {
900 | &.major-icons {
901 | li {
902 | .icon {
903 | border-color: _palette(dark, border);
904 | }
905 | }
906 | }
907 | }
908 |
909 | .icon {
910 | &.major {
911 | color: _palette(dark, fg-bold);
912 | }
913 | }
914 | }
915 |
916 | /* Main */
917 |
918 | .main {
919 | @include padding(6em, 0);
920 |
921 | &.style1 {
922 | background: _palette(bg);
923 | }
924 |
925 | &.style2 {
926 | @include dark(#333);
927 | background-attachment: fixed, fixed;
928 | background-image: url('../images/overlay1.png'), url('../images/header.jpg');
929 | background-size: auto, cover;
930 | }
931 | }
932 |
933 | /* Header */
934 |
935 | #header {
936 | @include padding(9em, 0, (0,0,_size(element-margin),0));
937 | @include dark(#4686a0);
938 | background-attachment: fixed, fixed, fixed;
939 | background-image: url('../images/overlay2.png'), url('../images/overlay3.svg'), linear-gradient(45deg, _palette(accent1-alt) 5%, _palette(accent3-alt) 30%, _palette(accent6-alt));
940 | background-position: top left, center center, center center;
941 | background-size: auto, cover, cover;
942 | overflow: hidden;
943 | position: relative;
944 | text-align: center;
945 |
946 | h1 {
947 | margin: 0;
948 | }
949 |
950 | p {
951 | margin: (_size(element-margin) * 0.5) 0 0 0;
952 | }
953 |
954 | .actions {
955 | margin: (_size(element-margin) * 1.25) 0 0 0;
956 | position: relative;
957 |
958 | &:after {
959 | background: _palette(dark, border);
960 | content: '';
961 | height: 100vh;
962 | left: 50%;
963 | position: absolute;
964 | top: 100%;
965 | width: 1px;
966 | }
967 | }
968 |
969 | .inner {
970 | @include vendor('transition', ('transform 1.5s ease', 'opacity 2s ease'));
971 | @include vendor('transition-delay', '0.25s');
972 | @include vendor('transform', 'scale(1)');
973 | opacity: 1;
974 | position: relative;
975 | z-index: 1;
976 |
977 | .actions {
978 | @include vendor('transition', 'transform 1.25s ease');
979 | @include vendor('transition-delay', '1s');
980 | @include vendor('transform', 'translateY(0)');
981 | opacity: 1;
982 | }
983 | }
984 |
985 | &:after {
986 | @include vendor('transition', 'opacity 1s ease');
987 | background-image: linear-gradient(45deg, _palette(accent3-alt), _palette(accent6-alt));
988 | content: '';
989 | height: 100%;
990 | left: 0;
991 | opacity: 0;
992 | position: absolute;
993 | top: 0;
994 | width: 100%;
995 | }
996 | }
997 |
998 | .body.is-loading {
999 | #header {
1000 | .inner {
1001 | @include vendor('transform', 'scale(1.05)');
1002 | opacity: 0;
1003 |
1004 | .actions {
1005 | @include vendor('transform', 'translateY(30em)');
1006 | opacity: 0;
1007 | }
1008 | }
1009 |
1010 | &:after {
1011 | opacity: 1;
1012 | }
1013 | }
1014 | }
1015 |
1016 | /* Footer */
1017 |
1018 | #footer {
1019 | @include padding(6em, 0, (0,0,_size(element-margin),0));
1020 | @include dark(#4686a0);
1021 | background-attachment: fixed, fixed, fixed;
1022 | background-image: url('../images/overlay2.png'), url('../images/overlay4.svg'), linear-gradient(45deg, _palette(accent6-alt), _palette(accent3-alt) 50%, _palette(accent1-alt) 95%);
1023 | background-position: top left, center center, center center;
1024 | background-size: auto, cover, cover;
1025 | text-align: center;
1026 |
1027 | .icons {
1028 | margin: 0;
1029 | }
1030 |
1031 | .copyright {
1032 | font-size: 0.8em;
1033 | list-style: none;
1034 | margin: _size(element-margin) 0 0 0;
1035 | padding: 0;
1036 |
1037 | li {
1038 | border-left: solid 1px;
1039 | display: inline-block;
1040 | line-height: 1em;
1041 | margin-left: 1em;
1042 | padding: 0 0 0 1em;
1043 |
1044 | &:first-child {
1045 | border-left: 0;
1046 | margin-left: 0;
1047 | padding: 0;
1048 | }
1049 | }
1050 | }
1051 | }
1052 |
1053 | /* XLarge */
1054 |
1055 | @include breakpoint(xlarge) {
1056 |
1057 | /* Basic */
1058 |
1059 | body, input, select, textarea {
1060 | font-size: 14pt;
1061 | }
1062 |
1063 | /* Header */
1064 |
1065 | #header {
1066 | @include padding(6em, 0, (0,0,_size(element-margin),0));
1067 | }
1068 |
1069 | }
1070 |
1071 | /* Large */
1072 |
1073 | @include breakpoint(large) {
1074 |
1075 | /* Basic */
1076 |
1077 | body, input, select, textarea {
1078 | font-size: 13pt;
1079 | }
1080 |
1081 | h1, h2, h3, h4, h5, h6 {
1082 | br {
1083 | display: none;
1084 | }
1085 | }
1086 |
1087 | /* List */
1088 |
1089 | ul {
1090 | &.major-icons {
1091 | li {
1092 | padding: 2em;
1093 |
1094 | .icon {
1095 | height: 8em;
1096 | line-height: 8em;
1097 | width: 8em;
1098 | }
1099 | }
1100 | }
1101 | }
1102 |
1103 | /* Main */
1104 |
1105 | .main {
1106 | @include padding(4em, 0);
1107 |
1108 | &.style2 {
1109 | background-attachment: scroll;
1110 | }
1111 | }
1112 |
1113 | /* Header */
1114 |
1115 | #header {
1116 | @include padding(5em, 0, (0,0,_size(element-margin),0));
1117 | background-attachment: scroll;
1118 |
1119 | br {
1120 | display: inline;
1121 | }
1122 | }
1123 |
1124 | /* Footer */
1125 |
1126 | #footer {
1127 | @include padding(4em, 0, (0,0,_size(element-margin),0));
1128 | background-attachment: scroll;
1129 | }
1130 |
1131 | }
1132 |
1133 | /* Medium */
1134 |
1135 | @include breakpoint(medium) {
1136 |
1137 | /* List */
1138 |
1139 | ul {
1140 | &.major-icons {
1141 | li {
1142 | padding: 2em;
1143 |
1144 | .icon {
1145 | height: 7em;
1146 | line-height: 7em;
1147 | width: 7em;
1148 | }
1149 | }
1150 | }
1151 | }
1152 |
1153 | /* Main */
1154 |
1155 | .main {
1156 | @include padding(5em, 3em);
1157 | }
1158 |
1159 | /* Header */
1160 |
1161 | #header {
1162 | @include padding(8em, 3em, (0,0,_size(element-margin),0));
1163 | }
1164 |
1165 | /* Footer */
1166 |
1167 | #footer {
1168 | @include padding(5em, 3em, (0,0,_size(element-margin),0));
1169 | }
1170 |
1171 | /* One */
1172 |
1173 | #one {
1174 | text-align: center;
1175 | }
1176 |
1177 | /* Two */
1178 |
1179 | #two {
1180 | text-align: center;
1181 | }
1182 |
1183 | }
1184 |
1185 | /* Small */
1186 |
1187 | @include breakpoint(small) {
1188 |
1189 | /* Basic */
1190 |
1191 | body, input, select, textarea {
1192 | font-size: 12pt;
1193 | }
1194 |
1195 | h1 {
1196 | font-size: 1.75em;
1197 | }
1198 |
1199 | h2 {
1200 | font-size: 1.5em;
1201 | }
1202 |
1203 | h3 {
1204 | font-size: 1.1em;
1205 | }
1206 |
1207 | h4 {
1208 | font-size: 1em;
1209 | }
1210 |
1211 | /* List */
1212 |
1213 | ul {
1214 | &.major-icons {
1215 | li {
1216 | padding: 1.5em;
1217 |
1218 | .icon {
1219 | height: 5em;
1220 | line-height: 5em;
1221 | width: 5em;
1222 |
1223 | &:before {
1224 | font-size: 42px;
1225 | }
1226 | }
1227 | }
1228 | }
1229 | }
1230 |
1231 | /* Icon */
1232 |
1233 | .icon {
1234 | &.major {
1235 | margin: 0 0 (_size(element-margin) * 0.5) 0;
1236 | }
1237 | }
1238 |
1239 | /* Button */
1240 |
1241 | input[type="submit"],
1242 | input[type="reset"],
1243 | input[type="button"],
1244 | button,
1245 | .button {
1246 | height: 3em;
1247 | line-height: 3em;
1248 | }
1249 |
1250 | /* Main */
1251 |
1252 | .main {
1253 | @include padding(3em, 1.5em);
1254 | }
1255 |
1256 | /* Header */
1257 |
1258 | #header {
1259 | @include padding(4em, 3em, (0,0,_size(element-margin),0));
1260 |
1261 | .actions {
1262 | margin: _size(element-margin) 0 0 0;
1263 | }
1264 | }
1265 |
1266 | /* Footer */
1267 |
1268 | #footer {
1269 | @include padding(3em, 1.5em, (0,0,_size(element-margin),0));
1270 | }
1271 |
1272 | }
1273 |
1274 | /* XSmall */
1275 |
1276 | @include breakpoint(xsmall) {
1277 |
1278 | /* List */
1279 |
1280 | ul {
1281 | &.actions {
1282 | margin: 0 0 _size(element-margin) 0;
1283 |
1284 | li {
1285 | display: block;
1286 | padding: (_size(element-margin) * 0.5) 0 0 0;
1287 | text-align: center;
1288 | width: 100%;
1289 |
1290 | &:first-child {
1291 | padding-top: 0;
1292 | }
1293 |
1294 | > * {
1295 | margin: 0 !important;
1296 | width: 100%;
1297 |
1298 | &.icon {
1299 | &:before {
1300 | margin-left: -2em;
1301 | }
1302 | }
1303 | }
1304 | }
1305 |
1306 | &.small {
1307 | li {
1308 | padding: (_size(element-margin) * 0.25) 0 0 0;
1309 |
1310 | &:first-child {
1311 | padding-top: 0;
1312 | }
1313 | }
1314 | }
1315 | }
1316 | }
1317 |
1318 | /* Button */
1319 |
1320 | input[type="submit"],
1321 | input[type="reset"],
1322 | input[type="button"],
1323 | .button {
1324 | padding: 0;
1325 | }
1326 |
1327 | /* Main */
1328 |
1329 | .main {
1330 | @include padding(2em, 1.5em);
1331 | }
1332 |
1333 | /* Header */
1334 |
1335 | #header {
1336 | @include padding(4em, 2em, (0,0,_size(element-margin),0));
1337 |
1338 | br {
1339 | display: none;
1340 | }
1341 | }
1342 |
1343 | /* Footer */
1344 |
1345 | #footer {
1346 | @include padding(2em, 1.5em, (0,0,_size(element-margin),0));
1347 |
1348 | .copyright {
1349 | margin: (_size(element-margin) * 0.75) 0 0 0;
1350 |
1351 | li {
1352 | border: 0;
1353 | display: block;
1354 | margin: 1em 0 0 0;
1355 | padding: 0;
1356 |
1357 | &:first-child {
1358 | margin-top: 0;
1359 | }
1360 | }
1361 | }
1362 | }
1363 |
1364 | }
1365 |
1366 | /* XXSmall */
1367 |
1368 | @include breakpoint(xxsmall) {
1369 |
1370 | /* Basic */
1371 |
1372 | html, body {
1373 | min-width: 320px;
1374 | }
1375 |
1376 | /* Main */
1377 |
1378 | .main {
1379 | @include padding(2em, 1em);
1380 | }
1381 |
1382 | /* Header */
1383 |
1384 | #header {
1385 | @include padding(3em, 1em, (0,0,_size(element-margin),0));
1386 | }
1387 |
1388 | /* Footer */
1389 |
1390 | #footer {
1391 | @include padding(2em, 1em, (0,0,_size(element-margin),0));
1392 | }
1393 |
1394 | }
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | class Header extends React.Component {
4 | render() {
5 | return (
6 |
18 | )
19 | }
20 | }
21 |
22 | export default Header
23 |
--------------------------------------------------------------------------------
/src/components/layout.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "../assets/scss/main.scss";
3 |
4 | import Header from "./Header";
5 | import Footer from "./Footer";
6 |
7 | class Template extends React.Component {
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | loading: 'is-loading'
12 | }
13 | }
14 |
15 | componentDidMount () {
16 | this.timeoutId = setTimeout(() => {
17 | this.setState({loading: ''});
18 | }, 100);
19 | }
20 |
21 | componentWillUnmount () {
22 | if (this.timeoutId) {
23 | clearTimeout(this.timeoutId);
24 | }
25 | }
26 |
27 | render() {
28 | const { children } = this.props;
29 |
30 | return (
31 |
32 |
33 | {children}
34 |
35 |
36 | );
37 | }
38 | }
39 |
40 | export default Template;
41 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Helmet from "react-helmet";
3 |
4 | import Layout from '../components/layout';
5 |
6 | import pic01 from '../assets/images/pic01.jpg'
7 | import pic02 from '../assets/images/pic02.jpg'
8 | import pic03 from '../assets/images/pic03.jpg'
9 | import pic04 from '../assets/images/pic04.jpg'
10 |
11 | class Homepage extends React.Component {
12 | render() {
13 | const siteTitle = "Gatsby Starter - Photon";
14 |
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | Lorem ipsum dolor adipiscing
24 | amet dolor consequat
25 |
26 |
Adipiscing a commodo ante nunc accumsan et interdum mi ante adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus nascetur ac non. Lorem curae et ante amet sapien sed tempus adipiscing id accumsan.
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | Lorem ipsum dolor adipiscing
49 | amet dolor consequat
50 |
51 |
Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non. Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.
52 |
Blandit faucibus proin. Ac aliquam integer adipiscing enim non praesent vis commodo nunc phasellus cubilia ac risus accumsan. Accumsan blandit. Lobortis phasellus non lobortis dit varius mi varius accumsan lobortis. Blandit ante aliquam lacinia lorem lobortis semper morbi col faucibus vitae integer placerat accumsan orci eu mi odio tempus adipiscing adipiscing adipiscing curae consequat feugiat etiam dolore.
53 |
Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non. Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | Adipiscing amet consequat
63 |
64 |
Ante nunc accumsan et aclacus nascetur ac ante amet sapien sed.
65 |
66 |
67 |
68 |
69 |
Magna feugiat lorem
70 |
Adipiscing a commodo ante nunc magna lorem et interdum mi ante nunc lobortis non amet vis sed volutpat et nascetur.
71 |
74 |
75 |
76 |
77 |
Magna feugiat lorem
78 |
Adipiscing a commodo ante nunc magna lorem et interdum mi ante nunc lobortis non amet vis sed volutpat et nascetur.
79 |
82 |
83 |
84 |
85 |
Magna feugiat lorem
86 |
Adipiscing a commodo ante nunc magna lorem et interdum mi ante nunc lobortis non amet vis sed volutpat et nascetur.
87 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | Ipsum feugiat consequat?
99 |
100 |
Sed lacus nascetur ac ante amet sapien.
101 |
105 |
106 |
107 |
108 | );
109 | }
110 | }
111 |
112 | export default Homepage;
--------------------------------------------------------------------------------