├── .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 │ ├── ie8.css │ ├── ie9.css │ └── skel.css ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── images │ ├── banner.jpg │ ├── pic01.jpg │ ├── pic02.jpg │ ├── pic03.jpg │ ├── pic04.jpg │ ├── pic05.jpg │ ├── pic06.jpg │ ├── pic07.jpg │ ├── pic08.jpg │ ├── pic09.jpg │ ├── pic10.jpg │ └── pic11.jpg └── scss │ ├── _css-grid.scss │ ├── base │ ├── _page.scss │ └── _typography.scss │ ├── components │ ├── _box.scss │ ├── _button.scss │ ├── _contact-method.scss │ ├── _form.scss │ ├── _icon.scss │ ├── _image.scss │ ├── _list.scss │ ├── _section.scss │ ├── _spotlights.scss │ ├── _table.scss │ └── _tiles.scss │ ├── ie8.scss │ ├── ie9.scss │ ├── layout │ ├── _banner.scss │ ├── _contact.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _main.scss │ ├── _menu.scss │ └── _wrapper.scss │ ├── libs │ ├── _functions.scss │ ├── _mixins.scss │ ├── _skel.scss │ └── _vars.scss │ └── main.scss ├── components ├── Banner.js ├── BannerLanding.js ├── Contact.js ├── Footer.js ├── Header.js ├── Menu.js └── layout.js ├── images └── gatsby-icon.png └── pages ├── 404.js ├── elements.js ├── generic.js ├── index.js ├── landing.js └── success.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | .cache 3 | node_modules 4 | yarn-error.log 5 | package-lock.json 6 | yarn.lock 7 | 8 | # Build directory 9 | /public 10 | .DS_Store 11 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gatsby-starter-forty-v2 2 | 3 | **This is a starter for Gatsby.js V2.** 4 | 5 | **The older V1 version of this starter can be found at:** 6 |
7 | **https://github.com/ChangoMan/gatsby-starter-forty** 8 | 9 | Gatsby.js V2 starter based on the Forty site template, designed by HTML5 UP. Check out https://codebushi.com/gatsby-starters/ for more Gatsby starters and templates. 10 | 11 | ## Preview 12 | 13 | http://gatsby-forty-v2.surge.sh/ 14 | 15 | ## Installation 16 | 17 | Install this starter (assuming Gatsby is installed) by running from your CLI: 18 |
19 | `gatsby new gatsby-starter-forty https://github.com/codebushi/gatsby-starter-forty-v2` 20 | 21 | Run `gatsby develop` in the terminal to start the dev site. 22 | 23 | ## CSS Grid 24 | 25 | 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. 26 | 27 | Here is an example of using the grid, for a 3 column layout: 28 | 29 | ``` 30 |
31 |
32 |

Content Here

33 |
34 |
35 |

Content Here

36 |
37 |
38 |

Content Here

39 |
40 |
41 | ``` -------------------------------------------------------------------------------- /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 - Forty V2", 4 | author: "Hunter Chang", 5 | description: "A Gatsby.js V2 Starter based on Forty 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/images/gatsby-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-forty-v2", 3 | "description": "Gatsby Starter - Forty V2", 4 | "version": "1.0.0", 5 | "author": "Hunter Chang", 6 | "dependencies": { 7 | "gatsby": "^2.0.0", 8 | "gatsby-plugin-manifest": "^2.0.2", 9 | "gatsby-plugin-offline": "^2.0.5", 10 | "gatsby-plugin-react-helmet": "^3.0.0", 11 | "gatsby-plugin-sass": "^2.0.1", 12 | "node-sass": "^4.9.3", 13 | "react": "^16.5.1", 14 | "react-dom": "^16.5.1", 15 | "react-helmet": "^5.2.0" 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.14.2" 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/assets/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.6.3 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.6.3');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.3#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-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"}.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/css/ie8.css: -------------------------------------------------------------------------------- 1 | /* 2 | Forty by HTML5 UP 3 | html5up.net | @ajlkn 4 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | */ 6 | 7 | /* Button */ 8 | 9 | .button { 10 | border: solid 2px !important; 11 | } 12 | 13 | .button.next { 14 | padding-right: 1.75em; 15 | } 16 | 17 | .button.next:before, .button.next:after { 18 | display: none; 19 | } 20 | 21 | /* Tiles */ 22 | 23 | .tiles article { 24 | width: 50%; 25 | -ms-behavior: url("assets/js/ie/backgroundsize.min.htc"); 26 | background-size: cover; 27 | } 28 | 29 | /* Banner */ 30 | 31 | #banner { 32 | -ms-behavior: url("assets/js/ie/backgroundsize.min.htc"); 33 | } 34 | 35 | #banner:after { 36 | display: none; 37 | } 38 | 39 | /* Menu */ 40 | 41 | #menu { 42 | background: #242943; 43 | } -------------------------------------------------------------------------------- /src/assets/css/ie9.css: -------------------------------------------------------------------------------- 1 | /* 2 | Forty by HTML5 UP 3 | html5up.net | @ajlkn 4 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | */ 6 | 7 | /* Spotlights */ 8 | 9 | .spotlights > section:after { 10 | content: ''; 11 | display: block; 12 | clear: both; 13 | } 14 | 15 | .spotlights > section > .image { 16 | float: left; 17 | } 18 | 19 | .spotlights > section > .content { 20 | float: left; 21 | } 22 | 23 | /* Tiles */ 24 | 25 | .tiles:after { 26 | content: ''; 27 | display: block; 28 | clear: both; 29 | } 30 | 31 | .tiles article { 32 | padding: 8em 4em 6em 4em ; 33 | float: left; 34 | height: auto; 35 | max-height: none; 36 | min-height: 0; 37 | } 38 | 39 | /* Header */ 40 | 41 | #header .logo { 42 | position: absolute; 43 | top: 0; 44 | left: 0; 45 | } 46 | 47 | #header nav { 48 | position: absolute; 49 | top: 0; 50 | right: 0; 51 | } 52 | 53 | /* Banner */ 54 | 55 | #banner { 56 | padding: 7em 0 4em 0 ; 57 | background-attachment: scroll; 58 | height: auto; 59 | max-height: none; 60 | min-height: 0; 61 | } 62 | 63 | #banner > .inner .content { 64 | display: block; 65 | } 66 | 67 | #banner > .inner .content > * { 68 | margin-left: 0; 69 | margin: 0 0 2em 0; 70 | } 71 | 72 | #banner.major { 73 | height: auto; 74 | max-height: none; 75 | min-height: 0; 76 | } 77 | 78 | /* Contact */ 79 | 80 | #contact:after { 81 | content: ''; 82 | display: block; 83 | clear: both; 84 | } 85 | 86 | #contact > .inner > * { 87 | float: left; 88 | } 89 | 90 | /* Menu */ 91 | 92 | #menu .inner { 93 | margin: 0 auto; 94 | } -------------------------------------------------------------------------------- /src/assets/css/skel.css: -------------------------------------------------------------------------------- 1 | 2 | /* Grid */ 3 | .row { 4 | border-bottom: solid 1px transparent; 5 | -moz-box-sizing: border-box; 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; } 8 | 9 | .row > * { 10 | float: left; 11 | -moz-box-sizing: border-box; 12 | -webkit-box-sizing: border-box; 13 | box-sizing: border-box; } 14 | 15 | .row:after, .row:before { 16 | content: ''; 17 | display: block; 18 | clear: both; 19 | height: 0; } 20 | 21 | .row.uniform > * > :first-child { 22 | margin-top: 0; } 23 | 24 | .row.uniform > * > :last-child { 25 | margin-bottom: 0; } 26 | 27 | .row.\30 \25 > * { 28 | padding: 0 0 0 0em; } 29 | 30 | .row.\30 \25 { 31 | margin: 0 0 -1px 0em; } 32 | 33 | .row.uniform.\30 \25 > * { 34 | padding: 0em 0 0 0em; } 35 | 36 | .row.uniform.\30 \25 { 37 | margin: 0em 0 -1px 0em; } 38 | 39 | .row > * { 40 | padding: 0 0 0 2em; } 41 | 42 | .row { 43 | margin: 0 0 -1px -2em; } 44 | 45 | .row.uniform > * { 46 | padding: 2em 0 0 2em; } 47 | 48 | .row.uniform { 49 | margin: -2em 0 -1px -2em; } 50 | 51 | .row.\32 00\25 > * { 52 | padding: 0 0 0 4em; } 53 | 54 | .row.\32 00\25 { 55 | margin: 0 0 -1px -4em; } 56 | 57 | .row.uniform.\32 00\25 > * { 58 | padding: 4em 0 0 4em; } 59 | 60 | .row.uniform.\32 00\25 { 61 | margin: -4em 0 -1px -4em; } 62 | 63 | .row.\31 50\25 > * { 64 | padding: 0 0 0 3em; } 65 | 66 | .row.\31 50\25 { 67 | margin: 0 0 -1px -3em; } 68 | 69 | .row.uniform.\31 50\25 > * { 70 | padding: 3em 0 0 3em; } 71 | 72 | .row.uniform.\31 50\25 { 73 | margin: -3em 0 -1px -3em; } 74 | 75 | .row.\35 0\25 > * { 76 | padding: 0 0 0 1em; } 77 | 78 | .row.\35 0\25 { 79 | margin: 0 0 -1px -1em; } 80 | 81 | .row.uniform.\35 0\25 > * { 82 | padding: 1em 0 0 1em; } 83 | 84 | .row.uniform.\35 0\25 { 85 | margin: -1em 0 -1px -1em; } 86 | 87 | .row.\32 5\25 > * { 88 | padding: 0 0 0 0.5em; } 89 | 90 | .row.\32 5\25 { 91 | margin: 0 0 -1px -0.5em; } 92 | 93 | .row.uniform.\32 5\25 > * { 94 | padding: 0.5em 0 0 0.5em; } 95 | 96 | .row.uniform.\32 5\25 { 97 | margin: -0.5em 0 -1px -0.5em; } 98 | 99 | .\31 2u, .\31 2u\24 { 100 | width: 100%; 101 | clear: none; 102 | margin-left: 0; } 103 | 104 | .\31 1u, .\31 1u\24 { 105 | width: 91.6666666667%; 106 | clear: none; 107 | margin-left: 0; } 108 | 109 | .\31 0u, .\31 0u\24 { 110 | width: 83.3333333333%; 111 | clear: none; 112 | margin-left: 0; } 113 | 114 | .\39 u, .\39 u\24 { 115 | width: 75%; 116 | clear: none; 117 | margin-left: 0; } 118 | 119 | .\38 u, .\38 u\24 { 120 | width: 66.6666666667%; 121 | clear: none; 122 | margin-left: 0; } 123 | 124 | .\37 u, .\37 u\24 { 125 | width: 58.3333333333%; 126 | clear: none; 127 | margin-left: 0; } 128 | 129 | .\36 u, .\36 u\24 { 130 | width: 50%; 131 | clear: none; 132 | margin-left: 0; } 133 | 134 | .\35 u, .\35 u\24 { 135 | width: 41.6666666667%; 136 | clear: none; 137 | margin-left: 0; } 138 | 139 | .\34 u, .\34 u\24 { 140 | width: 33.3333333333%; 141 | clear: none; 142 | margin-left: 0; } 143 | 144 | .\33 u, .\33 u\24 { 145 | width: 25%; 146 | clear: none; 147 | margin-left: 0; } 148 | 149 | .\32 u, .\32 u\24 { 150 | width: 16.6666666667%; 151 | clear: none; 152 | margin-left: 0; } 153 | 154 | .\31 u, .\31 u\24 { 155 | width: 8.3333333333%; 156 | clear: none; 157 | margin-left: 0; } 158 | 159 | .\31 2u\24 + *, 160 | .\31 1u\24 + *, 161 | .\31 0u\24 + *, 162 | .\39 u\24 + *, 163 | .\38 u\24 + *, 164 | .\37 u\24 + *, 165 | .\36 u\24 + *, 166 | .\35 u\24 + *, 167 | .\34 u\24 + *, 168 | .\33 u\24 + *, 169 | .\32 u\24 + *, 170 | .\31 u\24 + * { 171 | clear: left; } 172 | 173 | .\-11u { 174 | margin-left: 91.6666666667%; } 175 | 176 | .\-10u { 177 | margin-left: 83.3333333333%; } 178 | 179 | .\-9u { 180 | margin-left: 75%; } 181 | 182 | .\-8u { 183 | margin-left: 66.6666666667%; } 184 | 185 | .\-7u { 186 | margin-left: 58.3333333333%; } 187 | 188 | .\-6u { 189 | margin-left: 50%; } 190 | 191 | .\-5u { 192 | margin-left: 41.6666666667%; } 193 | 194 | .\-4u { 195 | margin-left: 33.3333333333%; } 196 | 197 | .\-3u { 198 | margin-left: 25%; } 199 | 200 | .\-2u { 201 | margin-left: 16.6666666667%; } 202 | 203 | .\-1u { 204 | margin-left: 8.3333333333%; } 205 | 206 | @media screen and (max-width: 1680px) { 207 | .row > * { 208 | padding: 0 0 0 2em; } 209 | .row { 210 | margin: 0 0 -1px -2em; } 211 | .row.uniform > * { 212 | padding: 2em 0 0 2em; } 213 | .row.uniform { 214 | margin: -2em 0 -1px -2em; } 215 | .row.\32 00\25 > * { 216 | padding: 0 0 0 4em; } 217 | .row.\32 00\25 { 218 | margin: 0 0 -1px -4em; } 219 | .row.uniform.\32 00\25 > * { 220 | padding: 4em 0 0 4em; } 221 | .row.uniform.\32 00\25 { 222 | margin: -4em 0 -1px -4em; } 223 | .row.\31 50\25 > * { 224 | padding: 0 0 0 3em; } 225 | .row.\31 50\25 { 226 | margin: 0 0 -1px -3em; } 227 | .row.uniform.\31 50\25 > * { 228 | padding: 3em 0 0 3em; } 229 | .row.uniform.\31 50\25 { 230 | margin: -3em 0 -1px -3em; } 231 | .row.\35 0\25 > * { 232 | padding: 0 0 0 1em; } 233 | .row.\35 0\25 { 234 | margin: 0 0 -1px -1em; } 235 | .row.uniform.\35 0\25 > * { 236 | padding: 1em 0 0 1em; } 237 | .row.uniform.\35 0\25 { 238 | margin: -1em 0 -1px -1em; } 239 | .row.\32 5\25 > * { 240 | padding: 0 0 0 0.5em; } 241 | .row.\32 5\25 { 242 | margin: 0 0 -1px -0.5em; } 243 | .row.uniform.\32 5\25 > * { 244 | padding: 0.5em 0 0 0.5em; } 245 | .row.uniform.\32 5\25 { 246 | margin: -0.5em 0 -1px -0.5em; } 247 | .\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 { 248 | width: 100%; 249 | clear: none; 250 | margin-left: 0; } 251 | .\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 { 252 | width: 91.6666666667%; 253 | clear: none; 254 | margin-left: 0; } 255 | .\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 { 256 | width: 83.3333333333%; 257 | clear: none; 258 | margin-left: 0; } 259 | .\39 u\28xlarge\29, .\39 u\24\28xlarge\29 { 260 | width: 75%; 261 | clear: none; 262 | margin-left: 0; } 263 | .\38 u\28xlarge\29, .\38 u\24\28xlarge\29 { 264 | width: 66.6666666667%; 265 | clear: none; 266 | margin-left: 0; } 267 | .\37 u\28xlarge\29, .\37 u\24\28xlarge\29 { 268 | width: 58.3333333333%; 269 | clear: none; 270 | margin-left: 0; } 271 | .\36 u\28xlarge\29, .\36 u\24\28xlarge\29 { 272 | width: 50%; 273 | clear: none; 274 | margin-left: 0; } 275 | .\35 u\28xlarge\29, .\35 u\24\28xlarge\29 { 276 | width: 41.6666666667%; 277 | clear: none; 278 | margin-left: 0; } 279 | .\34 u\28xlarge\29, .\34 u\24\28xlarge\29 { 280 | width: 33.3333333333%; 281 | clear: none; 282 | margin-left: 0; } 283 | .\33 u\28xlarge\29, .\33 u\24\28xlarge\29 { 284 | width: 25%; 285 | clear: none; 286 | margin-left: 0; } 287 | .\32 u\28xlarge\29, .\32 u\24\28xlarge\29 { 288 | width: 16.6666666667%; 289 | clear: none; 290 | margin-left: 0; } 291 | .\31 u\28xlarge\29, .\31 u\24\28xlarge\29 { 292 | width: 8.3333333333%; 293 | clear: none; 294 | margin-left: 0; } 295 | .\31 2u\24\28xlarge\29 + *, 296 | .\31 1u\24\28xlarge\29 + *, 297 | .\31 0u\24\28xlarge\29 + *, 298 | .\39 u\24\28xlarge\29 + *, 299 | .\38 u\24\28xlarge\29 + *, 300 | .\37 u\24\28xlarge\29 + *, 301 | .\36 u\24\28xlarge\29 + *, 302 | .\35 u\24\28xlarge\29 + *, 303 | .\34 u\24\28xlarge\29 + *, 304 | .\33 u\24\28xlarge\29 + *, 305 | .\32 u\24\28xlarge\29 + *, 306 | .\31 u\24\28xlarge\29 + * { 307 | clear: left; } 308 | .\-11u\28xlarge\29 { 309 | margin-left: 91.6666666667%; } 310 | .\-10u\28xlarge\29 { 311 | margin-left: 83.3333333333%; } 312 | .\-9u\28xlarge\29 { 313 | margin-left: 75%; } 314 | .\-8u\28xlarge\29 { 315 | margin-left: 66.6666666667%; } 316 | .\-7u\28xlarge\29 { 317 | margin-left: 58.3333333333%; } 318 | .\-6u\28xlarge\29 { 319 | margin-left: 50%; } 320 | .\-5u\28xlarge\29 { 321 | margin-left: 41.6666666667%; } 322 | .\-4u\28xlarge\29 { 323 | margin-left: 33.3333333333%; } 324 | .\-3u\28xlarge\29 { 325 | margin-left: 25%; } 326 | .\-2u\28xlarge\29 { 327 | margin-left: 16.6666666667%; } 328 | .\-1u\28xlarge\29 { 329 | margin-left: 8.3333333333%; } } 330 | 331 | @media screen and (max-width: 1280px) { 332 | .row > * { 333 | padding: 0 0 0 1.5em; } 334 | .row { 335 | margin: 0 0 -1px -1.5em; } 336 | .row.uniform > * { 337 | padding: 1.5em 0 0 1.5em; } 338 | .row.uniform { 339 | margin: -1.5em 0 -1px -1.5em; } 340 | .row.\32 00\25 > * { 341 | padding: 0 0 0 3em; } 342 | .row.\32 00\25 { 343 | margin: 0 0 -1px -3em; } 344 | .row.uniform.\32 00\25 > * { 345 | padding: 3em 0 0 3em; } 346 | .row.uniform.\32 00\25 { 347 | margin: -3em 0 -1px -3em; } 348 | .row.\31 50\25 > * { 349 | padding: 0 0 0 2.25em; } 350 | .row.\31 50\25 { 351 | margin: 0 0 -1px -2.25em; } 352 | .row.uniform.\31 50\25 > * { 353 | padding: 2.25em 0 0 2.25em; } 354 | .row.uniform.\31 50\25 { 355 | margin: -2.25em 0 -1px -2.25em; } 356 | .row.\35 0\25 > * { 357 | padding: 0 0 0 0.75em; } 358 | .row.\35 0\25 { 359 | margin: 0 0 -1px -0.75em; } 360 | .row.uniform.\35 0\25 > * { 361 | padding: 0.75em 0 0 0.75em; } 362 | .row.uniform.\35 0\25 { 363 | margin: -0.75em 0 -1px -0.75em; } 364 | .row.\32 5\25 > * { 365 | padding: 0 0 0 0.375em; } 366 | .row.\32 5\25 { 367 | margin: 0 0 -1px -0.375em; } 368 | .row.uniform.\32 5\25 > * { 369 | padding: 0.375em 0 0 0.375em; } 370 | .row.uniform.\32 5\25 { 371 | margin: -0.375em 0 -1px -0.375em; } 372 | .\31 2u\28large\29, .\31 2u\24\28large\29 { 373 | width: 100%; 374 | clear: none; 375 | margin-left: 0; } 376 | .\31 1u\28large\29, .\31 1u\24\28large\29 { 377 | width: 91.6666666667%; 378 | clear: none; 379 | margin-left: 0; } 380 | .\31 0u\28large\29, .\31 0u\24\28large\29 { 381 | width: 83.3333333333%; 382 | clear: none; 383 | margin-left: 0; } 384 | .\39 u\28large\29, .\39 u\24\28large\29 { 385 | width: 75%; 386 | clear: none; 387 | margin-left: 0; } 388 | .\38 u\28large\29, .\38 u\24\28large\29 { 389 | width: 66.6666666667%; 390 | clear: none; 391 | margin-left: 0; } 392 | .\37 u\28large\29, .\37 u\24\28large\29 { 393 | width: 58.3333333333%; 394 | clear: none; 395 | margin-left: 0; } 396 | .\36 u\28large\29, .\36 u\24\28large\29 { 397 | width: 50%; 398 | clear: none; 399 | margin-left: 0; } 400 | .\35 u\28large\29, .\35 u\24\28large\29 { 401 | width: 41.6666666667%; 402 | clear: none; 403 | margin-left: 0; } 404 | .\34 u\28large\29, .\34 u\24\28large\29 { 405 | width: 33.3333333333%; 406 | clear: none; 407 | margin-left: 0; } 408 | .\33 u\28large\29, .\33 u\24\28large\29 { 409 | width: 25%; 410 | clear: none; 411 | margin-left: 0; } 412 | .\32 u\28large\29, .\32 u\24\28large\29 { 413 | width: 16.6666666667%; 414 | clear: none; 415 | margin-left: 0; } 416 | .\31 u\28large\29, .\31 u\24\28large\29 { 417 | width: 8.3333333333%; 418 | clear: none; 419 | margin-left: 0; } 420 | .\31 2u\24\28large\29 + *, 421 | .\31 1u\24\28large\29 + *, 422 | .\31 0u\24\28large\29 + *, 423 | .\39 u\24\28large\29 + *, 424 | .\38 u\24\28large\29 + *, 425 | .\37 u\24\28large\29 + *, 426 | .\36 u\24\28large\29 + *, 427 | .\35 u\24\28large\29 + *, 428 | .\34 u\24\28large\29 + *, 429 | .\33 u\24\28large\29 + *, 430 | .\32 u\24\28large\29 + *, 431 | .\31 u\24\28large\29 + * { 432 | clear: left; } 433 | .\-11u\28large\29 { 434 | margin-left: 91.6666666667%; } 435 | .\-10u\28large\29 { 436 | margin-left: 83.3333333333%; } 437 | .\-9u\28large\29 { 438 | margin-left: 75%; } 439 | .\-8u\28large\29 { 440 | margin-left: 66.6666666667%; } 441 | .\-7u\28large\29 { 442 | margin-left: 58.3333333333%; } 443 | .\-6u\28large\29 { 444 | margin-left: 50%; } 445 | .\-5u\28large\29 { 446 | margin-left: 41.6666666667%; } 447 | .\-4u\28large\29 { 448 | margin-left: 33.3333333333%; } 449 | .\-3u\28large\29 { 450 | margin-left: 25%; } 451 | .\-2u\28large\29 { 452 | margin-left: 16.6666666667%; } 453 | .\-1u\28large\29 { 454 | margin-left: 8.3333333333%; } } 455 | 456 | @media screen and (max-width: 980px) { 457 | .row > * { 458 | padding: 0 0 0 1.5em; } 459 | .row { 460 | margin: 0 0 -1px -1.5em; } 461 | .row.uniform > * { 462 | padding: 1.5em 0 0 1.5em; } 463 | .row.uniform { 464 | margin: -1.5em 0 -1px -1.5em; } 465 | .row.\32 00\25 > * { 466 | padding: 0 0 0 3em; } 467 | .row.\32 00\25 { 468 | margin: 0 0 -1px -3em; } 469 | .row.uniform.\32 00\25 > * { 470 | padding: 3em 0 0 3em; } 471 | .row.uniform.\32 00\25 { 472 | margin: -3em 0 -1px -3em; } 473 | .row.\31 50\25 > * { 474 | padding: 0 0 0 2.25em; } 475 | .row.\31 50\25 { 476 | margin: 0 0 -1px -2.25em; } 477 | .row.uniform.\31 50\25 > * { 478 | padding: 2.25em 0 0 2.25em; } 479 | .row.uniform.\31 50\25 { 480 | margin: -2.25em 0 -1px -2.25em; } 481 | .row.\35 0\25 > * { 482 | padding: 0 0 0 0.75em; } 483 | .row.\35 0\25 { 484 | margin: 0 0 -1px -0.75em; } 485 | .row.uniform.\35 0\25 > * { 486 | padding: 0.75em 0 0 0.75em; } 487 | .row.uniform.\35 0\25 { 488 | margin: -0.75em 0 -1px -0.75em; } 489 | .row.\32 5\25 > * { 490 | padding: 0 0 0 0.375em; } 491 | .row.\32 5\25 { 492 | margin: 0 0 -1px -0.375em; } 493 | .row.uniform.\32 5\25 > * { 494 | padding: 0.375em 0 0 0.375em; } 495 | .row.uniform.\32 5\25 { 496 | margin: -0.375em 0 -1px -0.375em; } 497 | .\31 2u\28medium\29, .\31 2u\24\28medium\29 { 498 | width: 100%; 499 | clear: none; 500 | margin-left: 0; } 501 | .\31 1u\28medium\29, .\31 1u\24\28medium\29 { 502 | width: 91.6666666667%; 503 | clear: none; 504 | margin-left: 0; } 505 | .\31 0u\28medium\29, .\31 0u\24\28medium\29 { 506 | width: 83.3333333333%; 507 | clear: none; 508 | margin-left: 0; } 509 | .\39 u\28medium\29, .\39 u\24\28medium\29 { 510 | width: 75%; 511 | clear: none; 512 | margin-left: 0; } 513 | .\38 u\28medium\29, .\38 u\24\28medium\29 { 514 | width: 66.6666666667%; 515 | clear: none; 516 | margin-left: 0; } 517 | .\37 u\28medium\29, .\37 u\24\28medium\29 { 518 | width: 58.3333333333%; 519 | clear: none; 520 | margin-left: 0; } 521 | .\36 u\28medium\29, .\36 u\24\28medium\29 { 522 | width: 50%; 523 | clear: none; 524 | margin-left: 0; } 525 | .\35 u\28medium\29, .\35 u\24\28medium\29 { 526 | width: 41.6666666667%; 527 | clear: none; 528 | margin-left: 0; } 529 | .\34 u\28medium\29, .\34 u\24\28medium\29 { 530 | width: 33.3333333333%; 531 | clear: none; 532 | margin-left: 0; } 533 | .\33 u\28medium\29, .\33 u\24\28medium\29 { 534 | width: 25%; 535 | clear: none; 536 | margin-left: 0; } 537 | .\32 u\28medium\29, .\32 u\24\28medium\29 { 538 | width: 16.6666666667%; 539 | clear: none; 540 | margin-left: 0; } 541 | .\31 u\28medium\29, .\31 u\24\28medium\29 { 542 | width: 8.3333333333%; 543 | clear: none; 544 | margin-left: 0; } 545 | .\31 2u\24\28medium\29 + *, 546 | .\31 1u\24\28medium\29 + *, 547 | .\31 0u\24\28medium\29 + *, 548 | .\39 u\24\28medium\29 + *, 549 | .\38 u\24\28medium\29 + *, 550 | .\37 u\24\28medium\29 + *, 551 | .\36 u\24\28medium\29 + *, 552 | .\35 u\24\28medium\29 + *, 553 | .\34 u\24\28medium\29 + *, 554 | .\33 u\24\28medium\29 + *, 555 | .\32 u\24\28medium\29 + *, 556 | .\31 u\24\28medium\29 + * { 557 | clear: left; } 558 | .\-11u\28medium\29 { 559 | margin-left: 91.6666666667%; } 560 | .\-10u\28medium\29 { 561 | margin-left: 83.3333333333%; } 562 | .\-9u\28medium\29 { 563 | margin-left: 75%; } 564 | .\-8u\28medium\29 { 565 | margin-left: 66.6666666667%; } 566 | .\-7u\28medium\29 { 567 | margin-left: 58.3333333333%; } 568 | .\-6u\28medium\29 { 569 | margin-left: 50%; } 570 | .\-5u\28medium\29 { 571 | margin-left: 41.6666666667%; } 572 | .\-4u\28medium\29 { 573 | margin-left: 33.3333333333%; } 574 | .\-3u\28medium\29 { 575 | margin-left: 25%; } 576 | .\-2u\28medium\29 { 577 | margin-left: 16.6666666667%; } 578 | .\-1u\28medium\29 { 579 | margin-left: 8.3333333333%; } } 580 | 581 | @media screen and (max-width: 736px) { 582 | .row > * { 583 | padding: 0 0 0 1.25em; } 584 | .row { 585 | margin: 0 0 -1px -1.25em; } 586 | .row.uniform > * { 587 | padding: 1.25em 0 0 1.25em; } 588 | .row.uniform { 589 | margin: -1.25em 0 -1px -1.25em; } 590 | .row.\32 00\25 > * { 591 | padding: 0 0 0 2.5em; } 592 | .row.\32 00\25 { 593 | margin: 0 0 -1px -2.5em; } 594 | .row.uniform.\32 00\25 > * { 595 | padding: 2.5em 0 0 2.5em; } 596 | .row.uniform.\32 00\25 { 597 | margin: -2.5em 0 -1px -2.5em; } 598 | .row.\31 50\25 > * { 599 | padding: 0 0 0 1.875em; } 600 | .row.\31 50\25 { 601 | margin: 0 0 -1px -1.875em; } 602 | .row.uniform.\31 50\25 > * { 603 | padding: 1.875em 0 0 1.875em; } 604 | .row.uniform.\31 50\25 { 605 | margin: -1.875em 0 -1px -1.875em; } 606 | .row.\35 0\25 > * { 607 | padding: 0 0 0 0.625em; } 608 | .row.\35 0\25 { 609 | margin: 0 0 -1px -0.625em; } 610 | .row.uniform.\35 0\25 > * { 611 | padding: 0.625em 0 0 0.625em; } 612 | .row.uniform.\35 0\25 { 613 | margin: -0.625em 0 -1px -0.625em; } 614 | .row.\32 5\25 > * { 615 | padding: 0 0 0 0.3125em; } 616 | .row.\32 5\25 { 617 | margin: 0 0 -1px -0.3125em; } 618 | .row.uniform.\32 5\25 > * { 619 | padding: 0.3125em 0 0 0.3125em; } 620 | .row.uniform.\32 5\25 { 621 | margin: -0.3125em 0 -1px -0.3125em; } 622 | .\31 2u\28small\29, .\31 2u\24\28small\29 { 623 | width: 100%; 624 | clear: none; 625 | margin-left: 0; } 626 | .\31 1u\28small\29, .\31 1u\24\28small\29 { 627 | width: 91.6666666667%; 628 | clear: none; 629 | margin-left: 0; } 630 | .\31 0u\28small\29, .\31 0u\24\28small\29 { 631 | width: 83.3333333333%; 632 | clear: none; 633 | margin-left: 0; } 634 | .\39 u\28small\29, .\39 u\24\28small\29 { 635 | width: 75%; 636 | clear: none; 637 | margin-left: 0; } 638 | .\38 u\28small\29, .\38 u\24\28small\29 { 639 | width: 66.6666666667%; 640 | clear: none; 641 | margin-left: 0; } 642 | .\37 u\28small\29, .\37 u\24\28small\29 { 643 | width: 58.3333333333%; 644 | clear: none; 645 | margin-left: 0; } 646 | .\36 u\28small\29, .\36 u\24\28small\29 { 647 | width: 50%; 648 | clear: none; 649 | margin-left: 0; } 650 | .\35 u\28small\29, .\35 u\24\28small\29 { 651 | width: 41.6666666667%; 652 | clear: none; 653 | margin-left: 0; } 654 | .\34 u\28small\29, .\34 u\24\28small\29 { 655 | width: 33.3333333333%; 656 | clear: none; 657 | margin-left: 0; } 658 | .\33 u\28small\29, .\33 u\24\28small\29 { 659 | width: 25%; 660 | clear: none; 661 | margin-left: 0; } 662 | .\32 u\28small\29, .\32 u\24\28small\29 { 663 | width: 16.6666666667%; 664 | clear: none; 665 | margin-left: 0; } 666 | .\31 u\28small\29, .\31 u\24\28small\29 { 667 | width: 8.3333333333%; 668 | clear: none; 669 | margin-left: 0; } 670 | .\31 2u\24\28small\29 + *, 671 | .\31 1u\24\28small\29 + *, 672 | .\31 0u\24\28small\29 + *, 673 | .\39 u\24\28small\29 + *, 674 | .\38 u\24\28small\29 + *, 675 | .\37 u\24\28small\29 + *, 676 | .\36 u\24\28small\29 + *, 677 | .\35 u\24\28small\29 + *, 678 | .\34 u\24\28small\29 + *, 679 | .\33 u\24\28small\29 + *, 680 | .\32 u\24\28small\29 + *, 681 | .\31 u\24\28small\29 + * { 682 | clear: left; } 683 | .\-11u\28small\29 { 684 | margin-left: 91.6666666667%; } 685 | .\-10u\28small\29 { 686 | margin-left: 83.3333333333%; } 687 | .\-9u\28small\29 { 688 | margin-left: 75%; } 689 | .\-8u\28small\29 { 690 | margin-left: 66.6666666667%; } 691 | .\-7u\28small\29 { 692 | margin-left: 58.3333333333%; } 693 | .\-6u\28small\29 { 694 | margin-left: 50%; } 695 | .\-5u\28small\29 { 696 | margin-left: 41.6666666667%; } 697 | .\-4u\28small\29 { 698 | margin-left: 33.3333333333%; } 699 | .\-3u\28small\29 { 700 | margin-left: 25%; } 701 | .\-2u\28small\29 { 702 | margin-left: 16.6666666667%; } 703 | .\-1u\28small\29 { 704 | margin-left: 8.3333333333%; } } 705 | 706 | @media screen and (max-width: 480px) { 707 | .row > * { 708 | padding: 0 0 0 1.25em; } 709 | .row { 710 | margin: 0 0 -1px -1.25em; } 711 | .row.uniform > * { 712 | padding: 1.25em 0 0 1.25em; } 713 | .row.uniform { 714 | margin: -1.25em 0 -1px -1.25em; } 715 | .row.\32 00\25 > * { 716 | padding: 0 0 0 2.5em; } 717 | .row.\32 00\25 { 718 | margin: 0 0 -1px -2.5em; } 719 | .row.uniform.\32 00\25 > * { 720 | padding: 2.5em 0 0 2.5em; } 721 | .row.uniform.\32 00\25 { 722 | margin: -2.5em 0 -1px -2.5em; } 723 | .row.\31 50\25 > * { 724 | padding: 0 0 0 1.875em; } 725 | .row.\31 50\25 { 726 | margin: 0 0 -1px -1.875em; } 727 | .row.uniform.\31 50\25 > * { 728 | padding: 1.875em 0 0 1.875em; } 729 | .row.uniform.\31 50\25 { 730 | margin: -1.875em 0 -1px -1.875em; } 731 | .row.\35 0\25 > * { 732 | padding: 0 0 0 0.625em; } 733 | .row.\35 0\25 { 734 | margin: 0 0 -1px -0.625em; } 735 | .row.uniform.\35 0\25 > * { 736 | padding: 0.625em 0 0 0.625em; } 737 | .row.uniform.\35 0\25 { 738 | margin: -0.625em 0 -1px -0.625em; } 739 | .row.\32 5\25 > * { 740 | padding: 0 0 0 0.3125em; } 741 | .row.\32 5\25 { 742 | margin: 0 0 -1px -0.3125em; } 743 | .row.uniform.\32 5\25 > * { 744 | padding: 0.3125em 0 0 0.3125em; } 745 | .row.uniform.\32 5\25 { 746 | margin: -0.3125em 0 -1px -0.3125em; } 747 | .\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 { 748 | width: 100%; 749 | clear: none; 750 | margin-left: 0; } 751 | .\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 { 752 | width: 91.6666666667%; 753 | clear: none; 754 | margin-left: 0; } 755 | .\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 { 756 | width: 83.3333333333%; 757 | clear: none; 758 | margin-left: 0; } 759 | .\39 u\28xsmall\29, .\39 u\24\28xsmall\29 { 760 | width: 75%; 761 | clear: none; 762 | margin-left: 0; } 763 | .\38 u\28xsmall\29, .\38 u\24\28xsmall\29 { 764 | width: 66.6666666667%; 765 | clear: none; 766 | margin-left: 0; } 767 | .\37 u\28xsmall\29, .\37 u\24\28xsmall\29 { 768 | width: 58.3333333333%; 769 | clear: none; 770 | margin-left: 0; } 771 | .\36 u\28xsmall\29, .\36 u\24\28xsmall\29 { 772 | width: 50%; 773 | clear: none; 774 | margin-left: 0; } 775 | .\35 u\28xsmall\29, .\35 u\24\28xsmall\29 { 776 | width: 41.6666666667%; 777 | clear: none; 778 | margin-left: 0; } 779 | .\34 u\28xsmall\29, .\34 u\24\28xsmall\29 { 780 | width: 33.3333333333%; 781 | clear: none; 782 | margin-left: 0; } 783 | .\33 u\28xsmall\29, .\33 u\24\28xsmall\29 { 784 | width: 25%; 785 | clear: none; 786 | margin-left: 0; } 787 | .\32 u\28xsmall\29, .\32 u\24\28xsmall\29 { 788 | width: 16.6666666667%; 789 | clear: none; 790 | margin-left: 0; } 791 | .\31 u\28xsmall\29, .\31 u\24\28xsmall\29 { 792 | width: 8.3333333333%; 793 | clear: none; 794 | margin-left: 0; } 795 | .\31 2u\24\28xsmall\29 + *, 796 | .\31 1u\24\28xsmall\29 + *, 797 | .\31 0u\24\28xsmall\29 + *, 798 | .\39 u\24\28xsmall\29 + *, 799 | .\38 u\24\28xsmall\29 + *, 800 | .\37 u\24\28xsmall\29 + *, 801 | .\36 u\24\28xsmall\29 + *, 802 | .\35 u\24\28xsmall\29 + *, 803 | .\34 u\24\28xsmall\29 + *, 804 | .\33 u\24\28xsmall\29 + *, 805 | .\32 u\24\28xsmall\29 + *, 806 | .\31 u\24\28xsmall\29 + * { 807 | clear: left; } 808 | .\-11u\28xsmall\29 { 809 | margin-left: 91.6666666667%; } 810 | .\-10u\28xsmall\29 { 811 | margin-left: 83.3333333333%; } 812 | .\-9u\28xsmall\29 { 813 | margin-left: 75%; } 814 | .\-8u\28xsmall\29 { 815 | margin-left: 66.6666666667%; } 816 | .\-7u\28xsmall\29 { 817 | margin-left: 58.3333333333%; } 818 | .\-6u\28xsmall\29 { 819 | margin-left: 50%; } 820 | .\-5u\28xsmall\29 { 821 | margin-left: 41.6666666667%; } 822 | .\-4u\28xsmall\29 { 823 | margin-left: 33.3333333333%; } 824 | .\-3u\28xsmall\29 { 825 | margin-left: 25%; } 826 | .\-2u\28xsmall\29 { 827 | margin-left: 16.6666666667%; } 828 | .\-1u\28xsmall\29 { 829 | margin-left: 8.3333333333%; } } 830 | 831 | @media screen and (max-width: 360px) { 832 | .row > * { 833 | padding: 0 0 0 1.25em; } 834 | .row { 835 | margin: 0 0 -1px -1.25em; } 836 | .row.uniform > * { 837 | padding: 1.25em 0 0 1.25em; } 838 | .row.uniform { 839 | margin: -1.25em 0 -1px -1.25em; } 840 | .row.\32 00\25 > * { 841 | padding: 0 0 0 2.5em; } 842 | .row.\32 00\25 { 843 | margin: 0 0 -1px -2.5em; } 844 | .row.uniform.\32 00\25 > * { 845 | padding: 2.5em 0 0 2.5em; } 846 | .row.uniform.\32 00\25 { 847 | margin: -2.5em 0 -1px -2.5em; } 848 | .row.\31 50\25 > * { 849 | padding: 0 0 0 1.875em; } 850 | .row.\31 50\25 { 851 | margin: 0 0 -1px -1.875em; } 852 | .row.uniform.\31 50\25 > * { 853 | padding: 1.875em 0 0 1.875em; } 854 | .row.uniform.\31 50\25 { 855 | margin: -1.875em 0 -1px -1.875em; } 856 | .row.\35 0\25 > * { 857 | padding: 0 0 0 0.625em; } 858 | .row.\35 0\25 { 859 | margin: 0 0 -1px -0.625em; } 860 | .row.uniform.\35 0\25 > * { 861 | padding: 0.625em 0 0 0.625em; } 862 | .row.uniform.\35 0\25 { 863 | margin: -0.625em 0 -1px -0.625em; } 864 | .row.\32 5\25 > * { 865 | padding: 0 0 0 0.3125em; } 866 | .row.\32 5\25 { 867 | margin: 0 0 -1px -0.3125em; } 868 | .row.uniform.\32 5\25 > * { 869 | padding: 0.3125em 0 0 0.3125em; } 870 | .row.uniform.\32 5\25 { 871 | margin: -0.3125em 0 -1px -0.3125em; } 872 | .\31 2u\28xxsmall\29, .\31 2u\24\28xxsmall\29 { 873 | width: 100%; 874 | clear: none; 875 | margin-left: 0; } 876 | .\31 1u\28xxsmall\29, .\31 1u\24\28xxsmall\29 { 877 | width: 91.6666666667%; 878 | clear: none; 879 | margin-left: 0; } 880 | .\31 0u\28xxsmall\29, .\31 0u\24\28xxsmall\29 { 881 | width: 83.3333333333%; 882 | clear: none; 883 | margin-left: 0; } 884 | .\39 u\28xxsmall\29, .\39 u\24\28xxsmall\29 { 885 | width: 75%; 886 | clear: none; 887 | margin-left: 0; } 888 | .\38 u\28xxsmall\29, .\38 u\24\28xxsmall\29 { 889 | width: 66.6666666667%; 890 | clear: none; 891 | margin-left: 0; } 892 | .\37 u\28xxsmall\29, .\37 u\24\28xxsmall\29 { 893 | width: 58.3333333333%; 894 | clear: none; 895 | margin-left: 0; } 896 | .\36 u\28xxsmall\29, .\36 u\24\28xxsmall\29 { 897 | width: 50%; 898 | clear: none; 899 | margin-left: 0; } 900 | .\35 u\28xxsmall\29, .\35 u\24\28xxsmall\29 { 901 | width: 41.6666666667%; 902 | clear: none; 903 | margin-left: 0; } 904 | .\34 u\28xxsmall\29, .\34 u\24\28xxsmall\29 { 905 | width: 33.3333333333%; 906 | clear: none; 907 | margin-left: 0; } 908 | .\33 u\28xxsmall\29, .\33 u\24\28xxsmall\29 { 909 | width: 25%; 910 | clear: none; 911 | margin-left: 0; } 912 | .\32 u\28xxsmall\29, .\32 u\24\28xxsmall\29 { 913 | width: 16.6666666667%; 914 | clear: none; 915 | margin-left: 0; } 916 | .\31 u\28xxsmall\29, .\31 u\24\28xxsmall\29 { 917 | width: 8.3333333333%; 918 | clear: none; 919 | margin-left: 0; } 920 | .\31 2u\24\28xxsmall\29 + *, 921 | .\31 1u\24\28xxsmall\29 + *, 922 | .\31 0u\24\28xxsmall\29 + *, 923 | .\39 u\24\28xxsmall\29 + *, 924 | .\38 u\24\28xxsmall\29 + *, 925 | .\37 u\24\28xxsmall\29 + *, 926 | .\36 u\24\28xxsmall\29 + *, 927 | .\35 u\24\28xxsmall\29 + *, 928 | .\34 u\24\28xxsmall\29 + *, 929 | .\33 u\24\28xxsmall\29 + *, 930 | .\32 u\24\28xxsmall\29 + *, 931 | .\31 u\24\28xxsmall\29 + * { 932 | clear: left; } 933 | .\-11u\28xxsmall\29 { 934 | margin-left: 91.6666666667%; } 935 | .\-10u\28xxsmall\29 { 936 | margin-left: 83.3333333333%; } 937 | .\-9u\28xxsmall\29 { 938 | margin-left: 75%; } 939 | .\-8u\28xxsmall\29 { 940 | margin-left: 66.6666666667%; } 941 | .\-7u\28xxsmall\29 { 942 | margin-left: 58.3333333333%; } 943 | .\-6u\28xxsmall\29 { 944 | margin-left: 50%; } 945 | .\-5u\28xxsmall\29 { 946 | margin-left: 41.6666666667%; } 947 | .\-4u\28xxsmall\29 { 948 | margin-left: 33.3333333333%; } 949 | .\-3u\28xxsmall\29 { 950 | margin-left: 25%; } 951 | .\-2u\28xxsmall\29 { 952 | margin-left: 16.6666666667%; } 953 | .\-1u\28xxsmall\29 { 954 | margin-left: 8.3333333333%; } } -------------------------------------------------------------------------------- /src/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/assets/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/banner.jpg -------------------------------------------------------------------------------- /src/assets/images/pic01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic01.jpg -------------------------------------------------------------------------------- /src/assets/images/pic02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic02.jpg -------------------------------------------------------------------------------- /src/assets/images/pic03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic03.jpg -------------------------------------------------------------------------------- /src/assets/images/pic04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic04.jpg -------------------------------------------------------------------------------- /src/assets/images/pic05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic05.jpg -------------------------------------------------------------------------------- /src/assets/images/pic06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic06.jpg -------------------------------------------------------------------------------- /src/assets/images/pic07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic07.jpg -------------------------------------------------------------------------------- /src/assets/images/pic08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic08.jpg -------------------------------------------------------------------------------- /src/assets/images/pic09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic09.jpg -------------------------------------------------------------------------------- /src/assets/images/pic10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic10.jpg -------------------------------------------------------------------------------- /src/assets/images/pic11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/assets/images/pic11.jpg -------------------------------------------------------------------------------- /src/assets/scss/_css-grid.scss: -------------------------------------------------------------------------------- 1 | /* CSS Grid */ 2 | 3 | .mb-5 { 4 | margin-bottom: 2em; 5 | } 6 | 7 | @media screen and (min-width: 981px) { 8 | 9 | .grid-wrapper { 10 | display: grid; 11 | grid-gap: 0 2.25em; 12 | grid-template-columns: repeat(12, 1fr); 13 | margin: 0 auto; 14 | width: 100%; 15 | } 16 | 17 | /* Generate Columns 1 through 12 */ 18 | /* 19 | Example: 20 | .col-6 { grid-column: span 6; } 21 | */ 22 | 23 | $columns: 12; 24 | @mixin col-x-list { 25 | @for $i from 1 through $columns { 26 | .col-#{$i} { 27 | grid-column: span #{$i} 28 | } 29 | } 30 | } 31 | @include col-x-list; 32 | 33 | } 34 | 35 | @media screen and (min-width: 1141px) { 36 | 37 | // .grid-wrapper { 38 | // grid-gap: 0 3em; 39 | // } 40 | 41 | } -------------------------------------------------------------------------------- /src/assets/scss/base/_page.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Basic */ 8 | 9 | // MSIE: Required for IEMobile. 10 | @-ms-viewport { 11 | width: device-width; 12 | } 13 | 14 | // MSIE: Prevents scrollbar from overlapping content. 15 | body { 16 | -ms-overflow-style: scrollbar; 17 | } 18 | 19 | // Ensures page width is always >=320px. 20 | @include breakpoint(xsmall) { 21 | html, body { 22 | min-width: 320px; 23 | } 24 | } 25 | 26 | body { 27 | background: _palette(bg); 28 | 29 | // Prevents animation/transition "flicker" on page load. 30 | // Automatically added/removed by js/main.js. 31 | &.is-loading { 32 | *, *:before, *:after { 33 | @include vendor('animation', 'none !important'); 34 | @include vendor('transition', 'none !important'); 35 | } 36 | } 37 | 38 | } -------------------------------------------------------------------------------- /src/assets/scss/base/_typography.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Type */ 8 | 9 | body, input, select, textarea { 10 | color: _palette(fg); 11 | font-family: _font(family); 12 | font-size: 17pt; 13 | font-weight: _font(weight); 14 | letter-spacing: _font(letter-spacing); 15 | line-height: 1.65; 16 | 17 | @include breakpoint(xlarge) { 18 | font-size: 14pt; 19 | } 20 | 21 | @include breakpoint(large) { 22 | font-size: 12pt; 23 | } 24 | 25 | @include breakpoint(xxsmall) { 26 | font-size: 11pt; 27 | } 28 | } 29 | 30 | a { 31 | @include vendor('transition', ( 32 | 'color #{_duration(transition)} ease-in-out', 33 | 'border-bottom-color #{_duration(transition)} ease-in-out' 34 | )); 35 | border-bottom: dotted 1px; 36 | color: inherit; 37 | text-decoration: none; 38 | 39 | &:hover { 40 | border-bottom-color: transparent; 41 | color: _palette(highlight) !important; 42 | } 43 | 44 | &:active { 45 | color: desaturate(darken(_palette(highlight), 15), 5) !important; 46 | } 47 | } 48 | 49 | strong, b { 50 | color: _palette(fg-bold); 51 | font-weight: _font(weight-bold); 52 | } 53 | 54 | em, i { 55 | font-style: italic; 56 | } 57 | 58 | p { 59 | margin: 0 0 _size(element-margin) 0; 60 | } 61 | 62 | h1, h2, h3, h4, h5, h6 { 63 | color: _palette(fg-bold); 64 | font-weight: _font(weight-bold); 65 | line-height: 1.65; 66 | margin: 0 0 (_size(element-margin) * 0.5) 0; 67 | 68 | a { 69 | color: inherit; 70 | border-bottom: 0; 71 | } 72 | } 73 | 74 | h1 { 75 | font-size: 2.5em; 76 | } 77 | 78 | h2 { 79 | font-size: 1.75em; 80 | } 81 | 82 | h3 { 83 | font-size: 1.35em; 84 | } 85 | 86 | h4 { 87 | font-size: 1.1em; 88 | } 89 | 90 | h5 { 91 | font-size: 0.9em; 92 | } 93 | 94 | h6 { 95 | font-size: 0.7em; 96 | } 97 | 98 | @include breakpoint(small) { 99 | h1 { 100 | font-size: 2em; 101 | } 102 | 103 | h2 { 104 | font-size: 1.5em; 105 | } 106 | 107 | h3 { 108 | font-size: 1.25em; 109 | } 110 | } 111 | 112 | sub { 113 | font-size: 0.8em; 114 | position: relative; 115 | top: 0.5em; 116 | } 117 | 118 | sup { 119 | font-size: 0.8em; 120 | position: relative; 121 | top: -0.5em; 122 | } 123 | 124 | blockquote { 125 | border-left: solid 4px _palette(border); 126 | font-style: italic; 127 | margin: 0 0 _size(element-margin) 0; 128 | padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); 129 | } 130 | 131 | code { 132 | background: _palette(border-bg); 133 | font-family: _font(family-fixed); 134 | font-size: 0.9em; 135 | margin: 0 0.25em; 136 | padding: 0.25em 0.65em; 137 | } 138 | 139 | pre { 140 | -webkit-overflow-scrolling: touch; 141 | font-family: _font(family-fixed); 142 | font-size: 0.9em; 143 | margin: 0 0 _size(element-margin) 0; 144 | 145 | code { 146 | display: block; 147 | line-height: 1.75; 148 | padding: 1em 1.5em; 149 | overflow-x: auto; 150 | } 151 | } 152 | 153 | hr { 154 | border: 0; 155 | border-bottom: solid 1px _palette(border); 156 | margin: _size(element-margin) 0; 157 | 158 | &.major { 159 | margin: (_size(element-margin) * 1.5) 0; 160 | } 161 | } 162 | 163 | .align-left { 164 | text-align: left; 165 | } 166 | 167 | .align-center { 168 | text-align: center; 169 | } 170 | 171 | .align-right { 172 | text-align: right; 173 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_box.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Box */ 8 | 9 | .box { 10 | border: solid 1px _palette(border); 11 | margin-bottom: _size(element-margin); 12 | padding: 1.5em; 13 | 14 | > :last-child, 15 | > :last-child > :last-child, 16 | > :last-child > :last-child > :last-child { 17 | margin-bottom: 0; 18 | } 19 | 20 | &.alt { 21 | border: 0; 22 | border-radius: 0; 23 | padding: 0; 24 | } 25 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_button.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Button */ 8 | 9 | input[type="submit"], 10 | input[type="reset"], 11 | input[type="button"], 12 | button, 13 | .button { 14 | @include vendor('appearance', 'none'); 15 | @include vendor('transition', ( 16 | 'background-color #{_duration(transition)} ease-in-out', 17 | 'box-shadow #{_duration(transition)} ease-in-out', 18 | 'color #{_duration(transition)} ease-in-out' 19 | )); 20 | background-color: transparent; 21 | border: 0; 22 | border-radius: 0; 23 | box-shadow: inset 0 0 0 2px _palette(fg-bold); 24 | color: _palette(fg-bold); 25 | cursor: pointer; 26 | display: inline-block; 27 | font-size: 0.8em; 28 | font-weight: _font(weight-bold); 29 | height: 3.5em; 30 | letter-spacing: _font(letter-spacing-alt); 31 | line-height: 3.5em; 32 | padding: 0 1.75em; 33 | text-align: center; 34 | text-decoration: none; 35 | text-transform: uppercase; 36 | white-space: nowrap; 37 | 38 | &:hover, &:active { 39 | box-shadow: inset 0 0 0 2px _palette(highlight); 40 | color: _palette(highlight); 41 | } 42 | 43 | &:active { 44 | background-color: transparentize(_palette(highlight), 0.9); 45 | box-shadow: inset 0 0 0 2px desaturate(darken(_palette(highlight), 15), 5); 46 | color: desaturate(darken(_palette(highlight), 15), 5); 47 | } 48 | 49 | &.icon { 50 | &:before { 51 | margin-right: 0.5em; 52 | } 53 | } 54 | 55 | &.fit { 56 | display: block; 57 | margin: 0 0 (_size(element-margin) * 0.5) 0; 58 | width: 100%; 59 | } 60 | 61 | &.small { 62 | font-size: 0.6em; 63 | } 64 | 65 | &.big { 66 | font-size: 1.25em; 67 | height: 3em; 68 | line-height: 3em; 69 | } 70 | 71 | &.next { 72 | padding-right: 4.5em; 73 | position: relative; 74 | 75 | &:before, &:after { 76 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); 77 | background-position: center right; 78 | background-repeat: no-repeat; 79 | background-size: 36px 24px; 80 | content: ''; 81 | display: block; 82 | height: 100%; 83 | position: absolute; 84 | right: 1.5em; 85 | top: 0; 86 | vertical-align: middle; 87 | width: 36px; 88 | } 89 | 90 | &:before { 91 | background-image: svg-url(''); 92 | } 93 | 94 | &:after { 95 | background-image: svg-url(''); 96 | opacity: 0; 97 | z-index: 1; 98 | } 99 | 100 | &:hover, &:active { 101 | &:after { 102 | opacity: 1; 103 | } 104 | } 105 | 106 | @include breakpoint(large) { 107 | padding-right: 5em; 108 | } 109 | } 110 | 111 | &.special { 112 | background-color: _palette(fg-bold); 113 | box-shadow: none; 114 | color: _palette(bg); 115 | 116 | &:hover, &:active { 117 | background-color: _palette(highlight); 118 | color: _palette(bg) !important; 119 | } 120 | 121 | &:active { 122 | background-color: desaturate(darken(_palette(highlight), 15), 5); 123 | } 124 | } 125 | 126 | &.disabled, 127 | &:disabled { 128 | @include vendor('pointer-events', 'none'); 129 | cursor: default; 130 | opacity: 0.25; 131 | } 132 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_contact-method.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Contact Method */ 8 | 9 | .contact-method { 10 | margin: 0 0 _size(element-margin) 0; 11 | padding-left: 3.25em; 12 | position: relative; 13 | 14 | .icon { 15 | left: 0; 16 | position: absolute; 17 | top: 0; 18 | } 19 | 20 | h3 { 21 | margin: 0 0 (_size(element-margin) * 0.25) 0; 22 | } 23 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_form.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Form */ 8 | 9 | form { 10 | margin: 0 0 _size(element-margin) 0; 11 | 12 | .field { 13 | margin: 0 0 (_size(element-margin) * 1) 0; 14 | 15 | &.half { 16 | width: 50%; 17 | float: left; 18 | padding: 0 0 0 (_size(element-margin) * 1 * 0.5); 19 | 20 | &.first { 21 | padding: 0 (_size(element-margin) * 1 * 0.5) 0 0; 22 | } 23 | } 24 | } 25 | 26 | > .actions { 27 | margin: (_size(element-margin) * 1.25) 0 0 0 !important; 28 | } 29 | 30 | @include breakpoint(small) { 31 | .field { 32 | margin: 0 0 (_size(element-margin) * 0.75) 0; 33 | 34 | &.half { 35 | padding: 0 0 0 (_size(element-margin) * 0.75 * 0.5); 36 | 37 | &.first { 38 | padding: 0 (_size(element-margin) * 0.75 * 0.5) 0 0; 39 | } 40 | } 41 | } 42 | 43 | > .actions { 44 | margin: (_size(element-margin) * 1) 0 0 0 !important; 45 | } 46 | } 47 | 48 | @include breakpoint(xsmall) { 49 | .field { 50 | &.half { 51 | width: 100%; 52 | float: none; 53 | padding: 0; 54 | 55 | &.first { 56 | padding: 0; 57 | } 58 | } 59 | } 60 | } 61 | } 62 | 63 | label { 64 | color: _palette(fg-bold); 65 | display: block; 66 | font-size: 0.8em; 67 | font-weight: _font(weight-bold); 68 | letter-spacing: _font(letter-spacing-alt); 69 | margin: 0 0 (_size(element-margin) * 0.5) 0; 70 | text-transform: uppercase; 71 | } 72 | 73 | input[type="text"], 74 | input[type="password"], 75 | input[type="email"], 76 | input[type="tel"], 77 | input[type="search"], 78 | input[type="url"], 79 | select, 80 | textarea { 81 | @include vendor('appearance', 'none'); 82 | background: _palette(border-bg); 83 | border: none; 84 | border-radius: 0; 85 | color: inherit; 86 | display: block; 87 | outline: 0; 88 | padding: 0 1em; 89 | text-decoration: none; 90 | width: 100%; 91 | 92 | &:invalid { 93 | box-shadow: none; 94 | } 95 | 96 | &:focus { 97 | border-color: _palette(highlight); 98 | box-shadow: 0 0 0 2px _palette(highlight); 99 | } 100 | } 101 | 102 | .select-wrapper { 103 | @include icon; 104 | display: block; 105 | position: relative; 106 | 107 | &:before { 108 | color: _palette(border); 109 | content: '\f078'; 110 | display: block; 111 | height: _size(element-height); 112 | line-height: _size(element-height); 113 | pointer-events: none; 114 | position: absolute; 115 | right: 0; 116 | text-align: center; 117 | top: 0; 118 | width: _size(element-height); 119 | } 120 | 121 | select::-ms-expand { 122 | display: none; 123 | } 124 | } 125 | 126 | input[type="text"], 127 | input[type="password"], 128 | input[type="email"], 129 | input[type="tel"], 130 | input[type="search"], 131 | input[type="url"], 132 | select { 133 | height: _size(element-height); 134 | } 135 | 136 | textarea { 137 | padding: 0.75em 1em; 138 | } 139 | 140 | input[type="checkbox"], 141 | input[type="radio"], { 142 | @include vendor('appearance', 'none'); 143 | display: block; 144 | float: left; 145 | margin-right: -2em; 146 | opacity: 0; 147 | width: 1em; 148 | z-index: -1; 149 | 150 | & + label { 151 | @include icon; 152 | color: _palette(fg); 153 | cursor: pointer; 154 | display: inline-block; 155 | font-weight: _font(weight); 156 | padding-left: (_size(element-height) * 0.6) + 1em; 157 | padding-right: 0.75em; 158 | position: relative; 159 | 160 | &:before { 161 | background: _palette(border-bg); 162 | content: ''; 163 | display: inline-block; 164 | height: (_size(element-height) * 0.6); 165 | left: 0; 166 | letter-spacing: 0; 167 | line-height: (_size(element-height) * 0.575); 168 | position: absolute; 169 | text-align: center; 170 | top: 0; 171 | width: (_size(element-height) * 0.6); 172 | } 173 | } 174 | 175 | &:checked + label { 176 | &:before { 177 | background: _palette(fg-bold); 178 | border-color: _palette(highlight); 179 | content: '\f00c'; 180 | color: _palette(bg); 181 | } 182 | } 183 | 184 | &:focus + label { 185 | &:before { 186 | box-shadow: 0 0 0 2px _palette(highlight); 187 | } 188 | } 189 | } 190 | 191 | input[type="checkbox"] { 192 | & + label { 193 | &:before { 194 | } 195 | } 196 | } 197 | 198 | input[type="radio"] { 199 | & + label { 200 | &:before { 201 | border-radius: 100%; 202 | } 203 | } 204 | } 205 | 206 | ::-webkit-input-placeholder { 207 | color: _palette(fg-light) !important; 208 | opacity: 1.0; 209 | } 210 | 211 | :-moz-placeholder { 212 | color: _palette(fg-light) !important; 213 | opacity: 1.0; 214 | } 215 | 216 | ::-moz-placeholder { 217 | color: _palette(fg-light) !important; 218 | opacity: 1.0; 219 | } 220 | 221 | :-ms-input-placeholder { 222 | color: _palette(fg-light) !important; 223 | opacity: 1.0; 224 | } 225 | 226 | .formerize-placeholder { 227 | color: _palette(fg-light) !important; 228 | opacity: 1.0; 229 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_icon.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Icon */ 8 | 9 | .icon { 10 | @include icon; 11 | border-bottom: none; 12 | position: relative; 13 | 14 | > .label { 15 | display: none; 16 | } 17 | 18 | &.alt { 19 | &:before { 20 | background-color: _palette(fg-bold); 21 | border-radius: 100%; 22 | color: _palette(bg); 23 | display: inline-block; 24 | height: 2em; 25 | line-height: 2em; 26 | text-align: center; 27 | width: 2em; 28 | } 29 | } 30 | } 31 | 32 | a.icon { 33 | &.alt { 34 | &:before { 35 | @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); 36 | } 37 | 38 | &:hover { 39 | &:before { 40 | background-color: _palette(accent1); 41 | } 42 | } 43 | 44 | &:active { 45 | &:before { 46 | background-color: desaturate(darken(_palette(accent1), 15), 5); 47 | } 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_image.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Image */ 8 | 9 | .image { 10 | border: 0; 11 | display: inline-block; 12 | position: relative; 13 | 14 | img { 15 | display: block; 16 | } 17 | 18 | &.left, 19 | &.right { 20 | max-width: 30%; 21 | 22 | img { 23 | width: 100%; 24 | } 25 | } 26 | 27 | &.left { 28 | float: left; 29 | margin: 0 1.5em 1.25em 0; 30 | top: 0.25em; 31 | } 32 | 33 | &.right { 34 | float: right; 35 | margin: 0 0 1.25em 1.5em; 36 | top: 0.25em; 37 | } 38 | 39 | &.fit { 40 | display: block; 41 | margin: 0 0 _size(element-margin) 0; 42 | width: 100%; 43 | 44 | img { 45 | width: 100%; 46 | } 47 | } 48 | 49 | &.main { 50 | display: block; 51 | margin: (_size(element-margin) * 1.25) 0; 52 | width: 100%; 53 | 54 | img { 55 | width: 100%; 56 | } 57 | 58 | @include breakpoint(small) { 59 | margin: (_size(element-margin) * 0.75) 0; 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_list.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* List */ 8 | 9 | ol { 10 | list-style: decimal; 11 | margin: 0 0 _size(element-margin) 0; 12 | padding-left: 1.25em; 13 | 14 | li { 15 | padding-left: 0.25em; 16 | } 17 | } 18 | 19 | ul { 20 | list-style: disc; 21 | margin: 0 0 _size(element-margin) 0; 22 | padding-left: 1em; 23 | 24 | li { 25 | padding-left: 0.5em; 26 | } 27 | 28 | &.alt { 29 | list-style: none; 30 | padding-left: 0; 31 | 32 | li { 33 | border-top: solid 1px _palette(border); 34 | padding: 0.5em 0; 35 | 36 | &:first-child { 37 | border-top: 0; 38 | padding-top: 0; 39 | } 40 | } 41 | } 42 | 43 | &.icons { 44 | cursor: default; 45 | list-style: none; 46 | padding-left: 0; 47 | 48 | li { 49 | display: inline-block; 50 | padding: 0 1em 0 0; 51 | 52 | &:last-child { 53 | padding-right: 0; 54 | } 55 | } 56 | 57 | @include breakpoint(small) { 58 | li { 59 | padding: 0 0.75em 0 0; 60 | } 61 | } 62 | } 63 | 64 | &.actions { 65 | cursor: default; 66 | list-style: none; 67 | padding-left: 0; 68 | 69 | li { 70 | display: inline-block; 71 | padding: 0 (_size(element-margin) * 0.5) 0 0; 72 | vertical-align: middle; 73 | 74 | &:last-child { 75 | padding-right: 0; 76 | } 77 | } 78 | 79 | &.small { 80 | li { 81 | padding: 0 (_size(element-margin) * 0.5) 0 0; 82 | } 83 | } 84 | 85 | &.vertical { 86 | li { 87 | display: block; 88 | padding: (_size(element-margin) * 0.5) 0 0 0; 89 | 90 | &:first-child { 91 | padding-top: 0; 92 | } 93 | 94 | > * { 95 | margin-bottom: 0; 96 | } 97 | } 98 | 99 | &.small { 100 | li { 101 | &:first-child { 102 | padding-top: 0; 103 | } 104 | } 105 | } 106 | } 107 | 108 | &.fit { 109 | display: table; 110 | margin-left: (_size(element-margin) * -0.5); 111 | padding: 0; 112 | table-layout: fixed; 113 | width: calc(100% + #{(_size(element-margin) * 0.5)}); 114 | 115 | li { 116 | display: table-cell; 117 | padding: 0 0 0 (_size(element-margin) * 0.5); 118 | 119 | > * { 120 | margin-bottom: 0; 121 | } 122 | } 123 | 124 | &.small { 125 | margin-left: (_size(element-margin) * -0.5); 126 | width: calc(100% + #{(_size(element-margin) * 0.5)}); 127 | 128 | li { 129 | padding: 0 0 0 (_size(element-margin) * 0.5); 130 | } 131 | } 132 | } 133 | } 134 | 135 | &.pagination { 136 | cursor: default; 137 | list-style: none; 138 | padding-left: 0; 139 | 140 | li { 141 | display: inline-block; 142 | padding-left: 0; 143 | vertical-align: middle; 144 | 145 | > .page { 146 | @include vendor('transition', ( 147 | 'background-color #{_duration(transition)} ease-in-out', 148 | 'color #{_duration(transition)} ease-in-out' 149 | )); 150 | border-bottom: 0; 151 | display: inline-block; 152 | font-size: 0.8em; 153 | font-weight: _font(weight-bold); 154 | height: 1.5em; 155 | line-height: 1.5em; 156 | margin: 0 0.125em; 157 | min-width: 1.5em; 158 | padding: 0 0.5em; 159 | text-align: center; 160 | 161 | &.active { 162 | background-color: _palette(fg-bold); 163 | color: _palette(bg); 164 | 165 | &:hover { 166 | background-color: _palette(highlight); 167 | color: _palette(bg) !important; 168 | } 169 | 170 | &:active { 171 | background-color: desaturate(darken(_palette(highlight), 15), 5); 172 | } 173 | } 174 | } 175 | 176 | &:first-child { 177 | padding-right: 0.75em; 178 | } 179 | 180 | &:last-child { 181 | padding-left: 0.75em; 182 | } 183 | } 184 | 185 | @include breakpoint(xsmall) { 186 | li { 187 | &:nth-child(n+2):nth-last-child(n+2) { 188 | display: none; 189 | } 190 | 191 | &:first-child { 192 | padding-right: 0; 193 | } 194 | } 195 | } 196 | } 197 | } 198 | 199 | dl { 200 | margin: 0 0 _size(element-margin) 0; 201 | 202 | dt { 203 | display: block; 204 | font-weight: _font(weight-bold); 205 | margin: 0 0 (_size(element-margin) * 0.5) 0; 206 | } 207 | 208 | dd { 209 | margin-left: _size(element-margin); 210 | } 211 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_section.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Section/Article */ 8 | 9 | section, article { 10 | &.special { 11 | text-align: center; 12 | } 13 | } 14 | 15 | header { 16 | &.major { 17 | width: -moz-max-content; 18 | width: -webkit-max-content; 19 | width: -ms-max-content; 20 | width: max-content; 21 | margin-bottom: _size(element-margin); 22 | 23 | > :first-child { 24 | margin-bottom: 0; 25 | width: calc(100% + 0.5em); 26 | 27 | &:after { 28 | content: ''; 29 | background-color: _palette(fg-bold); 30 | display: block; 31 | height: 2px; 32 | margin: 0.325em 0 0.5em 0; 33 | width: 100%; 34 | } 35 | } 36 | 37 | > p { 38 | font-size: 0.7em; 39 | font-weight: _font(weight-bold); 40 | letter-spacing: _font(letter-spacing-alt); 41 | margin-bottom: 0; 42 | text-transform: uppercase; 43 | } 44 | 45 | body.is-ie & { 46 | > :first-child { 47 | &:after { 48 | max-width: 9em; 49 | } 50 | } 51 | 52 | > h1 { 53 | &:after { 54 | max-width: 100% !important; 55 | } 56 | } 57 | } 58 | } 59 | 60 | @include breakpoint(small) { 61 | &.major { 62 | > p { 63 | br { 64 | display: none; 65 | } 66 | } 67 | } 68 | } 69 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_spotlights.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Spotlights */ 8 | 9 | .spotlights { 10 | border-top: 0 !important; 11 | 12 | & + * { 13 | border-top: 0 !important; 14 | } 15 | 16 | > section { 17 | @include vendor('display', 'flex'); 18 | @include vendor('flex-direction', 'row'); 19 | background-color: desaturate(lighten(_palette(bg-alt), 2), 1); 20 | 21 | > .image { 22 | background-position: center center; 23 | background-size: cover; 24 | border-radius: 0; 25 | display: block; 26 | position: relative; 27 | width: 30%; 28 | 29 | img { 30 | border-radius: 0; 31 | display: block; 32 | width: 100%; 33 | } 34 | 35 | &:before { 36 | background: transparentize(_palette(bg), 0.1); 37 | content: ''; 38 | display: block; 39 | height: 100%; 40 | left: 0; 41 | opacity: 0; 42 | position: absolute; 43 | top: 0; 44 | width: 100%; 45 | } 46 | } 47 | 48 | > .content { 49 | @include vendor('display', 'flex'); 50 | @include vendor('flex-direction', 'column'); 51 | @include vendor('justify-content', 'center'); 52 | @include vendor('align-items', 'center'); 53 | @include padding(2em, 3em); 54 | width: 70%; 55 | 56 | > .inner { 57 | margin: 0 auto; 58 | max-width: 100%; 59 | width: _size(inner); 60 | } 61 | } 62 | 63 | &:nth-child(2n) { 64 | @include vendor('flex-direction', 'row-reverse'); 65 | background-color: desaturate(lighten(_palette(bg-alt), 4), 2); 66 | 67 | > .content { 68 | @include vendor('align-items', 'flex-end'); 69 | } 70 | } 71 | } 72 | 73 | @include breakpoint(xlarge) { 74 | > section { 75 | > .image { 76 | width: 40%; 77 | } 78 | 79 | > .content { 80 | width: 60%; 81 | } 82 | } 83 | } 84 | 85 | @include breakpoint(large) { 86 | > section { 87 | > .image { 88 | width: 45%; 89 | } 90 | 91 | > .content { 92 | width: 55%; 93 | } 94 | } 95 | } 96 | 97 | @include breakpoint(medium) { 98 | > section { 99 | display: block; 100 | 101 | > .image { 102 | width: 100%; 103 | } 104 | 105 | > .content { 106 | @include padding(4em, 3em); 107 | width: 100%; 108 | } 109 | } 110 | } 111 | 112 | @include breakpoint(small) { 113 | > section { 114 | > .content { 115 | @include padding(3em, 1.5em); 116 | } 117 | } 118 | } 119 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_table.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Table */ 8 | 9 | .table-wrapper { 10 | -webkit-overflow-scrolling: touch; 11 | overflow-x: auto; 12 | } 13 | 14 | table { 15 | margin: 0 0 _size(element-margin) 0; 16 | width: 100%; 17 | 18 | tbody { 19 | tr { 20 | border: solid 1px _palette(border); 21 | border-left: 0; 22 | border-right: 0; 23 | 24 | &:nth-child(2n + 1) { 25 | background-color: _palette(border-bg); 26 | } 27 | } 28 | } 29 | 30 | td { 31 | padding: 0.75em 0.75em; 32 | } 33 | 34 | th { 35 | color: _palette(fg-bold); 36 | font-size: 0.9em; 37 | font-weight: _font(weight-bold); 38 | padding: 0 0.75em 0.75em 0.75em; 39 | text-align: left; 40 | } 41 | 42 | thead { 43 | border-bottom: solid 2px _palette(border); 44 | } 45 | 46 | tfoot { 47 | border-top: solid 2px _palette(border); 48 | } 49 | 50 | &.alt { 51 | border-collapse: separate; 52 | 53 | tbody { 54 | tr { 55 | td { 56 | border: solid 1px _palette(border); 57 | border-left-width: 0; 58 | border-top-width: 0; 59 | 60 | &:first-child { 61 | border-left-width: 1px; 62 | } 63 | } 64 | 65 | &:first-child { 66 | td { 67 | border-top-width: 1px; 68 | } 69 | } 70 | } 71 | } 72 | 73 | thead { 74 | border-bottom: 0; 75 | } 76 | 77 | tfoot { 78 | border-top: 0; 79 | } 80 | } 81 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_tiles.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Tiles */ 8 | 9 | .tiles { 10 | @include vendor('display', 'flex'); 11 | @include vendor('flex-wrap', 'wrap'); 12 | border-top: 0 !important; 13 | 14 | & + * { 15 | border-top: 0 !important; 16 | } 17 | 18 | article { 19 | @include vendor('align-items', 'center'); 20 | @include vendor('display', 'flex'); 21 | @include vendor('transition', ( 22 | 'transform 0.25s ease', 23 | 'opacity 0.25s ease', 24 | 'filter 1s ease', 25 | '-webkit-filter 1s ease' 26 | )); 27 | @include padding(4em, 4em); 28 | background-position: center; 29 | background-repeat: no-repeat; 30 | background-size: cover; 31 | cursor: default; 32 | height: 40vh; 33 | max-height: 40em; 34 | min-height: 23em; 35 | overflow: hidden; 36 | position: relative; 37 | width: 40%; 38 | 39 | .image { 40 | display: none; 41 | } 42 | 43 | header { 44 | position: relative; 45 | z-index: 3; 46 | } 47 | 48 | h3 { 49 | font-size: 1.75em; 50 | 51 | a { 52 | &:hover { 53 | color: inherit !important; 54 | } 55 | } 56 | } 57 | 58 | .link.primary { 59 | border: 0; 60 | height: 100%; 61 | left: 0; 62 | position: absolute; 63 | top: 0; 64 | width: 100%; 65 | z-index: 4; 66 | } 67 | 68 | &:before { 69 | @include vendor('transition', 'opacity 0.5s ease'); 70 | bottom: 0; 71 | content: ''; 72 | display: block; 73 | height: 100%; 74 | left: 0; 75 | opacity: 0.85; 76 | position: absolute; 77 | width: 100%; 78 | z-index: 2; 79 | } 80 | 81 | &:after { 82 | background-color: transparentize(_palette(bg), 0.75); 83 | content: ''; 84 | display: block; 85 | height: 100%; 86 | left: 0; 87 | position: absolute; 88 | top: 0; 89 | width: 100%; 90 | z-index: 1; 91 | } 92 | 93 | &:hover { 94 | &:before { 95 | opacity: 0; 96 | } 97 | } 98 | 99 | &.is-transitioning { 100 | @include vendor('transform', 'scale(0.95)'); 101 | @include vendor('filter', 'blur(0.5em)'); 102 | opacity: 0; 103 | } 104 | 105 | &:nth-child(4n - 1), 106 | &:nth-child(4n - 2) { 107 | width: 60%; 108 | } 109 | 110 | &:nth-child(6n - 5) { 111 | &:before { 112 | background-color: _palette(accent1); 113 | } 114 | } 115 | 116 | &:nth-child(6n - 4) { 117 | &:before { 118 | background-color: _palette(accent2); 119 | } 120 | } 121 | 122 | &:nth-child(6n - 3) { 123 | &:before { 124 | background-color: _palette(accent3); 125 | } 126 | } 127 | 128 | &:nth-child(6n - 2) { 129 | &:before { 130 | background-color: _palette(accent4); 131 | } 132 | } 133 | 134 | &:nth-child(6n - 1) { 135 | &:before { 136 | background-color: _palette(accent5); 137 | } 138 | } 139 | 140 | &:nth-child(6n) { 141 | &:before { 142 | background-color: _palette(accent6); 143 | } 144 | } 145 | } 146 | 147 | @include breakpoint(large) { 148 | article { 149 | @include padding(4em, 3em); 150 | height: 30vh; 151 | max-height: 30em; 152 | min-height: 20em; 153 | } 154 | } 155 | 156 | @include breakpoint(medium) { 157 | article { 158 | width: 50% !important; 159 | } 160 | } 161 | 162 | @include breakpoint(small) { 163 | article { 164 | @include padding(3em, 1.5em); 165 | height: 16em; 166 | max-height: none; 167 | min-height: 0; 168 | 169 | h3 { 170 | font-size: 1.5em; 171 | } 172 | } 173 | } 174 | 175 | @include breakpoint(xsmall) { 176 | display: block; 177 | 178 | article { 179 | height: 20em; 180 | width: 100% !important; 181 | } 182 | } 183 | } -------------------------------------------------------------------------------- /src/assets/scss/ie8.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/skel'; 5 | 6 | /* 7 | Forty by HTML5 UP 8 | html5up.net | @ajlkn 9 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 10 | */ 11 | 12 | /* Button */ 13 | 14 | .button { 15 | border: solid 2px !important; 16 | 17 | &.next { 18 | padding-right: 1.75em; 19 | 20 | &:before, &:after { 21 | display: none; 22 | } 23 | } 24 | } 25 | 26 | /* Tiles */ 27 | 28 | .tiles { 29 | article { 30 | width: 50%; 31 | -ms-behavior: url('assets/js/ie/backgroundsize.min.htc'); 32 | background-size: cover; 33 | } 34 | } 35 | 36 | /* Banner */ 37 | 38 | #banner { 39 | -ms-behavior: url('assets/js/ie/backgroundsize.min.htc'); 40 | 41 | &:after { 42 | display: none; 43 | } 44 | } 45 | 46 | /* Menu */ 47 | 48 | #menu { 49 | background: _palette(bg); 50 | } -------------------------------------------------------------------------------- /src/assets/scss/ie9.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/skel'; 5 | 6 | /* 7 | Forty 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 | /* Spotlights */ 13 | 14 | .spotlights { 15 | > section { 16 | &:after { 17 | content: ''; 18 | display: block; 19 | clear: both; 20 | } 21 | 22 | > .image { 23 | float: left; 24 | } 25 | 26 | > .content { 27 | float: left; 28 | } 29 | } 30 | } 31 | 32 | /* Tiles */ 33 | 34 | .tiles { 35 | &:after { 36 | content: ''; 37 | display: block; 38 | clear: both; 39 | } 40 | 41 | article { 42 | @include padding(8em, 4em); 43 | float: left; 44 | height: auto; 45 | max-height: none; 46 | min-height: 0; 47 | } 48 | } 49 | 50 | /* Header */ 51 | 52 | #header { 53 | .logo { 54 | position: absolute; 55 | top: 0; 56 | left: 0; 57 | } 58 | 59 | nav { 60 | position: absolute; 61 | top: 0; 62 | right: 0; 63 | } 64 | } 65 | 66 | /* Banner */ 67 | 68 | #banner { 69 | @include padding(6em, 0, (1em, 0, 0, 0)); 70 | background-attachment: scroll; 71 | height: auto; 72 | max-height: none; 73 | min-height: 0; 74 | 75 | > .inner { 76 | .content { 77 | display: block; 78 | 79 | > * { 80 | margin-left: 0; 81 | margin: 0 0 _size(element-margin) 0; 82 | } 83 | } 84 | } 85 | 86 | &.major { 87 | height: auto; 88 | max-height: none; 89 | min-height: 0; 90 | } 91 | } 92 | 93 | /* Contact */ 94 | 95 | #contact { 96 | &:after { 97 | content: ''; 98 | display: block; 99 | clear: both; 100 | } 101 | 102 | > .inner { 103 | > * { 104 | float: left; 105 | } 106 | } 107 | } 108 | 109 | /* Menu */ 110 | 111 | #menu { 112 | .inner { 113 | margin: 0 auto; 114 | } 115 | } -------------------------------------------------------------------------------- /src/assets/scss/layout/_banner.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Banner */ 8 | 9 | #banner { 10 | @include vendor('align-items', 'center'); 11 | @include vendor('background-image', 'url("../images/banner.jpg")'); 12 | @include vendor('display', 'flex'); 13 | @include padding(4em, 0, (2em, 0, 0, 0)); 14 | background-attachment: fixed; 15 | background-position: center; 16 | background-repeat: no-repeat; 17 | background-size: cover; 18 | border-bottom: 0 !important; 19 | cursor: default; 20 | height: 60vh; 21 | margin-bottom: -3.25em; 22 | max-height: 32em; 23 | min-height: 22em; 24 | position: relative; 25 | top: -3.25em; 26 | 27 | &:after { 28 | @include vendor('transition', 'opacity #{_duration(banner)} ease'); 29 | @include vendor('transition-delay', '0.75s'); 30 | @include vendor('pointer-events', 'none'); 31 | background-color: _palette(bg); 32 | content: ''; 33 | display: block; 34 | height: 100%; 35 | left: 0; 36 | opacity: 0.85; 37 | position: absolute; 38 | top: 0; 39 | width: 100%; 40 | z-index: 1; 41 | } 42 | 43 | h1 { 44 | font-size: 3.25em; 45 | } 46 | 47 | > .inner { 48 | @include vendor('transition', ( 49 | 'opacity 1.5s ease', 50 | 'transform 0.5s ease-out', 51 | 'filter 0.5s ease', 52 | '-webkit-filter 0.5s ease' 53 | )); 54 | padding: 0 !important; 55 | position: relative; 56 | z-index: 2; 57 | 58 | .image { 59 | display: none; 60 | } 61 | 62 | header { 63 | width: auto; 64 | 65 | > :first-child { 66 | width: auto; 67 | 68 | &:after { 69 | max-width: 100%; 70 | } 71 | } 72 | } 73 | 74 | .content { 75 | @include vendor('display', 'flex'); 76 | @include vendor('align-items', 'center'); 77 | margin: 0 0 _size(element-margin) 0; 78 | 79 | > * { 80 | margin-left: 1.5em; 81 | margin-bottom: 0; 82 | } 83 | 84 | > :first-child { 85 | margin-left: 0; 86 | } 87 | 88 | p { 89 | font-size: 0.7em; 90 | font-weight: _font(weight-bold); 91 | letter-spacing: _font(letter-spacing-alt); 92 | text-transform: uppercase; 93 | } 94 | } 95 | } 96 | 97 | &.major { 98 | height: 75vh; 99 | min-height: 30em; 100 | max-height: 50em; 101 | 102 | &.alt { 103 | opacity: 0.75; 104 | } 105 | } 106 | 107 | &.style1 { &:after { background-color: _palette(accent1); } } 108 | &.style2 { &:after { background-color: _palette(accent2); } } 109 | &.style3 { &:after { background-color: _palette(accent3); } } 110 | &.style4 { &:after { background-color: _palette(accent4); } } 111 | &.style5 { &:after { background-color: _palette(accent5); } } 112 | &.style6 { &:after { background-color: _palette(accent6); } } 113 | 114 | .body.is-loading & { 115 | &:after { 116 | opacity: 1.0; 117 | } 118 | 119 | > .inner { 120 | @include vendor('filter', 'blur(0.125em)'); 121 | @include vendor('transform', 'translateX(-0.5em)'); 122 | opacity: 0; 123 | } 124 | } 125 | 126 | @include breakpoint(large) { 127 | background-attachment: scroll; 128 | } 129 | 130 | @include breakpoint(small) { 131 | @include padding(3em, 0, (2em, 0, 0, 0)); 132 | height: auto; 133 | margin-bottom: -2.75em; 134 | max-height: none; 135 | min-height: 0; 136 | top: -2.75em; 137 | 138 | h1 { 139 | font-size: 2em; 140 | } 141 | 142 | > .inner { 143 | .content { 144 | display: block; 145 | 146 | > * { 147 | margin-left: 0; 148 | margin-bottom: _size(element-margin); 149 | } 150 | } 151 | } 152 | 153 | &.major { 154 | height: auto; 155 | min-height: 0; 156 | max-height: none; 157 | } 158 | } 159 | 160 | @include breakpoint(xsmall) { 161 | @include padding(4em, 0, (2em, 0, 0, 0)); 162 | 163 | > .inner { 164 | .content { 165 | p { 166 | br { 167 | display: none; 168 | } 169 | } 170 | } 171 | } 172 | 173 | &.major { 174 | @include padding(6em, 0, (2em, 0, 0, 0)); 175 | } 176 | } 177 | } -------------------------------------------------------------------------------- /src/assets/scss/layout/_contact.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Contact */ 8 | 9 | #contact { 10 | border-bottom: solid 1px _palette(border); 11 | overflow-x: hidden; 12 | 13 | > .inner { 14 | @include vendor('display', 'flex'); 15 | padding: 0 !important; 16 | 17 | > :nth-child(2n - 1) { 18 | @include padding(4em, 0, (0, 3em, 0, 0)); 19 | border-right: solid 1px _palette(border); 20 | width: 60%; 21 | } 22 | 23 | > :nth-child(2n) { 24 | padding-left: 3em; 25 | width: 40%; 26 | } 27 | 28 | > .split { 29 | padding: 0; 30 | 31 | > * { 32 | @include padding(3em, 0, (0, 0, 0, 3em)); 33 | position: relative; 34 | 35 | &:before { 36 | border-top: solid 1px _palette(border); 37 | content: ''; 38 | display: block; 39 | margin-left: -3em; 40 | position: absolute; 41 | top: 0; 42 | width: calc(100vw + 3em); 43 | } 44 | } 45 | 46 | > :first-child { 47 | &:before { 48 | display: none; 49 | } 50 | } 51 | } 52 | } 53 | 54 | @include breakpoint(medium) { 55 | > .inner { 56 | display: block; 57 | 58 | > :nth-child(2n - 1) { 59 | @include padding(4em, 0, (0, 0, 0, 0)); 60 | border-right: 0; 61 | width: 100%; 62 | } 63 | 64 | > :nth-child(2n) { 65 | padding-left: 0; 66 | width: 100%; 67 | } 68 | 69 | > .split { 70 | > * { 71 | @include padding(3em, 0, (0, 0, 0, 0)); 72 | 73 | &:before { 74 | } 75 | } 76 | 77 | > :first-child { 78 | &:before { 79 | display: block; 80 | } 81 | } 82 | } 83 | } 84 | } 85 | 86 | @include breakpoint(small) { 87 | > .inner { 88 | > :nth-child(2n - 1) { 89 | @include padding(3em, 0, (0, 0, 0, 0)); 90 | } 91 | } 92 | } 93 | } -------------------------------------------------------------------------------- /src/assets/scss/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Footer */ 8 | 9 | #footer { 10 | .copyright { 11 | font-size: 0.8em; 12 | list-style: none; 13 | padding-left: 0; 14 | 15 | li { 16 | border-left: solid 1px _palette(border); 17 | color: _palette(fg-light); 18 | display: inline-block; 19 | line-height: 1; 20 | margin-left: 1em; 21 | padding-left: 1em; 22 | 23 | &:first-child { 24 | border-left: 0; 25 | margin-left: 0; 26 | padding-left: 0; 27 | } 28 | } 29 | } 30 | 31 | @include breakpoint(xsmall) { 32 | .copyright { 33 | li { 34 | display: block; 35 | border-left: 0; 36 | margin-left: 0; 37 | padding-left: 0; 38 | line-height: inherit; 39 | } 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /src/assets/scss/layout/_header.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Header */ 8 | 9 | @include keyframes('reveal-header') { 10 | 0% { top: -4em; opacity: 0; } 11 | 100% { top: 0; opacity: 1; } 12 | } 13 | 14 | #header { 15 | @include vendor('display', 'flex'); 16 | background-color: _palette(bg-alt); 17 | box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15); 18 | cursor: default; 19 | font-weight: _font(weight-bold); 20 | height: 3.25em; 21 | left: 0; 22 | letter-spacing: _font(letter-spacing-alt); 23 | line-height: 3.25em; 24 | margin: 0; 25 | position: fixed; 26 | text-transform: uppercase; 27 | top: 0; 28 | width: 100%; 29 | z-index: _misc(z-index-base); 30 | 31 | .logo { 32 | border: 0; 33 | display: inline-block; 34 | font-size: 0.8em; 35 | height: inherit; 36 | line-height: inherit; 37 | padding: 0 1.5em; 38 | 39 | strong { 40 | @include vendor('transition', ( 41 | 'background-color #{_duration(transition)} ease-in-out', 42 | 'color #{_duration(transition)} ease-in-out' 43 | )); 44 | background-color: _palette(fg-bold); 45 | color: _palette(bg); 46 | display: inline-block; 47 | line-height: 1.65em; 48 | margin-right: 0.325em; 49 | padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em); 50 | } 51 | 52 | &:hover { 53 | strong { 54 | background-color: _palette(highlight); 55 | } 56 | } 57 | 58 | &:active { 59 | strong { 60 | background-color: desaturate(darken(_palette(highlight), 15), 5); 61 | } 62 | } 63 | } 64 | 65 | nav { 66 | @include vendor('display', 'flex'); 67 | @include vendor('justify-content', 'flex-end'); 68 | @include vendor('flex-grow', '1'); 69 | height: inherit; 70 | line-height: inherit; 71 | 72 | a { 73 | border: 0; 74 | display: block; 75 | font-size: 0.8em; 76 | height: inherit; 77 | line-height: inherit; 78 | padding: 0 0.75em; 79 | position: relative; 80 | vertical-align: middle; 81 | 82 | &:last-child { 83 | padding-right: 1.5em; 84 | } 85 | 86 | &.menu-link { 87 | padding-right: 3.325em !important; 88 | 89 | &:before, &:after { 90 | background-image: svg-url(''); 91 | background-position: center; 92 | background-repeat: no-repeat; 93 | background-size: 24px 32px; 94 | content: ''; 95 | display: block; 96 | height: 100%; 97 | position: absolute; 98 | right: 1.5em; 99 | top: 0; 100 | vertical-align: middle; 101 | width: 24px; 102 | } 103 | 104 | &:after { 105 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); 106 | background-image: svg-url(''); 107 | opacity: 0; 108 | z-index: 1; 109 | } 110 | 111 | &:hover, &:active { 112 | &:after { 113 | opacity: 1; 114 | } 115 | } 116 | 117 | &:last-child { 118 | padding-right: 3.875em !important; 119 | 120 | &:before, &:after { 121 | right: 2em; 122 | } 123 | } 124 | } 125 | } 126 | } 127 | 128 | &.reveal { 129 | @include vendor('animation', 'reveal-header 0.35s ease'); 130 | } 131 | 132 | &.alt { 133 | @include vendor('transition', 'opacity #{_duration(banner)} ease'); 134 | @include vendor('transition-delay', '0.75s'); 135 | @include vendor('animation', 'none'); 136 | background-color: transparent; 137 | box-shadow: none; 138 | position: absolute; 139 | 140 | &.style1 { .logo { strong { color: _palette(accent1); } } } 141 | &.style2 { .logo { strong { color: _palette(accent2); } } } 142 | &.style3 { .logo { strong { color: _palette(accent3); } } } 143 | &.style4 { .logo { strong { color: _palette(accent4); } } } 144 | &.style5 { .logo { strong { color: _palette(accent5); } } } 145 | &.style6 { .logo { strong { color: _palette(accent6); } } } 146 | } 147 | 148 | .body.is-loading & { 149 | &.alt { 150 | opacity: 0; 151 | } 152 | } 153 | 154 | @include breakpoint(xlarge) { 155 | nav { 156 | a { 157 | &.menu-link { 158 | padding-right: 3.75em !important; 159 | 160 | &:last-child { 161 | padding-right: 4.25em !important; 162 | } 163 | } 164 | } 165 | } 166 | } 167 | 168 | @include breakpoint(large) { 169 | nav { 170 | a { 171 | &.menu-link { 172 | padding-right: 4em !important; 173 | 174 | &:last-child { 175 | padding-right: 4.5em !important; 176 | } 177 | } 178 | } 179 | } 180 | } 181 | 182 | @include breakpoint(small) { 183 | height: 2.75em; 184 | line-height: 2.75em; 185 | 186 | .logo { 187 | padding: 0 1em; 188 | } 189 | 190 | nav { 191 | a { 192 | padding: 0 0.5em; 193 | 194 | &:last-child { 195 | padding-right: 1em; 196 | } 197 | 198 | &.menu-link { 199 | padding-right: 3.25em !important; 200 | 201 | &:before, &:after { 202 | right: 0.75em; 203 | } 204 | 205 | &:last-child { 206 | padding-right: 4em !important; 207 | 208 | &:before, &:after { 209 | right: 1.5em; 210 | } 211 | } 212 | } 213 | } 214 | } 215 | } 216 | 217 | @include breakpoint(xsmall) { 218 | .logo { 219 | span { 220 | display: none; 221 | } 222 | } 223 | 224 | nav { 225 | a { 226 | &.menu-link { 227 | overflow: hidden; 228 | padding-right: 0 !important; 229 | text-indent: 5em; 230 | white-space: nowrap; 231 | width: 5em; 232 | 233 | &:before, &:after { 234 | right: 0; 235 | width: inherit; 236 | } 237 | 238 | &:last-child { 239 | &:before, &:after { 240 | width: 4em; 241 | right: 0; 242 | } 243 | } 244 | } 245 | } 246 | } 247 | } 248 | } -------------------------------------------------------------------------------- /src/assets/scss/layout/_main.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Main */ 8 | 9 | #main { 10 | background-color: _palette(bg-alt); 11 | 12 | > * { 13 | border-top: solid 1px _palette(border); 14 | 15 | &:first-child { 16 | border-top: 0; 17 | } 18 | 19 | @include inner; 20 | } 21 | 22 | &.alt { 23 | background-color: transparent; 24 | border-bottom: solid 1px _palette(border); 25 | } 26 | } -------------------------------------------------------------------------------- /src/assets/scss/layout/_menu.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Menu */ 8 | 9 | #menu { 10 | @include vendor('transition', ( 11 | 'transform #{_duration(menu)} ease', 12 | 'opacity #{_duration(menu)} ease', 13 | 'visibility #{_duration(menu)}' 14 | )); 15 | @include vendor('align-items', 'center'); 16 | @include vendor('display', 'flex'); 17 | @include vendor('justify-content', 'center'); 18 | @include vendor('pointer-events', 'none'); 19 | background: transparentize(_palette(bg), 0.1); 20 | box-shadow: none; 21 | height: 100%; 22 | left: 0; 23 | opacity: 0; 24 | overflow: hidden; 25 | padding: 3em 2em; 26 | position: fixed; 27 | top: 0; 28 | visibility: hidden; 29 | width: 100%; 30 | z-index: _misc(z-index-base) + 2; 31 | 32 | .inner { 33 | @include vendor('transition', ( 34 | 'transform #{_duration(menu)} ease-out', 35 | 'opacity #{_duration(menu)} ease', 36 | 'visibility #{_duration(menu)}' 37 | )); 38 | @include vendor('transform', 'rotateX(20deg)'); 39 | -webkit-overflow-scrolling: touch; 40 | max-width: 100%; 41 | max-height: 100vh; 42 | opacity: 0; 43 | overflow: auto; 44 | text-align: center; 45 | visibility: hidden; 46 | width: 18em; 47 | 48 | > :first-child { 49 | margin-top: _size(element-margin); 50 | } 51 | 52 | > :last-child { 53 | margin-bottom: (_size(element-margin) * 1.5); 54 | } 55 | } 56 | 57 | ul { 58 | margin: 0 0 (_size(element-margin) * 0.5) 0; 59 | 60 | &.links { 61 | list-style: none; 62 | padding: 0; 63 | 64 | > li { 65 | padding: 0; 66 | 67 | > a:not(.button) { 68 | border: 0; 69 | border-top: solid 1px _palette(border); 70 | display: block; 71 | font-size: 0.8em; 72 | font-weight: _font(weight-bold); 73 | letter-spacing: _font(letter-spacing-alt); 74 | line-height: 4em; 75 | text-decoration: none; 76 | text-transform: uppercase; 77 | } 78 | 79 | > .button { 80 | display: block; 81 | margin: 0.5em 0 0 0; 82 | } 83 | 84 | &:first-child { 85 | > a:not(.button) { 86 | border-top: 0 !important; 87 | } 88 | } 89 | } 90 | } 91 | } 92 | 93 | .close { 94 | @include vendor('transition', 'color #{_duration(transition)} ease-in-out'); 95 | -webkit-tap-highlight-color: rgba(0,0,0,0); 96 | border: 0; 97 | cursor: pointer; 98 | display: block; 99 | height: 4em; 100 | line-height: 4em; 101 | overflow: hidden; 102 | padding-right: 1.25em; 103 | position: absolute; 104 | right: 0; 105 | text-align: right; 106 | text-indent: 8em; 107 | top: 0; 108 | vertical-align: middle; 109 | white-space: nowrap; 110 | width: 8em; 111 | 112 | &:before, &:after { 113 | @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); 114 | background-position: center; 115 | background-repeat: no-repeat; 116 | content: ''; 117 | display: block; 118 | height: 4em; 119 | position: absolute; 120 | right: 0; 121 | top: 0; 122 | width: 4em; 123 | } 124 | 125 | &:before { 126 | background-image: svg-url(''); 127 | } 128 | 129 | &:after { 130 | background-image: svg-url(''); 131 | opacity: 0; 132 | } 133 | 134 | &:hover, &:active { 135 | &:after { 136 | opacity: 1; 137 | } 138 | } 139 | } 140 | } 141 | 142 | body.is-ie { 143 | #menu { 144 | background: transparentize(_palette(bg-alt), 0.025); 145 | } 146 | } 147 | 148 | .body.is-menu-visible { 149 | #wrapper { 150 | @include vendor('filter', 'blur(0.5em)'); 151 | } 152 | 153 | #menu { 154 | @include vendor('pointer-events', 'auto'); 155 | opacity: 1; 156 | visibility: visible; 157 | 158 | .inner { 159 | @include vendor('transform', 'none'); 160 | opacity: 1; 161 | visibility: visible; 162 | } 163 | } 164 | } -------------------------------------------------------------------------------- /src/assets/scss/layout/_wrapper.scss: -------------------------------------------------------------------------------- 1 | /// 2 | /// Forty by HTML5 UP 3 | /// html5up.net | @ajlkn 4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | /// 6 | 7 | /* Wrapper */ 8 | 9 | #wrapper { 10 | @include vendor('transition', ( 11 | 'filter #{_duration(menu)} ease', 12 | '-webkit-filter #{_duration(menu)} ease', 13 | 'opacity 0.375s ease-out' 14 | )); 15 | padding-top: 3.25em; 16 | 17 | &.is-transitioning { 18 | opacity: 0; 19 | } 20 | 21 | > * { 22 | @include inner; 23 | } 24 | 25 | > * > * { 26 | @include inner; 27 | } 28 | 29 | @include breakpoint(small) { 30 | padding-top: 2.75em; 31 | } 32 | } -------------------------------------------------------------------------------- /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 | menu: 0.35s, 9 | transition: 0.2s, 10 | banner: 2.5s 11 | ); 12 | 13 | // Size. 14 | $size: ( 15 | border-radius: 4px, 16 | element-height: 2.75em, 17 | element-margin: 2em, 18 | inner: 65em 19 | ); 20 | 21 | // Font. 22 | $font: ( 23 | family: ('Source Sans Pro', Helvetica, sans-serif), 24 | family-fixed: ('Courier New', monospace), 25 | weight: 300, 26 | weight-bold: 600, 27 | letter-spacing: 0.025em, 28 | letter-spacing-alt: 0.25em 29 | ); 30 | 31 | // Palette. 32 | $palette: ( 33 | bg: #242943, 34 | bg-alt: #2a2f4a, 35 | fg: #ffffff, 36 | fg-bold: #ffffff, 37 | fg-light: rgba(244,244,255,0.2), 38 | border: rgba(212,212,255,0.1), 39 | border-bg: rgba(212,212,255,0.035), 40 | highlight: #9bf1ff, 41 | accent1: #6fc3df, 42 | accent2: #8d82c4, 43 | accent3: #ec8d81, 44 | accent4: #e7b788, 45 | accent5: #8ea9e8, 46 | accent6: #87c5a4 47 | ); -------------------------------------------------------------------------------- /src/assets/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/skel'; 5 | @import '../css/font-awesome.min.css'; 6 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic'); 7 | 8 | @import "css-grid"; 9 | 10 | /* 11 | Forty by HTML5 UP 12 | html5up.net | @ajlkn 13 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 14 | */ 15 | 16 | @include skel-breakpoints(( 17 | xlarge: '(max-width: 1680px)', 18 | large: '(max-width: 1280px)', 19 | medium: '(max-width: 980px)', 20 | small: '(max-width: 736px)', 21 | xsmall: '(max-width: 480px)', 22 | xxsmall: '(max-width: 360px)' 23 | )); 24 | 25 | @include skel-layout(( 26 | reset: 'full', 27 | boxModel: 'border' 28 | )); 29 | 30 | @mixin inner { 31 | > .inner { 32 | @include padding(4em, 0); 33 | margin: 0 auto; 34 | max-width: _size(inner); 35 | width: calc(100% - 6em); 36 | 37 | @include breakpoint(small) { 38 | @include padding(3em, 0); 39 | width: calc(100% - 3em); 40 | } 41 | } 42 | } 43 | 44 | // Base. 45 | 46 | @import 'base/page'; 47 | @import 'base/typography'; 48 | 49 | // Component. 50 | 51 | @import 'components/section'; 52 | @import 'components/form'; 53 | @import 'components/box'; 54 | @import 'components/icon'; 55 | @import 'components/image'; 56 | @import 'components/list'; 57 | @import 'components/table'; 58 | @import 'components/button'; 59 | @import 'components/tiles'; 60 | @import 'components/contact-method'; 61 | @import 'components/spotlights'; 62 | 63 | // Layout. 64 | 65 | @import 'layout/header'; 66 | @import 'layout/banner'; 67 | @import 'layout/main'; 68 | @import 'layout/contact'; 69 | @import 'layout/footer'; 70 | @import 'layout/wrapper'; 71 | @import 'layout/menu'; -------------------------------------------------------------------------------- /src/components/Banner.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Banner = (props) => ( 4 | 18 | ) 19 | 20 | export default Banner 21 | -------------------------------------------------------------------------------- /src/components/BannerLanding.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const BannerLanding = (props) => ( 4 | 15 | ) 16 | 17 | export default BannerLanding 18 | -------------------------------------------------------------------------------- /src/components/Contact.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Contact = (props) => ( 4 |
5 |
6 |
7 |
8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 |
    24 |
    • 25 |
    • 26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 |

Email

34 | information@untitled.tld 35 |
36 |
37 |
38 |
39 | 40 |

Phone

41 | (000) 000-0000 x12387 42 |
43 |
44 |
45 |
46 | 47 |

Address

48 | 1234 Somewhere Road #5432
49 | Nashville, TN 00000
50 | United States of America 51 |
52 |
53 |
54 |
55 |
56 | ) 57 | 58 | export default Contact 59 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footer = (props) => ( 4 | 18 | ) 19 | 20 | export default Footer 21 | -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { Link } from 'gatsby' 4 | 5 | const Header = (props) => ( 6 | 12 | ) 13 | 14 | Header.propTypes = { 15 | onToggleMenu: PropTypes.func 16 | } 17 | 18 | export default Header 19 | -------------------------------------------------------------------------------- /src/components/Menu.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { Link } from 'gatsby' 4 | 5 | const Menu = (props) => ( 6 | 21 | ) 22 | 23 | Menu.propTypes = { 24 | onToggleMenu: PropTypes.func 25 | } 26 | 27 | export default Menu 28 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | import '../assets/scss/main.scss' 5 | import Header from './Header' 6 | import Menu from './Menu' 7 | import Contact from './Contact' 8 | import Footer from './Footer' 9 | 10 | class Layout extends React.Component { 11 | constructor(props) { 12 | super(props) 13 | this.state = { 14 | isMenuVisible: false, 15 | loading: 'is-loading' 16 | } 17 | this.handleToggleMenu = this.handleToggleMenu.bind(this) 18 | } 19 | 20 | componentDidMount () { 21 | this.timeoutId = setTimeout(() => { 22 | this.setState({loading: ''}); 23 | }, 100); 24 | } 25 | 26 | componentWillUnmount () { 27 | if (this.timeoutId) { 28 | clearTimeout(this.timeoutId); 29 | } 30 | } 31 | 32 | handleToggleMenu() { 33 | this.setState({ 34 | isMenuVisible: !this.state.isMenuVisible 35 | }) 36 | } 37 | 38 | render() { 39 | const { children } = this.props 40 | 41 | return ( 42 |
43 |
44 |
45 | {children} 46 | 47 |
48 |
49 | 50 |
51 | ) 52 | } 53 | } 54 | 55 | export default Layout 56 | -------------------------------------------------------------------------------- /src/images/gatsby-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebushi/gatsby-forms/aff57e2e5fc0881514394897a11e9c2f41c7c48d/src/images/gatsby-icon.png -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Layout from '../components/layout' 3 | 4 | const NotFoundPage = () => ( 5 | 6 |
7 |
8 |
9 |

NOT FOUND

10 |

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

11 |
12 |
13 |
14 | 15 | ) 16 | 17 | export default NotFoundPage 18 | -------------------------------------------------------------------------------- /src/pages/elements.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Helmet from 'react-helmet' 3 | import Layout from '../components/layout' 4 | 5 | import pic03 from '../assets/images/pic03.jpg' 6 | import pic08 from '../assets/images/pic08.jpg' 7 | import pic09 from '../assets/images/pic09.jpg' 8 | import pic10 from '../assets/images/pic10.jpg' 9 | 10 | const Elements = (props) => ( 11 | 12 | 13 | Elements - Forty by HTML5 UP 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
22 |

Elements

23 |
24 | 25 |

Sample Content

26 |

Praesent ac adipiscing ullamcorper semper ut amet ac risus. Lorem sapien ut odio odio nunc. Ac adipiscing nibh porttitor erat risus justo adipiscing adipiscing amet placerat accumsan. Vis. Faucibus odio magna tempus adipiscing a non. In mi primis arcu ut non accumsan vivamus ac blandit adipiscing adipiscing arcu metus praesent turpis eu ac lacinia nunc ac commodo gravida adipiscing eget accumsan ac nunc adipiscing adipiscing.

27 |
28 |
29 |

Sem turpis amet semper

30 |

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat commodo eu sed ante lacinia. Sapien a lorem in integer ornare praesent commodo adipiscing arcu in massa commodo lorem accumsan at odio massa ac ac. Semper adipiscing varius montes viverra nibh in adipiscing blandit tempus accumsan.

31 |
32 |
33 |

Magna odio tempus commodo

34 |

In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.

35 |
36 |
37 |

Interdum sapien gravida

38 |

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

39 |
40 |
41 |

Faucibus consequat lorem

42 |

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

43 |
44 |
45 |

Accumsan montes viverra

46 |

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

47 |
48 |
49 | 50 |
51 | 52 |

Elements

53 |
54 |
55 | 56 |

Text

57 |

This is bold and this is strong. This is italic and this is emphasized. 58 | This is superscript text and this is subscript text. 59 | This is underlined and this is code: for (;;). 60 | Finally, this is a link.

61 |
62 |

Heading Level 2

63 |

Heading Level 3

64 |

Heading Level 4

65 |
66 |

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

67 | 68 |

Lists

69 |
70 |
71 | 72 |

Unordered

73 |
    74 |
  • Dolor etiam magna etiam.
    • 75 |
  • Sagittis lorem eleifend.
    • 76 |
  • Felis dolore viverra.
    • 77 |
78 | 79 |

Alternate

80 |
    81 |
  • Dolor etiam magna etiam.
    • 82 |
  • Sagittis lorem eleifend.
    • 83 |
  • Felis feugiat viverra.
    • 84 |
85 | 86 |
87 |
88 | 89 |

Ordered

90 |
    91 |
  1. Dolor etiam magna etiam.
    2. 92 |
  2. Etiam vel lorem sed viverra.
    3. 93 |
  3. Felis dolore viverra.
    4. 94 |
  4. Dolor etiam magna etiam.
    5. 95 |
  5. Etiam vel lorem sed viverra.
    6. 96 |
  6. Felis dolore viverra.
    7. 97 |
98 | 99 |

Icons

100 | 108 | 113 | 114 |
115 |
116 |

Definition

117 |
118 |
Item1
119 |
120 |

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.

121 |
122 |
Item2
123 |
124 |

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.

125 |
126 |
Item3
127 |
128 |

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.

129 |
130 |
131 | 132 |

Actions

133 | 137 | 141 |
142 |
143 | 147 |
148 |
149 | 153 |
154 |
155 | 159 |
160 |
161 | 165 |
166 |
167 | 168 |

Pagination

169 |
    170 |
  • Prev
    • 171 |
  • 1
    • 172 |
  • 2
    • 173 |
  • 3
    • 174 |
  • …
    • 175 |
  • 8
    • 176 |
  • 9
    • 177 |
  • 10
    • 178 |
  • Next
    • 179 |
180 | 181 |

Blockquote

182 |
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.
183 | 184 |

Table

185 | 186 |

Default

187 |
188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 |
NameDescriptionPrice
Item1Ante turpis integer aliquet porttitor.29.99
Item2Vis ac commodo adipiscing arcu aliquet.19.99
Item3 Morbi faucibus arcu accumsan lorem.29.99
Item4Vitae integer tempus condimentum.19.99
Item5Ante turpis integer aliquet porttitor.29.99
100.00
230 |
231 | 232 |

Alternate

233 |
234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 |
NameDescriptionPrice
Item1Ante turpis integer aliquet porttitor.29.99
Item2Vis ac commodo adipiscing arcu aliquet.19.99
Item3 Morbi faucibus arcu accumsan lorem.29.99
Item4Vitae integer tempus condimentum.19.99
Item5Ante turpis integer aliquet porttitor.29.99
100.00
276 |
277 | 278 |
279 |
280 | 281 |

Buttons

282 | 286 | 291 | 296 | 300 | 304 | 308 |
    309 |
  • Special
    • 310 |
  • Default
    • 311 |
312 | 313 |

Form

314 | 315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 | 332 |
333 |
334 |
335 |
336 | 337 | 338 |
339 |
340 |
341 |
342 | 343 | 344 |
345 |
346 |
347 |
348 | 349 | 350 |
351 |
352 |
353 |
354 | 355 | 356 |
357 |
358 |
359 |
360 | 361 | 362 |
363 |
364 |
365 |
366 | 367 |
368 |
369 |
370 |
    371 |
    • 372 |
    • 373 |
374 |
375 |
376 |
377 | 378 |

Image

379 | 380 |

Fit

381 | 382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392 |
393 |
394 |
395 | 396 |

Left & Right

397 |

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget tempus vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.

398 |

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget tempus vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.

399 | 400 |

Box

401 |
402 |

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum.

403 |
404 | 405 |

Preformatted

406 | 
i = 0;
407 | 
408 |                                 print 'It took ' + i + ' iterations to sort the deck.';
409 |
410 | 411 |
412 |
413 | 414 |
415 |
416 | 417 |
418 | 419 | 420 | ) 421 | 422 | export default Elements -------------------------------------------------------------------------------- /src/pages/generic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Helmet from 'react-helmet' 3 | import Layout from '../components/layout' 4 | 5 | import pic11 from '../assets/images/pic11.jpg' 6 | 7 | const Generic = (props) => ( 8 | 9 | 10 | Generic - Forty by HTML5 UP 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |

Generic

19 |
20 | 21 |

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit.

22 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.

23 |

Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.

24 |
25 |
26 |
27 | 28 | 29 | ) 30 | 31 | export default Generic -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | import Helmet from 'react-helmet' 4 | import Layout from '../components/layout' 5 | import Banner from '../components/Banner' 6 | 7 | import pic01 from '../assets/images/pic01.jpg' 8 | import pic02 from '../assets/images/pic02.jpg' 9 | import pic03 from '../assets/images/pic03.jpg' 10 | import pic04 from '../assets/images/pic04.jpg' 11 | import pic05 from '../assets/images/pic05.jpg' 12 | import pic06 from '../assets/images/pic06.jpg' 13 | 14 | class HomeIndex extends React.Component { 15 | render() { 16 | 17 | return ( 18 | 19 | 26 | 27 | 28 | 29 | 30 |
31 |
32 |
33 |
34 |

Aliquam

35 |

Ipsum dolor sit amet

36 |
37 | 38 |
39 |
40 |
41 |

Tempus

42 |

feugiat amet tempus

43 |
44 | 45 |
46 |
47 |
48 |

Magna

49 |

Lorem etiam nullam

50 |
51 | 52 |
53 |
54 |
55 |

Ipsum

56 |

Nisl sed aliquam

57 |
58 | 59 |
60 |
61 |
62 |

Consequat

63 |

Ipsum dolor sit amet

64 |
65 | 66 |
67 |
68 |
69 |

Etiam

70 |

Feugiat amet tempus

71 |
72 | 73 |
74 |
75 |
76 |
77 |
78 |

Massa libero

79 |
80 |

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet pharetra et feugiat tempus.

81 |
    82 |
  • Get Started
    • 83 |
84 |
85 |
86 |
87 | 88 | 89 | ) 90 | } 91 | } 92 | 93 | export default HomeIndex -------------------------------------------------------------------------------- /src/pages/landing.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | import Helmet from 'react-helmet' 4 | import Layout from '../components/layout' 5 | import BannerLanding from '../components/BannerLanding' 6 | 7 | import pic08 from '../assets/images/pic08.jpg' 8 | import pic09 from '../assets/images/pic09.jpg' 9 | import pic10 from '../assets/images/pic10.jpg' 10 | 11 | const Landing = (props) => ( 12 | 13 | 14 | Landing - Forty by HTML5 UP 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |
23 |
24 |

Sed amet aliquam

25 |
26 |

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna.

27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 |
35 |
36 |
37 |

Orci maecenas

38 |
39 |

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa sed magna lacinia magna pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis tempus.

40 |
    41 |
  • Learn more
    • 42 |
43 |
44 |
45 |
46 |
47 | 48 | 49 | 50 |
51 |
52 |
53 |

Rhoncus magna

54 |
55 |

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa sed magna lacinia magna pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis tempus.

56 |
    57 |
  • Learn more
    • 58 |
59 |
60 |
61 |
62 |
63 | 64 | 65 | 66 |
67 |
68 |
69 |

Sed nunc ligula

70 |
71 |

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa sed magna lacinia magna pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis tempus.

72 |
    73 |
  • Learn more
    • 74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 | 82 | ) 83 | 84 | export default Landing -------------------------------------------------------------------------------- /src/pages/success.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Helmet from 'react-helmet' 3 | import Layout from '../components/layout' 4 | 5 | import pic11 from '../assets/images/pic11.jpg' 6 | 7 | const Success = (props) => ( 8 | 9 | 10 | Success Page 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |

Success/Thank You Page

19 |
20 | 21 |

Thank you for contacting us!

22 |
23 |
24 |
25 | 26 | ) 27 | 28 | export default Success --------------------------------------------------------------------------------