From 97dbc8c3772c89022a55d591c4ed90cee1d1feaa Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Wed, 21 Mar 2018 08:24:51 -0500 Subject: redesign --- README.txt | 383 ++ assets/css/font-awesome.min.css | 0 assets/css/ie8.css | 60 - assets/css/main.css | 5100 ++++++++++++++------------ assets/css/noscript.css | 11 + assets/fonts/FontAwesome.otf | Bin assets/fonts/fontawesome-webfont.eot | Bin assets/fonts/fontawesome-webfont.svg | 0 assets/fonts/fontawesome-webfont.ttf | Bin assets/fonts/fontawesome-webfont.woff | Bin assets/fonts/fontawesome-webfont.woff2 | Bin assets/js/ie/PIE.htc | 96 - assets/js/ie/html5shiv.js | 8 - assets/js/ie/respond.min.js | 6 - assets/js/jquery.min.js | 0 assets/js/jquery.scrolly.min.js | 2 - assets/js/jquery.scrollzer.min.js | 2 - assets/js/main.js | 877 ++++- assets/js/skel.min.js | 2 +- assets/js/util.js | 587 --- assets/sass/base/_page.scss | 105 + assets/sass/base/_typography.scss | 271 ++ assets/sass/components/_button.scss | 156 + assets/sass/components/_form.scss | 275 ++ assets/sass/components/_gallery.scss | 218 ++ assets/sass/components/_icon.scss | 17 + assets/sass/components/_image.scss | 169 + assets/sass/components/_list.scss | 380 ++ assets/sass/components/_panel-banner.scss | 90 + assets/sass/components/_panel-spotlight.scss | 81 + assets/sass/components/_panel.scss | 300 ++ assets/sass/components/_table.scss | 81 + assets/sass/ie8.scss | 62 - assets/sass/layout/_page-wrapper.scss | 43 + assets/sass/layout/_wrapper.scss | 118 + assets/sass/libs/_functions.scss | 66 +- assets/sass/libs/_mixins.scss | 452 ++- assets/sass/libs/_skel.scss | 1170 +++--- assets/sass/libs/_vars.scss | 110 +- assets/sass/main.scss | 1711 +-------- assets/sass/noscript.scss | 16 + images/avatar.png | Bin 2104 -> 0 bytes images/banner.jpg | Bin 351227 -> 0 bytes images/bg.jpg | Bin 0 -> 24832 bytes images/gallery/fulls/01.jpg | Bin 0 -> 31216 bytes images/gallery/fulls/02.jpg | Bin 0 -> 22129 bytes images/gallery/fulls/03.jpg | Bin 0 -> 24147 bytes images/gallery/fulls/04.jpg | Bin 0 -> 27427 bytes images/gallery/fulls/05.jpg | Bin 0 -> 28752 bytes images/gallery/fulls/06.jpg | Bin 0 -> 24666 bytes images/gallery/fulls/07.jpg | Bin 0 -> 23969 bytes images/gallery/fulls/08.jpg | Bin 0 -> 33641 bytes images/gallery/fulls/09.jpg | Bin 0 -> 26491 bytes images/gallery/thumbs/01.jpg | Bin 0 -> 13676 bytes images/gallery/thumbs/02.jpg | Bin 0 -> 5681 bytes images/gallery/thumbs/03.jpg | Bin 0 -> 5982 bytes images/gallery/thumbs/04.jpg | Bin 0 -> 16718 bytes images/gallery/thumbs/05.jpg | Bin 0 -> 12300 bytes images/gallery/thumbs/06.jpg | Bin 0 -> 5909 bytes images/gallery/thumbs/07.jpg | Bin 0 -> 6026 bytes images/gallery/thumbs/08.jpg | Bin 0 -> 14506 bytes images/gallery/thumbs/09.jpg | Bin 0 -> 15726 bytes images/overlay.png | Bin 0 -> 25653 bytes images/pic01.jpg | Bin 0 -> 16901 bytes images/pic01.png | Bin 61979 -> 0 bytes images/pic02.jpg | Bin 0 -> 31996 bytes images/pic02.png | Bin 11658 -> 0 bytes images/pic03.jpg | Bin 17696 -> 39770 bytes images/twitter.png | Bin 3297 -> 0 bytes index.html | 892 +++-- 70 files changed, 7932 insertions(+), 5985 deletions(-) create mode 100644 README.txt mode change 100755 => 100644 assets/css/font-awesome.min.css delete mode 100755 assets/css/ie8.css mode change 100755 => 100644 assets/css/main.css create mode 100644 assets/css/noscript.css mode change 100755 => 100644 assets/fonts/FontAwesome.otf mode change 100755 => 100644 assets/fonts/fontawesome-webfont.eot mode change 100755 => 100644 assets/fonts/fontawesome-webfont.svg mode change 100755 => 100644 assets/fonts/fontawesome-webfont.ttf mode change 100755 => 100644 assets/fonts/fontawesome-webfont.woff mode change 100755 => 100644 assets/fonts/fontawesome-webfont.woff2 delete mode 100755 assets/js/ie/PIE.htc delete mode 100755 assets/js/ie/html5shiv.js delete mode 100755 assets/js/ie/respond.min.js mode change 100755 => 100644 assets/js/jquery.min.js delete mode 100755 assets/js/jquery.scrolly.min.js delete mode 100755 assets/js/jquery.scrollzer.min.js mode change 100755 => 100644 assets/js/main.js mode change 100755 => 100644 assets/js/skel.min.js delete mode 100755 assets/js/util.js create mode 100644 assets/sass/base/_page.scss create mode 100644 assets/sass/base/_typography.scss create mode 100644 assets/sass/components/_button.scss create mode 100644 assets/sass/components/_form.scss create mode 100644 assets/sass/components/_gallery.scss create mode 100644 assets/sass/components/_icon.scss create mode 100644 assets/sass/components/_image.scss create mode 100644 assets/sass/components/_list.scss create mode 100644 assets/sass/components/_panel-banner.scss create mode 100644 assets/sass/components/_panel-spotlight.scss create mode 100644 assets/sass/components/_panel.scss create mode 100644 assets/sass/components/_table.scss delete mode 100755 assets/sass/ie8.scss create mode 100644 assets/sass/layout/_page-wrapper.scss create mode 100644 assets/sass/layout/_wrapper.scss mode change 100755 => 100644 assets/sass/libs/_functions.scss mode change 100755 => 100644 assets/sass/libs/_mixins.scss mode change 100755 => 100644 assets/sass/libs/_skel.scss mode change 100755 => 100644 assets/sass/libs/_vars.scss mode change 100755 => 100644 assets/sass/main.scss create mode 100644 assets/sass/noscript.scss delete mode 100755 images/avatar.png delete mode 100755 images/banner.jpg create mode 100644 images/bg.jpg create mode 100644 images/gallery/fulls/01.jpg create mode 100644 images/gallery/fulls/02.jpg create mode 100644 images/gallery/fulls/03.jpg create mode 100644 images/gallery/fulls/04.jpg create mode 100644 images/gallery/fulls/05.jpg create mode 100644 images/gallery/fulls/06.jpg create mode 100644 images/gallery/fulls/07.jpg create mode 100644 images/gallery/fulls/08.jpg create mode 100644 images/gallery/fulls/09.jpg create mode 100644 images/gallery/thumbs/01.jpg create mode 100644 images/gallery/thumbs/02.jpg create mode 100644 images/gallery/thumbs/03.jpg create mode 100644 images/gallery/thumbs/04.jpg create mode 100644 images/gallery/thumbs/05.jpg create mode 100644 images/gallery/thumbs/06.jpg create mode 100644 images/gallery/thumbs/07.jpg create mode 100644 images/gallery/thumbs/08.jpg create mode 100644 images/gallery/thumbs/09.jpg create mode 100644 images/overlay.png create mode 100644 images/pic01.jpg delete mode 100755 images/pic01.png create mode 100644 images/pic02.jpg delete mode 100755 images/pic02.png mode change 100755 => 100644 images/pic03.jpg delete mode 100755 images/twitter.png mode change 100755 => 100644 index.html diff --git a/README.txt b/README.txt new file mode 100644 index 0000000..5615888 --- /dev/null +++ b/README.txt @@ -0,0 +1,383 @@ +Ethereal by HTML5 UP +html5up.net | @ajlkn +Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) + + +This is Ethereal, my latest, greatest, and quite possibly most unique template for HTML5 UP. +Since releasing Parallelism 3-4 years ago (!!!), I've been dying to do another side-scrolling +template with more in the way of flexibility/customization potential. The result is this template, +Ethereal, which combines a robust side-scrolling framework of my own creation (with various +"scroll-assist" features like drag/momentum scrolling, keyboard shortcuts, etc.) with a unique +look and feel, a lightbox gallery, tons of customization options, and, of course, full +responsiveness. Hope you dig it :) + +Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images +you can use for pretty much whatever. + +(* = not included) + +AJ +aj@lkn.io | @ajlkn + + +Instructions: + + Overview + ======== + + Browsers deal with side-scrolling pages differently to vertically-oriented ones in + that they require elements (or at the very least, the top-most wrapper element) to + have a defined (fixed) width. This leads to a number of limitations (eg. the page + won't automatically grow/shrink in the same way a vertically-oriented one will), so + Ethereal does two things to work around this: + + - The entire page is made up of "panel" elements, each of which can be assigned an + optional "size" modifier (satisfying the fixed width requirement). + + - For panels that don't use a size modifier, individual containing elements *inside* + them (eg. a column) can be assigned a "span" modifier to give those a fixed width + instead (also satisfying the fixed width requirement). + + Another fun quirk of side-scrolling pages is how to actually implement horizontal + scrolling *without* resorting to using the (usually ugly) horizontal scrollbar. + Ethereal does this in FOUR (!) ways: + + - Dragging: Users can simply click and drag the page left or right to scroll it around. + This works exactly as you'd expect, and even has a nice "post-scroll momentum" effect. + + - Scroll Wheel: Ethereal modifies* the scroll wheel's behavior to translate vertical + scrolling into horizontal scrolling, allowing the user to use either the scroll wheel + or trackpad to scroll the page (the latter of which retains the ability to horziontally + scroll as normal, so nothing changes there). + + * Special thanks to @miorel + @pieterv of Facebook for "normalizeWheel()" :) + + - Scroll Zones: Users can hover the mouse cursor on the left or right edges of the page + to automatically scroll in either direction. + + - Keyboard Shortcuts: Finally, users can simply use the left/right arrows, page up/down, + home/end, and the spacebar to scroll the page. + + Note that any (or all) of these scroll-assist features can be turned off (and in some + cases customized). See the top of assets/js/main.js for more information. + + + Span Modifiers + ============== + + Span modifiers are simply classes that give elements a fixed width, the size of which + is determined by the "unit value" associated with the modifier (eg. "span-3" means + "span 3 units"). These sizes are in "rem" units when used inside panels that don't + use a size modifier, and in percentage units when used inside panels that do. + + Ethereal includes span modifiers ranging from 0.25 units ("span-0-25") to 10 units + ("span-10"). Here's a partial list: + + span-0-25 Span 0.25 units. + span-0-5 Span 0.5 units. + span-0-75 Span 0.75 units. + span-1 Span 1 unit. + span-1-25 Span 1.25 units. + span-1-5 Span 1.5 units. + span-1-75 Span 1.75 units. + ... + span-9 Span 9 units. + span-9-25 Span 9.25 units. + span-9-5 Span 9.5 units. + span-9-75 Span 9.75 units. + span-10 Span 10 units. + + + Major Elements + ============== + + Most of Ethereal's elements are pretty much what you'd expect, but there are a handful + of "major" ones that warrant a bit more explanation: + + + Panel + ------ + + The primary building block of Ethereal. + + HTML + +
+
+ (intro content) +
+
+ (inner content) +
+
+ + Note: The entire "intro" child element can be excluded. + Note: You can have as many "intro" and "inner" child elements as you like. + + Modifiers + + Size + + small Use small size. + medium Use medium size. + large Use large size. + + Color + + color0 Use background color 0 (gradient). + color1 Use background color 1. + color2 Use background color 2. + color3 Use background color 3. + color4 Use background color 4. + color1-alt Use background color 1 (alt). + color2-alt Use background color 2 (alt). + color3-alt Use background color 3 (alt). + color4-alt Use background color 4 (alt). + + Inner + + columns Divides child elements into columns. + aligned When used with "columns", aligns content to top of panel. + divided When used with "columns", separates each column with a vertical line. + + Examples + + Here's a very basic example: + +
+
+

Panel

+

Just a generic panel.

+
+
+

Lorem ipsum dolor sit amet.

+
+
+ + And here's a more advanced example using columns and *no* size modifier: + +
+
+

Panel

+

Just a generic panel.

+
+
+
+

This column is 4 units wide.

+
+
+

This column is 3 units wide.

+
+
+

This column is 2 units wide.

+
+
+
+ + Note: The "intro" child element already has a fixed width, so a span modifier + isn't required. + + + Panel (Banner) + -------------- + + The "Banner" variant of a regular panel. + + HTML + + + + Modifiers + + Orientation + + left Content on the left, image on the right. + right Content on the right, image on the left. + + Image + + filtered Applies a gradient filter to the image. + tinted Applies a tint filter to the image. + + Image Position (required) + + top left Position image in the top-left corner. + top Position image along the top edge. + top right Position image in the top-right corner. + right Position image along the right edge. + bottom right Position image in the bottom-right corner. + bottom Position image along the bottom edge. + bottom left Position image in the bottom-left corner. + left Position image along the left edge. + center Position image in the center. + + Example + + + + + Panel (Spotlight) + ----------------- + + The "Spotlight" variant of a regular panel. + + HTML + +
+
+ (content) +
+
+ +
+
+ + Modifiers + + Orientation + + left Content on the left. + right Content on the right. + + Image + + filtered Applies a gradient filter to the image. + tinted Applies a tint filter to the image. + + Image Position (required) + + top left Position image in the top-left corner. + top Position image along the top edge. + top right Position image in the top-right corner. + right Position image along the right edge. + bottom right Position image in the bottom-right corner. + bottom Position image along the bottom edge. + bottom left Position image in the bottom-left corner. + left Position image along the left edge. + center Position image in the center. + + Example + +
+
+

Spotlight

+

Lorem ipsum dolor sit amet.

+
+
+ +
+
+ + + Gallery + ------- + + A lightbox-enabled gallery. + + HTML + +
+ + + + + + + + + +
+ + + + + + + + + + + + + ... +
+ ... +
+ + Note: The "group" element creates a dual-row group of images. Images inside this group will + automatically wrap to the next row when they exceed its width (as defined by its span modifier). + You can have as many groups in a gallery as you like. + + Modifiers + + Image + + filtered Applies a gradient filter to the image. + tinted Applies a tint filter to the image. + + Image Position (required) + + top left Position image in the top-left corner. + top Position image along the top edge. + top right Position image in the top-right corner. + right Position image along the right edge. + bottom right Position image in the bottom-right corner. + bottom Position image along the bottom edge. + bottom left Position image in the bottom-left corner. + left Position image along the left edge. + center Position image in the center. + + Example + +
+ + + + + + +
+ + + + + + + + + + + + +
+
+ + +Credits: + + Demo Images: + Unsplash (unsplash.com) + + Icons: + Font Awesome (fortawesome.github.com/Font-Awesome) + + Other: + jQuery (jquery.com) + Misc. Sass functions (@HugoGiraudel) + normalizeWheel (@miorel + @pieterv of Facebook) + Skel (skel.io) \ No newline at end of file diff --git a/assets/css/font-awesome.min.css b/assets/css/font-awesome.min.css old mode 100755 new mode 100644 diff --git a/assets/css/ie8.css b/assets/css/ie8.css deleted file mode 100755 index d62f812..0000000 --- a/assets/css/ie8.css +++ /dev/null @@ -1,60 +0,0 @@ -/* - Read Only by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -/* Basic */ - - code, - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea, - .box, - .image, - .image img, - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - position: relative; - -ms-behavior: url("assets/js/ie/PIE.htc"); - } - -/* Form */ - - input[type="text"], - input[type="password"], - input[type="email"], - select { - line-height: 2.75em; - } - - input[type="checkbox"], - input[type="radio"] { - -moz-appearance: normal; - -webkit-appearance: normal; - -ms-appearance: normal; - appearance: normal; - } - - input[type="checkbox"] + label, - input[type="radio"] + label { - padding: 0 0 0 1.5em; - } - - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - display: none; - } - -/* Button */ - - input[type="submit"].alt, - input[type="reset"].alt, - input[type="button"].alt, - .button.alt { - border: solid 2px #e4e4e4; - } \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css old mode 100755 new mode 100644 index 85f64d0..76e3d58 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,8 +1,8 @@ -@import url("font-awesome.min.css"); -@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic|Source+Code+Pro:400"); +@import url(font-awesome.min.css); +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i"); /* - Read Only by HTML5 UP + Ethereal by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @@ -56,3035 +56,3617 @@ box-sizing: border-box; } -/* Containers */ +/* Page */ - .container { - margin-left: auto; - margin-right: auto; - } - - .container.\31 25\25 { - width: 100%; - max-width: 56.25em; - min-width: 45em; - } - - .container.\37 5\25 { - width: 33.75em; - } - - .container.\35 0\25 { - width: 22.5em; - } - - .container.\32 5\25 { - width: 11.25em; - } - - .container { - width: 45em; - } - - @media screen and (max-width: 1680px) { - - .container.\31 25\25 { - width: 100%; - max-width: 56.25em; - min-width: 45em; - } - - .container.\37 5\25 { - width: 33.75em; - } - - .container.\35 0\25 { - width: 22.5em; - } - - .container.\32 5\25 { - width: 11.25em; + @-moz-keyframes load-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .container { - width: 45em; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } - } - @media screen and (max-width: 1280px) { - - .container.\31 25\25 { - width: 100%; - max-width: 52.5em; - min-width: 42em; - } - - .container.\37 5\25 { - width: 31.5em; - } - - .container.\35 0\25 { - width: 21em; + @-webkit-keyframes load-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .container.\32 5\25 { - width: 10.5em; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } - - .container { - width: 42em; - } - } - @media screen and (max-width: 1024px) { - - .container.\31 25\25 { - width: 100%; - max-width: 106.25%; - min-width: 85%; + @-ms-keyframes load-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .container.\37 5\25 { - width: 63.75%; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + } - .container.\35 0\25 { - width: 42.5%; + @keyframes load-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .container.\32 5\25 { - width: 21.25%; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + } - .container { - width: 85% !important; - } + @-ms-viewport { + width: device-width; + } + html { + width: 100%; + height: 100%; } - @media screen and (max-width: 736px) { + body { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-justify-content: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + -ms-overflow-style: scrollbar; + width: 100%; + height: 100%; + min-height: 30rem; + overflow: hidden; + } - .container.\31 25\25 { + body:before { + -moz-animation: load-spinner 1s infinite linear; + -webkit-animation: load-spinner 1s infinite linear; + -ms-animation: load-spinner 1s infinite linear; + animation: load-spinner 1s infinite linear; + -moz-transition: opacity 0.25s ease; + -webkit-transition: opacity 0.25s ease; + -ms-transition: opacity 0.25s ease; + transition: opacity 0.25s ease; + -moz-transition-delay: 0s; + -webkit-transition-delay: 0s; + -ms-transition-delay: 0s; + transition-delay: 0s; + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 4rem; + height: 4rem; + margin: -2rem 0 0 -2rem; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='96px' height='96px' viewBox='0 0 96 96' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: %232e2b37%3B stroke-width: 1.5px%3B %7D%3C/style%3E%3Cdefs%3E%3CclipPath id='corner'%3E%3Cpolygon points='0,0 48,0 48,48 96,48 96,96 0,96' /%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23corner)'%3E%3Ccircle cx='48' cy='48' r='32'/%3E%3C/g%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: 4rem; + opacity: 0; + } + + body:after { + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; width: 100%; - max-width: 112.5%; - min-width: 90%; - } - - .container.\37 5\25 { - width: 67.5%; + height: 100%; + z-index: -1; + background-attachment: fixed; + background-color: #e1e6e1; + background-image: url("../../images/overlay.png"), url("../../images/bg.jpg"); + background-repeat: repeat, repeat-x; + background-size: 128px 128px, cover; + } + + body.is-loading *, body.is-loading *:before, body.is-loading *:after { + -moz-animation: none !important; + -webkit-animation: none !important; + -ms-animation: none !important; + animation: none !important; + -moz-transition: none !important; + -webkit-transition: none !important; + -ms-transition: none !important; + transition: none !important; + } + + body.is-loading:before { + -moz-transition: opacity 1s ease; + -webkit-transition: opacity 1s ease; + -ms-transition: opacity 1s ease; + transition: opacity 1s ease; + -moz-transition-delay: 0.75s; + -webkit-transition-delay: 0.75s; + -ms-transition-delay: 0.75s; + transition-delay: 0.75s; + opacity: 0.25; } - .container.\35 0\25 { - width: 45%; - } + @media screen and (max-width: 736px) { - .container.\32 5\25 { - width: 22.5%; + html { + height: auto; } - .container { - width: 90% !important; + body { + height: auto; + overflow-x: hidden; + overflow-y: auto; } } @media screen and (max-width: 480px) { - .container.\31 25\25 { - width: 100%; - max-width: 112.5%; - min-width: 90%; - } - - .container.\37 5\25 { - width: 67.5%; - } - - .container.\35 0\25 { - width: 45%; - } - - .container.\32 5\25 { - width: 22.5%; - } - - .container { - width: 90% !important; + html, body { + min-width: 320px; } } -/* Grid */ - - .row { - border-bottom: solid 1px transparent; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - } - - .row > * { - float: left; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - } - - .row:after, .row:before { - content: ''; - display: block; - clear: both; - height: 0; - } - - .row.uniform > * > :first-child { - margin-top: 0; - } - - .row.uniform > * > :last-child { - margin-bottom: 0; - } - - .row.\30 \25 > * { - padding: 0 0 0 0em; - } +/* Typography */ - .row.\30 \25 { - margin: 0 0 -1px 0em; + html { + font-size: 18pt; + font-size: 1vmax; } - .row.uniform.\30 \25 > * { - padding: 0em 0 0 0em; - } + @media screen and (max-width: 1680px) { - .row.uniform.\30 \25 { - margin: 0em 0 -1px 0em; - } + html { + font-size: 12pt; + font-size: 1.1vmax; + } - .row > * { - padding: 0 0 0 2em; - } + } - .row { - margin: 0 0 -1px -2em; - } + @media screen and (max-width: 1280px) { - .row.uniform > * { - padding: 2em 0 0 2em; - } + html { + font-size: 11pt; + font-size: 1.5vmax; + } - .row.uniform { - margin: -2em 0 -1px -2em; - } + } - .row.\32 00\25 > * { - padding: 0 0 0 4em; + body, input, select, textarea { + color: rgba(255, 255, 255, 0.75); + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 1rem; + font-weight: 300; + line-height: 1.65; } - .row.\32 00\25 { - margin: 0 0 -1px -4em; + a { + -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + color: inherit; + border-bottom: dotted 1px; + text-decoration: none; } - .row.uniform.\32 00\25 > * { - padding: 4em 0 0 4em; - } + a:hover { + border-bottom-color: transparent; + color: #ffe4b4; + } - .row.uniform.\32 00\25 { - margin: -4em 0 -1px -4em; + strong, b { + color: rgba(255, 255, 255, 0.875); + font-weight: 400; } - .row.\31 50\25 > * { - padding: 0 0 0 3em; + em, i { + font-style: italic; } - .row.\31 50\25 { - margin: 0 0 -1px -3em; + p { + margin: 0 0 1.5rem 0; } - .row.uniform.\31 50\25 > * { - padding: 3em 0 0 3em; - } + body.is-ie p { + width: 100%; + } - .row.uniform.\31 50\25 { - margin: -3em 0 -1px -3em; + h1, h2, h3, h4, h5, h6 { + color: rgba(255, 255, 255, 0.875); + font-family: Arial, Helvetica, sans-serif; + font-weight: 700; + line-height: 1.3; + margin: 0 0 0.75rem 0; + letter-spacing: -0.05em; } - .row.\35 0\25 > * { - padding: 0 0 0 1em; - } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: inherit; + text-decoration: none; + } - .row.\35 0\25 { - margin: 0 0 -1px -1em; + h1.major, h2.major, h3.major { + position: relative; } - .row.uniform.\35 0\25 > * { - padding: 1em 0 0 1em; - } + h1.major:after, h2.major:after, h3.major:after { + content: ''; + position: absolute; + left: 0; + width: 3.5rem; + height: 0.1rem; + background-color: rgba(255, 255, 255, 0.25); + } - .row.uniform.\35 0\25 { - margin: -1em 0 -1px -1em; + h1 { + font-size: 3rem; + line-height: 1.2; } - .row.\32 5\25 > * { - padding: 0 0 0 0.5em; - } + h1.major { + margin: 0 0 2.625rem 0; + } - .row.\32 5\25 { - margin: 0 0 -1px -0.5em; - } + h1.major:after { + bottom: -1.325rem; + } - .row.uniform.\32 5\25 > * { - padding: 0.5em 0 0 0.5em; + h2 { + font-size: 1.75rem; + line-height: 1.2; } - .row.uniform.\32 5\25 { - margin: -0.5em 0 -1px -0.5em; - } + h2.major { + margin: 0 0 1.9875rem 0; + } - .\31 2u, .\31 2u\24 { - width: 100%; - clear: none; - margin-left: 0; - } + h2.major:after { + bottom: -1.2rem; + } - .\31 1u, .\31 1u\24 { - width: 91.6666666667%; - clear: none; - margin-left: 0; + h3 { + font-size: 1.325rem; } - .\31 0u, .\31 0u\24 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } + h3.major { + margin: 0 0 1.875rem 0; + } - .\39 u, .\39 u\24 { - width: 75%; - clear: none; - margin-left: 0; - } + h3.major:after { + bottom: -0.75rem; + } - .\38 u, .\38 u\24 { - width: 66.6666666667%; - clear: none; - margin-left: 0; + h4 { + font-size: 1rem; } - .\37 u, .\37 u\24 { - width: 58.3333333333%; - clear: none; - margin-left: 0; + h5 { + font-size: 0.9rem; } - .\36 u, .\36 u\24 { - width: 50%; - clear: none; - margin-left: 0; + h6 { + font-size: 0.7rem; } - .\35 u, .\35 u\24 { - width: 41.6666666667%; - clear: none; - margin-left: 0; + sub { + font-size: 0.8rem; + position: relative; + top: 0.5rem; } - .\34 u, .\34 u\24 { - width: 33.3333333333%; - clear: none; - margin-left: 0; + sup { + font-size: 0.8rem; + position: relative; + top: -0.5rem; } - .\33 u, .\33 u\24 { - width: 25%; - clear: none; - margin-left: 0; + blockquote { + border-left: solid 0.25rem rgba(255, 255, 255, 0.25); + font-style: italic; + margin: 0 0 1.5rem 0; + padding: 0.375rem 0 0.375rem 1.5rem; } - .\32 u, .\32 u\24 { - width: 16.6666666667%; - clear: none; - margin-left: 0; + code { + background: rgba(255, 255, 255, 0.075); + border-radius: 0.25rem; + font-family: "Courier New", monospace; + font-size: 0.8rem; + margin: 0 0.25rem; + padding: 0.25rem 0.65rem; } - .\31 u, .\31 u\24 { - width: 8.3333333333%; - clear: none; - margin-left: 0; + pre { + -webkit-overflow-scrolling: touch; + font-family: "Courier New", monospace; + font-size: 0.8rem; + margin: 0 0 1.5rem 0; + white-space: pre-wrap; } - .\31 2u\24 + *, - .\31 1u\24 + *, - .\31 0u\24 + *, - .\39 u\24 + *, - .\38 u\24 + *, - .\37 u\24 + *, - .\36 u\24 + *, - .\35 u\24 + *, - .\34 u\24 + *, - .\33 u\24 + *, - .\32 u\24 + *, - .\31 u\24 + * { - clear: left; - } + pre code { + display: block; + line-height: 1.625; + padding: 1rem 1.5rem; + overflow-x: auto; + margin: 0; + } - .\-11u { - margin-left: 91.66667%; + hr { + border: 0; + border-bottom: solid 2px rgba(255, 255, 255, 0.25); + margin: 1.875rem 0; } - .\-10u { - margin-left: 83.33333%; + .align-left { + text-align: left; } - .\-9u { - margin-left: 75%; + .align-center { + text-align: center; } - .\-8u { - margin-left: 66.66667%; + .align-right { + text-align: right; } - .\-7u { - margin-left: 58.33333%; - } + @media screen and (max-width: 736px) { - .\-6u { - margin-left: 50%; - } + html { + font-size: 12pt; + } - .\-5u { - margin-left: 41.66667%; - } + h1 { + font-size: 2.25rem; + line-height: 1.2; + } - .\-4u { - margin-left: 33.33333%; - } + h1.major { + margin: 0 0 2.625rem 0; + } - .\-3u { - margin-left: 25%; - } + h1.major:after { + bottom: -1.325rem; + } - .\-2u { - margin-left: 16.66667%; - } + h2 { + font-size: 1.5rem; + line-height: 1.2; + } - .\-1u { - margin-left: 8.33333%; - } + h2.major { + margin: 0 0 1.9875rem 0; + } - @media screen and (max-width: 1680px) { + h2.major:after { + bottom: -1.2rem; + } - .row > * { - padding: 0 0 0 2em; + h3 { + font-size: 1rem; } - .row { - margin: 0 0 -1px -2em; - } + h3.major { + margin: 0 0 1.875rem 0; + } - .row.uniform > * { - padding: 2em 0 0 2em; - } + h3.major:after { + bottom: -0.75rem; + } - .row.uniform { - margin: -2em 0 -1px -2em; + h4 { + font-size: 1rem; } - .row.\32 00\25 > * { - padding: 0 0 0 4em; + h5 { + font-size: 0.9rem; } - .row.\32 00\25 { - margin: 0 0 -1px -4em; + h6 { + font-size: 0.7rem; } - .row.uniform.\32 00\25 > * { - padding: 4em 0 0 4em; + h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { + display: none; } - .row.uniform.\32 00\25 { - margin: -4em 0 -1px -4em; - } + } - .row.\31 50\25 > * { - padding: 0 0 0 3em; - } + @media screen and (max-width: 360px) { - .row.\31 50\25 { - margin: 0 0 -1px -3em; + html { + font-size: 11pt; } - .row.uniform.\31 50\25 > * { - padding: 3em 0 0 3em; - } + } - .row.uniform.\31 50\25 { - margin: -3em 0 -1px -3em; - } +/* Form */ - .row.\35 0\25 > * { - padding: 0 0 0 1em; + form { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: calc(100% + 3rem); + margin: -1.5rem 0 1.5rem -1.5rem; + } + + form > .field { + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + padding: 1.5rem 0 0 1.5rem; + width: calc(100% - 1.5rem); } - .row.\35 0\25 { - margin: 0 0 -1px -1em; - } + form > .field.half { + width: calc(50% - 0.75rem); + } - .row.uniform.\35 0\25 > * { - padding: 1em 0 0 1em; - } + form > .field.third { + width: calc(100%/3 - 0.5rem); + } - .row.uniform.\35 0\25 { - margin: -1em 0 -1px -1em; - } + form > .field.quarter { + width: calc(25% - 0.375rem); + } - .row.\32 5\25 > * { - padding: 0 0 0 0.5em; + form > .actions { + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + margin: 1.5rem 0 0 1.5rem; } - .row.\32 5\25 { - margin: 0 0 -1px -0.5em; - } + label { + color: rgba(255, 255, 255, 0.875); + display: block; + font-family: Arial, Helvetica, sans-serif; + font-size: 0.8rem; + font-weight: 700; + margin: 0 0 0.4875rem 0; + } - .row.uniform.\32 5\25 > * { - padding: 0.5em 0 0 0.5em; - } + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + select, + textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + background: transparent; + border: solid 2px rgba(255, 255, 255, 0.25); + border-radius: 0.25rem; + color: inherit; + display: block; + outline: 0; + padding: 0 0.75rem; + text-decoration: none; + width: 100%; + } - .row.uniform.\32 5\25 { - margin: -0.5em 0 -1px -0.5em; + input[type="text"]:invalid, + input[type="password"]:invalid, + input[type="email"]:invalid, + input[type="tel"]:invalid, + select:invalid, + textarea:invalid { + box-shadow: none; } - .\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 { - width: 100%; - clear: none; - margin-left: 0; + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + input[type="tel"]:focus, + select:focus, + textarea:focus { + border-color: #ffe4b4; } - .\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } + option { + background-color: rgba(255, 255, 255, 0.875); + color: #2e2b37; + } - .\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } - - .\39 u\28xlarge\29, .\39 u\24\28xlarge\29 { - width: 75%; - clear: none; - margin-left: 0; - } - - .\38 u\28xlarge\29, .\38 u\24\28xlarge\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } - - .\37 u\28xlarge\29, .\37 u\24\28xlarge\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; - } + .select-wrapper { + text-decoration: none; + display: block; + position: relative; + } - .\36 u\28xlarge\29, .\36 u\24\28xlarge\29 { - width: 50%; - clear: none; - margin-left: 0; + .select-wrapper:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; } - .\35 u\28xlarge\29, .\35 u\24\28xlarge\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; + .select-wrapper:before { + display: block; + content: '\f107'; + position: absolute; + top: 0; + right: 0; + width: 2.5rem; + height: 2.5rem; + line-height: 2.5rem; + color: rgba(255, 255, 255, 0.75); + pointer-events: none; + text-align: center; } - .\34 u\28xlarge\29, .\34 u\24\28xlarge\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; - } + body.is-ie .select-wrapper:before { + line-height: 2.5; + } - .\33 u\28xlarge\29, .\33 u\24\28xlarge\29 { - width: 25%; - clear: none; - margin-left: 0; + .select-wrapper select::-ms-expand { + display: none; } - .\32 u\28xlarge\29, .\32 u\24\28xlarge\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; - } + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: 2.5rem; + } - .\31 u\28xlarge\29, .\31 u\24\28xlarge\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; - } + textarea { + padding: 0.75rem 1rem; + } - .\31 2u\24\28xlarge\29 + *, - .\31 1u\24\28xlarge\29 + *, - .\31 0u\24\28xlarge\29 + *, - .\39 u\24\28xlarge\29 + *, - .\38 u\24\28xlarge\29 + *, - .\37 u\24\28xlarge\29 + *, - .\36 u\24\28xlarge\29 + *, - .\35 u\24\28xlarge\29 + *, - .\34 u\24\28xlarge\29 + *, - .\33 u\24\28xlarge\29 + *, - .\32 u\24\28xlarge\29 + *, - .\31 u\24\28xlarge\29 + * { - clear: left; - } + input[type="checkbox"], + input[type="radio"] { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + display: block; + float: left; + margin-right: -2rem; + opacity: 0; + width: 1rem; + z-index: -1; + } - .\-11u\28xlarge\29 { - margin-left: 91.66667%; + input[type="checkbox"] + label, + input[type="radio"] + label { + text-decoration: none; + position: relative; + color: rgba(255, 255, 255, 0.75); + cursor: pointer; + display: inline-block; + font-size: 1rem; + font-weight: 300; + margin-bottom: 0; + padding-left: 2.5rem; + padding-right: 1rem; } - .\-10u\28xlarge\29 { - margin-left: 83.33333%; - } + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + } - .\-9u\28xlarge\29 { - margin-left: 75%; - } + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + content: ''; + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: 1.5rem; + height: 1.5rem; + line-height: 1.4375rem; + background: rgba(255, 255, 255, 0.075); + border: solid 1px rgba(255, 255, 255, 0.25); + border-radius: 0.25rem; + color: #2e2b37; + text-align: center; + } - .\-8u\28xlarge\29 { - margin-left: 66.66667%; - } + body.is-ie input[type="checkbox"] + label:before, body.is-ie + input[type="radio"] + label:before { + line-height: 1.5; + } - .\-7u\28xlarge\29 { - margin-left: 58.33333%; + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + content: '\f00c'; + background: rgba(255, 255, 255, 0.875); + border-color: rgba(255, 255, 255, 0.875); } - .\-6u\28xlarge\29 { - margin-left: 50%; + input[type="checkbox"]:focus + label:before, + input[type="radio"]:focus + label:before { + border-color: #ffe4b4; + box-shadow: 0 0 0 1px #ffe4b4; } - .\-5u\28xlarge\29 { - margin-left: 41.66667%; + input[type="checkbox"]:focus:checked + label:before, + input[type="radio"]:focus:checked + label:before { + background: #ffe4b4; } - .\-4u\28xlarge\29 { - margin-left: 33.33333%; + input[type="checkbox"].color1 + label:before, + input[type="radio"].color1 + label:before { + color: #726193; } - .\-3u\28xlarge\29 { - margin-left: 25%; + input[type="checkbox"].color2 + label:before, + input[type="radio"].color2 + label:before { + color: #e37b7c; } - .\-2u\28xlarge\29 { - margin-left: 16.66667%; + input[type="checkbox"].color3 + label:before, + input[type="radio"].color3 + label:before { + color: #ffe4b4; } - .\-1u\28xlarge\29 { - margin-left: 8.33333%; + input[type="checkbox"].color4 + label:before, + input[type="radio"].color4 + label:before { + color: #353865; } + input[type="checkbox"] + label:before { + border-radius: 0.25rem; } - @media screen and (max-width: 1280px) { - - .row > * { - padding: 0 0 0 1.5em; - } - - .row { - margin: 0 0 -1px -1.5em; - } + input[type="radio"] + label:before { + border-radius: 100%; + } - .row.uniform > * { - padding: 1.5em 0 0 1.5em; - } + ::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } - .row.uniform { - margin: -1.5em 0 -1px -1.5em; - } + :-moz-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } - .row.\32 00\25 > * { - padding: 0 0 0 3em; - } + ::-moz-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } - .row.\32 00\25 { - margin: 0 0 -1px -3em; - } + :-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } - .row.uniform.\32 00\25 > * { - padding: 3em 0 0 3em; - } + .formerize-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } - .row.uniform.\32 00\25 { - margin: -3em 0 -1px -3em; - } + @media screen and (max-width: 736px) { - .row.\31 50\25 > * { - padding: 0 0 0 2.25em; + form { + margin: -1.5rem 0 1.5rem 0; + width: 100%; } - .row.\31 50\25 { - margin: 0 0 -1px -2.25em; - } + form > .field { + padding: 1.5rem 0 0 0; + width: 100% !important; + } - .row.uniform.\31 50\25 > * { - padding: 2.25em 0 0 2.25em; - } + form > .actions { + margin: 1.5rem 0 0 0; + } - .row.uniform.\31 50\25 { - margin: -2.25em 0 -1px -2.25em; - } + } - .row.\35 0\25 > * { - padding: 0 0 0 0.75em; - } +/* Icon */ - .row.\35 0\25 { - margin: 0 0 -1px -0.75em; - } + .icon { + text-decoration: none; + position: relative; + border-bottom: none; + } - .row.uniform.\35 0\25 > * { - padding: 0.75em 0 0 0.75em; + .icon:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; } - .row.uniform.\35 0\25 { - margin: -0.75em 0 -1px -0.75em; + .icon > .label { + display: none; } - .row.\32 5\25 > * { - padding: 0 0 0 0.375em; - } +/* Image */ - .row.\32 5\25 { - margin: 0 0 -1px -0.375em; - } + .image { + display: inline-block; + position: relative; + border: 0; + } - .row.uniform.\32 5\25 > * { - padding: 0.375em 0 0 0.375em; + .image.filtered:after { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1; + z-index: 1; } - .row.uniform.\32 5\25 { - margin: -0.375em 0 -1px -0.375em; + .image.filtered.tinted:after { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)), linear-gradient(0deg, rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); + background-size: 128px 128px, auto, auto; } - .\31 2u\28large\29, .\31 2u\24\28large\29 { + .image[data-position] img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + display: block; + position: absolute; + top: 0; + left: 0; width: 100%; - clear: none; - margin-left: 0; + height: 100%; } - .\31 1u\28large\29, .\31 1u\24\28large\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; + .image[data-position="top left"] img { + -moz-object-position: top left; + -webkit-object-position: top left; + -ms-object-position: top left; + object-position: top left; } - .\31 0u\28large\29, .\31 0u\24\28large\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; + .image[data-position="top"] img { + -moz-object-position: top; + -webkit-object-position: top; + -ms-object-position: top; + object-position: top; } - .\39 u\28large\29, .\39 u\24\28large\29 { - width: 75%; - clear: none; - margin-left: 0; + .image[data-position="top right"] img { + -moz-object-position: top right; + -webkit-object-position: top right; + -ms-object-position: top right; + object-position: top right; } - .\38 u\28large\29, .\38 u\24\28large\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; + .image[data-position="right"] img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; } - .\37 u\28large\29, .\37 u\24\28large\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; + .image[data-position="bottom right"] img { + -moz-object-position: bottom right; + -webkit-object-position: bottom right; + -ms-object-position: bottom right; + object-position: bottom right; } - .\36 u\28large\29, .\36 u\24\28large\29 { - width: 50%; - clear: none; - margin-left: 0; + .image[data-position="bottom"] img { + -moz-object-position: bottom; + -webkit-object-position: bottom; + -ms-object-position: bottom; + object-position: bottom; } - .\35 u\28large\29, .\35 u\24\28large\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; + .image[data-position="bottom left"] img { + -moz-object-position: bottom left; + -webkit-object-position: bottom left; + -ms-object-position: bottom left; + object-position: bottom left; } - .\34 u\28large\29, .\34 u\24\28large\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; + .image[data-position="left"] img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; } - .\33 u\28large\29, .\33 u\24\28large\29 { - width: 25%; - clear: none; - margin-left: 0; + .image[data-position="center"] img { + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; } - .\32 u\28large\29, .\32 u\24\28large\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; + .image[data-position="25% 25%"] img { + -moz-object-position: 25% 25%; + -webkit-object-position: 25% 25%; + -ms-object-position: 25% 25%; + object-position: 25% 25%; } - .\31 u\28large\29, .\31 u\24\28large\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; + .image[data-position="75% 25%"] img { + -moz-object-position: 75% 25%; + -webkit-object-position: 75% 25%; + -ms-object-position: 75% 25%; + object-position: 75% 25%; } - .\31 2u\24\28large\29 + *, - .\31 1u\24\28large\29 + *, - .\31 0u\24\28large\29 + *, - .\39 u\24\28large\29 + *, - .\38 u\24\28large\29 + *, - .\37 u\24\28large\29 + *, - .\36 u\24\28large\29 + *, - .\35 u\24\28large\29 + *, - .\34 u\24\28large\29 + *, - .\33 u\24\28large\29 + *, - .\32 u\24\28large\29 + *, - .\31 u\24\28large\29 + * { - clear: left; + .image[data-position="75% 75%"] img { + -moz-object-position: 75% 75%; + -webkit-object-position: 75% 75%; + -ms-object-position: 75% 75%; + object-position: 75% 75%; } - .\-11u\28large\29 { - margin-left: 91.66667%; + .image[data-position="25% 75%"] img { + -moz-object-position: 25% 75%; + -webkit-object-position: 25% 75%; + -ms-object-position: 25% 75%; + object-position: 25% 75%; } - .\-10u\28large\29 { - margin-left: 83.33333%; + .image img { + display: block; } - .\-9u\28large\29 { - margin-left: 75%; + .image.left, .image.right { + max-width: 40%; } - .\-8u\28large\29 { - margin-left: 66.66667%; - } + .image.left img, .image.right img { + width: 100%; + } - .\-7u\28large\29 { - margin-left: 58.33333%; + .image.left { + float: left; + padding: 0 1.5rem 1rem 0; + top: 0.25rem; } - .\-6u\28large\29 { - margin-left: 50%; + .image.right { + float: right; + padding: 0 0 1rem 1.5rem; + top: 0.25rem; } - .\-5u\28large\29 { - margin-left: 41.66667%; + .image.fit { + display: block; + margin: 0 0 1.5rem 0; + width: 100%; } - .\-4u\28large\29 { - margin-left: 33.33333%; - } + .image.fit img { + width: 100%; + } - .\-3u\28large\29 { - margin-left: 25%; + .image.main { + display: block; + margin: 0 0 2.25rem 0; + width: 100%; } - .\-2u\28large\29 { - margin-left: 16.66667%; - } + .image.main img { + width: 100%; + } - .\-1u\28large\29 { - margin-left: 8.33333%; - } +/* List */ + ol { + list-style: decimal; + margin: 0 0 1.5rem 0; + padding-left: 1.25rem; } - @media screen and (max-width: 1024px) { - - .row > * { - padding: 0 0 0 1.5em; + ol li { + padding-left: 0.25rem; } - .row { - margin: 0 0 -1px -1.5em; - } + ul { + list-style: disc; + margin: 0 0 1.5rem 0; + padding-left: 1rem; + } - .row.uniform > * { - padding: 1.5em 0 0 1.5em; + ul li { + padding-left: 0.5rem; } - .row.uniform { - margin: -1.5em 0 -1px -1.5em; + ul.alt { + list-style: none; + padding-left: 0; } - .row.\32 00\25 > * { - padding: 0 0 0 3em; - } + ul.alt li { + border-top: solid 1px rgba(255, 255, 255, 0.25); + padding: 0.5rem 0; + } - .row.\32 00\25 { - margin: 0 0 -1px -3em; - } + ul.alt li:first-child { + border-top: 0; + padding-top: 0; + } - .row.uniform.\32 00\25 > * { - padding: 3em 0 0 3em; + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; } - .row.uniform.\32 00\25 { - margin: -3em 0 -1px -3em; - } + ul.icons li { + display: inline-block; + padding: 0 1rem 0 0; + } - .row.\31 50\25 > * { - padding: 0 0 0 2.25em; - } + ul.icons li:last-child { + padding-right: 0; + } - .row.\31 50\25 { - margin: 0 0 -1px -2.25em; - } + ul.icons li .icon:before { + font-size: 1.25em; + } - .row.uniform.\31 50\25 > * { - padding: 2.25em 0 0 2.25em; + ul.actions { + cursor: default; + list-style: none; + padding-left: 0; } - .row.uniform.\31 50\25 { - margin: -2.25em 0 -1px -2.25em; - } + ul.actions li { + display: inline-block; + padding: 0 0.75rem 0 0; + vertical-align: middle; + } - .row.\35 0\25 > * { - padding: 0 0 0 0.75em; - } + ul.actions li:last-child { + padding-right: 0; + } - .row.\35 0\25 { - margin: 0 0 -1px -0.75em; - } + ul.actions.small li { + padding: 0 0.375rem 0 0; + } - .row.uniform.\35 0\25 > * { - padding: 0.75em 0 0 0.75em; - } + ul.actions.vertical li { + display: block; + padding: 0.75rem 0 0 0; + } - .row.uniform.\35 0\25 { - margin: -0.75em 0 -1px -0.75em; - } + ul.actions.vertical li:first-child { + padding-top: 0; + } - .row.\32 5\25 > * { - padding: 0 0 0 0.375em; - } + ul.actions.vertical li > * { + margin-bottom: 0; + } - .row.\32 5\25 { - margin: 0 0 -1px -0.375em; - } + ul.actions.vertical.small li { + padding: 0.375rem 0 0 0; + } - .row.uniform.\32 5\25 > * { - padding: 0.375em 0 0 0.375em; - } + ul.actions.vertical.small li:first-child { + padding-top: 0; + } - .row.uniform.\32 5\25 { - margin: -0.375em 0 -1px -0.375em; - } - - .\31 2u\28medium\29, .\31 2u\24\28medium\29 { - width: 100%; - clear: none; - margin-left: 0; - } - - .\31 1u\28medium\29, .\31 1u\24\28medium\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 0u\28medium\29, .\31 0u\24\28medium\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } + ul.actions.fit { + display: table; + margin-left: -0.75rem; + padding: 0; + table-layout: fixed; + width: calc(100% + 0.75rem); + } - .\39 u\28medium\29, .\39 u\24\28medium\29 { - width: 75%; - clear: none; - margin-left: 0; - } + ul.actions.fit li { + display: table-cell; + padding: 0 0 0 0.75rem; + } - .\38 u\28medium\29, .\38 u\24\28medium\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } + ul.actions.fit li > * { + margin-bottom: 0; + } - .\37 u\28medium\29, .\37 u\24\28medium\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; - } + ul.actions.fit.small { + margin-left: -0.375rem; + width: calc(100% + 0.375rem); + } - .\36 u\28medium\29, .\36 u\24\28medium\29 { - width: 50%; - clear: none; - margin-left: 0; - } + ul.actions.fit.small li { + padding: 0 0 0 0.375rem; + } - .\35 u\28medium\29, .\35 u\24\28medium\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; + ul.contact-icons { + list-style: none; + padding-left: 0; } - .\34 u\28medium\29, .\34 u\24\28medium\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; - } + ul.contact-icons > li { + margin: 1.25rem 0 0 0; + padding-left: 0; + } - .\33 u\28medium\29, .\33 u\24\28medium\29 { - width: 25%; - clear: none; - margin-left: 0; - } + ul.contact-icons > li:before { + display: inline-block; + width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + border-radius: 2.25rem; + background-color: white; + color: #2e2b37; + cursor: default; + font-size: 1.125rem; + margin-right: 1rem; + text-align: center; + vertical-align: middle; + } - .\32 u\28medium\29, .\32 u\24\28medium\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; - } + body.is-ie ul.contact-icons > li:before { + line-height: 2.125; + } - .\31 u\28medium\29, .\31 u\24\28medium\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; - } + ul.contact-icons > li a { + border-bottom: 0; + } - .\31 2u\24\28medium\29 + *, - .\31 1u\24\28medium\29 + *, - .\31 0u\24\28medium\29 + *, - .\39 u\24\28medium\29 + *, - .\38 u\24\28medium\29 + *, - .\37 u\24\28medium\29 + *, - .\36 u\24\28medium\29 + *, - .\35 u\24\28medium\29 + *, - .\34 u\24\28medium\29 + *, - .\33 u\24\28medium\29 + *, - .\32 u\24\28medium\29 + *, - .\31 u\24\28medium\29 + * { - clear: left; - } + ul.contact-icons.color1 > li:before { + color: #726193; + } - .\-11u\28medium\29 { - margin-left: 91.66667%; - } + ul.contact-icons.color2 > li:before { + color: #e37b7c; + } - .\-10u\28medium\29 { - margin-left: 83.33333%; - } + ul.contact-icons.color3 > li:before { + color: #ffe4b4; + } - .\-9u\28medium\29 { - margin-left: 75%; - } + ul.contact-icons.color4 > li:before { + color: #353865; + } - .\-8u\28medium\29 { - margin-left: 66.66667%; + ul.grid-icons { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + list-style: none; + margin: 0 0 1.5rem 0; + padding-left: 0; } - .\-7u\28medium\29 { - margin-left: 58.33333%; - } + ul.grid-icons .icon { + display: block; + position: relative; + width: 100%; + text-align: center; + } - .\-6u\28medium\29 { - margin-left: 50%; - } + ul.grid-icons .icon:before { + display: block; + width: 6rem; + height: 6rem; + line-height: 6rem; + border-radius: 6rem; + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); + font-size: 2.5rem; + margin: 0 auto; + text-align: center; + } - .\-5u\28medium\29 { - margin-left: 41.66667%; - } + body.is-ie ul.grid-icons .icon:before { + line-height: 2.375; + } - .\-4u\28medium\29 { - margin-left: 33.33333%; - } + ul.grid-icons > li { + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + position: relative; + margin: 1.5rem 0 0 1.5rem; + padding-left: 0; + } - .\-3u\28medium\29 { - margin-left: 25%; - } + ul.grid-icons.connected > li:before { + content: ''; + display: block; + position: absolute; + width: 1.5rem; + height: 2px; + top: 50%; + left: -1.5rem; + background-color: rgba(255, 255, 255, 0.25); + } - .\-2u\28medium\29 { - margin-left: 16.66667%; - } + ul.grid-icons.connected > li:after { + content: ''; + display: block; + position: absolute; + width: 2px; + height: 1.5rem; + top: -1.5rem; + left: 50%; + background-color: rgba(255, 255, 255, 0.25); + } - .\-1u\28medium\29 { - margin-left: 8.33333%; - } + ul.grid-icons.two { + width: 14rem; + } - } + ul.grid-icons.two > li:nth-child(-n + 2) { + margin-top: 0; + } - @media screen and (max-width: 736px) { + ul.grid-icons.two > li:nth-child(-n + 2):after { + display: none; + } - .row > * { - padding: 0 0 0 1.25em; - } + ul.grid-icons.two > li:nth-child(2n - 1) { + margin-left: 0; + } - .row { - margin: 0 0 -1px -1.25em; - } + ul.grid-icons.two > li:nth-child(2n - 1):before { + display: none; + } - .row.uniform > * { - padding: 1.25em 0 0 1.25em; - } + ul.grid-icons.three { + width: 21.5rem; + } - .row.uniform { - margin: -1.25em 0 -1px -1.25em; - } + ul.grid-icons.three > li:nth-child(-n + 3) { + margin-top: 0; + } - .row.\32 00\25 > * { - padding: 0 0 0 2.5em; - } + ul.grid-icons.three > li:nth-child(-n + 3):after { + display: none; + } - .row.\32 00\25 { - margin: 0 0 -1px -2.5em; - } + ul.grid-icons.three > li:nth-child(3n - 2) { + margin-left: 0; + } - .row.uniform.\32 00\25 > * { - padding: 2.5em 0 0 2.5em; - } + ul.grid-icons.three > li:nth-child(3n - 2):before { + display: none; + } - .row.uniform.\32 00\25 { - margin: -2.5em 0 -1px -2.5em; - } + ul.grid-icons.four { + width: 29rem; + } - .row.\31 50\25 > * { - padding: 0 0 0 1.875em; - } + ul.grid-icons.four > li:nth-child(-n + 4) { + margin-top: 0; + } - .row.\31 50\25 { - margin: 0 0 -1px -1.875em; - } + ul.grid-icons.four > li:nth-child(-n + 4):after { + display: none; + } - .row.uniform.\31 50\25 > * { - padding: 1.875em 0 0 1.875em; - } + ul.grid-icons.four > li:nth-child(4n - 3) { + margin-left: 0; + } - .row.uniform.\31 50\25 { - margin: -1.875em 0 -1px -1.875em; - } + ul.grid-icons.four > li:nth-child(4n - 3):before { + display: none; + } - .row.\35 0\25 > * { - padding: 0 0 0 0.625em; - } + dl { + margin: 0 0 1.5rem 0; + } - .row.\35 0\25 { - margin: 0 0 -1px -0.625em; + dl dt { + display: block; + font-weight: 400; + margin: 0 0 0.75rem 0; } - .row.uniform.\35 0\25 > * { - padding: 0.625em 0 0 0.625em; + dl dd { + margin-left: 1.5rem; } - .row.uniform.\35 0\25 { - margin: -0.625em 0 -1px -0.625em; - } + @media screen and (max-width: 736px) { - .row.\32 5\25 > * { - padding: 0 0 0 0.3125em; + ul.grid-icons { + -moz-justify-content: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + width: 100% !important; + margin: -1rem 0 1.5rem -1rem; } - .row.\32 5\25 { - margin: 0 0 -1px -0.3125em; - } + ul.grid-icons .icon:before { + width: 4.5rem; + height: 4.5rem; + line-height: 4.5rem; + font-size: 1.75rem; + } - .row.uniform.\32 5\25 > * { - padding: 0.3125em 0 0 0.3125em; - } + ul.grid-icons > li { + margin: 1rem 0 0 1rem !important; + } - .row.uniform.\32 5\25 { - margin: -0.3125em 0 -1px -0.3125em; - } + ul.grid-icons > li:before { + display: none !important; + } - .\31 2u\28small\29, .\31 2u\24\28small\29 { - width: 100%; - clear: none; - margin-left: 0; - } + ul.grid-icons > li:after { + display: none !important; + } - .\31 1u\28small\29, .\31 1u\24\28small\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } + } - .\31 0u\28small\29, .\31 0u\24\28small\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } +/* Table */ - .\39 u\28small\29, .\39 u\24\28small\29 { - width: 75%; - clear: none; - margin-left: 0; - } + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } - .\38 u\28small\29, .\38 u\24\28small\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } + table { + margin: 0 0 1.5rem 0; + width: 100%; + } - .\37 u\28small\29, .\37 u\24\28small\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; + table tbody tr { + border: solid 1px rgba(255, 255, 255, 0.25); + border-left: 0; + border-right: 0; } - .\36 u\28small\29, .\36 u\24\28small\29 { - width: 50%; - clear: none; - margin-left: 0; - } + table tbody tr:nth-child(2n + 1) { + background-color: rgba(255, 255, 255, 0.075); + } - .\35 u\28small\29, .\35 u\24\28small\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; + table td { + padding: 0.75rem 0.75rem; } - .\34 u\28small\29, .\34 u\24\28small\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; + table th { + color: rgba(255, 255, 255, 0.875); + font-size: 0.9rem; + font-weight: 400; + padding: 0 0.75rem 0.75rem 0.75rem; + text-align: left; } - .\33 u\28small\29, .\33 u\24\28small\29 { - width: 25%; - clear: none; - margin-left: 0; + table thead { + border-bottom: solid 2px rgba(255, 255, 255, 0.25); } - .\32 u\28small\29, .\32 u\24\28small\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; + table tfoot { + border-top: solid 2px rgba(255, 255, 255, 0.25); } - .\31 u\28small\29, .\31 u\24\28small\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; + table.alt { + border-collapse: separate; } - .\31 2u\24\28small\29 + *, - .\31 1u\24\28small\29 + *, - .\31 0u\24\28small\29 + *, - .\39 u\24\28small\29 + *, - .\38 u\24\28small\29 + *, - .\37 u\24\28small\29 + *, - .\36 u\24\28small\29 + *, - .\35 u\24\28small\29 + *, - .\34 u\24\28small\29 + *, - .\33 u\24\28small\29 + *, - .\32 u\24\28small\29 + *, - .\31 u\24\28small\29 + * { - clear: left; - } + table.alt tbody tr td { + border: solid 1px rgba(255, 255, 255, 0.25); + border-left-width: 0; + border-top-width: 0; + } - .\-11u\28small\29 { - margin-left: 91.66667%; - } + table.alt tbody tr td:first-child { + border-left-width: 1px; + } - .\-10u\28small\29 { - margin-left: 83.33333%; - } + table.alt tbody tr:first-child td { + border-top-width: 1px; + } - .\-9u\28small\29 { - margin-left: 75%; - } + table.alt thead { + border-bottom: 0; + } - .\-8u\28small\29 { - margin-left: 66.66667%; - } + table.alt tfoot { + border-top: 0; + } - .\-7u\28small\29 { - margin-left: 58.33333%; - } +/* Button */ - .\-6u\28small\29 { - margin-left: 50%; - } + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; + background-color: transparent; + border: 0; + border-radius: 0.25rem; + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); + color: rgba(255, 255, 255, 0.875) !important; + cursor: pointer; + display: inline-block; + font-family: Arial, Helvetica, sans-serif; + font-size: 0.6rem; + font-weight: 700; + height: 2.75rem; + letter-spacing: 0.15rem; + line-height: 2.75rem; + padding: 0 1.5rem 0 1.65rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + } - .\-5u\28small\29 { - margin-left: 41.66667%; + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + button:hover, + .button:hover { + box-shadow: inset 0 0 0 2px #ffe4b4; + color: #ffe4b4 !important; } - .\-4u\28small\29 { - margin-left: 33.33333%; + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active, + button:active, + .button:active { + background-color: rgba(255, 228, 180, 0.125); } - .\-3u\28small\29 { - margin-left: 25%; + input[type="submit"].icon:before, + input[type="reset"].icon:before, + input[type="button"].icon:before, + button.icon:before, + .button.icon:before { + display: inline-block; + position: relative; + top: -0.075rem; + vertical-align: middle; + font-size: 0.8rem; + margin: 0 0.375rem 0 -0.325rem; } - .\-2u\28small\29 { - margin-left: 16.66667%; + input[type="submit"].icon.circle, + input[type="reset"].icon.circle, + input[type="button"].icon.circle, + button.icon.circle, + .button.icon.circle { + position: relative; + width: 3.125rem; + height: 3.125rem; + line-height: 3.125rem; + text-indent: 3.125rem; + border-radius: 100%; + overflow: hidden; + padding: 0; + letter-spacing: 0; } - .\-1u\28small\29 { - margin-left: 8.33333%; - } + input[type="submit"].icon.circle:before, + input[type="reset"].icon.circle:before, + input[type="button"].icon.circle:before, + button.icon.circle:before, + .button.icon.circle:before { + display: block; + position: absolute; + top: 0; + left: 0; + width: inherit; + height: inherit; + font-size: 1.25rem; + line-height: inherit; + margin: 0; + text-indent: 0; + } - } + input[type="submit"].icon.circle.fa-angle-left:before, + input[type="reset"].icon.circle.fa-angle-left:before, + input[type="button"].icon.circle.fa-angle-left:before, + button.icon.circle.fa-angle-left:before, + .button.icon.circle.fa-angle-left:before { + position: relative; + left: -0.1rem; + font-size: 1.75rem; + } - @media screen and (max-width: 480px) { + input[type="submit"].icon.circle.fa-angle-right:before, + input[type="reset"].icon.circle.fa-angle-right:before, + input[type="button"].icon.circle.fa-angle-right:before, + button.icon.circle.fa-angle-right:before, + .button.icon.circle.fa-angle-right:before { + position: relative; + left: 0.1rem; + font-size: 1.75rem; + } - .row > * { - padding: 0 0 0 1.25em; + input[type="submit"].fit, + input[type="reset"].fit, + input[type="button"].fit, + button.fit, + .button.fit { + display: block; + margin: 0 0 0.75rem 0; + width: 100%; } - .row { - margin: 0 0 -1px -1.25em; + input[type="submit"].small, + input[type="reset"].small, + input[type="button"].small, + button.small, + .button.small { + font-size: 0.4rem; + height: 1.875rem; + line-height: 1.875rem; + padding: 0 1.25rem 0 1.4rem; } - .row.uniform > * { - padding: 1.25em 0 0 1.25em; + input[type="submit"].large, + input[type="reset"].large, + input[type="button"].large, + button.large, + .button.large { + font-size: 0.8rem; + height: 3.3125rem; + line-height: 3.3125rem; + padding: 0 2rem 0 2.15rem; } - .row.uniform { - margin: -1.25em 0 -1px -1.25em; + input[type="submit"].special, + input[type="reset"].special, + input[type="button"].special, + button.special, + .button.special { + background-color: white; + box-shadow: none; + color: #2e2b37 !important; } - .row.\32 00\25 > * { - padding: 0 0 0 2.5em; - } + input[type="submit"].special.color1, + input[type="reset"].special.color1, + input[type="button"].special.color1, + button.special.color1, + .button.special.color1 { + color: #726193 !important; + } - .row.\32 00\25 { - margin: 0 0 -1px -2.5em; - } + input[type="submit"].special.color2, + input[type="reset"].special.color2, + input[type="button"].special.color2, + button.special.color2, + .button.special.color2 { + color: #e37b7c !important; + } - .row.uniform.\32 00\25 > * { - padding: 2.5em 0 0 2.5em; - } + input[type="submit"].special.color3, + input[type="reset"].special.color3, + input[type="button"].special.color3, + button.special.color3, + .button.special.color3 { + color: #ffe4b4 !important; + } - .row.uniform.\32 00\25 { - margin: -2.5em 0 -1px -2.5em; - } + input[type="submit"].special.color4, + input[type="reset"].special.color4, + input[type="button"].special.color4, + button.special.color4, + .button.special.color4 { + color: #353865 !important; + } - .row.\31 50\25 > * { - padding: 0 0 0 1.875em; - } + input[type="submit"].special:hover, + input[type="reset"].special:hover, + input[type="button"].special:hover, + button.special:hover, + .button.special:hover { + background-color: #ffe4b4; + } - .row.\31 50\25 { - margin: 0 0 -1px -1.875em; - } + input[type="submit"].special:active, + input[type="reset"].special:active, + input[type="button"].special:active, + button.special:active, + .button.special:active { + background-color: #fdd997; + } - .row.uniform.\31 50\25 > * { - padding: 1.875em 0 0 1.875em; - } - - .row.uniform.\31 50\25 { - margin: -1.875em 0 -1px -1.875em; + input[type="submit"].disabled, input[type="submit"]:disabled, + input[type="reset"].disabled, + input[type="reset"]:disabled, + input[type="button"].disabled, + input[type="button"]:disabled, + button.disabled, + button:disabled, + .button.disabled, + .button:disabled { + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + cursor: default; + opacity: 0.5; } - .row.\35 0\25 > * { - padding: 0 0 0 0.625em; - } +/* Gallery */ - .row.\35 0\25 { - margin: 0 0 -1px -0.625em; + @-moz-keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .row.uniform.\35 0\25 > * { - padding: 0.625em 0 0 0.625em; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + } - .row.uniform.\35 0\25 { - margin: -0.625em 0 -1px -0.625em; + @-webkit-keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .row.\32 5\25 > * { - padding: 0 0 0 0.3125em; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + } - .row.\32 5\25 { - margin: 0 0 -1px -0.3125em; + @-ms-keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .row.uniform.\32 5\25 > * { - padding: 0.3125em 0 0 0.3125em; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + } - .row.uniform.\32 5\25 { - margin: -0.3125em 0 -1px -0.3125em; + @keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 { - width: 100%; - clear: none; - margin-left: 0; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + } - .\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } + .gallery { + -moz-align-items: stretch; + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + height: 100%; + } - .\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; + .gallery > * { + width: 20rem; + height: 100%; } - .\39 u\28xsmall\29, .\39 u\24\28xsmall\29 { - width: 75%; - clear: none; - margin-left: 0; + .gallery .image { + display: block; + position: relative; + border-bottom: 0; + overflow: hidden; } - .\38 u\28xsmall\29, .\38 u\24\28xsmall\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } + .gallery .image img { + -moz-transition: -moz-transform 0.2s ease-in-out; + -webkit-transition: -webkit-transform 0.2s ease-in-out; + -ms-transition: -ms-transform 0.2s ease-in-out; + transition: transform 0.2s ease-in-out; + } - .\37 u\28xsmall\29, .\37 u\24\28xsmall\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; - } + .gallery .image:after { + -moz-transition: opacity 0.2s ease-in-out; + -webkit-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + } - .\36 u\28xsmall\29, .\36 u\24\28xsmall\29 { - width: 50%; - clear: none; - margin-left: 0; - } + .gallery .image:hover img { + -moz-transform: scale(1.025); + -webkit-transform: scale(1.025); + -ms-transform: scale(1.025); + transform: scale(1.025); + } - .\35 u\28xsmall\29, .\35 u\24\28xsmall\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; - } + .gallery .image:hover:after { + opacity: 0; + } - .\34 u\28xsmall\29, .\34 u\24\28xsmall\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; + .gallery .group { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } - .\33 u\28xsmall\29, .\33 u\24\28xsmall\29 { - width: 25%; - clear: none; - margin-left: 0; - } + .gallery .group > * { + height: 50%; + } - .\32 u\28xsmall\29, .\32 u\24\28xsmall\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; - } + .gallery .modal { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + -moz-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s; + -webkit-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s; + -ms-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s; + transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s; + -webkit-tap-highlight-color: transparent; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(46, 43, 55, 0.875); + opacity: 0; + outline: 0; + visibility: none; + z-index: 0; + } + + .gallery .modal:before { + -moz-animation: gallery-modal-spinner 1s infinite linear; + -webkit-animation: gallery-modal-spinner 1s infinite linear; + -ms-animation: gallery-modal-spinner 1s infinite linear; + animation: gallery-modal-spinner 1s infinite linear; + -moz-transition: opacity 0.25s ease; + -webkit-transition: opacity 0.25s ease; + -ms-transition: opacity 0.25s ease; + transition: opacity 0.25s ease; + -moz-transition-delay: 0.5s; + -webkit-transition-delay: 0.5s; + -ms-transition-delay: 0.5s; + transition-delay: 0.5s; + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 4rem; + height: 4rem; + margin: -2rem 0 0 -2rem; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='96px' height='96px' viewBox='0 0 96 96' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: rgba(255, 255, 255, 0.875)%3B stroke-width: 1.5px%3B %7D%3C/style%3E%3Cdefs%3E%3CclipPath id='corner'%3E%3Cpolygon points='0,0 48,0 48,48 96,48 96,96 0,96' /%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23corner)'%3E%3Ccircle cx='48' cy='48' r='32'/%3E%3C/g%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: 4rem; + opacity: 0; + } + + .gallery .modal:after { + content: ''; + display: block; + position: absolute; + top: 0.5rem; + right: 0.5rem; + width: 4rem; + height: 4rem; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='64px' viewBox='0 0 64 64' zoomAndPan='disable'%3E%3Cstyle%3Eline %7Bstroke: rgba(255, 255, 255, 0.875)%3Bstroke-width: 1.5px%3B%7D%3C/style%3E%3Cline x1='20' y1='20' x2='44' y2='44' /%3E%3Cline x1='20' y1='44' x2='44' y2='20' /%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: 3rem; + cursor: pointer; + } + + .gallery .modal .inner { + -moz-transform: translateY(0.75rem); + -webkit-transform: translateY(0.75rem); + -ms-transform: translateY(0.75rem); + transform: translateY(0.75rem); + -moz-transition: opacity 0.25s ease, -moz-transform 0.25s ease; + -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease; + -ms-transition: opacity 0.25s ease, -ms-transform 0.25s ease; + transition: opacity 0.25s ease, transform 0.25s ease; + opacity: 0; + } + + .gallery .modal .inner img { + display: block; + max-width: 90vw; + max-height: 85vh; + box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35); + } - .\31 u\28xsmall\29, .\31 u\24\28xsmall\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; - } + .gallery .modal.visible { + -moz-pointer-events: auto; + -webkit-pointer-events: auto; + -ms-pointer-events: auto; + pointer-events: auto; + opacity: 1; + visibility: visible; + z-index: 11000; + } - .\31 2u\24\28xsmall\29 + *, - .\31 1u\24\28xsmall\29 + *, - .\31 0u\24\28xsmall\29 + *, - .\39 u\24\28xsmall\29 + *, - .\38 u\24\28xsmall\29 + *, - .\37 u\24\28xsmall\29 + *, - .\36 u\24\28xsmall\29 + *, - .\35 u\24\28xsmall\29 + *, - .\34 u\24\28xsmall\29 + *, - .\33 u\24\28xsmall\29 + *, - .\32 u\24\28xsmall\29 + *, - .\31 u\24\28xsmall\29 + * { - clear: left; - } + .gallery .modal.visible:before { + opacity: 1; + } - .\-11u\28xsmall\29 { - margin-left: 91.66667%; - } + .gallery .modal.loaded .inner { + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease; + -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease; + -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease; + transition: opacity 0.5s ease, transform 0.5s ease; + opacity: 1; + } - .\-10u\28xsmall\29 { - margin-left: 83.33333%; - } + .gallery .modal.loaded:before { + -moz-transition-delay: 0s; + -webkit-transition-delay: 0s; + -ms-transition-delay: 0s; + transition-delay: 0s; + opacity: 0; + } - .\-9u\28xsmall\29 { - margin-left: 75%; - } + @media screen and (max-width: 980px) { - .\-8u\28xsmall\29 { - margin-left: 66.66667%; + .gallery .modal .inner img { + max-width: 100vw; } - .\-7u\28xsmall\29 { - margin-left: 58.33333%; - } + } - .\-6u\28xsmall\29 { - margin-left: 50%; - } + @media screen and (max-width: 736px) { - .\-5u\28xsmall\29 { - margin-left: 41.66667%; + .gallery { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; } - .\-4u\28xsmall\29 { - margin-left: 33.33333%; - } + .gallery > * { + height: auto; + width: 100%; + } - .\-3u\28xsmall\29 { - margin-left: 25%; - } + .gallery .image { + width: 100%; + height: 40rem; + } - .\-2u\28xsmall\29 { - margin-left: 16.66667%; - } + .gallery .group .span-0-25 { + width: 8.33333%; + } - .\-1u\28xsmall\29 { - margin-left: 8.33333%; - } + .gallery .group .span-0-5 { + width: 16.66666%; + } - } + .gallery .group .span-0-75 { + width: 25%; + } -/* Basic */ + .gallery .group .span-1 { + width: 33.33333%; + } - body { - background: #fff; - } + .gallery .group .span-1-25 { + width: 41.66666%; + } - body, input, select, textarea { - color: #888; - font-family: "Lato", sans-serif; - font-size: 16pt; - font-weight: 400; - line-height: 1.75em; - } + .gallery .group .span-1-5 { + width: 50%; + } - a { - -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - border-bottom: solid 1px #e4e4e4; - color: inherit; - text-decoration: none; - } + .gallery .group .span-1-75 { + width: 58.33333%; + } - a:hover { - border-bottom-color: transparent; - color: #5AC8FA !important; - } + .gallery .group .span-2 { + width: 66.66666%; + } - strong, b { - color: #777; - font-weight: 700; - } + .gallery .group .span-2-25 { + width: 74.99999%; + } - em, i { - font-style: italic; - } + .gallery .group .span-2-5 { + width: 83.33332%; + } - p { - margin: 0 0 2.25em 0; - } + .gallery .group .span-2-75 { + width: 91.66666%; + } - h1, h2, h3, h4, h5, h6 { - color: #777; - font-weight: 700; - line-height: 1em; - margin: 0 0 0.5625em 0; - } + .gallery .group .span-3 { + width: 99.99999%; + } - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - border: 0; - color: inherit; - text-decoration: none; - } + .gallery .group .span-3-25 { + width: 108.33332%; + } - h2 { - font-size: 2em; - line-height: 1.5em; - } + .gallery .group .span-3-5 { + width: 116.66666%; + } - h3 { - font-size: 1.75em; - line-height: 1.5em; - } + .gallery .group .span-3-75 { + width: 124.99999%; + } - h4 { - font-size: 1.25em; - line-height: 1.5em; - } + .gallery .group .span-4 { + width: 133.33332%; + } - h5 { - font-size: 0.9em; - line-height: 1.5em; - } + .gallery .group .span-4-25 { + width: 141.66665%; + } - h6 { - font-size: 0.7em; - line-height: 1.5em; - } + .gallery .group .span-4-5 { + width: 149.99998%; + } - sub { - font-size: 0.8em; - position: relative; - top: 0.5em; - } + .gallery .group .span-4-75 { + width: 158.33332%; + } - sup { - font-size: 0.8em; - position: relative; - top: -0.5em; - } + .gallery .group .span-5 { + width: 166.66665%; + } - hr { - border: 0; - border-bottom: solid 2px #f4f4f4; - margin: 2.25em 0; - } + .gallery .group .span-5-25 { + width: 174.99998%; + } - hr.major { - margin: 3.375em 0; - } + .gallery .group .span-5-5 { + width: 183.33331%; + } - blockquote { - border-left: solid 8px #e4e4e4; - font-style: italic; - margin: 0 0 2.25em 0; - padding: 0.5em 0 0.5em 2em; - } + .gallery .group .span-5-75 { + width: 191.66665%; + } - code { - background: #555; - border-radius: 5px; - color: #fff; - font-family: "Source Code Pro", monospace; - font-size: 0.9em; - margin: 0 0.25em; - padding: 0.25em 0.65em; - } + .gallery .group .span-6 { + width: 199.99998%; + } - pre { - font-family: "Source Code Pro", monospace; - font-size: 0.9em; - margin: 0 0 2.25em 0; - } + .gallery .group .span-6-25 { + width: 208.33331%; + } - pre code { - -webkit-overflow-scrolling: touch; - display: block; - line-height: 1.5em; - overflow-x: auto; - padding: 1em 1.5em; - } + .gallery .group .span-6-5 { + width: 216.66665%; + } - .align-left { - text-align: left; - } + .gallery .group .span-6-75 { + width: 224.99998%; + } - .align-center { - text-align: center; - } + .gallery .group .span-7 { + width: 233.33331%; + } - .align-right { - text-align: right; - } + .gallery .group .span-7-25 { + width: 241.66664%; + } -/* Section/Article */ + .gallery .group .span-7-5 { + width: 249.99997%; + } - section.special, article.special { - text-align: center; - } + .gallery .group .span-7-75 { + width: 258.33331%; + } - header p { - color: #aaa; - position: relative; - margin: 0 0 1.6875em 0; - } + .gallery .group .span-8 { + width: 266.66664%; + } - header h2 + p { - font-size: 1.25em; - margin-top: -0.5em; - line-height: 1.5em; - } + .gallery .group .span-8-25 { + width: 274.99997%; + } - header h3 + p { - font-size: 1.1em; - margin-top: -0.35em; - line-height: 1.5em; - } + .gallery .group .span-8-5 { + width: 283.33331%; + } - header h4 + p, - header h5 + p, - header h6 + p { - font-size: 0.9em; - margin-top: -0.25em; - line-height: 1.5em; - } + .gallery .group .span-8-75 { + width: 291.66664%; + } - header.major h2 { - color: #5AC8FA; - font-size: 3.5em; - } + .gallery .group .span-9 { + width: 299.99997%; + } - header.major h2 + p { - color: #777; - font-size: 1.75em; - font-weight: 700; - margin-top: -0.75em; - } + .gallery .group .span-9-25 { + width: 308.3333%; + } -/* Form */ + .gallery .group .span-9-5 { + width: 316.66664%; + } - form { - margin: 0 0 2.25em 0; - } + .gallery .group .span-9-75 { + width: 324.99997%; + } - label { - color: #777; - display: block; - font-size: 0.9em; - font-weight: 700; - margin: 0 0 1.125em 0; - } + .gallery .group .span-10 { + width: 333.3333%; + } - input::-moz-focus-inner { - border: 0; - padding: 0; - } + .gallery .group .image { + height: 20rem; + } - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - border-radius: 5px; - border: none; - border: solid 2px #e4e4e4; - color: inherit; - display: block; - outline: 0; - padding: 0 1em; - text-decoration: none; - width: 100%; } - input[type="text"]:invalid, - input[type="password"]:invalid, - input[type="email"]:invalid, - select:invalid, - textarea:invalid { - box-shadow: none; + @media screen and (max-width: 480px) { + + .gallery .image { + height: 30rem; } - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - select:focus, - textarea:focus { - border-color: #5AC8FA; + .gallery .group .image { + height: 12.5rem; } - .select-wrapper { - text-decoration: none; - display: block; - position: relative; } - .select-wrapper:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } +/* Panel */ - .select-wrapper:before { - color: #e4e4e4; - content: '\f078'; - display: block; - height: 2.75em; - line-height: 2.75em; - pointer-events: none; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 2.75em; + .panel { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-align-items: stretch; + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + } + + .panel > * { + position: relative; + min-width: 10rem; } - .select-wrapper select::-ms-expand { - display: none; - } + .panel > *.color0 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, #726193 20%, #e37b7c 60%, #ffe4b4); + background-size: 128px 128px, auto; + } - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: 2.75em; - } + .panel > *.color1 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #726193; + } - textarea { - padding: 0.75em 1em; - } + .panel > *.color2 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #e37b7c; + } - input[type="checkbox"], - input[type="radio"] { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - display: block; - float: left; - margin-right: -2em; - opacity: 0; - width: 1em; - z-index: -1; - } + .panel > *.color3 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #ffe4b4; + } - input[type="checkbox"] + label, - input[type="radio"] + label { - text-decoration: none; - color: #888; - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: 400; - padding-left: 2.4em; - padding-right: 0.75em; - position: relative; - } + .panel > *.color4 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #353865; + } - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; + .panel > *.color1-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #6c5e86; } - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - background: #fafafa; - border-radius: 5px; - border: solid 2px #e4e4e4; - content: ''; - display: inline-block; - height: 1.65em; - left: 0; - line-height: 1.58125em; - position: absolute; - text-align: center; - top: 0; - width: 1.65em; + .panel > *.color2-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #de7172; } - input[type="checkbox"]:checked + label:before, - input[type="radio"]:checked + label:before { - background: #989898; - border-color: #989898; - color: #ffffff; - content: '\f00c'; + .panel > *.color3-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #fedea6; + } + + .panel > *.color4-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #323459; + } + + .panel > .intro { + padding: 3.5rem 3.5rem 2rem 3.5rem ; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 22rem; + } + + .panel > .intro.joined { + width: 18.5rem; + padding-right: 0; + } + + .panel > .intro.joined + .inner { + padding-left: 2.625rem; + } + + .panel > .inner { + padding: 3.5rem 3.5rem 2rem 3.5rem ; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + width: 100%; } - input[type="checkbox"]:focus + label:before, - input[type="radio"]:focus + label:before { - border-color: #5AC8FA; + .panel > .inner.columns { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + + .panel > .inner.columns > * { + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + margin-left: 3.5rem; + } + + .panel > .inner.columns > :first-child { + margin-left: 0; + } + + .panel > .inner.columns.divided > * { + margin-left: 7rem; + } + + .panel > .inner.columns.divided > *:before { + content: ''; + position: absolute; + top: 3.5rem; + width: 2px; + height: calc(100% - 7rem); + margin-left: -3.5rem; + background-color: rgba(255, 255, 255, 0.25); + } + + .panel > .inner.columns.divided > :first-child { + margin-left: 0; + } + + .panel > .inner.columns.divided > :first-child:before { + display: none; + } + + .panel > .inner.columns.aligned { + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + } + + .panel .span-0-25 { + width: 2.5rem; } - input[type="checkbox"] + label:before { - border-radius: 5px; - } + .panel .span-0-5 { + width: 5rem; + } - input[type="radio"] + label:before { - border-radius: 100%; - } + .panel .span-0-75 { + width: 7.5rem; + } - ::-webkit-input-placeholder { - color: #aaa !important; - font-style: italic; - opacity: 1.0; - } + .panel .span-1 { + width: 10rem; + } - :-moz-placeholder { - color: #aaa !important; - font-style: italic; - opacity: 1.0; - } + .panel .span-1-25 { + width: 12.5rem; + } - ::-moz-placeholder { - color: #aaa !important; - font-style: italic; - opacity: 1.0; - } + .panel .span-1-5 { + width: 15rem; + } - :-ms-input-placeholder { - color: #aaa !important; - font-style: italic; - opacity: 1.0; - } + .panel .span-1-75 { + width: 17.5rem; + } - .formerize-placeholder { - color: #aaa !important; - font-style: italic; - opacity: 1.0; - } + .panel .span-2 { + width: 20rem; + } -/* Box */ + .panel .span-2-25 { + width: 22.5rem; + } - .box { - border-radius: 5px; - border: solid 2px #e4e4e4; - margin-bottom: 2.25em; - padding: 1.5em; - } + .panel .span-2-5 { + width: 25rem; + } - .box > :last-child, - .box > :last-child > :last-child, - .box > :last-child > :last-child > :last-child { - margin-bottom: 0; + .panel .span-2-75 { + width: 27.5rem; } - .box.alt { - border: 0; - border-radius: 0; - padding: 0; + .panel .span-3 { + width: 30rem; } -/* Icon */ + .panel .span-3-25 { + width: 32.5rem; + } - .icon { - text-decoration: none; - border-bottom: none; - position: relative; - } + .panel .span-3-5 { + width: 35rem; + } - .icon:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; + .panel .span-3-75 { + width: 37.5rem; } - .icon > .label { - display: none; + .panel .span-4 { + width: 40rem; } -/* Image */ + .panel .span-4-25 { + width: 42.5rem; + } - .image { - border-radius: 5px; - border: 0; - display: inline-block; - position: relative; - } + .panel .span-4-5 { + width: 45rem; + } - .image img { - border-radius: 5px; - display: block; + .panel .span-4-75 { + width: 47.5rem; } - .image.left { - float: left; - margin: 0 2.5em 2em 0; - top: 0.25em; + .panel .span-5 { + width: 50rem; } - .image.right { - float: right; - margin: 0 0 2em 2.5em; - top: 0.25em; + .panel .span-5-25 { + width: 52.5rem; } - .image.fit { - display: block; - margin: 0 0 2.25em 0; - width: 100%; + .panel .span-5-5 { + width: 55rem; } - .image.fit img { - display: block; - width: 100%; - } + .panel .span-5-75 { + width: 57.5rem; + } - .image.avatar { - border-radius: 100%; - overflow: hidden; + .panel .span-6 { + width: 60rem; } - .image.avatar img { - border-radius: 100%; - display: block; - width: 100%; - } + .panel .span-6-25 { + width: 62.5rem; + } -/* List */ + .panel .span-6-5 { + width: 65rem; + } - ol { - list-style: decimal; - margin: 0 0 2.25em 0; - padding-left: 1.25em; - } + .panel .span-6-75 { + width: 67.5rem; + } - ol li { - padding-left: 0.25em; + .panel .span-7 { + width: 70rem; } - ul { - list-style: disc; - margin: 0 0 2.25em 0; - padding-left: 1em; - } + .panel .span-7-25 { + width: 72.5rem; + } - ul li { - padding-left: 0.5em; + .panel .span-7-5 { + width: 75rem; } - ul.alt { - list-style: none; - padding-left: 0; + .panel .span-7-75 { + width: 77.5rem; } - ul.alt li { - border-top: solid 2px #f4f4f4; - padding: 0.5em 0; - } + .panel .span-8 { + width: 80rem; + } - ul.alt li:first-child { - border-top: 0; - padding-top: 0; - } + .panel .span-8-25 { + width: 82.5rem; + } - ul.feature-icons { - list-style: none; - padding-left: 0; + .panel .span-8-5 { + width: 85rem; } - ul.feature-icons li { - text-decoration: none; - display: inline-block; - margin: 0 0 1.6875em 0; - padding: 0.35em 0 0 3.5em; - position: relative; - vertical-align: top; - width: 48%; - } + .panel .span-8-75 { + width: 87.5rem; + } - ul.feature-icons li:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } + .panel .span-9 { + width: 90rem; + } - ul.feature-icons li:before { - background: #5AC8FA; - border-radius: 100%; - color: #ffffff; - display: block; - height: 2.5em; - left: 0; - line-height: 2.5em; - position: absolute; - text-align: center; - top: 0; - width: 2.5em; - } + .panel .span-9-25 { + width: 92.5rem; + } - ul.icons { - cursor: default; - list-style: none; - padding-left: 0; + .panel .span-9-5 { + width: 95rem; } - ul.icons li { - display: inline-block; - padding: 0 1em 0 0; - } + .panel .span-9-75 { + width: 97.5rem; + } - ul.icons li:last-child { - padding-right: 0 !important; - } + .panel .span-10 { + width: 100rem; + } - ul.icons li .icon:before { - font-size: 1.25em; - } + .panel.small { + width: 35rem; + } - ul.actions { - cursor: default; - list-style: none; - padding-left: 0; + .panel.medium { + width: 50rem; } - ul.actions li { - display: inline-block; - padding: 0 1.125em 0 0; - vertical-align: middle; - } + .panel.large { + width: 65rem; + } - ul.actions li:last-child { - padding-right: 0; - } + .panel.small .span-0-25, .panel.medium .span-0-25, .panel.large .span-0-25 { + width: 2.5%; + } - ul.actions.small li { - padding: 0 0.5625em 0 0; - } + .panel.small .span-0-5, .panel.medium .span-0-5, .panel.large .span-0-5 { + width: 5%; + } - ul.actions.vertical li { - display: block; - padding: 1.125em 0 0 0; - } + .panel.small .span-0-75, .panel.medium .span-0-75, .panel.large .span-0-75 { + width: 7.5%; + } - ul.actions.vertical li:first-child { - padding-top: 0; - } + .panel.small .span-1, .panel.medium .span-1, .panel.large .span-1 { + width: 10%; + } - ul.actions.vertical li > * { - margin-bottom: 0; - } + .panel.small .span-1-25, .panel.medium .span-1-25, .panel.large .span-1-25 { + width: 12.5%; + } - ul.actions.vertical.small li { - padding: 0.5625em 0 0 0; - } + .panel.small .span-1-5, .panel.medium .span-1-5, .panel.large .span-1-5 { + width: 15%; + } - ul.actions.vertical.small li:first-child { - padding-top: 0; - } + .panel.small .span-1-75, .panel.medium .span-1-75, .panel.large .span-1-75 { + width: 17.5%; + } - ul.actions.fit { - display: table; - margin-left: -1.125em; - padding: 0; - table-layout: fixed; - width: calc(100% + 1.125em); - } + .panel.small .span-2, .panel.medium .span-2, .panel.large .span-2 { + width: 20%; + } - ul.actions.fit li { - display: table-cell; - padding: 0 0 0 1.125em; - } + .panel.small .span-2-25, .panel.medium .span-2-25, .panel.large .span-2-25 { + width: 22.5%; + } - ul.actions.fit li > * { - margin-bottom: 0; - } + .panel.small .span-2-5, .panel.medium .span-2-5, .panel.large .span-2-5 { + width: 25%; + } - ul.actions.fit.small { - margin-left: -0.5625em; - width: calc(100% + 0.5625em); - } + .panel.small .span-2-75, .panel.medium .span-2-75, .panel.large .span-2-75 { + width: 27.5%; + } - ul.actions.fit.small li { - padding: 0 0 0 0.5625em; - } + .panel.small .span-3, .panel.medium .span-3, .panel.large .span-3 { + width: 30%; + } - dl { - margin: 0 0 2.25em 0; - } + .panel.small .span-3-25, .panel.medium .span-3-25, .panel.large .span-3-25 { + width: 32.5%; + } -/* Table */ + .panel.small .span-3-5, .panel.medium .span-3-5, .panel.large .span-3-5 { + width: 35%; + } - .table-wrapper { - -webkit-overflow-scrolling: touch; - overflow-x: auto; - } + .panel.small .span-3-75, .panel.medium .span-3-75, .panel.large .span-3-75 { + width: 37.5%; + } - table { - margin: 0 0 2.25em 0; - width: 100%; - } + .panel.small .span-4, .panel.medium .span-4, .panel.large .span-4 { + width: 40%; + } - table tbody tr { - border: solid 2px #f4f4f4; - border-left: 0; - border-right: 0; + .panel.small .span-4-25, .panel.medium .span-4-25, .panel.large .span-4-25 { + width: 42.5%; + } + + .panel.small .span-4-5, .panel.medium .span-4-5, .panel.large .span-4-5 { + width: 45%; + } + + .panel.small .span-4-75, .panel.medium .span-4-75, .panel.large .span-4-75 { + width: 47.5%; + } + + .panel.small .span-5, .panel.medium .span-5, .panel.large .span-5 { + width: 50%; + } + + .panel.small .span-5-25, .panel.medium .span-5-25, .panel.large .span-5-25 { + width: 52.5%; + } + + .panel.small .span-5-5, .panel.medium .span-5-5, .panel.large .span-5-5 { + width: 55%; + } + + .panel.small .span-5-75, .panel.medium .span-5-75, .panel.large .span-5-75 { + width: 57.5%; + } + + .panel.small .span-6, .panel.medium .span-6, .panel.large .span-6 { + width: 60%; + } + + .panel.small .span-6-25, .panel.medium .span-6-25, .panel.large .span-6-25 { + width: 62.5%; + } + + .panel.small .span-6-5, .panel.medium .span-6-5, .panel.large .span-6-5 { + width: 65%; + } + + .panel.small .span-6-75, .panel.medium .span-6-75, .panel.large .span-6-75 { + width: 67.5%; + } + + .panel.small .span-7, .panel.medium .span-7, .panel.large .span-7 { + width: 70%; + } + + .panel.small .span-7-25, .panel.medium .span-7-25, .panel.large .span-7-25 { + width: 72.5%; + } + + .panel.small .span-7-5, .panel.medium .span-7-5, .panel.large .span-7-5 { + width: 75%; + } + + .panel.small .span-7-75, .panel.medium .span-7-75, .panel.large .span-7-75 { + width: 77.5%; + } + + .panel.small .span-8, .panel.medium .span-8, .panel.large .span-8 { + width: 80%; + } + + .panel.small .span-8-25, .panel.medium .span-8-25, .panel.large .span-8-25 { + width: 82.5%; + } + + .panel.small .span-8-5, .panel.medium .span-8-5, .panel.large .span-8-5 { + width: 85%; + } + + .panel.small .span-8-75, .panel.medium .span-8-75, .panel.large .span-8-75 { + width: 87.5%; + } + + .panel.small .span-9, .panel.medium .span-9, .panel.large .span-9 { + width: 90%; + } + + .panel.small .span-9-25, .panel.medium .span-9-25, .panel.large .span-9-25 { + width: 92.5%; + } + + .panel.small .span-9-5, .panel.medium .span-9-5, .panel.large .span-9-5 { + width: 95%; + } + + .panel.small .span-9-75, .panel.medium .span-9-75, .panel.large .span-9-75 { + width: 97.5%; + } + + .panel.small .span-10, .panel.medium .span-10, .panel.large .span-10 { + width: 100%; + } + + .panel.color0 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, #726193 20%, #e37b7c 60%, #ffe4b4); + background-size: 128px 128px, auto; + } + + .panel.color1 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #726193; + } + + .panel.color2 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #e37b7c; + } + + .panel.color3 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #ffe4b4; } - table tbody tr:nth-child(2n + 1) { - background-color: #fafafa; - } + .panel.color4 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #353865; + } - table td { - padding: 0.75em 0.75em; + .panel.color1-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #6c5e86; } - table th { - color: #777; - font-size: 0.9em; - font-weight: 700; - padding: 0 0.75em 0.75em 0.75em; - text-align: left; + .panel.color2-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #de7172; } - table thead { - border-bottom: solid 4px #e4e4e4; + .panel.color3-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #fedea6; } - table tfoot { - border-top: solid 4px #e4e4e4; + .panel.color4-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #323459; } - table.alt { - border-collapse: separate; + @media screen and (max-width: 736px) { + + .panel { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; } - table.alt tbody tr td { - border: solid 2px #e4e4e4; - border-left-width: 0; - border-top-width: 0; + .panel > *.color1 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #726193; } - table.alt tbody tr td:first-child { - border-left-width: 2px; - } + .panel > *.color2 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #e37b7c; + } - table.alt tbody tr:first-child td { - border-top-width: 2px; + .panel > *.color3 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #ffe4b4; } - table.alt thead { - border-bottom: 0; + .panel > *.color4 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #353865; } - table.alt tfoot { - border-top: 0; + .panel > *.color1-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #6c5e86; } -/* Button */ + .panel > *.color2-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #de7172; + } - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - background-color: #989898; - border-radius: 5px; - border: 0; - color: #ffffff !important; - cursor: pointer; - display: inline-block; - font-weight: 700; - height: 2.75em; - line-height: 2.75em; - padding: 0 1.5em; - text-align: center; - text-decoration: none; - white-space: nowrap; - } + .panel > *.color3-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #fedea6; + } - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover, - .button:hover { - background-color: #a5a5a5; - color: #ffffff !important; - } + .panel > *.color4-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #323459; + } - input[type="submit"]:active, - input[type="reset"]:active, - input[type="button"]:active, - .button:active { - background-color: #8b8b8b; - } + .panel > .intro { + padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ; + width: 100% !important; + } - input[type="submit"].icon, - input[type="reset"].icon, - input[type="button"].icon, - .button.icon { - padding-left: 1.35em; - } + .panel > .intro.joined { + padding-bottom: 0; + padding-right: 1.75rem; + } - input[type="submit"].icon:before, - input[type="reset"].icon:before, - input[type="button"].icon:before, - .button.icon:before { - margin-right: 0.5em; + .panel > .intro.joined + .inner { + padding-top: 0; + padding-left: 1.75rem; + } + + .panel > .inner { + padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ; } - input[type="submit"].fit, - input[type="reset"].fit, - input[type="button"].fit, - .button.fit { - display: block; - margin: 0 0 1.125em 0; - width: 100%; - } + .panel > .inner.columns { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } - input[type="submit"].small, - input[type="reset"].small, - input[type="button"].small, - .button.small { - font-size: 0.8em; - } + .panel > .inner.columns > * { + margin-left: 0; + margin-top: 0; + } - input[type="submit"].big, - input[type="reset"].big, - input[type="button"].big, - .button.big { - font-size: 1.35em; - } + .panel > .inner.columns > :first-child { + margin-top: 0; + } - input[type="submit"].alt, - input[type="reset"].alt, - input[type="button"].alt, - .button.alt { - background-color: transparent; - box-shadow: inset 0 0 0 2px #e4e4e4; - color: #777 !important; - } + .panel > .inner.columns.divided > * { + margin-left: 0; + margin-top: 3.5rem; + } + + .panel > .inner.columns.divided > *:before { + content: ''; + position: absolute; + top: auto; + left: 1.75rem; + width: calc(100% - 3.5rem); + height: 2px; + margin-left: 0; + margin-top: -1.75rem; + } + + .panel > .inner.columns.divided > :first-child { + margin-top: 0; + } - input[type="submit"].alt:hover, - input[type="reset"].alt:hover, - input[type="button"].alt:hover, - .button.alt:hover { - background-color: #f4f4f4; - color: #777 !important; + .panel .span-0-25 { + width: 100%; } - input[type="submit"].alt:active, - input[type="reset"].alt:active, - input[type="button"].alt:active, - .button.alt:active { - background-color: #eaeaea; + .panel .span-0-5 { + width: 100%; } - input[type="submit"].alt.icon:before, - input[type="reset"].alt.icon:before, - input[type="button"].alt.icon:before, - .button.alt.icon:before { - color: #aaa; + .panel .span-0-75 { + width: 100%; } - input[type="submit"].special, - input[type="reset"].special, - input[type="button"].special, - .button.special { - background-color: #5AC8FA; - color: #ffffff !important; - } + .panel .span-1 { + width: 100%; + } - input[type="submit"].special:hover, - input[type="reset"].special:hover, - input[type="button"].special:hover, - .button.special:hover { - background-color: #5ed0b1; + .panel .span-1-25 { + width: 100%; } - input[type="submit"].special:active, - input[type="reset"].special:active, - input[type="button"].special:active, - .button.special:active { - background-color: #39c29d; + .panel .span-1-5 { + width: 100%; } - input[type="submit"].disabled, input[type="submit"]:disabled, - input[type="reset"].disabled, - input[type="reset"]:disabled, - input[type="button"].disabled, - input[type="button"]:disabled, - .button.disabled, - .button:disabled { - background-color: #888 !important; - box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15); - color: #fff !important; - cursor: default; - opacity: 0.25; - } + .panel .span-1-75 { + width: 100%; + } -/* Features */ + .panel .span-2 { + width: 100%; + } - .features article { - border-top: solid 3px #f4f4f4; - margin-bottom: 2.25em; - padding-top: 2.25em; - } + .panel .span-2-25 { + width: 100%; + } - .features article:first-child { - border-top: 0; - padding-top: 0; - } + .panel .span-2-5 { + width: 100%; + } - .features article .image { - display: inline-block; - padding-right: 2.5em; - vertical-align: middle; - width: 48%; - } + .panel .span-2-75 { + width: 100%; + } - .features article .image img { - display: block; + .panel .span-3 { width: 100%; } - .features article .inner { - display: inline-block; - vertical-align: middle; - width: 50%; - } + .panel .span-3-25 { + width: 100%; + } - .features article .inner > :last-child { - margin-bottom: 0; + .panel .span-3-5 { + width: 100%; } -/* Header */ + .panel .span-3-75 { + width: 100%; + } - #header { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-justify-content: space-between; - -webkit-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - background: #5AC8FA; - color: #d1f1e9; - height: 100%; - overflow-y: auto; - position: fixed; - text-align: center; - top: 0; - width: 23em; - right: 0; - } + .panel .span-4 { + width: 100%; + } - #header h1, #header h2, #header h3, #header h4, #header h5, #header h6 { - color: #ffffff; - } + .panel .span-4-25 { + width: 100%; + } - #header h1 a, #header h2 a, #header h3 a, #header h4 a, #header h5 a, #header h6 a { - color: #ffffff; + .panel .span-4-5 { + width: 100%; } - #header header p { - color: #b6e9dc; - } + .panel .span-4-75 { + width: 100%; + } - #header a { - color: #d1f1e9; - } + .panel .span-5 { + width: 100%; + } - #header a:hover { - color: #ffffff !important; + .panel .span-5-25 { + width: 100%; } - #header > header { - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - padding: 3em; - } + .panel .span-5-5 { + width: 100%; + } - #header > header .avatar { - display: block; - margin: 0 auto 2.25em auto; - width: 8em; + .panel .span-5-75 { + width: 100%; } - #header > header h1 { - font-size: 1.75em; - margin: 0; + .panel .span-6 { + width: 100%; } - #header > header p { - color: #d1f1e9; - font-style: italic; - margin: 1em 0 0 0; + .panel .span-6-25 { + width: 100%; } - #header > footer { - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - bottom: 0; - left: 0; - padding: 2em; - width: 100%; - } + .panel .span-6-5 { + width: 100%; + } - #header > footer .icons { - margin: 0; + .panel .span-6-75 { + width: 100%; } - #header > footer .icons li a { - color: #b6e9dc; - } + .panel .span-7 { + width: 100%; + } - #header > nav { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - } + .panel .span-7-25 { + width: 100%; + } - #header > nav ul { - list-style: none; - margin: 0; - padding: 0; + .panel .span-7-5 { + width: 100%; } - #header > nav ul li { - border-top: solid 2px #5ccfb0; - display: block; - padding: 0; - } - - #header > nav ul li a { - -moz-transition: none; - -webkit-transition: none; - -ms-transition: none; - transition: none; - border: 0; - color: #ffffff !important; - display: block; - padding: 0.85em 0; - text-decoration: none; - } + .panel .span-7-75 { + width: 100%; + } - #header > nav ul li a.active { - background: #fff; - color: #5AC8FA !important; - } + .panel .span-8 { + width: 100%; + } - #header > nav ul li:first-child { - border-top: 0; - } + .panel .span-8-25 { + width: 100%; + } -/* Wrapper */ + .panel .span-8-5 { + width: 100%; + } - #wrapper { - background: #fff; - padding-right: 23em; - } + .panel .span-8-75 { + width: 100%; + } -/* Main */ + .panel .span-9 { + width: 100%; + } - #main > section { - border-top: solid 6px #f4f4f4; - } + .panel .span-9-25 { + width: 100%; + } - #main > section > .container { - padding: 6em 0 4em 0; - } + .panel .span-9-5 { + width: 100%; + } - #main > section:first-child { - border-top: 0; - } + .panel .span-9-75 { + width: 100%; + } -/* One */ + .panel .span-10 { + width: 100%; + } - #one:before { - background-image: url("../../images/banner.jpg"); - background-position: top right; - background-repeat: no-repeat; - background-size: cover; - content: ''; - display: block; - height: 15em; - width: 100%; - } + .panel.small, .panel.medium, .panel.large { + width: 100% !important; + } + + .panel.small .span-0-25, .panel.medium .span-0-25, .panel.large .span-0-25 { + width: 100%; + } + + .panel.small .span-0-5, .panel.medium .span-0-5, .panel.large .span-0-5 { + width: 100%; + } + + .panel.small .span-0-75, .panel.medium .span-0-75, .panel.large .span-0-75 { + width: 100%; + } + + .panel.small .span-1, .panel.medium .span-1, .panel.large .span-1 { + width: 100%; + } + + .panel.small .span-1-25, .panel.medium .span-1-25, .panel.large .span-1-25 { + width: 100%; + } + + .panel.small .span-1-5, .panel.medium .span-1-5, .panel.large .span-1-5 { + width: 100%; + } + + .panel.small .span-1-75, .panel.medium .span-1-75, .panel.large .span-1-75 { + width: 100%; + } + + .panel.small .span-2, .panel.medium .span-2, .panel.large .span-2 { + width: 100%; + } -/* Footer */ + .panel.small .span-2-25, .panel.medium .span-2-25, .panel.large .span-2-25 { + width: 100%; + } - #footer { - background: #fafafa; - border-top: 0; - color: #c0c0c0; - overflow: hidden; - padding: 4em 0 2em 0; - } + .panel.small .span-2-5, .panel.medium .span-2-5, .panel.large .span-2-5 { + width: 100%; + } - #footer .copyright { - line-height: 1em; - list-style: none; - padding: 0; - } + .panel.small .span-2-75, .panel.medium .span-2-75, .panel.large .span-2-75 { + width: 100%; + } - #footer .copyright li { - border-left: solid 1px #d4d4d4; - display: inline-block; - font-size: 0.8em; - margin-left: 1em; - padding-left: 1em; - } + .panel.small .span-3, .panel.medium .span-3, .panel.large .span-3 { + width: 100%; + } - #footer .copyright li:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; + .panel.small .span-3-25, .panel.medium .span-3-25, .panel.large .span-3-25 { + width: 100%; } - #footer .copyright li a { - color: inherit; + .panel.small .span-3-5, .panel.medium .span-3-5, .panel.large .span-3-5 { + width: 100%; } -/* XLarge */ + .panel.small .span-3-75, .panel.medium .span-3-75, .panel.large .span-3-75 { + width: 100%; + } - @media screen and (max-width: 1680px) { + .panel.small .span-4, .panel.medium .span-4, .panel.large .span-4 { + width: 100%; + } - /* Basic */ + .panel.small .span-4-25, .panel.medium .span-4-25, .panel.large .span-4-25 { + width: 100%; + } - body, input, select, textarea { - font-size: 13pt; - } + .panel.small .span-4-5, .panel.medium .span-4-5, .panel.large .span-4-5 { + width: 100%; + } - /* Header */ + .panel.small .span-4-75, .panel.medium .span-4-75, .panel.large .span-4-75 { + width: 100%; + } - #header { - width: 21em; - } + .panel.small .span-5, .panel.medium .span-5, .panel.large .span-5 { + width: 100%; + } - #header > header { - padding: 2em; + .panel.small .span-5-25, .panel.medium .span-5-25, .panel.large .span-5-25 { + width: 100%; + } + + .panel.small .span-5-5, .panel.medium .span-5-5, .panel.large .span-5-5 { + width: 100%; } - #header > footer { - padding: 1.5em; + .panel.small .span-5-75, .panel.medium .span-5-75, .panel.large .span-5-75 { + width: 100%; } - /* Wrapper */ + .panel.small .span-6, .panel.medium .span-6, .panel.large .span-6 { + width: 100%; + } - #wrapper { - padding-right: 21em; - } + .panel.small .span-6-25, .panel.medium .span-6-25, .panel.large .span-6-25 { + width: 100%; + } - /* Main */ + .panel.small .span-6-5, .panel.medium .span-6-5, .panel.large .span-6-5 { + width: 100%; + } - #main > section > .container { - padding: 4em 0 2em 0; - } + .panel.small .span-6-75, .panel.medium .span-6-75, .panel.large .span-6-75 { + width: 100%; + } - } + .panel.small .span-7, .panel.medium .span-7, .panel.large .span-7 { + width: 100%; + } -/* Large */ + .panel.small .span-7-25, .panel.medium .span-7-25, .panel.large .span-7-25 { + width: 100%; + } - @media screen and (max-width: 1280px) { + .panel.small .span-7-5, .panel.medium .span-7-5, .panel.large .span-7-5 { + width: 100%; + } - /* Basic */ + .panel.small .span-7-75, .panel.medium .span-7-75, .panel.large .span-7-75 { + width: 100%; + } - body, input, select, textarea { - font-size: 11pt; - } + .panel.small .span-8, .panel.medium .span-8, .panel.large .span-8 { + width: 100%; + } - /* Header */ + .panel.small .span-8-25, .panel.medium .span-8-25, .panel.large .span-8-25 { + width: 100%; + } - #header { - width: 20em; - } + .panel.small .span-8-5, .panel.medium .span-8-5, .panel.large .span-8-5 { + width: 100%; + } - /* Wrapper */ + .panel.small .span-8-75, .panel.medium .span-8-75, .panel.large .span-8-75 { + width: 100%; + } - #wrapper { - padding-right: 20em; - } + .panel.small .span-9, .panel.medium .span-9, .panel.large .span-9 { + width: 100%; + } - } + .panel.small .span-9-25, .panel.medium .span-9-25, .panel.large .span-9-25 { + width: 100%; + } -/* Medium */ + .panel.small .span-9-5, .panel.medium .span-9-5, .panel.large .span-9-5 { + width: 100%; + } - #titleBar { - display: none; - } + .panel.small .span-9-75, .panel.medium .span-9-75, .panel.large .span-9-75 { + width: 100%; + } - @media screen and (max-width: 1024px) { + .panel.small .span-10, .panel.medium .span-10, .panel.large .span-10 { + width: 100%; + } - /* Basic */ + .panel.color1 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #726193; + } - html, body { - overflow-x: hidden; + .panel.color2 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #e37b7c; } - body, input, select, textarea { - font-size: 12pt; + .panel.color3 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #ffe4b4; } - /* Image */ + .panel.color4 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #353865; + } - .image.left, .image.right { - max-width: 40%; + .panel.color1-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #6c5e86; } - .image.left img, .image.right img { - width: 100%; - } + .panel.color2-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #de7172; + } - /* Header */ + .panel.color3-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #fedea6; + } - #header { - -moz-backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - -moz-transition: -moz-transform 0.5s ease; - -webkit-transition: -webkit-transform 0.5s ease; - -ms-transition: -ms-transform 0.5s ease; - transition: transform 0.5s ease; - display: block; - height: 100%; - overflow-y: auto; - position: fixed; - top: 0; - width: 23em; - z-index: 10002; - -moz-transform: translateX(23em); - -webkit-transform: translateX(23em); - -ms-transform: translateX(23em); - transform: translateX(23em); - right: 0; + .panel.color4-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #323459; } - #header > footer { - bottom: auto; - left: auto; - margin: 0.5em 0 0 0; - position: relative; - right: auto; - top: auto; - } + } - /* Wrapper */ +/* Panel (Banner) */ - #wrapper { - -moz-backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - -moz-transition: -moz-transform 0.5s ease; - -webkit-transition: -webkit-transform 0.5s ease; - -ms-transition: -ms-transform 0.5s ease; - transition: transform 0.5s ease; - padding: 44px 0 1px 0; - } + .panel.banner { + -moz-align-items: stretch; + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; + } - /* One */ + .panel.banner .content { + padding: 3.5rem 3.5rem 2rem 3.5rem ; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + } - #one:before { - height: 10em; + .panel.banner .content > .actions:last-child { + margin-bottom: 0; } - /* Off-Canvas Navigation */ + .panel.banner .image { + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + position: relative; + } - #titleBar { - -moz-backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - -moz-transition: -moz-transform 0.5s ease; - -webkit-transition: -webkit-transform 0.5s ease; - -ms-transition: -ms-transform 0.5s ease; - transition: transform 0.5s ease; + .panel.banner .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; display: block; - height: 44px; - left: 0; - position: fixed; + position: absolute; top: 0; + left: 0; width: 100%; - z-index: 10001; - background: #222; - color: #fff; - min-width: 320px; + height: 100%; } - #titleBar .title { - color: #fff; - display: block; - font-weight: 700; - height: 44px; - line-height: 44px; - padding: 0 1em; - width: 100%; - text-align: left; - } + .panel.banner.left { + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } - #titleBar .title a { - border: 0; - text-decoration: none; - } + .panel.banner.right { + -moz-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } - #titleBar .toggle { - text-decoration: none; - height: 4em; - position: absolute; - top: 0; - width: 6em; - border: 0; - outline: 0; - right: 0; - } - - #titleBar .toggle:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } + @media screen and (max-width: 736px) { - #titleBar .toggle:before { - background: #5AC8FA; - color: #ffffff; - content: '\f0c9'; - display: block; - font-size: 18px; - height: 44px; - line-height: 44px; - position: absolute; - text-align: center; - top: 0; - width: 64px; - right: 0; - } + .panel.banner .content { + padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ; + -moz-flex-basis: 60%; + -webkit-flex-basis: 60%; + -ms-flex-basis: 60%; + flex-basis: 60%; + } - body.header-visible #wrapper, body.header-visible #titleBar { - -moz-transform: translateX(-23em); - -webkit-transform: translateX(-23em); - -ms-transform: translateX(-23em); - transform: translateX(-23em); + .panel.banner .content > .actions:last-child { + margin-bottom: 1.5rem; } - body.header-visible #header { - -moz-transform: translateX(0); - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } + .panel.banner .image { + -moz-flex-basis: 40%; + -webkit-flex-basis: 40%; + -ms-flex-basis: 40%; + flex-basis: 40%; + } } -/* Small */ + @media screen and (max-width: 736px) and (orientation: portrait) { - @media screen and (max-width: 736px) { - - /* Basic */ + .panel.banner .content { + -moz-flex-basis: auto; + -webkit-flex-basis: auto; + -ms-flex-basis: auto; + flex-basis: auto; + } - body, input, select, textarea { - font-size: 12pt; - } + .panel.banner .image { + -moz-flex-basis: auto; + -webkit-flex-basis: auto; + -ms-flex-basis: auto; + flex-basis: auto; + height: 18rem; + } - h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { - display: none; - } + .panel.banner.left { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } - h2 { - font-size: 1.75em; - } + .panel.banner.right { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } - h3 { - font-size: 1.5em; - } + } - h4 { - font-size: 1em; - } +/* Panel (Spotlight) */ - /* Image */ + .panel.spotlight { + -moz-align-items: stretch; + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; + position: relative; + } - .image.left { - margin: 0 1.5em 1em 0; - } + .panel.spotlight > * { + z-index: 1; + } - .image.right { - margin: 0 0 1em 1.5em; - } + .panel.spotlight .content { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + padding: 3.5rem 3.5rem 2rem 3.5rem ; + } - /* Section/Article */ + .panel.spotlight .image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + } - header br { - display: none; + .panel.spotlight .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } - header.major h2 { - font-size: 2.5em; - } + .panel.spotlight.left { + -moz-justify-content: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + } - header.major h2 + p { - font-size: 1.5em; - } + .panel.spotlight.left .content { + background-image: linear-gradient(-90deg, transparent 0%, rgba(0, 0, 0, 0.125) 30%, rgba(0, 0, 0, 0.175) 50%); + } - /* Features */ + .panel.spotlight.right { + -moz-justify-content: -moz-flex-end; + -webkit-justify-content: -webkit-flex-end; + -ms-justify-content: -ms-flex-end; + justify-content: flex-end; + } - .features article .image { - display: block; - margin: 0 0 2.25em 0; - padding-right: 0; - width: 100%; + .panel.spotlight.right .content { + background-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.125) 30%, rgba(0, 0, 0, 0.175) 50%); } - .features article .inner { - display: block; - width: 100%; - } + @media screen and (max-width: 736px) { - /* Header */ + .panel.spotlight .content { + padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ; + -moz-flex-direction: column !important; + -webkit-flex-direction: column !important; + -ms-flex-direction: column !important; + flex-direction: column !important; + background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.175)) !important; + min-height: 25rem; + } - #header { - width: 17em; - -moz-transform: translateX(17em); - -webkit-transform: translateX(17em); - -ms-transform: translateX(17em); - transform: translateX(17em); - right: 0; - } + } - #header > header { - padding: 2em; - } + @media screen and (max-width: 480px) { - #header > header .avatar { - margin: 0 auto 1.6875em auto; - width: 6em; - } + .panel.spotlight .content { + min-height: 30rem; + } - #header > header h1 { - font-size: 1.5em; - } + } - #header > header p { - margin: 1em 0 0 0; - } +/* Page Wrapper */ - #header > footer { - padding: 1.5em; - } + #page-wrapper { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-justify-content: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + height: 100%; + padding: 5rem; + } - /* Main */ + @media screen and (orientation: portrait) { - #main > section > .container { - padding: 2em 0 0 0; + #page-wrapper { + padding-left: 2rem; + padding-right: 2rem; } - /* One */ + } + + @media screen and (min-aspect-ratio: 16 / 7) { - #one:before { - height: 7em; + #page-wrapper { + padding: 6vh; } - /* Footer */ + } - #footer { - text-align: center; + @media screen and (min-aspect-ratio: 16 / 6) { + + #page-wrapper { + padding: 0; } - #footer .copyright li { - border-left: 0; - display: block; - line-height: 1.75em; - margin: 0.75em 0 0 0; - padding-left: 0; - } + } - #footer .copyright li:first-child { - margin-top: 0; - } + @media screen and (max-width: 736px) { - /* Off-Canvas Navigation */ + #page-wrapper { + height: auto; + padding: 1rem; + } - #titleBar .toggle { - height: 4em; - width: 6em; - } + } - #titleBar .toggle:before { - font-size: 14px; - width: 44px; - } + @media screen and (max-width: 480px) { - body.header-visible #wrapper, body.header-visible #titleBar { - -moz-transform: translateX(-17em); - -webkit-transform: translateX(-17em); - -ms-transform: translateX(-17em); - transform: translateX(-17em); - } + #page-wrapper { + padding: 0; + } } -/* XSmall */ +/* Wrapper */ - @media screen and (max-width: 480px) { + #wrapper { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -moz-transition: opacity 1s ease-out, -moz-transform 0.75s ease-out; + -webkit-transition: opacity 1s ease-out, -webkit-transform 0.75s ease-out; + -ms-transition: opacity 1s ease-out, -ms-transform 0.75s ease-out; + transition: opacity 1s ease-out, transform 0.75s ease-out; + -moz-transition-delay: 0.25s; + -webkit-transition-delay: 0.25s; + -ms-transition-delay: 0.25s; + transition-delay: 0.25s; + cursor: default; + position: relative; + height: 32rem; + box-shadow: 0 2rem 4rem 0.25rem rgba(46, 43, 55, 0.575); + } - /* Basic */ + #wrapper > .scrollZone { + position: fixed; + width: 6rem; + height: inherit; + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: -ms-grab; + cursor: grab; + z-index: 10100; + } - html, body { - min-width: 320px; + #wrapper > .scrollZone.left { + left: 0; } - body, input, select, textarea { - font-size: 12pt; + #wrapper > .scrollZone.right { + right: 0; } - /* List */ + #wrapper > .copyright { + position: absolute; + bottom: -3rem; + right: 0; + font-size: 0.8rem; + color: rgba(46, 43, 55, 0.375); + margin-bottom: 0; + } - ul.actions { - margin: 0 0 2.25em 0; + #wrapper > .copyright a:hover { + color: inherit; } - ul.actions li { - display: block; - padding: 1.125em 0 0 0; - text-align: center; - width: 100%; - } + #wrapper.is-dragging { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: -ms-grab; + cursor: grab; + } - ul.actions li:first-child { - padding-top: 0; - } + #wrapper.is-dragging * { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + } - ul.actions li > * { - width: 100%; - margin: 0 !important; - } + #wrapper.is-dragging *:not(a, .image) { + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: -ms-grab; + cursor: grab; + } - ul.actions li > *.icon:before { - margin-left: -2em; - } + #wrapper.is-dragged * { + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + } - ul.actions.small li { - padding: 0.5625em 0 0 0; - } + body.is-loading #wrapper { + -moz-transform: translateX(2rem); + -webkit-transform: translateX(2rem); + -ms-transform: translateX(2rem); + transform: translateX(2rem); + opacity: 0; + } - ul.actions.small li:first-child { - padding-top: 0; - } + @media screen and (max-width: 736px) { + + #wrapper { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + margin: 0 0 5rem 0; + box-shadow: 0 0.25rem 1.5rem 0.25rem rgba(46, 43, 55, 0.5); + } + + #wrapper > .scrollZone { + display: none; + } - ul.feature-icons li { + #wrapper > .copyright { display: block; width: 100%; + text-align: center; + } + + body.is-loading #wrapper { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); } - /* Button */ + } - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - padding: 0; + @media screen and (max-width: 480px) { + + #wrapper { + box-shadow: none; + } + + body.is-loading #wrapper { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; } } \ No newline at end of file diff --git a/assets/css/noscript.css b/assets/css/noscript.css new file mode 100644 index 0000000..0f127ac --- /dev/null +++ b/assets/css/noscript.css @@ -0,0 +1,11 @@ +/* + Ethereal by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Page */ + + body { + overflow-x: scroll; + } \ No newline at end of file diff --git a/assets/fonts/FontAwesome.otf b/assets/fonts/FontAwesome.otf old mode 100755 new mode 100644 diff --git a/assets/fonts/fontawesome-webfont.eot b/assets/fonts/fontawesome-webfont.eot old mode 100755 new mode 100644 diff --git a/assets/fonts/fontawesome-webfont.svg b/assets/fonts/fontawesome-webfont.svg old mode 100755 new mode 100644 diff --git a/assets/fonts/fontawesome-webfont.ttf b/assets/fonts/fontawesome-webfont.ttf old mode 100755 new mode 100644 diff --git a/assets/fonts/fontawesome-webfont.woff b/assets/fonts/fontawesome-webfont.woff old mode 100755 new mode 100644 diff --git a/assets/fonts/fontawesome-webfont.woff2 b/assets/fonts/fontawesome-webfont.woff2 old mode 100755 new mode 100644 diff --git a/assets/js/ie/PIE.htc b/assets/js/ie/PIE.htc deleted file mode 100755 index ca3b547..0000000 --- a/assets/js/ie/PIE.htc +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - - - - diff --git a/assets/js/ie/html5shiv.js b/assets/js/ie/html5shiv.js deleted file mode 100755 index dcf351c..0000000 --- a/assets/js/ie/html5shiv.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed -*/ -(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); -a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; -c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| -"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); -for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d #mq-test-1 { width: 42px; }',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b1){for(o=0;o=d[i].start&&n<=d[i].end&&(c=i,o=!0),t++;u.lastHack&&n+r.height()>=a.height()&&(c=i,o=!0),o&&!f.hasClass("scrollzer-locked")&&(f.removeClass(u.activeClassName),d[c].link.addClass(u.activeClassName))}),r.trigger("resize")})}; diff --git a/assets/js/main.js b/assets/js/main.js old mode 100755 new mode 100644 index 3601ce3..d13cd05 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,113 +1,766 @@ -/* - Read Only by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -(function($) { - - skel.breakpoints({ - xlarge: '(max-width: 1680px)', - large: '(max-width: 1280px)', - medium: '(max-width: 1024px)', - small: '(max-width: 736px)', - xsmall: '(max-width: 480px)' - }); - - $(function() { - - var $body = $('body'), - $header = $('#header'), - $nav = $('#nav'), $nav_a = $nav.find('a'), - $wrapper = $('#wrapper'); - - // Fix: Placeholder polyfill. - $('form').placeholder(); - - // Prioritize "important" elements on medium. - skel.on('+medium -medium', function() { - $.prioritize( - '.important\\28 medium\\29', - skel.breakpoint('medium').active - ); - }); - - // Header. - var ids = []; - - // Set up nav items. - $nav_a - .scrolly({ offset: 44 }) - .on('click', function(event) { - - var $this = $(this), - href = $this.attr('href'); - - // Not an internal link? Bail. - if (href.charAt(0) != '#') - return; - - // Prevent default behavior. - event.preventDefault(); - - // Remove active class from all links and mark them as locked (so scrollzer leaves them alone). - $nav_a - .removeClass('active') - .addClass('scrollzer-locked'); - - // Set active class on this link. - $this.addClass('active'); - - }) - .each(function() { - - var $this = $(this), - href = $this.attr('href'), - id; - - // Not an internal link? Bail. - if (href.charAt(0) != '#') - return; - - // Add to scrollzer ID list. - id = href.substring(1); - $this.attr('id', id + '-link'); - ids.push(id); - - }); - - // Initialize scrollzer. - $.scrollzer(ids, { pad: 300, lastHack: true }); - - // Off-Canvas Navigation. - - // Title Bar. - $( - '
' + - '' + - '' + $('#logo').html() + '' + - '
' - ) - .appendTo($body); - - // Header. - $('#header') - .panel({ - delay: 500, - hideOnClick: true, - hideOnSwipe: true, - resetScroll: true, - resetForms: true, - side: 'right', - target: $body, - visibleClass: 'header-visible' - }); - - // Fix: Remove navPanel transitions on WP<10 (poor/buggy performance). - if (skel.vars.os == 'wp' && skel.vars.osVersion < 10) - $('#titleBar, #header, #wrapper') - .css('transition', 'none'); - - }); - +/* + Ethereal by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +(function($) { + + // Settings. + var settings = { + + // Keyboard shortcuts. + keyboardShortcuts: { + + // If true, enables scrolling via keyboard shortcuts. + enabled: true, + + // Sets the distance to scroll when using the left/right arrow keys. + distance: 50 + + }, + + // Scroll wheel. + scrollWheel: { + + // If true, enables scrolling via the scroll wheel. + enabled: true, + + // Sets the scroll wheel factor. (Ideally) a value between 0 and 1 (lower = slower scroll, higher = faster scroll). + factor: 1 + + }, + + // Scroll zones. + scrollZones: { + + // If true, enables scrolling via scroll zones on the left/right edges of the scren. + enabled: true, + + // Sets the speed at which the page scrolls when a scroll zone is active (higher = faster scroll, lower = slower scroll). + speed: 15 + + }, + + // Dragging. + dragging: { + + // If true, enables scrolling by dragging the main wrapper with the mouse. + enabled: true, + + // Sets the momentum factor. Must be a value between 0 and 1 (lower = less momentum, higher = more momentum, 0 = disable momentum scrolling). + momentum: 0.875, + + // Sets the drag threshold (in pixels). + threshold: 10 + + }, + + // If set to a valid selector , prevents key/mouse events from bubbling from these elements. + excludeSelector: 'input:focus, select:focus, textarea:focus, audio, video, iframe', + + // Link scroll speed. + linkScrollSpeed: 1000 + + }; + + // Skel. + skel.breakpoints({ + xlarge: '(max-width: 1680px)', + large: '(max-width: 1280px)', + medium: '(max-width: 980px)', + small: '(max-width: 736px)', + xsmall: '(max-width: 480px)', + xxsmall: '(max-width: 360px)', + short: '(min-aspect-ratio: 16/7)', + xshort: '(min-aspect-ratio: 16/6)' + }); + + // Ready event. + $(function() { + + // Vars. + var $window = $(window), + $document = $(document), + $body = $('body'), + $html = $('html'), + $bodyHtml = $('body,html'), + $wrapper = $('#wrapper'); + + // Disable animations/transitions until the page has loaded. + $body.addClass('is-loading'); + + $window.on('load', function() { + window.setTimeout(function() { + $body.removeClass('is-loading'); + }, 100); + }); + + // Tweaks/fixes. + + // Mobile: Revert to native scrolling. + if (skel.vars.mobile) { + + // Disable all scroll-assist features. + settings.keyboardShortcuts.enabled = false; + settings.scrollWheel.enabled = false; + settings.scrollZones.enabled = false; + settings.dragging.enabled = false; + + // Re-enable overflow on body. + $body.css('overflow-x', 'auto'); + + } + + // IE: Various fixes. + if (skel.vars.browser == 'ie') { + + // Enable IE mode. + $body.addClass('is-ie'); + + // Page widths. + $window + .on('load resize', function() { + + // Calculate wrapper width. + var w = 0; + + $wrapper.children().each(function() { + w += $(this).width(); + }); + + // Apply to page. + $html.css('width', w + 'px'); + + }); + + } + + // Polyfill: Object fit. + if (!skel.canUse('object-fit')) { + + $('.image[data-position]').each(function() { + + var $this = $(this), + $img = $this.children('img'); + + // Apply img as background. + $this + .css('background-image', 'url("' + $img.attr('src') + '")') + .css('background-position', $this.data('position')) + .css('background-size', 'cover') + .css('background-repeat', 'no-repeat'); + + // Hide img. + $img + .css('opacity', '0'); + + }); + + } + + // Keyboard shortcuts. + if (settings.keyboardShortcuts.enabled) + (function() { + + $wrapper + + // Prevent keystrokes inside excluded elements from bubbling. + .on('keypress keyup keydown', settings.excludeSelector, function(event) { + + // Stop propagation. + event.stopPropagation(); + + }); + + $window + + // Keypress event. + .on('keydown', function(event) { + + var scrolled = false; + + switch (event.keyCode) { + + // Left arrow. + case 37: + $document.scrollLeft($document.scrollLeft() - settings.keyboardShortcuts.distance); + scrolled = true; + break; + + // Right arrow. + case 39: + $document.scrollLeft($document.scrollLeft() + settings.keyboardShortcuts.distance); + scrolled = true; + break; + + // Page Up. + case 33: + $document.scrollLeft($document.scrollLeft() - $window.width() + 100); + scrolled = true; + break; + + // Page Down, Space. + case 34: + case 32: + $document.scrollLeft($document.scrollLeft() + $window.width() - 100); + scrolled = true; + break; + + // Home. + case 36: + $document.scrollLeft(0); + scrolled = true; + break; + + // End. + case 35: + $document.scrollLeft($document.width()); + scrolled = true; + break; + + } + + // Scrolled? + if (scrolled) { + + // Prevent default. + event.preventDefault(); + event.stopPropagation(); + + // Stop link scroll. + $bodyHtml.stop(); + + } + + }); + + })(); + + // Scroll wheel. + if (settings.scrollWheel.enabled) + (function() { + + // Based on code by @miorel + @pieterv of Facebook (thanks guys :) + // github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js + var normalizeWheel = function(event) { + + var pixelStep = 10, + lineHeight = 40, + pageHeight = 800, + sX = 0, + sY = 0, + pX = 0, + pY = 0; + + // Legacy. + if ('detail' in event) + sY = event.detail; + else if ('wheelDelta' in event) + sY = event.wheelDelta / -120; + else if ('wheelDeltaY' in event) + sY = event.wheelDeltaY / -120; + + if ('wheelDeltaX' in event) + sX = event.wheelDeltaX / -120; + + // Side scrolling on FF with DOMMouseScroll. + if ('axis' in event + && event.axis === event.HORIZONTAL_AXIS) { + sX = sY; + sY = 0; + } + + // Calculate. + pX = sX * pixelStep; + pY = sY * pixelStep; + + if ('deltaY' in event) + pY = event.deltaY; + + if ('deltaX' in event) + pX = event.deltaX; + + if ((pX || pY) + && event.deltaMode) { + + if (event.deltaMode == 1) { + pX *= lineHeight; + pY *= lineHeight; + } + else { + pX *= pageHeight; + pY *= pageHeight; + } + + } + + // Fallback if spin cannot be determined. + if (pX && !sX) + sX = (pX < 1) ? -1 : 1; + + if (pY && !sY) + sY = (pY < 1) ? -1 : 1; + + // Return. + return { + spinX: sX, + spinY: sY, + pixelX: pX, + pixelY: pY + }; + + }; + + // Wheel event. + $body.on('wheel', function(event) { + + // Disable on <=small. + if (skel.breakpoint('small').active) + return; + + // Prevent default. + event.preventDefault(); + event.stopPropagation(); + + // Stop link scroll. + $bodyHtml.stop(); + + // Calculate delta, direction. + var n = normalizeWheel(event.originalEvent), + x = (n.pixelX != 0 ? n.pixelX : n.pixelY), + delta = Math.min(Math.abs(x), 150) * settings.scrollWheel.factor, + direction = x > 0 ? 1 : -1; + + // Scroll page. + $document.scrollLeft($document.scrollLeft() + (delta * direction)); + + }); + + })(); + + // Scroll zones. + if (settings.scrollZones.enabled) + (function() { + + var $left = $('
'), + $right = $('
'), + $zones = $left.add($right), + paused = false, + intervalId = null, + direction, + activate = function(d) { + + // Disable on <=small. + if (skel.breakpoint('small').active) + return; + + // Paused? Bail. + if (paused) + return; + + // Stop link scroll. + $bodyHtml.stop(); + + // Set direction. + direction = d; + + // Initialize interval. + clearInterval(intervalId); + + intervalId = setInterval(function() { + $document.scrollLeft($document.scrollLeft() + (settings.scrollZones.speed * direction)); + }, 25); + + }, + deactivate = function() { + + // Unpause. + paused = false; + + // Clear interval. + clearInterval(intervalId); + + }; + + $zones + .appendTo($wrapper) + .on('mouseleave mousedown', function(event) { + deactivate(); + }); + + $left + .css('left', '0') + .on('mouseenter', function(event) { + activate(-1); + }); + + $right + .css('right', '0') + .on('mouseenter', function(event) { + activate(1); + }); + + $wrapper + .on('---pauseScrollZone', function(event) { + + // Pause. + paused = true; + + // Unpause after delay. + setTimeout(function() { + paused = false; + }, 500); + + }); + + })(); + + // Dragging. + if (settings.dragging.enabled) + (function() { + + var dragging = false, + dragged = false, + distance = 0, + startScroll, + momentumIntervalId, velocityIntervalId, + startX, currentX, previousX, + velocity, direction; + + $wrapper + + // Prevent image drag and drop. + .on('mouseup mousemove mousedown', '.image, img', function(event) { + event.preventDefault(); + }) + + // Prevent mouse events inside excluded elements from bubbling. + .on('mouseup mousemove mousedown', settings.excludeSelector, function(event) { + + // Prevent event from bubbling. + event.stopPropagation(); + + // End drag. + dragging = false; + $wrapper.removeClass('is-dragging'); + clearInterval(velocityIntervalId); + clearInterval(momentumIntervalId); + + // Pause scroll zone. + $wrapper.triggerHandler('---pauseScrollZone'); + + }) + + // Mousedown event. + .on('mousedown', function(event) { + + // Disable on <=small. + if (skel.breakpoint('small').active) + return; + + // Clear momentum interval. + clearInterval(momentumIntervalId); + + // Stop link scroll. + $bodyHtml.stop(); + + // Start drag. + dragging = true; + $wrapper.addClass('is-dragging'); + + // Initialize and reset vars. + startScroll = $document.scrollLeft(); + startX = event.clientX; + previousX = startX; + currentX = startX; + distance = 0; + direction = 0; + + // Initialize velocity interval. + clearInterval(velocityIntervalId); + + velocityIntervalId = setInterval(function() { + + // Calculate velocity, direction. + velocity = Math.abs(currentX - previousX); + direction = (currentX > previousX ? -1 : 1); + + // Update previous X. + previousX = currentX; + + }, 50); + + }) + + // Mousemove event. + .on('mousemove', function(event) { + + // Not dragging? Bail. + if (!dragging) + return; + + // Velocity. + currentX = event.clientX; + + // Scroll page. + $document.scrollLeft(startScroll + (startX - currentX)); + + // Update distance. + distance = Math.abs(startScroll - $document.scrollLeft()); + + // Distance exceeds threshold? Disable pointer events on all descendents. + if (!dragged + && distance > settings.dragging.threshold) { + + $wrapper.addClass('is-dragged'); + + dragged = true; + + } + + }) + + // Mouseup/mouseleave event. + .on('mouseup mouseleave', function(event) { + + var m; + + // Not dragging? Bail. + if (!dragging) + return; + + // Dragged? Re-enable pointer events on all descendents. + if (dragged) { + + setTimeout(function() { + $wrapper.removeClass('is-dragged'); + }, 100); + + dragged = false; + + } + + // Distance exceeds threshold? Prevent default. + if (distance > settings.dragging.threshold) + event.preventDefault(); + + // End drag. + dragging = false; + $wrapper.removeClass('is-dragging'); + clearInterval(velocityIntervalId); + clearInterval(momentumIntervalId); + + // Pause scroll zone. + $wrapper.triggerHandler('---pauseScrollZone'); + + // Initialize momentum interval. + if (settings.dragging.momentum > 0) { + + m = velocity; + + momentumIntervalId = setInterval(function() { + + // Momentum is NaN? Bail. + if (isNaN(m)) { + + clearInterval(momentumIntervalId); + return; + + } + + // Scroll page. + $document.scrollLeft($document.scrollLeft() + (m * direction)); + + // Decrease momentum. + m = m * settings.dragging.momentum; + + // Negligible momentum? Clear interval and end. + if (Math.abs(m) < 1) + clearInterval(momentumIntervalId); + + }, 15); + + } + + }); + + })(); + + // Link scroll. + $wrapper + .on('mousedown mouseup', 'a[href^="#"]', function(event) { + + // Stop propagation. + event.stopPropagation(); + + }) + .on('click', 'a[href^="#"]', function(event) { + + var $this = $(this), + href = $this.attr('href'), + $target, x, y; + + // Get target. + if (href == '#' + || ($target = $(href)).length == 0) + return; + + // Prevent default. + event.preventDefault(); + event.stopPropagation(); + + // Calculate x, y. + if (skel.breakpoint('small').active) { + + x = $target.offset().top - (Math.max(0, $window.height() - $target.outerHeight()) / 2); + y = { scrollTop: x }; + + } + else { + + x = $target.offset().left - (Math.max(0, $window.width() - $target.outerWidth()) / 2); + y = { scrollLeft: x }; + + } + + // Scroll. + $bodyHtml + .stop() + .animate( + y, + settings.linkScrollSpeed, + 'swing' + ); + + }); + + // Gallery. + $('.gallery') + .on('click', 'a', function(event) { + + var $a = $(this), + $gallery = $a.parents('.gallery'), + $modal = $gallery.children('.modal'), + $modalImg = $modal.find('img'), + href = $a.attr('href'); + + // Not an image? Bail. + if (!href.match(/\.(jpg|gif|png|mp4)$/)) + return; + + // Prevent default. + event.preventDefault(); + event.stopPropagation(); + + // Locked? Bail. + if ($modal[0]._locked) + return; + + // Lock. + $modal[0]._locked = true; + + // Set src. + $modalImg.attr('src', href); + + // Set visible. + $modal.addClass('visible'); + + // Focus. + $modal.focus(); + + // Delay. + setTimeout(function() { + + // Unlock. + $modal[0]._locked = false; + + }, 600); + + }) + .on('click', '.modal', function(event) { + + var $modal = $(this), + $modalImg = $modal.find('img'); + + // Locked? Bail. + if ($modal[0]._locked) + return; + + // Already hidden? Bail. + if (!$modal.hasClass('visible')) + return; + + // Stop propagation. + event.stopPropagation(); + + // Lock. + $modal[0]._locked = true; + + // Clear visible, loaded. + $modal + .removeClass('loaded') + + // Delay. + setTimeout(function() { + + $modal + .removeClass('visible') + + // Pause scroll zone. + $wrapper.triggerHandler('---pauseScrollZone'); + + setTimeout(function() { + + // Clear src. + $modalImg.attr('src', ''); + + // Unlock. + $modal[0]._locked = false; + + // Focus. + $body.focus(); + + }, 475); + + }, 125); + + }) + .on('keypress', '.modal', function(event) { + + var $modal = $(this); + + // Escape? Hide modal. + if (event.keyCode == 27) + $modal.trigger('click'); + + }) + .on('mouseup mousedown mousemove', '.modal', function(event) { + + // Stop propagation. + event.stopPropagation(); + + }) + .prepend('
') + .find('img') + .on('load', function(event) { + + var $modalImg = $(this), + $modal = $modalImg.parents('.modal'); + + setTimeout(function() { + + // No longer visible? Bail. + if (!$modal.hasClass('visible')) + return; + + // Set loaded. + $modal.addClass('loaded'); + + }, 275); + + }); + + }); + })(jQuery); \ No newline at end of file diff --git a/assets/js/skel.min.js b/assets/js/skel.min.js old mode 100755 new mode 100644 index 6ca4bf1..0e7633a --- a/assets/js/skel.min.js +++ b/assets/js/skel.min.js @@ -1,2 +1,2 @@ -/* skel.js v3.0.1 | (c) skel.io | MIT licensed */ +/* skel.js v3.0.1 | (c) skel.io | MIT licensed */ var skel=function(){"use strict";var t={breakpointIds:null,events:{},isInit:!1,obj:{attachments:{},breakpoints:{},head:null,states:{}},sd:"/",state:null,stateHandlers:{},stateId:"",vars:{},DOMReady:null,indexOf:null,isArray:null,iterate:null,matchesMedia:null,extend:function(e,n){t.iterate(n,function(i){t.isArray(n[i])?(t.isArray(e[i])||(e[i]=[]),t.extend(e[i],n[i])):"object"==typeof n[i]?("object"!=typeof e[i]&&(e[i]={}),t.extend(e[i],n[i])):e[i]=n[i]})},newStyle:function(t){var e=document.createElement("style");return e.type="text/css",e.innerHTML=t,e},_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,i=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+i in n||"Webkit"+i in n||"O"+i in n||"ms"+i in n},on:function(e,n){var i=e.split(/[\s]+/);return t.iterate(i,function(e){var a=i[e];if(t.isInit){if("init"==a)return void n();if("change"==a)n();else{var r=a.charAt(0);if("+"==r||"!"==r){var o=a.substring(1);if(o in t.obj.breakpoints)if("+"==r&&t.obj.breakpoints[o].active)n();else if("!"==r&&!t.obj.breakpoints[o].active)return void n()}}}t.events[a]||(t.events[a]=[]),t.events[a].push(n)}),t},trigger:function(e){return t.events[e]&&0!=t.events[e].length?(t.iterate(t.events[e],function(n){t.events[e][n]()}),t):void 0},breakpoint:function(e){return t.obj.breakpoints[e]},breakpoints:function(e){function n(t,e){this.name=this.id=t,this.media=e,this.active=!1,this.wasActive=!1}return n.prototype.matches=function(){return t.matchesMedia(this.media)},n.prototype.sync=function(){this.wasActive=this.active,this.active=this.matches()},t.iterate(e,function(i){t.obj.breakpoints[i]=new n(i,e[i])}),window.setTimeout(function(){t.poll()},0),t},addStateHandler:function(e,n){t.stateHandlers[e]=n},callStateHandler:function(e){var n=t.stateHandlers[e]();t.iterate(n,function(e){t.state.attachments.push(n[e])})},changeState:function(e){t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].sync()}),t.vars.lastStateId=t.stateId,t.stateId=e,t.breakpointIds=t.stateId===t.sd?[]:t.stateId.substring(1).split(t.sd),t.obj.states[t.stateId]?t.state=t.obj.states[t.stateId]:(t.obj.states[t.stateId]={attachments:[]},t.state=t.obj.states[t.stateId],t.iterate(t.stateHandlers,t.callStateHandler)),t.detachAll(t.state.attachments),t.attachAll(t.state.attachments),t.vars.stateId=t.stateId,t.vars.state=t.state,t.trigger("change"),t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].active?t.obj.breakpoints[e].wasActive||t.trigger("+"+e):t.obj.breakpoints[e].wasActive&&t.trigger("-"+e)})},generateStateConfig:function(e,n){var i={};return t.extend(i,e),t.iterate(t.breakpointIds,function(e){t.extend(i,n[t.breakpointIds[e]])}),i},getStateId:function(){var e="";return t.iterate(t.obj.breakpoints,function(n){var i=t.obj.breakpoints[n];i.matches()&&(e+=t.sd+i.id)}),e},poll:function(){var e="";e=t.getStateId(),""===e&&(e=t.sd),e!==t.stateId&&t.changeState(e)},_attach:null,attach:function(e){var n=t.obj.head,i=e.element;return i.parentNode&&i.parentNode.tagName?!1:(t._attach||(t._attach=n.firstChild),n.insertBefore(i,t._attach.nextSibling),e.permanent&&(t._attach=i),!0)},attachAll:function(e){var n=[];t.iterate(e,function(t){n[e[t].priority]||(n[e[t].priority]=[]),n[e[t].priority].push(e[t])}),n.reverse(),t.iterate(n,function(e){t.iterate(n[e],function(i){t.attach(n[e][i])})})},detach:function(t){var e=t.element;return t.permanent||!e.parentNode||e.parentNode&&!e.parentNode.tagName?!1:(e.parentNode.removeChild(e),!0)},detachAll:function(e){var n={};t.iterate(e,function(t){n[e[t].id]=!0}),t.iterate(t.obj.attachments,function(e){e in n||t.detach(t.obj.attachments[e])})},attachment:function(e){return e in t.obj.attachments?t.obj.attachments[e]:null},newAttachment:function(e,n,i,a){return t.obj.attachments[e]={id:e,element:n,priority:i,permanent:a}},init:function(){t.initMethods(),t.initVars(),t.initEvents(),t.obj.head=document.getElementsByTagName("head")[0],t.isInit=!0,t.trigger("init")},initEvents:function(){t.on("resize",function(){t.poll()}),t.on("orientationChange",function(){t.poll()}),t.DOMReady(function(){t.trigger("ready")}),window.onload&&t.on("load",window.onload),window.onload=function(){t.trigger("load")},window.onresize&&t.on("resize",window.onresize),window.onresize=function(){t.trigger("resize")},window.onorientationchange&&t.on("orientationChange",window.onorientationchange),window.onorientationchange=function(){t.trigger("orientationChange")}},initMethods:function(){document.addEventListener?!function(e,n){t.DOMReady=n()}("domready",function(){function t(t){for(r=1;t=n.shift();)t()}var e,n=[],i=document,a="DOMContentLoaded",r=/^loaded|^c/.test(i.readyState);return i.addEventListener(a,e=function(){i.removeEventListener(a,e),t()}),function(t){r?t():n.push(t)}}):!function(e,n){t.DOMReady=n()}("domready",function(t){function e(t){for(h=1;t=i.shift();)t()}var n,i=[],a=!1,r=document,o=r.documentElement,s=o.doScroll,c="DOMContentLoaded",d="addEventListener",u="onreadystatechange",l="readyState",f=s?/^loaded|^c/:/^loaded|c/,h=f.test(r[l]);return r[d]&&r[d](c,n=function(){r.removeEventListener(c,n,a),e()},a),s&&r.attachEvent(u,n=function(){/^c/.test(r[l])&&(r.detachEvent(u,n),e())}),t=s?function(e){self!=top?h?e():i.push(e):function(){try{o.doScroll("left")}catch(n){return setTimeout(function(){t(e)},50)}e()}()}:function(t){h?t():i.push(t)}}),Array.prototype.indexOf?t.indexOf=function(t,e){return t.indexOf(e)}:t.indexOf=function(t,e){if("string"==typeof t)return t.indexOf(e);var n,i,a=e?e:0;if(!this)throw new TypeError;if(i=this.length,0===i||a>=i)return-1;for(0>a&&(a=i-Math.abs(a)),n=a;i>n;n++)if(this[n]===t)return n;return-1},Array.isArray?t.isArray=function(t){return Array.isArray(t)}:t.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)},Object.keys?t.iterate=function(t,e){if(!t)return[];var n,i=Object.keys(t);for(n=0;i[n]&&e(i[n],t[i[n]])!==!1;n++);}:t.iterate=function(t,e){if(!t)return[];var n;for(n in t)if(Object.prototype.hasOwnProperty.call(t,n)&&e(n,t[n])===!1)break},window.matchMedia?t.matchesMedia=function(t){return""==t?!0:window.matchMedia(t).matches}:window.styleMedia||window.media?t.matchesMedia=function(t){if(""==t)return!0;var e=window.styleMedia||window.media;return e.matchMedium(t||"all")}:window.getComputedStyle?t.matchesMedia=function(t){if(""==t)return!0;var e=document.createElement("style"),n=document.getElementsByTagName("script")[0],i=null;e.type="text/css",e.id="matchmediajs-test",n.parentNode.insertBefore(e,n),i="getComputedStyle"in window&&window.getComputedStyle(e,null)||e.currentStyle;var a="@media "+t+"{ #matchmediajs-test { width: 1px; } }";return e.styleSheet?e.styleSheet.cssText=a:e.textContent=a,"1px"===i.width}:t.matchesMedia=function(t){if(""==t)return!0;var e,n,i,a,r={"min-width":null,"max-width":null},o=!1;for(i=t.split(/\s+and\s+/),e=0;er["max-width"]||null!==r["min-height"]&&cr["max-height"]?!1:!0},navigator.userAgent.match(/MSIE ([0-9]+)/)&&RegExp.$1<9&&(t.newStyle=function(t){var e=document.createElement("span");return e.innerHTML=' ",e})},initVars:function(){var e,n,i,a=navigator.userAgent;e="other",n=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(RegExp.$1),!1):void 0}),t.vars.browser=e,t.vars.browserVersion=n,e="other",n=0,i=[["ios",/([0-9_]+) like Mac OS X/,function(t){return t.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(t){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(t){return t.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(i[2]?i[2](RegExp.$1):RegExp.$1),!1):void 0}),t.vars.os=e,t.vars.osVersion=n,t.vars.IEVersion="ie"==t.vars.browser?t.vars.browserVersion:99,t.vars.touch="wp"==t.vars.os?navigator.msMaxTouchPoints>0:!!("ontouchstart"in window),t.vars.mobile="wp"==t.vars.os||"android"==t.vars.os||"ios"==t.vars.os||"bb"==t.vars.os}};return t.init(),t}();!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.skel=e()}(this,function(){return skel}); diff --git a/assets/js/util.js b/assets/js/util.js deleted file mode 100755 index ecf7b37..0000000 --- a/assets/js/util.js +++ /dev/null @@ -1,587 +0,0 @@ -(function($) { - - /** - * Generate an indented list of links from a nav. Meant for use with panel(). - * @return {jQuery} jQuery object. - */ - $.fn.navList = function() { - - var $this = $(this); - $a = $this.find('a'), - b = []; - - $a.each(function() { - - var $this = $(this), - indent = Math.max(0, $this.parents('li').length - 1), - href = $this.attr('href'), - target = $this.attr('target'); - - b.push( - '' + - '' + - $this.text() + - '' - ); - - }); - - return b.join(''); - - }; - - /** - * Panel-ify an element. - * @param {object} userConfig User config. - * @return {jQuery} jQuery object. - */ - $.fn.panel = function(userConfig) { - - // No elements? - if (this.length == 0) - return $this; - - // Multiple elements? - if (this.length > 1) { - - for (var i=0; i < this.length; i++) - $(this[i]).panel(userConfig); - - return $this; - - } - - // Vars. - var $this = $(this), - $body = $('body'), - $window = $(window), - id = $this.attr('id'), - config; - - // Config. - config = $.extend({ - - // Delay. - delay: 0, - - // Hide panel on link click. - hideOnClick: false, - - // Hide panel on escape keypress. - hideOnEscape: false, - - // Hide panel on swipe. - hideOnSwipe: false, - - // Reset scroll position on hide. - resetScroll: false, - - // Reset forms on hide. - resetForms: false, - - // Side of viewport the panel will appear. - side: null, - - // Target element for "class". - target: $this, - - // Class to toggle. - visibleClass: 'visible' - - }, userConfig); - - // Expand "target" if it's not a jQuery object already. - if (typeof config.target != 'jQuery') - config.target = $(config.target); - - // Panel. - - // Methods. - $this._hide = function(event) { - - // Already hidden? Bail. - if (!config.target.hasClass(config.visibleClass)) - return; - - // If an event was provided, cancel it. - if (event) { - - event.preventDefault(); - event.stopPropagation(); - - } - - // Hide. - config.target.removeClass(config.visibleClass); - - // Post-hide stuff. - window.setTimeout(function() { - - // Reset scroll position. - if (config.resetScroll) - $this.scrollTop(0); - - // Reset forms. - if (config.resetForms) - $this.find('form').each(function() { - this.reset(); - }); - - }, config.delay); - - }; - - // Vendor fixes. - $this - .css('-ms-overflow-style', '-ms-autohiding-scrollbar') - .css('-webkit-overflow-scrolling', 'touch'); - - // Hide on click. - if (config.hideOnClick) { - - $this.find('a') - .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); - - $this - .on('click', 'a', function(event) { - - var $a = $(this), - href = $a.attr('href'), - target = $a.attr('target'); - - if (!href || href == '#' || href == '' || href == '#' + id) - return; - - // Cancel original event. - event.preventDefault(); - event.stopPropagation(); - - // Hide panel. - $this._hide(); - - // Redirect to href. - window.setTimeout(function() { - - if (target == '_blank') - window.open(href); - else - window.location.href = href; - - }, config.delay + 10); - - }); - - } - - // Event: Touch stuff. - $this.on('touchstart', function(event) { - - $this.touchPosX = event.originalEvent.touches[0].pageX; - $this.touchPosY = event.originalEvent.touches[0].pageY; - - }) - - $this.on('touchmove', function(event) { - - if ($this.touchPosX === null - || $this.touchPosY === null) - return; - - var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, - diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, - th = $this.outerHeight(), - ts = ($this.get(0).scrollHeight - $this.scrollTop()); - - // Hide on swipe? - if (config.hideOnSwipe) { - - var result = false, - boundary = 20, - delta = 50; - - switch (config.side) { - - case 'left': - result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); - break; - - case 'right': - result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); - break; - - case 'top': - result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); - break; - - case 'bottom': - result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); - break; - - default: - break; - - } - - if (result) { - - $this.touchPosX = null; - $this.touchPosY = null; - $this._hide(); - - return false; - - } - - } - - // Prevent vertical scrolling past the top or bottom. - if (($this.scrollTop() < 0 && diffY < 0) - || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { - - event.preventDefault(); - event.stopPropagation(); - - } - - }); - - // Event: Prevent certain events inside the panel from bubbling. - $this.on('click touchend touchstart touchmove', function(event) { - event.stopPropagation(); - }); - - // Event: Hide panel if a child anchor tag pointing to its ID is clicked. - $this.on('click', 'a[href="#' + id + '"]', function(event) { - - event.preventDefault(); - event.stopPropagation(); - - config.target.removeClass(config.visibleClass); - - }); - - // Body. - - // Event: Hide panel on body click/tap. - $body.on('click touchend', function(event) { - $this._hide(event); - }); - - // Event: Toggle. - $body.on('click', 'a[href="#' + id + '"]', function(event) { - - event.preventDefault(); - event.stopPropagation(); - - config.target.toggleClass(config.visibleClass); - - }); - - // Window. - - // Event: Hide on ESC. - if (config.hideOnEscape) - $window.on('keydown', function(event) { - - if (event.keyCode == 27) - $this._hide(event); - - }); - - return $this; - - }; - - /** - * Apply "placeholder" attribute polyfill to one or more forms. - * @return {jQuery} jQuery object. - */ - $.fn.placeholder = function() { - - // Browser natively supports placeholders? Bail. - if (typeof (document.createElement('input')).placeholder != 'undefined') - return $(this); - - // No elements? - if (this.length == 0) - return $this; - - // Multiple elements? - if (this.length > 1) { - - for (var i=0; i < this.length; i++) - $(this[i]).placeholder(); - - return $this; - - } - - // Vars. - var $this = $(this); - - // Text, TextArea. - $this.find('input[type=text],textarea') - .each(function() { - - var i = $(this); - - if (i.val() == '' - || i.val() == i.attr('placeholder')) - i - .addClass('polyfill-placeholder') - .val(i.attr('placeholder')); - - }) - .on('blur', function() { - - var i = $(this); - - if (i.attr('name').match(/-polyfill-field$/)) - return; - - if (i.val() == '') - i - .addClass('polyfill-placeholder') - .val(i.attr('placeholder')); - - }) - .on('focus', function() { - - var i = $(this); - - if (i.attr('name').match(/-polyfill-field$/)) - return; - - if (i.val() == i.attr('placeholder')) - i - .removeClass('polyfill-placeholder') - .val(''); - - }); - - // Password. - $this.find('input[type=password]') - .each(function() { - - var i = $(this); - var x = $( - $('
') - .append(i.clone()) - .remove() - .html() - .replace(/type="password"/i, 'type="text"') - .replace(/type=password/i, 'type=text') - ); - - if (i.attr('id') != '') - x.attr('id', i.attr('id') + '-polyfill-field'); - - if (i.attr('name') != '') - x.attr('name', i.attr('name') + '-polyfill-field'); - - x.addClass('polyfill-placeholder') - .val(x.attr('placeholder')).insertAfter(i); - - if (i.val() == '') - i.hide(); - else - x.hide(); - - i - .on('blur', function(event) { - - event.preventDefault(); - - var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); - - if (i.val() == '') { - - i.hide(); - x.show(); - - } - - }); - - x - .on('focus', function(event) { - - event.preventDefault(); - - var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); - - x.hide(); - - i - .show() - .focus(); - - }) - .on('keypress', function(event) { - - event.preventDefault(); - x.val(''); - - }); - - }); - - // Events. - $this - .on('submit', function() { - - $this.find('input[type=text],input[type=password],textarea') - .each(function(event) { - - var i = $(this); - - if (i.attr('name').match(/-polyfill-field$/)) - i.attr('name', ''); - - if (i.val() == i.attr('placeholder')) { - - i.removeClass('polyfill-placeholder'); - i.val(''); - - } - - }); - - }) - .on('reset', function(event) { - - event.preventDefault(); - - $this.find('select') - .val($('option:first').val()); - - $this.find('input,textarea') - .each(function() { - - var i = $(this), - x; - - i.removeClass('polyfill-placeholder'); - - switch (this.type) { - - case 'submit': - case 'reset': - break; - - case 'password': - i.val(i.attr('defaultValue')); - - x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); - - if (i.val() == '') { - i.hide(); - x.show(); - } - else { - i.show(); - x.hide(); - } - - break; - - case 'checkbox': - case 'radio': - i.attr('checked', i.attr('defaultValue')); - break; - - case 'text': - case 'textarea': - i.val(i.attr('defaultValue')); - - if (i.val() == '') { - i.addClass('polyfill-placeholder'); - i.val(i.attr('placeholder')); - } - - break; - - default: - i.val(i.attr('defaultValue')); - break; - - } - }); - - }); - - return $this; - - }; - - /** - * Moves elements to/from the first positions of their respective parents. - * @param {jQuery} $elements Elements (or selector) to move. - * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. - */ - $.prioritize = function($elements, condition) { - - var key = '__prioritize'; - - // Expand $elements if it's not already a jQuery object. - if (typeof $elements != 'jQuery') - $elements = $($elements); - - // Step through elements. - $elements.each(function() { - - var $e = $(this), $p, - $parent = $e.parent(); - - // No parent? Bail. - if ($parent.length == 0) - return; - - // Not moved? Move it. - if (!$e.data(key)) { - - // Condition is false? Bail. - if (!condition) - return; - - // Get placeholder (which will serve as our point of reference for when this element needs to move back). - $p = $e.prev(); - - // Couldn't find anything? Means this element's already at the top, so bail. - if ($p.length == 0) - return; - - // Move element to top of parent. - $e.prependTo($parent); - - // Mark element as moved. - $e.data(key, $p); - - } - - // Moved already? - else { - - // Condition is true? Bail. - if (condition) - return; - - $p = $e.data(key); - - // Move element back to its original location (using our placeholder). - $e.insertAfter($p); - - // Unmark element as moved. - $e.removeData(key); - - } - - }); - - }; - -})(jQuery); \ No newline at end of file diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss new file mode 100644 index 0000000..7c3e5c1 --- /dev/null +++ b/assets/sass/base/_page.scss @@ -0,0 +1,105 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Page */ + + @include keyframes('load-spinner') { + 0% { + @include vendor('transform', 'rotate(0deg)'); + } + + 100% { + @include vendor('transform', 'rotate(360deg)'); + } + } + + @-ms-viewport { + width: device-width; + } + + html { + width: 100%; + height: 100%; + } + + body { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'flex-start'); + -ms-overflow-style: scrollbar; + width: 100%; + height: 100%; + min-height: 30rem; + overflow: hidden; + + &:before { + @include vendor('animation', 'load-spinner 1s infinite linear'); + @include vendor('transition', 'opacity 0.25s ease'); + @include vendor('transition-delay', '0s'); + @include vendor('pointer-events', 'none'); + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 4rem; + height: 4rem; + margin: -2rem 0 0 -2rem; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 4rem; + opacity: 0; + } + + &:after { + @include vendor('pointer-events', 'none'); + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + background-attachment: fixed; + background-color: _palette(bg-alt); + background-image: url('../../images/overlay.png'), url('../../images/bg.jpg'); + background-repeat: repeat, repeat-x; + background-size: 128px 128px, cover; + } + + &.is-loading { + *, *:before, *:after { + @include vendor('animation', 'none !important'); + @include vendor('transition', 'none !important'); + } + + &:before { + @include vendor('transition', 'opacity 1s ease'); + @include vendor('transition-delay', '0.75s'); + opacity: 0.25; + } + } + } + + @include breakpoint(small) { + html { + height: auto; + } + + body { + height: auto; + overflow-x: hidden; + overflow-y: auto; + } + } + + @include breakpoint(xsmall) { + html, body { + min-width: 320px; + } + } \ No newline at end of file diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss new file mode 100644 index 0000000..37635ff --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,271 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Typography */ + + html { + font-size: 18pt; + font-size: 1vmax; + + @include breakpoint(xlarge) { + font-size: 12pt; + font-size: 1.1vmax; + } + + @include breakpoint(large) { + font-size: 11pt; + font-size: 1.5vmax; + } + } + + body, input, select, textarea { + color: _palette(fg); + font-family: _font(family); + font-size: 1rem; + font-weight: _font(weight); + line-height: 1.65; + } + + a { + @include vendor('transition', ( + 'color #{_duration(transition)} ease-in-out', + 'border-bottom-color #{_duration(transition)} ease-in-out' + )); + color: inherit; + border-bottom: dotted 1px; + text-decoration: none; + + &:hover { + border-bottom-color: transparent; + color: _palette(accent3); + } + } + + strong, b { + color: _palette(fg-bold); + font-weight: _font(weight-bold); + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 _size(element-margin) 0; + + body.is-ie & { + width: 100%; + } + } + + h1, h2, h3, h4, h5, h6 { + color: _palette(fg-bold); + font-family: _font(family-heading); + font-weight: _font(weight-heading); + line-height: 1.3; + margin: 0 0 (_size(element-margin) * 0.5) 0; + letter-spacing: -0.05em; + + a { + color: inherit; + text-decoration: none; + } + } + + h1, h2, h3 { + &.major { + position: relative; + + &:after { + content: ''; + position: absolute; + left: 0; + width: 3.5rem; + height: 0.1rem; + background-color: _palette(border); + } + } + } + + h1 { + font-size: 3rem; + line-height: 1.2; + + &.major { + margin: 0 0 (_size(element-margin) * 1.75) 0; + + &:after { + bottom: -1.325rem; + } + } + } + + h2 { + font-size: 1.75rem; + line-height: 1.2; + + &.major { + margin: 0 0 (_size(element-margin) * 1.325) 0; + + &:after { + bottom: -1.2rem; + } + } + } + + h3 { + font-size: 1.325rem; + + &.major { + margin: 0 0 (_size(element-margin) * 1.25) 0; + + &:after { + bottom: -0.75rem; + } + } + } + + h4 { + font-size: 1rem; + } + + h5 { + font-size: 0.9rem; + } + + h6 { + font-size: 0.7rem; + } + + sub { + font-size: 0.8rem; + position: relative; + top: 0.5rem; + } + + sup { + font-size: 0.8rem; + position: relative; + top: -0.5rem; + } + + blockquote { + border-left: solid 0.25rem _palette(border); + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); + } + + code { + background: _palette(border-bg); + border-radius: _size(border-radius); + font-family: _font(family-fixed); + font-size: 0.8rem; + margin: 0 0.25rem; + padding: 0.25rem 0.65rem; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.8rem; + margin: 0 0 _size(element-margin) 0; + white-space: pre-wrap; + + code { + display: block; + line-height: 1.625; + padding: 1rem 1.5rem; + overflow-x: auto; + margin: 0; + } + } + + hr { + border: 0; + border-bottom: solid 2px _palette(border); + margin: (_size(element-margin) * 1.25) 0; + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + + @include breakpoint(small) { + html { + font-size: 12pt; + } + + h1 { + font-size: 2.25rem; + line-height: 1.2; + + &.major { + margin: 0 0 (_size(element-margin) * 1.75) 0; + + &:after { + bottom: -1.325rem; + } + } + } + + h2 { + font-size: 1.5rem; + line-height: 1.2; + + &.major { + margin: 0 0 (_size(element-margin) * 1.325) 0; + + &:after { + bottom: -1.2rem; + } + } + } + + h3 { + font-size: 1rem; + + &.major { + margin: 0 0 (_size(element-margin) * 1.25) 0; + + &:after { + bottom: -0.75rem; + } + } + } + + h4 { + font-size: 1rem; + } + + h5 { + font-size: 0.9rem; + } + + h6 { + font-size: 0.7rem; + } + + h1, h2, h3, h4, h5, h6 { + br { + display: none; + } + } + } + + @include breakpoint(xxsmall) { + html { + font-size: 11pt; + } + } \ No newline at end of file diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss new file mode 100644 index 0000000..9ce38c2 --- /dev/null +++ b/assets/sass/components/_button.scss @@ -0,0 +1,156 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + background-color: transparent; + border: 0; + border-radius: _size(border-radius); + box-shadow: inset 0 0 0 2px _palette(border); + color: _palette(fg-bold) !important; + cursor: pointer; + display: inline-block; + font-family: _font(family-heading); + font-size: 0.6rem; + font-weight: _font(weight-heading); + height: _size(element-height) * 1.1; + letter-spacing: 0.15rem; + line-height: _size(element-height) * 1.1; + padding: 0 1.5rem 0 (1.5rem + 0.15rem); + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + + &:hover { + box-shadow: inset 0 0 0 2px _palette(accent3); + color: _palette(accent3) !important; + } + + &:active { + background-color: transparentize(_palette(accent3), 0.875); + } + + &.icon { + &:before { + display: inline-block; + position: relative; + top: -0.075rem; + vertical-align: middle; + font-size: 0.8rem; + margin: 0 0.375rem 0 -0.325rem; + } + + &.circle { + position: relative; + width: _size(element-height) * 1.25; + height: _size(element-height) * 1.25; + line-height: _size(element-height) * 1.25; + text-indent: _size(element-height) * 1.25; + border-radius: 100%; + overflow: hidden; + padding: 0; + letter-spacing: 0; + + &:before { + display: block; + position: absolute; + top: 0; + left: 0; + width: inherit; + height: inherit; + font-size: 1.25rem; + line-height: inherit; + margin: 0; + text-indent: 0; + } + + &.fa-angle-left { + &:before { + position: relative; + left: -0.1rem; + font-size: 1.75rem; + } + } + + &.fa-angle-right { + &:before { + position: relative; + left: 0.1rem; + font-size: 1.75rem; + } + } + } + } + + &.fit { + display: block; + margin: 0 0 (_size(element-margin) * 0.5) 0; + width: 100%; + } + + &.small { + font-size: 0.4rem; + height: _size(element-height) * 0.75; + line-height: _size(element-height) * 0.75; + padding: 0 1.25rem 0 (1.25rem + 0.15rem); + } + + &.large { + font-size: 0.8rem; + height: _size(element-height) * 1.325; + line-height: _size(element-height) * 1.325; + padding: 0 2rem 0 (2rem + 0.15rem); + } + + &.special { + background-color: rgba(_palette(fg-bold), 1); + box-shadow: none; + color: _palette(bg) !important; + + &.color1 { + color: _palette(accent1) !important; + } + + &.color2 { + color: _palette(accent2) !important; + } + + &.color3 { + color: _palette(accent3) !important; + } + + &.color4 { + color: _palette(accent4) !important; + } + + &:hover { + background-color: _palette(accent3); + } + + &:active { + background-color: desaturate(darken(_palette(accent3), 6), 3); + } + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + cursor: default; + opacity: 0.5; + } + } \ No newline at end of file diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss new file mode 100644 index 0000000..9ff5ab2 --- /dev/null +++ b/assets/sass/components/_form.scss @@ -0,0 +1,275 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Form */ + + $gutter: (_size(element-margin) * 1); + + form { + + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + width: calc(100% + #{$gutter * 2}); + margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); + + > .field { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + padding: $gutter 0 0 $gutter; + width: calc(100% - #{$gutter * 1}); + + &.half { + width: calc(50% - #{$gutter * 0.5}); + } + + &.third { + width: calc(#{100% / 3} - #{$gutter * (1 / 3)}); + } + + &.quarter { + width: calc(25% - #{$gutter * 0.25}); + } + } + + > .actions { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '1'); + margin: $gutter 0 0 $gutter; + } + } + + label { + color: _palette(fg-bold); + display: block; + font-family: _font(family-heading); + font-size: 0.8rem; + font-weight: _font(weight-heading); + margin: 0 0 (_size(element-margin) * 0.325) 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + select, + textarea { + @include vendor('appearance', 'none'); + background: transparent; + border: solid 2px _palette(border); + border-radius: _size(border-radius); + color: inherit; + display: block; + outline: 0; + padding: 0 0.75rem; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + + &:focus { + border-color: _palette(accent3); + } + } + + option { + background-color: _palette(fg-bold); + color: _palette(bg); + } + + .select-wrapper { + @include icon; + display: block; + position: relative; + + &:before { + display: block; + content: '\f107'; + position: absolute; + top: 0; + right: 0; + width: _size(element-height); + height: _size(element-height); + line-height: _size(element-height); + color: _palette(fg); + pointer-events: none; + text-align: center; + + body.is-ie & { + line-height: 2.5; + } + } + + select::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75rem 1rem; + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2rem; + opacity: 0; + width: 1rem; + z-index: -1; + + & + label { + @include icon; + position: relative; + color: _palette(fg); + cursor: pointer; + display: inline-block; + font-size: 1rem; + font-weight: _font(weight); + margin-bottom: 0; + padding-left: (_size(element-height) * 0.6) + 1rem; + padding-right: 1rem; + + &:before { + content: ''; + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: (_size(element-height) * 0.6); + height: (_size(element-height) * 0.6); + line-height: (_size(element-height) * 0.575); + background: _palette(border-bg); + border: solid 1px _palette(border); + border-radius: _size(border-radius); + color: _palette(bg); + text-align: center; + + body.is-ie & { + line-height: 1.5; + } + } + } + + &:checked + label { + &:before { + content: '\f00c'; + background: _palette(fg-bold); + border-color: _palette(fg-bold); + } + } + + &:focus + label { + &:before { + border-color: _palette(accent3); + box-shadow: 0 0 0 1px _palette(accent3); + } + } + + &:focus:checked + label { + &:before { + background: _palette(accent3); + } + } + + &.color1 { + & + label { + &:before { + color: _palette(accent1); + } + } + } + + &.color2 { + & + label { + &:before { + color: _palette(accent2); + } + } + } + + &.color3 { + & + label { + &:before { + color: _palette(accent3); + } + } + } + + &.color4 { + & + label { + &:before { + color: _palette(accent4); + } + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: _size(border-radius); + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } + + ::-webkit-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + ::-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-ms-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + .formerize-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + @include breakpoint(small) { + form { + margin: ($gutter * -1) 0 _size(element-margin) 0; + width: 100%; + + > .field { + padding: $gutter 0 0 0; + width: 100% !important; + } + + > .actions { + margin: $gutter 0 0 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_gallery.scss b/assets/sass/components/_gallery.scss new file mode 100644 index 0000000..f54b0de --- /dev/null +++ b/assets/sass/components/_gallery.scss @@ -0,0 +1,218 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Gallery */ + + $pad: _size(pad); + $pad-small-tb: _size(pad-small-tb); + $pad-small-lr: _size(pad-small-lr); + + @include keyframes('gallery-modal-spinner') { + 0% { + @include vendor('transform', 'rotate(0deg)'); + } + + 100% { + @include vendor('transform', 'rotate(360deg)'); + } + } + + .gallery { + @include vendor('align-items', 'stretch'); + @include vendor('display', 'flex'); + height: 100%; + + > * { + width: 20rem; + height: 100%; + } + + .image { + display: block; + position: relative; + border-bottom: 0; + overflow: hidden; + + img { + @include vendor('transition', 'transform #{_duration(transition)} ease-in-out'); + } + + &:after { + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + } + + &:hover { + img { + @include vendor('transform', 'scale(1.025)'); + } + + &:after { + opacity: 0; + } + } + } + + .group { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + + > * { + height: 50%; + } + } + + .modal { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + @include vendor('pointer-events', 'none'); + @include vendor('user-select', 'none'); + @include vendor('transition', ( + 'opacity #{_duration(gallery-lightbox-fadein)} ease', + 'visibility #{_duration(gallery-lightbox-fadein)}', + 'z-index #{_duration(gallery-lightbox-fadein)}' + )); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparentize(_palette(bg), 1 - _misc(gallery-lightbox-opacity)); + opacity: 0; + outline: 0; + visibility: none; + z-index: 0; + + &:before { + @include vendor('animation', 'gallery-modal-spinner 1s infinite linear'); + @include vendor('transition', 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease'); + @include vendor('transition-delay', '#{_duration(gallery-lightbox-fadein)}'); + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 4rem; + height: 4rem; + margin: -2rem 0 0 -2rem; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 4rem; + opacity: 0; + } + + &:after { + content: ''; + display: block; + position: absolute; + top: 0.5rem; + right: 0.5rem; + width: 4rem; + height: 4rem; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 3rem; + cursor: pointer; + } + + .inner { + @include vendor('transform', 'translateY(0.75rem)'); + @include vendor('transition', ( + 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease', + 'transform #{_duration(gallery-lightbox-fadein) * 0.5} ease' + )); + opacity: 0; + + img { + display: block; + max-width: 90vw; + max-height: 85vh; + box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35); + } + } + + &.visible { + @include vendor('pointer-events', 'auto'); + opacity: 1; + visibility: visible; + z-index: _misc(z-index-base) + 1000; + + &:before { + opacity: 1; + } + } + + &.loaded { + .inner { + @include vendor('transform', 'translateY(0)'); + @include vendor('transition', ( + 'opacity #{_duration(gallery-lightbox-fadein)} ease', + 'transform #{_duration(gallery-lightbox-fadein)} ease' + )); + opacity: 1; + } + + &:before { + @include vendor('transition-delay', '0s'); + opacity: 0; + } + } + } + } + + @include breakpoint(medium) { + .gallery { + .modal { + .inner { + img { + max-width: 100vw; + } + } + } + } + } + + @include breakpoint(small) { + .gallery { + @include vendor('flex-direction', 'column'); + height: auto; + + > * { + height: auto; + width: 100%; + } + + .image { + width: 100%; + height: 40rem; + } + + .group { + @include spans(33.33333%); + + .image { + height: 20rem; + } + } + } + } + + @include breakpoint(xsmall) { + .gallery { + .image { + height: 30rem; + } + + .group { + .image { + height: 12.5rem; + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss new file mode 100644 index 0000000..ce4e37c --- /dev/null +++ b/assets/sass/components/_icon.scss @@ -0,0 +1,17 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icon */ + + .icon { + @include icon; + position: relative; + border-bottom: none; + + > .label { + display: none; + } + } \ No newline at end of file diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss new file mode 100644 index 0000000..b428fb3 --- /dev/null +++ b/assets/sass/components/_image.scss @@ -0,0 +1,169 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Image */ + + .image { + display: inline-block; + position: relative; + border: 0; + + &.filtered { + &:after { + @include gradient-background; + @include vendor('pointer-events', 'none'); + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1; + z-index: 1; + } + + &.tinted { + &:after { + @include gradient-background(true); + } + } + } + + &[data-position] { + img { + @include vendor('object-fit', 'cover'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + &[data-position="top left"] { + img { + @include vendor('object-position', 'top left'); + } + } + + &[data-position="top"] { + img { + @include vendor('object-position', 'top'); + } + } + + &[data-position="top right"] { + img { + @include vendor('object-position', 'top right'); + } + } + + &[data-position="right"] { + img { + @include vendor('object-position', 'right'); + } + } + + &[data-position="bottom right"] { + img { + @include vendor('object-position', 'bottom right'); + } + } + + &[data-position="bottom"] { + img { + @include vendor('object-position', 'bottom'); + } + } + + &[data-position="bottom left"] { + img { + @include vendor('object-position', 'bottom left'); + } + } + + &[data-position="left"] { + img { + @include vendor('object-position', 'left'); + } + } + + &[data-position="center"] { + img { + @include vendor('object-position', 'center'); + } + } + + &[data-position="25% 25%"] { + img { + @include vendor('object-position', '25% 25%'); + } + } + + &[data-position="75% 25%"] { + img { + @include vendor('object-position', '75% 25%'); + } + } + + &[data-position="75% 75%"] { + img { + @include vendor('object-position', '75% 75%'); + } + } + + &[data-position="25% 75%"] { + img { + @include vendor('object-position', '25% 75%'); + } + } + + img { + display: block; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.left { + float: left; + padding: 0 1.5rem 1rem 0; + top: 0.25rem; + } + + &.right { + float: right; + padding: 0 0 1rem 1.5rem; + top: 0.25rem; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: 0 0 (_size(element-margin) * 1.5) 0; + width: 100%; + + img { + width: 100%; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss new file mode 100644 index 0000000..7744695 --- /dev/null +++ b/assets/sass/components/_list.scss @@ -0,0 +1,380 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +// skel-baseline v3.0.1 | (c) n33 | skel.io | MIT licensed + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25rem; + + li { + padding-left: 0.25rem; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1rem; + + li { + padding-left: 0.5rem; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid 1px _palette(border); + padding: 0.5rem 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + + &.icons { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 1rem 0 0; + + &:last-child { + padding-right: 0; + } + + .icon { + &:before { + font-size: 1.25em; + } + } + } + } + + &.actions { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 (_size(element-margin) * 0.5) 0 0; + vertical-align: middle; + + &:last-child { + padding-right: 0; + } + } + + &.small { + li { + padding: 0 (_size(element-margin) * 0.25) 0 0; + } + } + + &.vertical { + li { + display: block; + padding: (_size(element-margin) * 0.5) 0 0 0; + + &:first-child { + padding-top: 0; + } + + > * { + margin-bottom: 0; + } + } + + &.small { + li { + padding: (_size(element-margin) * 0.25) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + } + + &.fit { + display: table; + margin-left: (_size(element-margin) * -0.5); + padding: 0; + table-layout: fixed; + width: calc(100% + #{(_size(element-margin) * 0.5)}); + + li { + display: table-cell; + padding: 0 0 0 (_size(element-margin) * 0.5); + + > * { + margin-bottom: 0; + } + } + + &.small { + margin-left: (_size(element-margin) * -0.25); + width: calc(100% + #{(_size(element-margin) * 0.25)}); + + li { + padding: 0 0 0 (_size(element-margin) * 0.25); + } + } + } + } + + &.contact-icons { + list-style: none; + padding-left: 0; + + > li { + margin: 1.25rem 0 0 0; + padding-left: 0; + + &:before { + display: inline-block; + width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + border-radius: 2.25rem; + background-color: rgba(_palette(fg-bold), 1); + color: _palette(bg); + cursor: default; + font-size: 1.125rem; + margin-right: 1rem; + text-align: center; + vertical-align: middle; + + body.is-ie & { + line-height: 2.125; + } + } + + a { + border-bottom: 0; + } + } + + &.color1 { + > li { + &:before { + color: _palette(accent1); + } + } + } + + &.color2 { + > li { + &:before { + color: _palette(accent2); + } + } + } + + &.color3 { + > li { + &:before { + color: _palette(accent3); + } + } + } + + &.color4 { + > li { + &:before { + color: _palette(accent4); + } + } + } + } + + &.grid-icons { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include vendor('justify-content', 'center'); + list-style: none; + margin: 0 0 _size(element-margin) 0; + padding-left: 0; + + .icon { + display: block; + position: relative; + width: 100%; + text-align: center; + + &:before { + display: block; + width: 6rem; + height: 6rem; + line-height: 6rem; + border-radius: 6rem; + box-shadow: inset 0 0 0 2px _palette(border); + font-size: 2.5rem; + margin: 0 auto; + text-align: center; + + body.is-ie & { + line-height: 2.375; + } + } + } + + > li { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: relative; + margin: 1.5rem 0 0 1.5rem; + padding-left: 0; + } + + &.connected { + > li { + &:before { + content: ''; + display: block; + position: absolute; + width: 1.5rem; + height: 2px; + top: 50%; + left: -1.5rem; + background-color: _palette(border); + } + + &:after { + content: ''; + display: block; + position: absolute; + width: 2px; + height: 1.5rem; + top: -1.5rem; + left: 50%; + background-color: _palette(border); + } + } + } + + &.two { + width: 14rem; + + > li { + &:nth-child(-n + 2) { + margin-top: 0; + + &:after { + display: none; + } + } + + &:nth-child(2n - 1) { + margin-left: 0; + + &:before { + display: none; + } + } + } + } + + &.three { + width: 21.5rem; + + > li { + &:nth-child(-n + 3) { + margin-top: 0; + + &:after { + display: none; + } + } + + &:nth-child(3n - 2) { + margin-left: 0; + + &:before { + display: none; + } + } + } + } + + &.four { + width: 29rem; + + > li { + &:nth-child(-n + 4) { + margin-top: 0; + + &:after { + display: none; + } + } + + &:nth-child(4n - 3) { + margin-left: 0; + + &:before { + display: none; + } + } + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + + dt { + display: block; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + dd { + margin-left: _size(element-margin); + } + } + + @include breakpoint(small) { + ul { + &.grid-icons { + @include vendor('justify-content', 'flex-start'); + width: 100% !important; + margin: -1rem 0 _size(element-margin) -1rem; + + .icon { + &:before { + width: 4.5rem; + height: 4.5rem; + line-height: 4.5rem; + font-size: 1.75rem; + } + } + + > li { + margin: 1rem 0 0 1rem !important; + + &:before { + display: none !important; + } + + &:after { + display: none !important; + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_panel-banner.scss b/assets/sass/components/_panel-banner.scss new file mode 100644 index 0000000..983ad32 --- /dev/null +++ b/assets/sass/components/_panel-banner.scss @@ -0,0 +1,90 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Panel (Banner) */ + + $pad: _size(pad); + $pad-small-tb: _size(pad-small-tb); + $pad-small-lr: _size(pad-small-lr); + + .panel.banner { + @include vendor('align-items', 'stretch'); + + .content { + @include padding($pad, $pad); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'center'); + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + + > .actions:last-child { + margin-bottom: 0; + } + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: relative; + + img { + @include vendor('object-fit', 'cover'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + &.left { + @include vendor('flex-direction', 'row'); + } + + &.right { + @include vendor('flex-direction', 'row-reverse'); + } + } + + @include breakpoint(small) { + .panel.banner { + .content { + @include padding($pad-small-tb, $pad-small-lr); + @include vendor('flex-basis', '60%'); + + > .actions:last-child { + margin-bottom: _size(element-margin); + } + } + + .image { + @include vendor('flex-basis', '40%'); + } + } + + @include orientation(portrait) { + .panel.banner { + .content { + @include vendor('flex-basis', 'auto'); + } + + .image { + @include vendor('flex-basis', 'auto'); + height: 18rem; + } + + &.left { + @include vendor('flex-direction', 'column'); + } + + &.right { + @include vendor('flex-direction', 'column-reverse'); + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_panel-spotlight.scss b/assets/sass/components/_panel-spotlight.scss new file mode 100644 index 0000000..e84a3fd --- /dev/null +++ b/assets/sass/components/_panel-spotlight.scss @@ -0,0 +1,81 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Panel (Spotlight) */ + + $pad: _size(pad); + $pad-small-tb: _size(pad-small-tb); + $pad-small-lr: _size(pad-small-lr); + + .panel.spotlight { + @include vendor('align-items', 'stretch'); + position: relative; + + > * { + z-index: 1; + } + + .content { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'center'); + @include padding($pad, $pad); + } + + .image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + + img { + @include vendor('object-fit', 'cover'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + &.left { + @include vendor('justify-content', 'flex-start'); + + .content { + background-image: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%); + } + } + + &.right { + @include vendor('justify-content', 'flex-end'); + + .content { + background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%); + } + } + } + + @include breakpoint(small) { + .panel.spotlight { + .content { + @include padding($pad-small-tb, $pad-small-lr); + @include vendor('flex-direction', 'column !important'); + background-image: linear-gradient(0deg, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.175)) !important; + min-height: 25rem; + } + } + } + + @include breakpoint(xsmall) { + .panel.spotlight { + .content { + min-height: 30rem; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_panel.scss b/assets/sass/components/_panel.scss new file mode 100644 index 0000000..2771c31 --- /dev/null +++ b/assets/sass/components/_panel.scss @@ -0,0 +1,300 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Panel */ + + $pad: _size(pad); + $pad-small-tb: _size(pad-small-tb); + $pad-small-lr: _size(pad-small-lr); + + @mixin panel-colors { + $opacity: 0.175; + $darken: 3; + $desaturate: 3; + + &.color0 { + @include gradient-background(false, 1, 20%, 60%); + } + + &.color1 { + @include gradient-background; + background-color: _palette(accent1); + } + + &.color2 { + @include gradient-background; + background-color: _palette(accent2); + } + + &.color3 { + @include gradient-background; + background-color: _palette(accent3); + } + + &.color4 { + @include gradient-background; + background-color: _palette(accent4); + } + + &.color1-alt { + @include gradient-background(false, $opacity); + background-color: desaturate(darken(_palette(accent1), $darken), $desaturate); + } + + &.color2-alt { + @include gradient-background(false, $opacity); + background-color: desaturate(darken(_palette(accent2), $darken), $desaturate); + } + + &.color3-alt { + @include gradient-background(false, $opacity); + background-color: desaturate(darken(_palette(accent3), $darken), $desaturate); + } + + &.color4-alt { + @include gradient-background(false, $opacity); + background-color: desaturate(darken(_palette(accent4), $darken), $desaturate); + } + } + + .panel { + @include vendor('display', 'flex'); + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + @include vendor('justify-content', 'center'); + @include vendor('align-items', 'stretch'); + height: 100%; + overflow-x: hidden; + overflow-y: auto; + + > * { + position: relative; + min-width: 10rem; + + @include panel-colors; + } + + > .intro { + @include padding($pad, $pad); + @include vendor('display', 'flex'); + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + @include vendor('justify-content', 'center'); + @include vendor('align-items', 'flex-start'); + @include vendor('flex-direction', 'column'); + width: 22rem; + + &.joined { + width: (22rem - $pad); + padding-right: 0; + + & + .inner { + padding-left: ($pad * 0.75); + } + } + } + + > .inner { + @include padding($pad, $pad); + @include vendor('display', 'flex'); + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + @include vendor('justify-content', 'center'); + @include vendor('align-items', 'flex-start'); + @include vendor('flex-direction', 'column'); + position: relative; + width: 100%; + + &.columns { + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'row'); + + > * { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + margin-left: $pad; + } + + > :first-child { + margin-left: 0; + } + + &.divided { + > * { + margin-left: ($pad * 2); + + &:before { + content: ''; + position: absolute; + top: $pad; + width: 2px; + height: calc(100% - #{$pad * 2}); + margin-left: ($pad * -1); + background-color: _palette(border); + } + } + + > :first-child { + margin-left: 0; + + &:before { + display: none; + } + } + } + + &.aligned { + @include vendor('align-items', 'flex-start'); + } + } + } + + @include spans(_size(span-fixed)); + + &.small { + width: 35rem; + } + + &.medium { + width: 50rem; + } + + &.large { + width: 65rem; + } + + &.small, + &.medium, + &.large { + @include spans(_size(span-variable)); + } + + @include panel-colors; + } + + @mixin panel-colors-small { + $opacity: 0.175; + $darken: 3; + $desaturate: 3; + + &.color1 { + @include gradient-background-small; + background-color: _palette(accent1); + } + + &.color2 { + @include gradient-background-small; + background-color: _palette(accent2); + } + + &.color3 { + @include gradient-background-small; + background-color: _palette(accent3); + } + + &.color4 { + @include gradient-background-small; + background-color: _palette(accent4); + } + + &.color1-alt { + @include gradient-background-small(false, $opacity); + background-color: desaturate(darken(_palette(accent1), $darken), $desaturate); + } + + &.color2-alt { + @include gradient-background-small(false, $opacity); + background-color: desaturate(darken(_palette(accent2), $darken), $desaturate); + } + + &.color3-alt { + @include gradient-background-small(false, $opacity); + background-color: desaturate(darken(_palette(accent3), $darken), $desaturate); + } + + &.color4-alt { + @include gradient-background-small(false, $opacity); + background-color: desaturate(darken(_palette(accent4), $darken), $desaturate); + } + } + + @include breakpoint(small) { + .panel { + @include vendor('flex-direction', 'column'); + height: auto; + + > * { + @include panel-colors-small; + } + + > .intro { + @include padding($pad-small-tb, $pad-small-lr); + width: 100% !important; + + &.joined { + padding-bottom: 0; + padding-right: $pad-small-lr; + + & + .inner { + padding-top: 0; + padding-left: $pad-small-lr; + } + } + } + + > .inner { + @include padding($pad-small-tb, $pad-small-lr); + + &.columns { + @include vendor('flex-direction', 'column'); + + > * { + margin-left: 0; + margin-top: 0; + } + + > :first-child { + margin-top: 0; + } + + &.divided { + > * { + margin-left: 0; + margin-top: ($pad-small-lr * 2); + + &:before { + content: ''; + position: absolute; + top: auto; + left: $pad-small-lr; + width: calc(100% - #{$pad-small-lr * 2}); + height: 2px; + margin-left: 0; + margin-top: ($pad-small-lr * -1); + } + } + + > :first-child { + margin-top: 0; + } + } + } + } + + @include spans-small(_size(span-fixed)); + + &.small, + &.medium, + &.large { + @include spans-small(_size(span-variable)); + width: 100% !important; + } + + @include panel-colors-small; + } + } \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss new file mode 100644 index 0000000..212bee0 --- /dev/null +++ b/assets/sass/components/_table.scss @@ -0,0 +1,81 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid 1px _palette(border); + border-left: 0; + border-right: 0; + + &:nth-child(2n + 1) { + background-color: _palette(border-bg); + } + } + } + + td { + padding: 0.75rem 0.75rem; + } + + th { + color: _palette(fg-bold); + font-size: 0.9rem; + font-weight: _font(weight-bold); + padding: 0 0.75rem 0.75rem 0.75rem; + text-align: left; + } + + thead { + border-bottom: solid 2px _palette(border); + } + + tfoot { + border-top: solid 2px _palette(border); + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid 1px _palette(border); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: 1px; + } + } + + &:first-child { + td { + border-top-width: 1px; + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/ie8.scss b/assets/sass/ie8.scss deleted file mode 100755 index c6d416a..0000000 --- a/assets/sass/ie8.scss +++ /dev/null @@ -1,62 +0,0 @@ -@import 'libs/vars'; -@import 'libs/functions'; -@import 'libs/mixins'; -@import 'libs/skel'; - -/* - Read Only by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -/* Basic */ - - code, - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea, - .box, - .image, - .image img, - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - position: relative; - -ms-behavior: url('assets/js/ie/PIE.htc'); - } - -/* Form */ - - input[type="text"], - input[type="password"], - input[type="email"], - select { - line-height: _size(element-height); - } - - input[type="checkbox"], - input[type="radio"] { - @include vendor('appearance', 'normal'); - - & + label { - padding: 0 0 0 1.5em; - - &:before { - display: none; - } - } - } - -/* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - &.alt { - border: solid _size(border-width) _palette(border2); - } - } \ No newline at end of file diff --git a/assets/sass/layout/_page-wrapper.scss b/assets/sass/layout/_page-wrapper.scss new file mode 100644 index 0000000..b63a3aa --- /dev/null +++ b/assets/sass/layout/_page-wrapper.scss @@ -0,0 +1,43 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Page Wrapper */ + + #page-wrapper { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'flex-start'); + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + height: 100%; + padding: 5rem; + + @include orientation(portrait) { + padding-left: 2rem; + padding-right: 2rem; + } + + @include breakpoint(short) { + padding: 6vh; + } + + @include breakpoint(xshort) { + padding: 0; + } + } + + @include breakpoint(small) { + #page-wrapper { + height: auto; + padding: 1rem; + } + } + + @include breakpoint(xsmall) { + #page-wrapper { + padding: 0; + } + } \ No newline at end of file diff --git a/assets/sass/layout/_wrapper.scss b/assets/sass/layout/_wrapper.scss new file mode 100644 index 0000000..21ed225 --- /dev/null +++ b/assets/sass/layout/_wrapper.scss @@ -0,0 +1,118 @@ +/// +/// Ethereal by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Wrapper */ + + #wrapper { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row'); + @include vendor('transition', ( + 'opacity 1s ease-out', + 'transform 0.75s ease-out' + )); + @include vendor('transition-delay', '0.25s'); + cursor: default; + position: relative; + height: 32rem; + box-shadow: 0 2rem 4rem 0.25rem transparentize(_palette(bg), 0.425); + + > .scrollZone { + position: fixed; + width: 6rem; + height: inherit; + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: -ms-grab; + cursor: grab; + z-index: _misc(z-index-base) + 100; + + &.left { + left: 0; + } + + &.right { + right: 0; + } + } + + > .copyright { + position: absolute; + bottom: -3rem; + right: 0; + font-size: 0.8rem; + color: transparentize(_palette(bg), 0.625); + margin-bottom: 0; + + a { + &:hover { + color: inherit; + } + } + } + + &.is-dragging { + @include vendor('user-select', 'none'); + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: -ms-grab; + cursor: grab; + + * { + @include vendor('user-select', 'none'); + } + + *:not(a, .image) { + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: -ms-grab; + cursor: grab; + } + } + + &.is-dragged { + * { + @include vendor('pointer-events', 'none'); + } + } + + body.is-loading & { + @include vendor('transform', 'translateX(2rem)'); + opacity: 0; + } + } + + @include breakpoint(small) { + #wrapper { + @include vendor('flex-direction', 'column'); + height: auto; + margin: 0 0 5rem 0; + box-shadow: 0 0.25rem 1.5rem 0.25rem transparentize(_palette(bg), 0.5); + + > .scrollZone { + display: none; + } + + > .copyright { + display: block; + width: 100%; + text-align: center; + } + + body.is-loading & { + @include vendor('transform', 'translateY(1rem)'); + } + } + } + + @include breakpoint(xsmall) { + #wrapper { + box-shadow: none; + + body.is-loading & { + @include vendor('transform', 'none'); + } + } + } \ No newline at end of file diff --git a/assets/sass/libs/_functions.scss b/assets/sass/libs/_functions.scss old mode 100755 new mode 100644 index 3b834f5..0e08c1a --- a/assets/sass/libs/_functions.scss +++ b/assets/sass/libs/_functions.scss @@ -1,34 +1,34 @@ -/// Gets a duration value. -/// @param {string} $keys Key(s). -/// @return {string} Value. -@function _duration($keys...) { - @return val($duration, $keys...); -} - -/// Gets a font value. -/// @param {string} $keys Key(s). -/// @return {string} Value. -@function _font($keys...) { - @return val($font, $keys...); -} - -/// Gets a misc value. -/// @param {string} $keys Key(s). -/// @return {string} Value. -@function _misc($keys...) { - @return val($misc, $keys...); -} - -/// Gets a palette value. -/// @param {string} $keys Key(s). -/// @return {string} Value. -@function _palette($keys...) { - @return val($palette, $keys...); -} - -/// Gets a size value. -/// @param {string} $keys Key(s). -/// @return {string} Value. -@function _size($keys...) { - @return val($size, $keys...); +/// Gets a duration value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _duration($keys...) { + @return val($duration, $keys...); +} + +/// Gets a font value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _font($keys...) { + @return val($font, $keys...); +} + +/// Gets a misc value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _misc($keys...) { + @return val($misc, $keys...); +} + +/// Gets a palette value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _palette($keys...) { + @return val($palette, $keys...); +} + +/// Gets a size value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _size($keys...) { + @return val($size, $keys...); } \ No newline at end of file diff --git a/assets/sass/libs/_mixins.scss b/assets/sass/libs/_mixins.scss old mode 100755 new mode 100644 index 204ba05..d4bf3c8 --- a/assets/sass/libs/_mixins.scss +++ b/assets/sass/libs/_mixins.scss @@ -1,56 +1,398 @@ -/// Makes an element's :before pseudoelement a FontAwesome icon. -/// @param {string} $content Optional content value to use. -/// @param {string} $where Optional pseudoelement to target (before or after). -@mixin icon($content: false, $where: before) { - - text-decoration: none; - - &:#{$where} { - - @if $content { - content: $content; - } - - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - - } - -} - -/// Applies padding to an element, taking the current element-margin value into account. -/// @param {mixed} $tb Top/bottom padding. -/// @param {mixed} $lr Left/right padding. -/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) -/// @param {bool} $important If true, adds !important. -@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { - - @if $important { - $important: '!important'; - } - - padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; - -} - -/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). -/// @param {string} $svg SVG data URL. -/// @return {string} Encoded SVG data URL. -@function svg-url($svg) { - - $svg: str-replace($svg, '"', '\''); - $svg: str-replace($svg, '<', '%3C'); - $svg: str-replace($svg, '>', '%3E'); - $svg: str-replace($svg, '&', '%26'); - $svg: str-replace($svg, '#', '%23'); - $svg: str-replace($svg, '{', '%7B'); - $svg: str-replace($svg, '}', '%7D'); - $svg: str-replace($svg, ';', '%3B'); - - @return url("data:image/svg+xml;charset=utf8,#{$svg}"); - +/// Makes an element's :before pseudoelement a FontAwesome icon. +/// @param {string} $content Optional content value to use. +/// @param {string} $where Optional pseudoelement to target (before or after). +@mixin icon($content: false, $where: before) { + + text-decoration: none; + + &:#{$where} { + + @if $content { + content: $content; + } + + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + text-transform: none !important; + + } + +} + +/// Applies padding to an element, taking the current element-margin value into account. +/// @param {mixed} $tb Top/bottom padding. +/// @param {mixed} $lr Left/right padding. +/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) +/// @param {bool} $important If true, adds !important. +@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { + + @if $important { + $important: '!important'; + } + + $x: 0.1em; + + @if unit(_size(element-margin)) == 'rem' { + $x: 0.1rem; + } + + padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; + +} + +/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). +/// @param {string} $svg SVG data URL. +/// @return {string} Encoded SVG data URL. +@function svg-url($svg) { + + $svg: str-replace($svg, '"', '\''); + $svg: str-replace($svg, '%', '%25'); + $svg: str-replace($svg, '<', '%3C'); + $svg: str-replace($svg, '>', '%3E'); + $svg: str-replace($svg, '&', '%26'); + $svg: str-replace($svg, '#', '%23'); + $svg: str-replace($svg, '{', '%7B'); + $svg: str-replace($svg, '}', '%7D'); + $svg: str-replace($svg, ';', '%3B'); + + @return url("data:image/svg+xml;charset=utf8,#{$svg}"); + +} + +/// Initializes base flexgrid classes. +/// @param {string} $vertical-align Vertical alignment of cells. +/// @param {string} $horizontal-align Horizontal alignment of cells. +@mixin flexgrid-base($vertical-align: null, $horizontal-align: null) { + + // Grid. + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + + // Vertical alignment. + @if ($vertical-align == top) { + @include vendor('align-items', 'flex-start'); + } + @else if ($vertical-align == bottom) { + @include vendor('align-items', 'flex-end'); + } + @else if ($vertical-align == center) { + @include vendor('align-items', 'center'); + } + @else { + @include vendor('align-items', 'stretch'); + } + + // Horizontal alignment. + @if ($horizontal-align != null) { + text-align: $horizontal-align; + } + + // Cells. + > * { + @include vendor('flex-shrink', '1'); + @include vendor('flex-grow', '0'); + } + +} + +/// Sets up flexgrid columns. +/// @param {integer} $columns Columns. +@mixin flexgrid-columns($columns) { + + > * { + $cell-width: 100% / $columns; + width: #{$cell-width}; + } + +} + +/// Sets up flexgrid gutters. +/// @param {integer} $columns Columns. +/// @param {number} $gutters Gutters. +@mixin flexgrid-gutters($columns, $gutters) { + + // Apply padding. + > * { + $cell-width: 100% / $columns; + + padding: ($gutters * 0.5); + width: $cell-width; + } + +} + +/// Sets up flexgrid gutters (flush). +/// @param {integer} $columns Columns. +/// @param {number} $gutters Gutters. +@mixin flexgrid-gutters-flush($columns, $gutters) { + + // Apply padding. + > * { + $cell-width: 100% / $columns; + $cell-width-pad: $gutters / $columns; + + padding: ($gutters * 0.5); + width: calc(#{$cell-width} + #{$cell-width-pad}); + } + + // Clear top/bottom gutters. + > :nth-child(-n + #{$columns}) { + padding-top: 0; + } + + > :nth-last-child(-n + #{$columns}) { + padding-bottom: 0; + } + + // Clear left/right gutters. + > :nth-child(#{$columns}n + 1) { + padding-left: 0; + } + + > :nth-child(#{$columns}n) { + padding-right: 0; + } + + // Adjust widths of leftmost and rightmost cells. + > :nth-child(#{$columns}n + 1), + > :nth-child(#{$columns}n) { + $cell-width: 100% / $columns; + $cell-width-pad: ($gutters / $columns) - ($gutters / 2); + + width: calc(#{$cell-width} + #{$cell-width-pad}); + } + +} + +/// Reset flexgrid gutters (flush only). +/// Used to override a previous set of flexgrid gutter classes. +/// @param {integer} $columns Columns. +/// @param {number} $gutters Gutters. +/// @param {integer} $prev-columns Previous columns. +@mixin flexgrid-gutters-flush-reset($columns, $gutters, $prev-columns) { + + // Apply padding. + > * { + $cell-width: 100% / $prev-columns; + $cell-width-pad: $gutters / $prev-columns; + + padding: ($gutters * 0.5); + width: calc(#{$cell-width} + #{$cell-width-pad}); + } + + // Clear top/bottom gutters. + > :nth-child(-n + #{$prev-columns}) { + padding-top: ($gutters * 0.5); + } + + > :nth-last-child(-n + #{$prev-columns}) { + padding-bottom: ($gutters * 0.5); + } + + // Clear left/right gutters. + > :nth-child(#{$prev-columns}n + 1) { + padding-left: ($gutters * 0.5); + } + + > :nth-child(#{$prev-columns}n) { + padding-right: ($gutters * 0.5); + } + + // Adjust widths of leftmost and rightmost cells. + > :nth-child(#{$prev-columns}n + 1), + > :nth-child(#{$prev-columns}n) { + $cell-width: 100% / $columns; + $cell-width-pad: $gutters / $columns; + + padding: ($gutters * 0.5); + width: calc(#{$cell-width} + #{$cell-width-pad}); + } + +} + +/// Adds debug styles to current flexgrid element. +@mixin flexgrid-debug() { + + box-shadow: 0 0 0 1px red; + + > * { + box-shadow: inset 0 0 0 1px blue; + position: relative; + + > * { + position: relative; + box-shadow: inset 0 0 0 1px green; + } + } + +} + +/// Initializes the current element as a flexgrid. +/// @param {integer} $columns Columns (optional). +/// @param {number} $gutters Gutters (optional). +/// @param {bool} $flush If true, clears padding around the very edge of the grid. +@mixin flexgrid($settings: ()) { + + // Settings. + + // Debug. + $debug: false; + + @if (map-has-key($settings, 'debug')) { + $debug: map-get($settings, 'debug'); + } + + // Vertical align. + $vertical-align: null; + + @if (map-has-key($settings, 'vertical-align')) { + $vertical-align: map-get($settings, 'vertical-align'); + } + + // Horizontal align. + $horizontal-align: null; + + @if (map-has-key($settings, 'horizontal-align')) { + $horizontal-align: map-get($settings, 'horizontal-align'); + } + + // Columns. + $columns: null; + + @if (map-has-key($settings, 'columns')) { + $columns: map-get($settings, 'columns'); + } + + // Gutters. + $gutters: 0; + + @if (map-has-key($settings, 'gutters')) { + $gutters: map-get($settings, 'gutters'); + } + + // Flush. + $flush: true; + + @if (map-has-key($settings, 'flush')) { + $flush: map-get($settings, 'flush'); + } + + // Initialize base grid. + @include flexgrid-base($vertical-align, $horizontal-align); + + // Debug? + @if ($debug) { + @include flexgrid-debug; + } + + // Columns specified? + @if ($columns != null) { + + // Initialize columns. + @include flexgrid-columns($columns); + + // Gutters specified? + @if ($gutters > 0) { + + // Flush gutters? + @if ($flush) { + + // Initialize gutters (flush). + @include flexgrid-gutters-flush($columns, $gutters); + + } + + // Otherwise ... + @else { + + // Initialize gutters. + @include flexgrid-gutters($columns, $gutters); + + } + + } + + } + +} + +/// Resizes a previously-initialized grid. +/// @param {integer} $columns Columns. +/// @param {number} $gutters Gutters (optional). +/// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true). +/// @param {bool} $flush If true, clears padding around the very edge of the grid. +@mixin flexgrid-resize($settings: ()) { + + // Settings. + + // Columns. + $columns: 1; + + @if (map-has-key($settings, 'columns')) { + $columns: map-get($settings, 'columns'); + } + + // Gutters. + $gutters: 0; + + @if (map-has-key($settings, 'gutters')) { + $gutters: map-get($settings, 'gutters'); + } + + // Previous columns. + $prev-columns: false; + + @if (map-has-key($settings, 'prev-columns')) { + $prev-columns: map-get($settings, 'prev-columns'); + } + + // Flush. + $flush: true; + + @if (map-has-key($settings, 'flush')) { + $flush: map-get($settings, 'flush'); + } + + // Resize columns. + @include flexgrid-columns($columns); + + // Gutters specified? + @if ($gutters > 0) { + + // Flush gutters? + @if ($flush) { + + // Previous columns specified? + @if ($prev-columns) { + + // Convert to list if it isn't one already. + @if (type-of($prev-columns) != list) { + $prev-columns: ($prev-columns); + } + + // Step through list of previous columns and reset them. + @each $x in $prev-columns { + @include flexgrid-gutters-flush-reset($columns, $gutters, $x); + } + + } + + // Resize gutters (flush). + @include flexgrid-gutters-flush($columns, $gutters); + + } + + // Otherwise ... + @else { + + // Resize gutters. + @include flexgrid-gutters($columns, $gutters); + + } + + } + } \ No newline at end of file diff --git a/assets/sass/libs/_skel.scss b/assets/sass/libs/_skel.scss old mode 100755 new mode 100644 index ba5b506..f5e0dcd --- a/assets/sass/libs/_skel.scss +++ b/assets/sass/libs/_skel.scss @@ -1,585 +1,587 @@ -// skel.scss v3.0.1 | (c) skel.io | MIT licensed */ - -// Vars. - - /// Breakpoints. - /// @var {list} - $breakpoints: () !global; - - /// Vendor prefixes. - /// @var {list} - $vendor-prefixes: ( - '-moz-', - '-webkit-', - '-ms-', - '' - ); - - /// Properties that should be vendorized. - /// @var {list} - $vendor-properties: ( - 'align-content', - 'align-items', - 'align-self', - 'animation', - 'animation-delay', - 'animation-direction', - 'animation-duration', - 'animation-fill-mode', - 'animation-iteration-count', - 'animation-name', - 'animation-play-state', - 'animation-timing-function', - 'appearance', - 'backface-visibility', - 'box-sizing', - 'filter', - 'flex', - 'flex-basis', - 'flex-direction', - 'flex-flow', - 'flex-grow', - 'flex-shrink', - 'flex-wrap', - 'justify-content', - 'order', - 'perspective', - 'pointer-events', - 'transform', - 'transform-origin', - 'transform-style', - 'transition', - 'transition-delay', - 'transition-duration', - 'transition-property', - 'transition-timing-function', - 'user-select' - ); - - /// Values that should be vendorized. - /// @var {list} - $vendor-values: ( - 'filter', - 'flex', - 'linear-gradient', - 'radial-gradient', - 'transform' - ); - -// Functions. - - /// Removes a specific item from a list. - /// @author Hugo Giraudel - /// @param {list} $list List. - /// @param {integer} $index Index. - /// @return {list} Updated list. - @function remove-nth($list, $index) { - - $result: null; - - @if type-of($index) != number { - @warn "$index: #{quote($index)} is not a number for `remove-nth`."; - } - @else if $index == 0 { - @warn "List index 0 must be a non-zero integer for `remove-nth`."; - } - @else if abs($index) > length($list) { - @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; - } - @else { - - $result: (); - $index: if($index < 0, length($list) + $index + 1, $index); - - @for $i from 1 through length($list) { - - @if $i != $index { - $result: append($result, nth($list, $i)); - } - - } - - } - - @return $result; - - } - - /// Replaces a substring within another string. - /// @author Hugo Giraudel - /// @param {string} $string String. - /// @param {string} $search Substring. - /// @param {string} $replace Replacement. - /// @return {string} Updated string. - @function str-replace($string, $search, $replace: '') { - - $index: str-index($string, $search); - - @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); - } - - @return $string; - - } - - /// Replaces a substring within each string in a list. - /// @param {list} $strings List of strings. - /// @param {string} $search Substring. - /// @param {string} $replace Replacement. - /// @return {list} Updated list of strings. - @function str-replace-all($strings, $search, $replace: '') { - - @each $string in $strings { - $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); - } - - @return $strings; - - } - - /// Gets a value from a map. - /// @author Hugo Giraudel - /// @param {map} $map Map. - /// @param {string} $keys Key(s). - /// @return {string} Value. - @function val($map, $keys...) { - - @if nth($keys, 1) == null { - $keys: remove-nth($keys, 1); - } - - @each $key in $keys { - $map: map-get($map, $key); - } - - @return $map; - - } - -// Mixins. - - /// Sets the global box model. - /// @param {string} $model Model (default is content). - @mixin boxModel($model: 'content') { - - $x: $model + '-box'; - - *, *:before, *:after { - -moz-box-sizing: #{$x}; - -webkit-box-sizing: #{$x}; - box-sizing: #{$x}; - } - - } - - /// Wraps @content in a @media block using a given breakpoint. - /// @param {string} $breakpoint Breakpoint. - /// @param {map} $queries Additional queries. - @mixin breakpoint($breakpoint: null, $queries: null) { - - $query: 'screen'; - - // Breakpoint. - @if $breakpoint and map-has-key($breakpoints, $breakpoint) { - $query: $query + ' and ' + map-get($breakpoints, $breakpoint); - } - - // Queries. - @if $queries { - @each $k, $v in $queries { - $query: $query + ' and (' + $k + ':' + $v + ')'; - } - } - - @media #{$query} { - @content; - } - - } - - /// Wraps @content in a @media block targeting a specific orientation. - /// @param {string} $orientation Orientation. - @mixin orientation($orientation) { - @media screen and (orientation: #{$orientation}) { - @content; - } - } - - /// Utility mixin for containers. - /// @param {mixed} $width Width. - @mixin containers($width) { - - // Locked? - $lock: false; - - @if length($width) == 2 { - $width: nth($width, 1); - $lock: true; - } - - // Modifiers. - .container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; } - .container.\37 5\25 { width: $width * 0.75; } - .container.\35 0\25 { width: $width * 0.5; } - .container.\32 5\25 { width: $width * 0.25; } - - // Main class. - .container { - @if $lock { - width: $width !important; - } - @else { - width: $width; - } - } - - } - - /// Utility mixin for grid. - /// @param {list} $gutters Column and row gutters (default is 40px). - /// @param {string} $breakpointName Optional breakpoint name. - @mixin grid($gutters: 40px, $breakpointName: null) { - - // Gutters. - @include grid-gutters($gutters); - @include grid-gutters($gutters, \32 00\25, 2); - @include grid-gutters($gutters, \31 50\25, 1.5); - @include grid-gutters($gutters, \35 0\25, 0.5); - @include grid-gutters($gutters, \32 5\25, 0.25); - - // Cells. - $x: ''; - - @if $breakpointName { - $x: '\\28' + $breakpointName + '\\29'; - } - - .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; } - .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; } - .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; } - .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; } - .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; } - .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; } - .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; } - .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; } - .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; } - .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; } - .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; } - .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; } - - .\31 2u\24#{$x} + *, - .\31 1u\24#{$x} + *, - .\31 0u\24#{$x} + *, - .\39 u\24#{$x} + *, - .\38 u\24#{$x} + *, - .\37 u\24#{$x} + *, - .\36 u\24#{$x} + *, - .\35 u\24#{$x} + *, - .\34 u\24#{$x} + *, - .\33 u\24#{$x} + *, - .\32 u\24#{$x} + *, - .\31 u\24#{$x} + * { - clear: left; - } - - .\-11u#{$x} { margin-left: 91.6666666667% } - .\-10u#{$x} { margin-left: 83.3333333333% } - .\-9u#{$x} { margin-left: 75% } - .\-8u#{$x} { margin-left: 66.6666666667% } - .\-7u#{$x} { margin-left: 58.3333333333% } - .\-6u#{$x} { margin-left: 50% } - .\-5u#{$x} { margin-left: 41.6666666667% } - .\-4u#{$x} { margin-left: 33.3333333333% } - .\-3u#{$x} { margin-left: 25% } - .\-2u#{$x} { margin-left: 16.6666666667% } - .\-1u#{$x} { margin-left: 8.3333333333% } - - } - - /// Utility mixin for grid. - /// @param {list} $gutters Gutters. - /// @param {string} $class Optional class name. - /// @param {integer} $multiplier Multiplier (default is 1). - @mixin grid-gutters($gutters, $class: null, $multiplier: 1) { - - // Expand gutters if it's not a list. - @if length($gutters) == 1 { - $gutters: ($gutters, 0); - } - - // Get column and row gutter values. - $c: nth($gutters, 1); - $r: nth($gutters, 2); - - // Get class (if provided). - $x: ''; - - @if $class { - $x: '.' + $class; - } - - // Default. - .row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); } - .row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } - - // Uniform. - .row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); } - .row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } - - } - - /// Wraps @content in vendorized keyframe blocks. - /// @param {string} $name Name. - @mixin keyframes($name) { - - @-moz-keyframes #{$name} { @content; } - @-webkit-keyframes #{$name} { @content; } - @-ms-keyframes #{$name} { @content; } - @keyframes #{$name} { @content; } - - } - - /// - /// Sets breakpoints. - /// @param {map} $x Breakpoints. - /// - @mixin skel-breakpoints($x: ()) { - $breakpoints: $x !global; - } - - /// - /// Initializes layout module. - /// @param {map} config Config. - /// - @mixin skel-layout($config: ()) { - - // Config. - $configPerBreakpoint: (); - - $z: map-get($config, 'breakpoints'); - - @if $z { - $configPerBreakpoint: $z; - } - - // Reset. - $x: map-get($config, 'reset'); - - @if $x { - - /* Reset */ - - @include reset($x); - - } - - // Box model. - $x: map-get($config, 'boxModel'); - - @if $x { - - /* Box Model */ - - @include boxModel($x); - - } - - // Containers. - $containers: map-get($config, 'containers'); - - @if $containers { - - /* Containers */ - - .container { - margin-left: auto; - margin-right: auto; - } - - // Use default is $containers is just "true". - @if $containers == true { - $containers: 960px; - } - - // Apply base. - @include containers($containers); - - // Apply per-breakpoint. - @each $name in map-keys($breakpoints) { - - // Get/use breakpoint setting if it exists. - $x: map-get($configPerBreakpoint, $name); - - // Per-breakpoint config exists? - @if $x { - $y: map-get($x, 'containers'); - - // Setting exists? Use it. - @if $y { - $containers: $y; - } - - } - - // Create @media block. - @media screen and #{map-get($breakpoints, $name)} { - @include containers($containers); - } - - } - - } - - // Grid. - $grid: map-get($config, 'grid'); - - @if $grid { - - /* Grid */ - - // Use defaults if $grid is just "true". - @if $grid == true { - $grid: (); - } - - // Sub-setting: Gutters. - $grid-gutters: 40px; - $x: map-get($grid, 'gutters'); - - @if $x { - $grid-gutters: $x; - } - - // Rows. - .row { - border-bottom: solid 1px transparent; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - } - - .row > * { - float: left; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - } - - .row:after, .row:before { - content: ''; - display: block; - clear: both; - height: 0; - } - - .row.uniform > * > :first-child { - margin-top: 0; - } - - .row.uniform > * > :last-child { - margin-bottom: 0; - } - - // Gutters (0%). - @include grid-gutters($grid-gutters, \30 \25, 0); - - // Apply base. - @include grid($grid-gutters); - - // Apply per-breakpoint. - @each $name in map-keys($breakpoints) { - - // Get/use breakpoint setting if it exists. - $x: map-get($configPerBreakpoint, $name); - - // Per-breakpoint config exists? - @if $x { - $y: map-get($x, 'grid'); - - // Setting exists? - @if $y { - - // Sub-setting: Gutters. - $x: map-get($y, 'gutters'); - - @if $x { - $grid-gutters: $x; - } - - } - - } - - // Create @media block. - @media screen and #{map-get($breakpoints, $name)} { - @include grid($grid-gutters, $name); - } - - } - - } - - } - - /// Resets browser styles. - /// @param {string} $mode Mode (default is 'normalize'). - @mixin reset($mode: 'normalize') { - - @if $mode == 'normalize' { - - // normalize.css v3.0.2 | MIT License | git.io/normalize - 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} - - } - @else if $mode == 'full' { - - // meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain) - 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} - - } - - } - - /// Vendorizes a declaration's property and/or value(s). - /// @param {string} $property Property. - /// @param {mixed} $value String/list of value(s). - @mixin vendor($property, $value) { - - // Determine if property should expand. - $expandProperty: index($vendor-properties, $property); - - // Determine if value should expand (and if so, add '-prefix-' placeholder). - $expandValue: false; - - @each $x in $value { - @each $y in $vendor-values { - @if $y == str-slice($x, 1, str-length($y)) { - - $value: set-nth($value, index($value, $x), '-prefix-' + $x); - $expandValue: true; - - } - } - } - - // Expand property? - @if $expandProperty { - @each $vendor in $vendor-prefixes { - #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; - } - } - - // Expand just the value? - @elseif $expandValue { - @each $vendor in $vendor-prefixes { - #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; - } - } - - // Neither? Treat them as a normal declaration. - @else { - #{$property}: #{$value}; - } - +// skel.scss v3.0.2-dev | (c) skel.io | MIT licensed */ + +// Vars. + + /// Breakpoints. + /// @var {list} + $breakpoints: () !global; + + /// Vendor prefixes. + /// @var {list} + $vendor-prefixes: ( + '-moz-', + '-webkit-', + '-ms-', + '' + ); + + /// Properties that should be vendorized. + /// @var {list} + $vendor-properties: ( + 'align-content', + 'align-items', + 'align-self', + 'animation', + 'animation-delay', + 'animation-direction', + 'animation-duration', + 'animation-fill-mode', + 'animation-iteration-count', + 'animation-name', + 'animation-play-state', + 'animation-timing-function', + 'appearance', + 'backface-visibility', + 'box-sizing', + 'filter', + 'flex', + 'flex-basis', + 'flex-direction', + 'flex-flow', + 'flex-grow', + 'flex-shrink', + 'flex-wrap', + 'justify-content', + 'object-fit', + 'object-position', + 'order', + 'perspective', + 'pointer-events', + 'transform', + 'transform-origin', + 'transform-style', + 'transition', + 'transition-delay', + 'transition-duration', + 'transition-property', + 'transition-timing-function', + 'user-select' + ); + + /// Values that should be vendorized. + /// @var {list} + $vendor-values: ( + 'filter', + 'flex', + 'linear-gradient', + 'radial-gradient', + 'transform' + ); + +// Functions. + + /// Removes a specific item from a list. + /// @author Hugo Giraudel + /// @param {list} $list List. + /// @param {integer} $index Index. + /// @return {list} Updated list. + @function remove-nth($list, $index) { + + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } + @else { + + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + + @if $i != $index { + $result: append($result, nth($list, $i)); + } + + } + + } + + @return $result; + + } + + /// Replaces a substring within another string. + /// @author Hugo Giraudel + /// @param {string} $string String. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {string} Updated string. + @function str-replace($string, $search, $replace: '') { + + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; + + } + + /// Replaces a substring within each string in a list. + /// @param {list} $strings List of strings. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {list} Updated list of strings. + @function str-replace-all($strings, $search, $replace: '') { + + @each $string in $strings { + $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); + } + + @return $strings; + + } + + /// Gets a value from a map. + /// @author Hugo Giraudel + /// @param {map} $map Map. + /// @param {string} $keys Key(s). + /// @return {string} Value. + @function val($map, $keys...) { + + @if nth($keys, 1) == null { + $keys: remove-nth($keys, 1); + } + + @each $key in $keys { + $map: map-get($map, $key); + } + + @return $map; + + } + +// Mixins. + + /// Sets the global box model. + /// @param {string} $model Model (default is content). + @mixin boxModel($model: 'content') { + + $x: $model + '-box'; + + *, *:before, *:after { + -moz-box-sizing: #{$x}; + -webkit-box-sizing: #{$x}; + box-sizing: #{$x}; + } + + } + + /// Wraps @content in a @media block using a given breakpoint. + /// @param {string} $breakpoint Breakpoint. + /// @param {map} $queries Additional queries. + @mixin breakpoint($breakpoint: null, $queries: null) { + + $query: 'screen'; + + // Breakpoint. + @if $breakpoint and map-has-key($breakpoints, $breakpoint) { + $query: $query + ' and ' + map-get($breakpoints, $breakpoint); + } + + // Queries. + @if $queries { + @each $k, $v in $queries { + $query: $query + ' and (' + $k + ':' + $v + ')'; + } + } + + @media #{$query} { + @content; + } + + } + + /// Wraps @content in a @media block targeting a specific orientation. + /// @param {string} $orientation Orientation. + @mixin orientation($orientation) { + @media screen and (orientation: #{$orientation}) { + @content; + } + } + + /// Utility mixin for containers. + /// @param {mixed} $width Width. + @mixin containers($width) { + + // Locked? + $lock: false; + + @if length($width) == 2 { + $width: nth($width, 1); + $lock: true; + } + + // Modifiers. + .container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; } + .container.\37 5\25 { width: $width * 0.75; } + .container.\35 0\25 { width: $width * 0.5; } + .container.\32 5\25 { width: $width * 0.25; } + + // Main class. + .container { + @if $lock { + width: $width !important; + } + @else { + width: $width; + } + } + + } + + /// Utility mixin for grid. + /// @param {list} $gutters Column and row gutters (default is 40px). + /// @param {string} $breakpointName Optional breakpoint name. + @mixin grid($gutters: 40px, $breakpointName: null) { + + // Gutters. + @include grid-gutters($gutters); + @include grid-gutters($gutters, \32 00\25, 2); + @include grid-gutters($gutters, \31 50\25, 1.5); + @include grid-gutters($gutters, \35 0\25, 0.5); + @include grid-gutters($gutters, \32 5\25, 0.25); + + // Cells. + $x: ''; + + @if $breakpointName { + $x: '\\28' + $breakpointName + '\\29'; + } + + .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; } + .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; } + .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; } + .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; } + .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; } + .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; } + .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; } + .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; } + .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; } + .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; } + .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; } + .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; } + + .\31 2u\24#{$x} + *, + .\31 1u\24#{$x} + *, + .\31 0u\24#{$x} + *, + .\39 u\24#{$x} + *, + .\38 u\24#{$x} + *, + .\37 u\24#{$x} + *, + .\36 u\24#{$x} + *, + .\35 u\24#{$x} + *, + .\34 u\24#{$x} + *, + .\33 u\24#{$x} + *, + .\32 u\24#{$x} + *, + .\31 u\24#{$x} + * { + clear: left; + } + + .\-11u#{$x} { margin-left: 91.6666666667% } + .\-10u#{$x} { margin-left: 83.3333333333% } + .\-9u#{$x} { margin-left: 75% } + .\-8u#{$x} { margin-left: 66.6666666667% } + .\-7u#{$x} { margin-left: 58.3333333333% } + .\-6u#{$x} { margin-left: 50% } + .\-5u#{$x} { margin-left: 41.6666666667% } + .\-4u#{$x} { margin-left: 33.3333333333% } + .\-3u#{$x} { margin-left: 25% } + .\-2u#{$x} { margin-left: 16.6666666667% } + .\-1u#{$x} { margin-left: 8.3333333333% } + + } + + /// Utility mixin for grid. + /// @param {list} $gutters Gutters. + /// @param {string} $class Optional class name. + /// @param {integer} $multiplier Multiplier (default is 1). + @mixin grid-gutters($gutters, $class: null, $multiplier: 1) { + + // Expand gutters if it's not a list. + @if length($gutters) == 1 { + $gutters: ($gutters, 0); + } + + // Get column and row gutter values. + $c: nth($gutters, 1); + $r: nth($gutters, 2); + + // Get class (if provided). + $x: ''; + + @if $class { + $x: '.' + $class; + } + + // Default. + .row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); } + .row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } + + // Uniform. + .row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); } + .row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } + + } + + /// Wraps @content in vendorized keyframe blocks. + /// @param {string} $name Name. + @mixin keyframes($name) { + + @-moz-keyframes #{$name} { @content; } + @-webkit-keyframes #{$name} { @content; } + @-ms-keyframes #{$name} { @content; } + @keyframes #{$name} { @content; } + + } + + /// + /// Sets breakpoints. + /// @param {map} $x Breakpoints. + /// + @mixin skel-breakpoints($x: ()) { + $breakpoints: $x !global; + } + + /// + /// Initializes layout module. + /// @param {map} config Config. + /// + @mixin skel-layout($config: ()) { + + // Config. + $configPerBreakpoint: (); + + $z: map-get($config, 'breakpoints'); + + @if $z { + $configPerBreakpoint: $z; + } + + // Reset. + $x: map-get($config, 'reset'); + + @if $x { + + /* Reset */ + + @include reset($x); + + } + + // Box model. + $x: map-get($config, 'boxModel'); + + @if $x { + + /* Box Model */ + + @include boxModel($x); + + } + + // Containers. + $containers: map-get($config, 'containers'); + + @if $containers { + + /* Containers */ + + .container { + margin-left: auto; + margin-right: auto; + } + + // Use default is $containers is just "true". + @if $containers == true { + $containers: 960px; + } + + // Apply base. + @include containers($containers); + + // Apply per-breakpoint. + @each $name in map-keys($breakpoints) { + + // Get/use breakpoint setting if it exists. + $x: map-get($configPerBreakpoint, $name); + + // Per-breakpoint config exists? + @if $x { + $y: map-get($x, 'containers'); + + // Setting exists? Use it. + @if $y { + $containers: $y; + } + + } + + // Create @media block. + @media screen and #{map-get($breakpoints, $name)} { + @include containers($containers); + } + + } + + } + + // Grid. + $grid: map-get($config, 'grid'); + + @if $grid { + + /* Grid */ + + // Use defaults if $grid is just "true". + @if $grid == true { + $grid: (); + } + + // Sub-setting: Gutters. + $grid-gutters: 40px; + $x: map-get($grid, 'gutters'); + + @if $x { + $grid-gutters: $x; + } + + // Rows. + .row { + border-bottom: solid 1px transparent; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .row > * { + float: left; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .row:after, .row:before { + content: ''; + display: block; + clear: both; + height: 0; + } + + .row.uniform > * > :first-child { + margin-top: 0; + } + + .row.uniform > * > :last-child { + margin-bottom: 0; + } + + // Gutters (0%). + @include grid-gutters($grid-gutters, \30 \25, 0); + + // Apply base. + @include grid($grid-gutters); + + // Apply per-breakpoint. + @each $name in map-keys($breakpoints) { + + // Get/use breakpoint setting if it exists. + $x: map-get($configPerBreakpoint, $name); + + // Per-breakpoint config exists? + @if $x { + $y: map-get($x, 'grid'); + + // Setting exists? + @if $y { + + // Sub-setting: Gutters. + $x: map-get($y, 'gutters'); + + @if $x { + $grid-gutters: $x; + } + + } + + } + + // Create @media block. + @media screen and #{map-get($breakpoints, $name)} { + @include grid($grid-gutters, $name); + } + + } + + } + + } + + /// Resets browser styles. + /// @param {string} $mode Mode (default is 'normalize'). + @mixin reset($mode: 'normalize') { + + @if $mode == 'normalize' { + + // normalize.css v3.0.2 | MIT License | git.io/normalize + 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} + + } + @else if $mode == 'full' { + + // meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain) + 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} + + } + + } + + /// Vendorizes a declaration's property and/or value(s). + /// @param {string} $property Property. + /// @param {mixed} $value String/list of value(s). + @mixin vendor($property, $value) { + + // Determine if property should expand. + $expandProperty: index($vendor-properties, $property); + + // Determine if value should expand (and if so, add '-prefix-' placeholder). + $expandValue: false; + + @each $x in $value { + @each $y in $vendor-values { + @if $y == str-slice($x, 1, str-length($y)) { + + $value: set-nth($value, index($value, $x), '-prefix-' + $x); + $expandValue: true; + + } + } + } + + // Expand property? + @if $expandProperty { + @each $vendor in $vendor-prefixes { + #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Expand just the value? + @elseif $expandValue { + @each $vendor in $vendor-prefixes { + #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Neither? Treat them as a normal declaration. + @else { + #{$property}: #{$value}; + } + } \ No newline at end of file diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss old mode 100755 new mode 100644 index 4ef40fb..436780c --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -1,63 +1,49 @@ -// Misc. - $misc: ( - z-index-base: 10000, - header-side: 'right' - ); - -// Duration. - $duration: ( - header: 0.5s, - transition: 0.2s - ); - -// Size. - $size: ( - border-radius: 5px, - border-width: 2px, - element-height: 2.75em, - element-margin: 2.25em - ); - -// Font. - $font: ( - family: ('Lato', sans-serif), - family-fixed: ('Source Code Pro', monospace), - weight: 400, - weight-bold: 700 - ); - -// Palette. - $palette: ( - bg: #fff, - fg: #888, - fg-bold: #777, - fg-light: #aaa, - border: #f4f4f4, - border-bg: #fafafa, - border2: #e4e4e4, - border2-bg: #f4f4f4, - border3: #e0e0e0, - border3-bg: #eaeaea, - - accent1: ( - bg: #4acaa8, - fg-bold: #ffffff, - fg: mix(#4acaa8, #ffffff, 25%), - fg-light: mix(#4acaa8, #ffffff, 40%) - ), - - accent2: ( - bg: #989898, - fg-bold: #ffffff, - fg: mix(#989898, #ffffff, 25%), - fg-light: mix(#989898, #ffffff, 40%) - ), - - header: ( - bg: #4acaa8, - fg-bold: #ffffff, - fg: mix(#4acaa8, #ffffff, 25%), - fg-light: mix(#4acaa8, #ffffff, 40%), - border: mix(#4acaa8, #ffffff, 90%) - ) +// Misc. + $misc: ( + z-index-base: 10000, + gallery-lightbox-opacity: 0.875 + ); + +// Duration. + $duration: ( + transition: 0.2s, + gallery-lightbox-fadein: 0.5s + ); + +// Size. + $size: ( + border-radius: 0.25rem, + element-height: 2.5rem, + element-margin: 1.5rem, + pad: 3.5rem, + pad-small-tb: 3.5rem * 0.825, + pad-small-lr: 3.5rem * 0.5, + span-fixed: 10rem, + span-variable: 10% + ); + +// Font. + $font: ( + family: ('Source Sans Pro', Helvetica, sans-serif), + family-heading: (Arial, Helvetica, sans-serif), + family-fixed: ('Courier New', monospace), + weight: 300, + weight-bold: 400, + weight-heading: 700 + ); + +// Palette. + $palette: ( + bg: #2e2b37, + bg-alt: #e1e6e1, + fg: rgba(255,255,255,0.75), + fg-bold: rgba(255,255,255,0.875), + fg-light: rgba(255,255,255,0.5), + border: rgba(255,255,255,0.25), + border-bg: rgba(255,255,255,0.075), + border-bg-alt: rgba(255,255,255,0.125), + accent1: #726193, + accent2: #e37b7c, + accent3: #ffe4b4, + accent4: #353865 ); \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss old mode 100755 new mode 100644 index d8ab11c..1e590e5 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,1582 +1,129 @@ -@import 'libs/vars'; -@import 'libs/functions'; -@import 'libs/mixins'; -@charset "UTF-8"; -@import url('font-awesome.min.css'); -@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic|Source+Code+Pro:400"); - -/* - Read Only by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - - @import "libs/skel"; - - @include skel-breakpoints(( - xlarge: '(max-width: 1680px)', - large: '(max-width: 1280px)', - medium: '(max-width: 1024px)', - small: '(max-width: 736px)', - xsmall: '(max-width: 480px)' - )); - - @include skel-layout(( - reset: 'full', - boxModel: 'border', - grid: ( gutters: 2em ), - conditionals: true, - containers: 45em, - breakpoints: ( - large: ( - containers: 42em, - grid: ( - gutters: 1.5em - ) - ), - medium: ( - containers: (85%, true), - ), - small: ( - containers: (90%, true), - grid: ( - gutters: 1.25em - ) - ) - ) - )); - - $size-header: 23em; - -/* Basic */ - - body { - background: _palette(bg); - } - - body, input, select, textarea { - color: _palette(fg); - font-family: _font(family); - font-size: 16pt; - font-weight: _font(weight); - line-height: 1.75em; - } - - a { - @include vendor('transition', ('color #{_duration(transition)} ease-in-out', 'border-color #{_duration(transition)} ease-in-out')); - border-bottom: solid 1px _palette(border2); - color: inherit; - text-decoration: none; - - &:hover { - border-bottom-color: transparent; - color: _palette(accent1, bg) !important; - } - } - - strong, b { - color: _palette(fg-bold); - font-weight: _font(weight-bold); - } - - em, i { - font-style: italic; - } - - p { - margin: 0 0 _size(element-margin) 0; - } - - h1, h2, h3, h4, h5, h6 { - color: _palette(fg-bold); - font-weight: _font(weight-bold); - line-height: 1em; - margin: 0 0 (_size(element-margin) * 0.25) 0; - - a { - border: 0; - color: inherit; - text-decoration: none; - } - } - - h2 { - font-size: 2em; - line-height: 1.5em; - } - - h3 { - font-size: 1.75em; - line-height: 1.5em; - } - - h4 { - font-size: 1.25em; - line-height: 1.5em; - } - - h5 { - font-size: 0.9em; - line-height: 1.5em; - } - - h6 { - font-size: 0.7em; - line-height: 1.5em; - } - - sub { - font-size: 0.8em; - position: relative; - top: 0.5em; - } - - sup { - font-size: 0.8em; - position: relative; - top: -0.5em; - } - - hr { - border: 0; - border-bottom: solid _size(border-width) _palette(border); - margin: _size(element-margin) 0; - - &.major { - margin: (_size(element-margin) * 1.5) 0; - } - } - - blockquote { - border-left: solid (_size(border-width) * 4) _palette(border2); - font-style: italic; - margin: 0 0 _size(element-margin) 0; - padding: 0.5em 0 0.5em 2em; - } - - code { - background: #555; - border-radius: _size(border-radius); - color: #fff; - font-family: _font(family-fixed); - font-size: 0.9em; - margin: 0 0.25em; - padding: 0.25em 0.65em; - } - - pre { - font-family: _font(family-fixed); - font-size: 0.9em; - margin: 0 0 _size(element-margin) 0; - - code { - -webkit-overflow-scrolling: touch; - display: block; - line-height: 1.5em; - overflow-x: auto; - padding: 1em 1.5em; - } - } - - .align-left { - text-align: left; - } - - .align-center { - text-align: center; - } - - .align-right { - text-align: right; - } - -/* Section/Article */ - - section, article { - &.special { - text-align: center; - } - } - - header { - p { - color: _palette(fg-light); - position: relative; - margin: 0 0 (_size(element-margin) * 0.75) 0; - } - - h2 + p { - font-size: 1.25em; - margin-top: -0.5em; - line-height: 1.5em; - } - - h3 + p { - font-size: 1.1em; - margin-top: -0.35em; - line-height: 1.5em; - } - - h4 + p, - h5 + p, - h6 + p { - font-size: 0.9em; - margin-top: -0.25em; - line-height: 1.5em; - } - - &.major { - h2 { - color: _palette(accent1, bg); - font-size: 3.5em; - - & + p { - color: _palette(fg-bold); - font-size: 1.75em; - font-weight: _font(weight-bold); - margin-top: -0.75em; - } - } - } - } - - footer { - } - -/* Form */ - - form { - margin: 0 0 _size(element-margin) 0; - } - - label { - color: _palette(fg-bold); - display: block; - font-size: 0.9em; - font-weight: _font(weight-bold); - margin: 0 0 (_size(element-margin) * 0.5) 0; - } - - input::-moz-focus-inner { - border: 0; - padding: 0; - } - - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea { - @include vendor('appearance', 'none'); - border-radius: _size(border-radius); - border: none; - border: solid _size(border-width) _palette(border2); - color: inherit; - display: block; - outline: 0; - padding: 0 1em; - text-decoration: none; - width: 100%; - - &:invalid { - box-shadow: none; - } - - &:focus { - border-color: _palette(accent1, bg); - } - } - - .select-wrapper { - @include icon; - display: block; - position: relative; - - &:before { - color: _palette(border2); - content: '\f078'; - display: block; - height: _size(element-height); - line-height: _size(element-height); - pointer-events: none; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: _size(element-height); - } - - select::-ms-expand { - display: none; - } - } - - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: _size(element-height); - } - - textarea { - padding: 0.75em 1em; - } - - input[type="checkbox"], - input[type="radio"] { - @include vendor('appearance', 'none'); - display: block; - float: left; - margin-right: -2em; - opacity: 0; - width: 1em; - z-index: -1; - - & + label { - @include icon; - color: _palette(fg); - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: _font(weight); - padding-left: (_size(element-height) * 0.6) + 0.75em; - padding-right: 0.75em; - position: relative; - - &:before { - background: _palette(border-bg); - border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border2); - content: ''; - display: inline-block; - height: (_size(element-height) * 0.6); - left: 0; - line-height: (_size(element-height) * 0.575); - position: absolute; - text-align: center; - top: 0; - width: (_size(element-height) * 0.6); - } - } - - &:checked + label { - &:before { - background: _palette(accent2, bg); - border-color: _palette(accent2, bg); - color: _palette(accent2, fg-bold); - content: '\f00c'; - } - } - - &:focus + label { - &:before { - border-color: _palette(accent1, bg); - } - } - } - - input[type="checkbox"] { - & + label { - &:before { - border-radius: _size(border-radius); - } - } - } - - input[type="radio"] { - & + label { - &:before { - border-radius: 100%; - } - } - } - - ::-webkit-input-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - - :-moz-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - - ::-moz-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - - :-ms-input-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - - .formerize-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - -/* Box */ - - .box { - border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border2); - margin-bottom: _size(element-margin); - padding: 1.5em; - - > :last-child, - > :last-child > :last-child, - > :last-child > :last-child > :last-child { - margin-bottom: 0; - } - - &.alt { - border: 0; - border-radius: 0; - padding: 0; - } - } - -/* Icon */ - - .icon { - @include icon; - border-bottom: none; - position: relative; - - > .label { - display: none; - } - } - -/* Image */ - - .image { - border-radius: _size(border-radius); - border: 0; - display: inline-block; - position: relative; - - img { - border-radius: _size(border-radius); - display: block; - } - - &.left { - float: left; - margin: 0 2.5em 2em 0; - top: 0.25em; - } - - &.right { - float: right; - margin: 0 0 2em 2.5em; - top: 0.25em; - } - - &.fit { - display: block; - margin: 0 0 _size(element-margin) 0; - width: 100%; - - img { - display: block; - width: 100%; - } - } - - &.avatar { - border-radius: 100%; - overflow: hidden; - - img { - border-radius: 100%; - display: block; - width: 100%; - } - } - } - -/* List */ - - ol { - list-style: decimal; - margin: 0 0 _size(element-margin) 0; - padding-left: 1.25em; - - li { - padding-left: 0.25em; - } - } - - ul { - list-style: disc; - margin: 0 0 _size(element-margin) 0; - padding-left: 1em; - - li { - padding-left: 0.5em; - } - - &.alt { - list-style: none; - padding-left: 0; - - li { - border-top: solid _size(border-width) _palette(border); - padding: 0.5em 0; - - &:first-child { - border-top: 0; - padding-top: 0; - } - } - } - - &.feature-icons { - list-style: none; - padding-left: 0; - - li { - @include icon; - display: inline-block; - margin: 0 0 (_size(element-margin) * 0.75) 0; - padding: 0.35em 0 0 3.5em; - position: relative; - vertical-align: top; - width: 48%; - - &:before { - background: _palette(accent1, bg); - border-radius: 100%; - color: _palette(accent1, fg-bold); - display: block; - height: 2.5em; - left: 0; - line-height: 2.5em; - position: absolute; - text-align: center; - top: 0; - width: 2.5em; - } - } - } - - &.icons { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - padding: 0 1em 0 0; - - &:last-child { - padding-right: 0 !important; - } - - .icon { - &:before { - font-size: 1.25em; - } - } - } - } - - &.actions { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - padding: 0 (_size(element-margin) * 0.5) 0 0; - vertical-align: middle; - - &:last-child { - padding-right: 0; - } - } - - &.small { - li { - padding: 0 (_size(element-margin) * 0.25) 0 0; - } - } - - &.vertical { - li { - display: block; - padding: (_size(element-margin) * 0.5) 0 0 0; - - &:first-child { - padding-top: 0; - } - - > * { - margin-bottom: 0; - } - } - - &.small { - li { - padding: (_size(element-margin) * 0.25) 0 0 0; - - &:first-child { - padding-top: 0; - } - } - } - } - - &.fit { - display: table; - margin-left: (_size(element-margin) * -0.5); - padding: 0; - table-layout: fixed; - width: calc(100% + #{(_size(element-margin) * 0.5)}); - - li { - display: table-cell; - padding: 0 0 0 (_size(element-margin) * 0.5); - - > * { - margin-bottom: 0; - } - } - - &.small { - margin-left: (_size(element-margin) * -0.25); - width: calc(100% + #{(_size(element-margin) * 0.25)}); - - li { - padding: 0 0 0 (_size(element-margin) * 0.25); - } - } - } - } - } - - dl { - margin: 0 0 _size(element-margin) 0; - } - -/* Table */ - - .table-wrapper { - -webkit-overflow-scrolling: touch; - overflow-x: auto; - } - - table { - margin: 0 0 _size(element-margin) 0; - width: 100%; - - tbody { - tr { - border: solid _size(border-width) _palette(border); - border-left: 0; - border-right: 0; - - &:nth-child(2n + 1) { - background-color: _palette(border-bg); - } - } - } - - td { - padding: 0.75em 0.75em; - } - - th { - color: _palette(fg-bold); - font-size: 0.9em; - font-weight: _font(weight-bold); - padding: 0 0.75em 0.75em 0.75em; - text-align: left; - } - - thead { - border-bottom: solid (_size(border-width) * 2) _palette(border2); - } - - tfoot { - border-top: solid (_size(border-width) * 2) _palette(border2); - } - - &.alt { - border-collapse: separate; - - tbody { - tr { - td { - border: solid _size(border-width) _palette(border2); - border-left-width: 0; - border-top-width: 0; - - &:first-child { - border-left-width: _size(border-width); - } - } - - &:first-child { - td { - border-top-width: _size(border-width); - } - } - } - } - - thead { - border-bottom: 0; - } - - tfoot { - border-top: 0; - } - } - } - -/* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - @include vendor('appearance', 'none'); - @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out')); - background-color: _palette(accent2, bg); - border-radius: _size(border-radius); - border: 0; - color: _palette(accent2, fg-bold) !important; - cursor: pointer; - display: inline-block; - font-weight: _font(weight-bold); - height: _size(element-height); - line-height: _size(element-height); - padding: 0 1.5em; - text-align: center; - text-decoration: none; - white-space: nowrap; - - &:hover { - background-color: lighten(_palette(accent2, bg), 5); - color: _palette(accent2, fg-bold) !important; - } - - &:active { - background-color: darken(_palette(accent2, bg), 5); - } - - &.icon { - padding-left: 1.35em; - - &:before { - margin-right: 0.5em; - } - } - - &.fit { - display: block; - margin: 0 0 (_size(element-margin) * 0.5) 0; - width: 100%; - } - - &.small { - font-size: 0.8em; - } - - &.big { - font-size: 1.35em; - } - - &.alt { - background-color: transparent; - box-shadow: inset 0 0 0 _size(border-width) _palette(border2); - color: _palette(fg-bold) !important; - - &:hover { - background-color: _palette(border2-bg); - color: _palette(fg-bold) !important; - } - - &:active { - background-color: _palette(border3-bg); - } - - &.icon { - &:before { - color: _palette(fg-light); - } - } - } - - &.special { - background-color: _palette(accent1, bg); - color: _palette(accent1, fg-bold) !important; - - &:hover { - background-color: lighten(_palette(accent1, bg), 5); - } - - &:active { - background-color: darken(_palette(accent1, bg), 5); - } - } - - &.disabled, - &:disabled { - background-color: _palette(fg) !important; - box-shadow: inset 0 -0.15em 0 0 rgba(0,0,0,0.15); - color: _palette(bg) !important; - cursor: default; - opacity: 0.25; - } - } - -/* Features */ - - .features { - article { - border-top: solid (_size(border-width) * 1.5) _palette(border); - margin-bottom: _size(element-margin); - padding-top: _size(element-margin); - - &:first-child { - border-top: 0; - padding-top: 0; - } - - .image { - display: inline-block; - padding-right: 2.5em; - vertical-align: middle; - width: 48%; - - img { - display: block; - width: 100%; - } - } - - .inner { - display: inline-block; - vertical-align: middle; - width: 50%; - - > :last-child { - margin-bottom: 0; - } - } - } - } - -/* Header */ - - #header { - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('justify-content', 'space-between'); - background: _palette(header, bg); - color: _palette(header, fg); - height: 100%; - overflow-y: auto; - position: fixed; - text-align: center; - top: 0; - width: $size-header; - - @if _misc(header-side) == 'right' { - right: 0; - } - @else { - left: 0; - } - - h1, h2, h3, h4, h5, h6 { - color: _palette(header, fg-bold); - - a { - color: _palette(header, fg-bold); - } - } - - header { - p { - color: _palette(header, fg-light); - } - } - - a { - color: _palette(header, fg); - - &:hover { - color: _palette(header, fg-bold) !important; - } - } - - > header { - @include vendor('flex-shrink', '0'); - padding: 3em; - - .avatar { - display: block; - margin: 0 auto _size(element-margin) auto; - width: 8em; - } - - h1 { - font-size: 1.75em; - margin: 0; - } - - p { - color: _palette(header, fg); - font-style: italic; - margin: 1em 0 0 0; - } - } - - > footer { - @include vendor('flex-shrink', '0'); - bottom: 0; - left: 0; - padding: 2em; - width: 100%; - - .icons { - margin: 0; - - li { - a { - color: _palette(header, fg-light); - } - } - } - } - - > nav { - @include vendor('flex-grow', '1'); - - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - border-top: solid _size(border-width) _palette(header, border); - display: block; - padding: 0; - - a { - @include vendor('transition', 'none'); - border: 0; - color: _palette(header, fg-bold) !important; - display: block; - padding: 0.85em 0; - text-decoration: none; - - &.active { - background: _palette(bg); - color: _palette(header, bg) !important; - } - } - - &:first-child { - border-top: 0; - } - } - } - } - } - -/* Wrapper */ - - #wrapper { - background: _palette(bg); - - @if _misc(header-side) == 'right' { - padding-right: $size-header; - } - @else { - padding-left: $size-header; - } - } - -/* Main */ - - #main { - > section { - border-top: solid (_size(border-width) * 3) _palette(border); - - > .container { - padding: 6em 0 4em 0; - } - - &:first-child { - border-top: 0; - } - } - } - -/* One */ - - #one { - &:before { - background-image: url('../../images/banner.jpg'); - background-position: top right; - background-repeat: no-repeat; - background-size: cover; - content: ''; - display: block; - height: 15em; - width: 100%; - } - } - -/* Footer */ - - #footer { - background: #fafafa; - border-top: 0; - color: #c0c0c0; - overflow: hidden; - padding: 4em 0 2em 0; - - .copyright { - line-height: 1em; - list-style: none; - padding: 0; - - li { - border-left: solid 1px #d4d4d4; - display: inline-block; - font-size: 0.8em; - margin-left: 1em; - padding-left: 1em; - - &:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; - } - - a { - color: inherit; - } - } - } - } - -/* XLarge */ - - @include breakpoint(xlarge) { - - $size-header: 21em; - - /* Basic */ - - body, input, select, textarea { - font-size: 13pt; - } - - /* Header */ - - #header { - width: $size-header; - - > header { - padding: 2em; - } - - > footer { - padding: 1.5em; - } - } - - /* Wrapper */ - - #wrapper { - @if _misc(header-side) == 'right' { - padding-right: $size-header; - } - @else { - padding-left: $size-header; - } - } - - /* Main */ - - #main { - > section { - > .container { - padding: 4em 0 2em 0; - } - } - } - - } - -/* Large */ - - @include breakpoint(large) { - - $size-header: 20em; - - /* Basic */ - - body, input, select, textarea { - font-size: 11pt; - } - - /* Header */ - - #header { - width: $size-header; - } - - /* Wrapper */ - - #wrapper { - @if _misc(header-side) == 'right' { - padding-right: $size-header; - } - @else { - padding-left: $size-header; - } - } - - } - -/* Medium */ - - #titleBar { - display: none; - } - - @include breakpoint(medium) { - - /* Basic */ - - html, body { - overflow-x: hidden; - } - - body, input, select, textarea { - font-size: 12pt; - } - - /* Image */ - - .image { - &.left, - &.right { - max-width: 40%; - - img { - width: 100%; - } - } - } - - /* Header */ - - #header { - @include vendor('backface-visibility', 'hidden'); - @include vendor('transition', ('transform #{_duration(header)} ease')); - display: block; - height: 100%; - overflow-y: auto; - position: fixed; - top: 0; - width: $size-header; - z-index: _misc(z-index-base) + 2; - - @if _misc(header-side) == 'right' { - @include vendor('transform', 'translateX(#{$size-header})'); - right: 0; - } - @else { - @include vendor('transform', 'translateX(#{$size-header * -1})'); - left: 0; - } - - > footer { - bottom: auto; - left: auto; - margin: 0.5em 0 0 0; - position: relative; - right: auto; - top: auto; - } - } - - /* Wrapper */ - - #wrapper { - @include vendor('backface-visibility', 'hidden'); - @include vendor('transition', 'transform #{_duration(header)} ease'); - padding: 44px 0 1px 0; - } - - /* One */ - - #one { - &:before { - height: 10em; - } - } - - /* Off-Canvas Navigation */ - - #titleBar { - @include vendor('backface-visibility', 'hidden'); - @include vendor('transition', 'transform #{_duration(header)} ease'); - display: block; - height: 44px; - left: 0; - position: fixed; - top: 0; - width: 100%; - z-index: _misc(z-index-base) + 1; - background: #222; - color: #fff; - min-width: 320px; - - .title { - color: #fff; - display: block; - font-weight: _font(weight-bold); - height: 44px; - line-height: 44px; - padding: 0 1em; - width: 100%; - - @if _misc(header-side) == 'right' { - text-align: left; - } - @else { - text-align: right; - } - - a { - border: 0; - text-decoration: none; - } - } - - .toggle { - @include icon; - height: 4em; - position: absolute; - top: 0; - width: 6em; - border: 0; - outline: 0; - - @if _misc(header-side) == 'right' { - right: 0; - } - @else { - left: 0; - } - - &:before { - background: _palette(accent1, bg); - color: _palette(accent1, fg-bold); - content: '\f0c9'; - display: block; - font-size: 18px; - height: 44px; - line-height: 44px; - position: absolute; - text-align: center; - top: 0; - width: 64px; - - @if _misc(header-side) == 'right' { - right: 0; - } - @else { - left: 0; - } - } - } - } - - body { - &.header-visible { - #wrapper, #titleBar { - @if _misc(header-side) == 'right' { - @include vendor('transform', 'translateX(#{$size-header * -1})'); - } - @else { - @include vendor('transform', 'translateX(#{$size-header})'); - } - } - - #header { - @include vendor('transform', 'translateX(0)'); - } - } - } - - } - -/* Small */ - - @include breakpoint(small) { - - $size-header: 17em; - - /* Basic */ - - body, input, select, textarea { - font-size: 12pt; - } - - h1, h2, h3, h4, h5, h6 { - br { - display: none; - } - } - - h2 { - font-size: 1.75em; - } - - h3 { - font-size: 1.5em; - } - - h4 { - font-size: 1em; - } - - /* Image */ - - .image { - &.left { - margin: 0 1.5em 1em 0; - } - - &.right { - margin: 0 0 1em 1.5em; - } - } - - /* Section/Article */ - - header { - br { - display: none; - } - - &.major { - h2 { - font-size: 2.5em; - - & + p { - font-size: 1.5em; - } - } - } - } - - /* Features */ - - .features { - article { - .image { - display: block; - margin: 0 0 _size(element-margin) 0; - padding-right: 0; - width: 100%; - } - - .inner { - display: block; - width: 100%; - } - } - } - - /* Header */ - - #header { - width: $size-header; - - @if _misc(header-side) == 'right' { - @include vendor('transform', 'translateX(#{$size-header})'); - right: 0; - } - @else { - @include vendor('transform', 'translateX(#{$size-header * -1})'); - left: 0; - } - - > header { - padding: 2em; - - .avatar { - margin: 0 auto (_size(element-margin) * 0.75) auto; - width: 6em; - } - - h1 { - font-size: 1.5em; - } - - p { - margin: 1em 0 0 0; - } - } - - > footer { - padding: 1.5em; - } - } - - /* Main */ - - #main { - > section { - > .container { - padding: 2em 0 0 0; - } - } - } - - /* One */ - - #one { - &:before { - height: 7em; - } - } - - /* Footer */ - - #footer { - text-align: center; - - .copyright { - li { - border-left: 0; - display: block; - line-height: 1.75em; - margin: 0.75em 0 0 0; - padding-left: 0; - - &:first-child { - margin-top: 0; - } - } - } - } - - /* Off-Canvas Navigation */ - - #titleBar { - .toggle { - height: 4em; - width: 6em; - - &:before { - font-size: 14px; - width: 44px; - } - } - } - - body { - &.header-visible { - #wrapper, #titleBar { - @if _misc(header-side) == 'right' { - @include vendor('transform', 'translateX(#{$size-header * -1})'); - } - @else { - @include vendor('transform', 'translateX(#{$size-header})'); - } - } - } - } - - } - -/* XSmall */ - - @include breakpoint(xsmall) { - - /* Basic */ - - html, body { - min-width: 320px; - } - - body, input, select, textarea { - font-size: 12pt; - } - - /* List */ - - ul { - &.actions { - margin: 0 0 _size(element-margin) 0; - - li { - display: block; - padding: (_size(element-margin) * 0.5) 0 0 0; - text-align: center; - width: 100%; - - &:first-child { - padding-top: 0; - } - - > * { - width: 100%; - margin: 0 !important; - - &.icon { - &:before { - margin-left: -2em; - } - } - } - } - - &.small { - li { - padding: (_size(element-margin) * 0.25) 0 0 0; - - &:first-child { - padding-top: 0; - } - } - } - } - - &.feature-icons { - li { - display: block; - width: 100%; - } - } - } - - /* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - padding: 0; - } - - } \ No newline at end of file +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/skel'; +@import 'font-awesome.min.css'; +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i"); + +/* + Ethereal by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + + @include skel-breakpoints(( + xlarge: '(max-width: 1680px)', + large: '(max-width: 1280px)', + medium: '(max-width: 980px)', + small: '(max-width: 736px)', + xsmall: '(max-width: 480px)', + xxsmall: '(max-width: 360px)', + short: '(min-aspect-ratio: 16/7)', + xshort: '(min-aspect-ratio: 16/6)' + )); + + @include skel-layout(( + reset: 'full', + boxModel: 'border' + )); + +// Mixins. + + @mixin gradient-background($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%, $angle: 45deg) { + $background-image: ( + url('../../images/overlay.png'), + linear-gradient($angle, transparentize(_palette(accent1), (1 - $opacity)) $stop1, transparentize(_palette(accent2), (1 - $opacity)) $stop2, transparentize(_palette(accent3), (1 - $opacity))) + ); + + $background-size: ( + 128px 128px, + auto + ); + + @if ($tint) { + $x: linear-gradient(0deg, rgba(0,0,0,0.125), rgba(0,0,0,0.125)); + $y: auto; + $background-image: append($background-image, $x); + $background-size: append($background-size, $y); + } + + background-image: $background-image; + background-size: $background-size; + } + + @mixin gradient-background-small($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%) { + @include gradient-background($tint, $opacity, $stop1, $stop2, 135deg); + } + + @mixin spans($x) { + @for $i from 0 through 10 { + + @if ($i > 0) { + .span-#{$i} { + width: ($x * $i); + } + } + + @if ($i < 10) { + .span-#{$i}-25 { + width: ($x * $i) + ($x * 0.25); + } + + .span-#{$i}-5 { + width: ($x * $i) + ($x * 0.5); + } + + .span-#{$i}-75 { + width: ($x * $i) + ($x * 0.75); + } + } + } + } + + @mixin spans-small($x) { + @for $i from 0 through 10 { + + @if ($i > 0) { + .span-#{$i} { + width: 100%; + } + } + + @if ($i < 10) { + .span-#{$i}-25 { + width: 100%; + } + + .span-#{$i}-5 { + width: 100%; + } + + .span-#{$i}-75 { + width: 100%; + } + } + } + } + +// Base. + + @import 'base/page'; + @import 'base/typography'; + +// Component. + + @import 'components/form'; + @import 'components/icon'; + @import 'components/image'; + @import 'components/list'; + @import 'components/table'; + @import 'components/button'; + @import 'components/gallery'; + @import 'components/panel'; + @import 'components/panel-banner'; + @import 'components/panel-spotlight'; + +// Layout. + + @import 'layout/page-wrapper'; + @import 'layout/wrapper'; \ No newline at end of file diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss new file mode 100644 index 0000000..aefc645 --- /dev/null +++ b/assets/sass/noscript.scss @@ -0,0 +1,16 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/skel'; + +/* + Ethereal by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Page */ + + body { + overflow-x: scroll; + } \ No newline at end of file diff --git a/images/avatar.png b/images/avatar.png deleted file mode 100755 index 6e50f67..0000000 Binary files a/images/avatar.png and /dev/null differ diff --git a/images/banner.jpg b/images/banner.jpg deleted file mode 100755 index 3c7985a..0000000 Binary files a/images/banner.jpg and /dev/null differ diff --git a/images/bg.jpg b/images/bg.jpg new file mode 100644 index 0000000..b989e7e Binary files /dev/null and b/images/bg.jpg differ diff --git a/images/gallery/fulls/01.jpg b/images/gallery/fulls/01.jpg new file mode 100644 index 0000000..922d93b Binary files /dev/null and b/images/gallery/fulls/01.jpg differ diff --git a/images/gallery/fulls/02.jpg b/images/gallery/fulls/02.jpg new file mode 100644 index 0000000..8b76b52 Binary files /dev/null and b/images/gallery/fulls/02.jpg differ diff --git a/images/gallery/fulls/03.jpg b/images/gallery/fulls/03.jpg new file mode 100644 index 0000000..9a08b81 Binary files /dev/null and b/images/gallery/fulls/03.jpg differ diff --git a/images/gallery/fulls/04.jpg b/images/gallery/fulls/04.jpg new file mode 100644 index 0000000..f6f710d Binary files /dev/null and b/images/gallery/fulls/04.jpg differ diff --git a/images/gallery/fulls/05.jpg b/images/gallery/fulls/05.jpg new file mode 100644 index 0000000..13ccb88 Binary files /dev/null and b/images/gallery/fulls/05.jpg differ diff --git a/images/gallery/fulls/06.jpg b/images/gallery/fulls/06.jpg new file mode 100644 index 0000000..e9340ad Binary files /dev/null and b/images/gallery/fulls/06.jpg differ diff --git a/images/gallery/fulls/07.jpg b/images/gallery/fulls/07.jpg new file mode 100644 index 0000000..1f2a2eb Binary files /dev/null and b/images/gallery/fulls/07.jpg differ diff --git a/images/gallery/fulls/08.jpg b/images/gallery/fulls/08.jpg new file mode 100644 index 0000000..c4f0edd Binary files /dev/null and b/images/gallery/fulls/08.jpg differ diff --git a/images/gallery/fulls/09.jpg b/images/gallery/fulls/09.jpg new file mode 100644 index 0000000..2b64370 Binary files /dev/null and b/images/gallery/fulls/09.jpg differ diff --git a/images/gallery/thumbs/01.jpg b/images/gallery/thumbs/01.jpg new file mode 100644 index 0000000..e3c7260 Binary files /dev/null and b/images/gallery/thumbs/01.jpg differ diff --git a/images/gallery/thumbs/02.jpg b/images/gallery/thumbs/02.jpg new file mode 100644 index 0000000..7df4025 Binary files /dev/null and b/images/gallery/thumbs/02.jpg differ diff --git a/images/gallery/thumbs/03.jpg b/images/gallery/thumbs/03.jpg new file mode 100644 index 0000000..e1b31f4 Binary files /dev/null and b/images/gallery/thumbs/03.jpg differ diff --git a/images/gallery/thumbs/04.jpg b/images/gallery/thumbs/04.jpg new file mode 100644 index 0000000..1ed2909 Binary files /dev/null and b/images/gallery/thumbs/04.jpg differ diff --git a/images/gallery/thumbs/05.jpg b/images/gallery/thumbs/05.jpg new file mode 100644 index 0000000..f9b1527 Binary files /dev/null and b/images/gallery/thumbs/05.jpg differ diff --git a/images/gallery/thumbs/06.jpg b/images/gallery/thumbs/06.jpg new file mode 100644 index 0000000..f34f808 Binary files /dev/null and b/images/gallery/thumbs/06.jpg differ diff --git a/images/gallery/thumbs/07.jpg b/images/gallery/thumbs/07.jpg new file mode 100644 index 0000000..1b89e33 Binary files /dev/null and b/images/gallery/thumbs/07.jpg differ diff --git a/images/gallery/thumbs/08.jpg b/images/gallery/thumbs/08.jpg new file mode 100644 index 0000000..3f58c51 Binary files /dev/null and b/images/gallery/thumbs/08.jpg differ diff --git a/images/gallery/thumbs/09.jpg b/images/gallery/thumbs/09.jpg new file mode 100644 index 0000000..0f9b1dd Binary files /dev/null and b/images/gallery/thumbs/09.jpg differ diff --git a/images/overlay.png b/images/overlay.png new file mode 100644 index 0000000..5352f66 Binary files /dev/null and b/images/overlay.png differ diff --git a/images/pic01.jpg b/images/pic01.jpg new file mode 100644 index 0000000..a5aa8de Binary files /dev/null and b/images/pic01.jpg differ diff --git a/images/pic01.png b/images/pic01.png deleted file mode 100755 index 84794c8..0000000 Binary files a/images/pic01.png and /dev/null differ diff --git a/images/pic02.jpg b/images/pic02.jpg new file mode 100644 index 0000000..23e8a20 Binary files /dev/null and b/images/pic02.jpg differ diff --git a/images/pic02.png b/images/pic02.png deleted file mode 100755 index e8a17bc..0000000 Binary files a/images/pic02.png and /dev/null differ diff --git a/images/pic03.jpg b/images/pic03.jpg old mode 100755 new mode 100644 index 5bfc8f7..f7fdcd3 Binary files a/images/pic03.jpg and b/images/pic03.jpg differ diff --git a/images/twitter.png b/images/twitter.png deleted file mode 100755 index 251ebb1..0000000 Binary files a/images/twitter.png and /dev/null differ diff --git a/index.html b/index.html old mode 100755 new mode 100644 index 20a8f10..9c1c205 --- a/index.html +++ b/index.html @@ -1,475 +1,419 @@ - - - - - FivePixels' Cydia Repo - - - - - - - - - - - - -
- - -
- - -
-
-
-

FivePixels

-
-

iOS App Developer and Tweak Developer

-
-
- - -
-
-

Skills

-

Here are a few things I'm good at.

-
    -
  • Java Development
    • -
  • Java 8 Structures (Lambdas, Streams, etc)
    • -
  • Bukkit plugins with the Spigot and CraftBukkit APIs
    • -
  • Guava Concurrency
    • -
  • NMS level code with the Bukkit API
    • -
  • Genetic Algorithms
    • -
-
-
- - -
-
-

Experience

-

I'm only 17, so I'm fairly new to the development scene, but I do have some experience working with some amazing organizations.

-
-
- -
-

VindexCraft

-

VindexCraft is an immersive roleplay server with a wonderful community. I have developed many plugins for them, including Phones, a Prison system, and a Warfare minigame.

-
-
-
- -
-

Project Coalesce

-

Project Coalesce is a small development team I established with some fellow developers on the Coalesce Coding Discord I started. Working with this group has allowed me to improve my development, teamwork and leadership skills.

-
-
-
- -
-

Github Projects

-

I also have few projects on my Github, as well as many many more that I never uploaded. Feel free to check them out.

-
-
-
-
-
- - - - -
- - - - -
- - - - - - - - - - - + + + + + Ethereal by HTML5 UP + + + + + + + + +
+ + +
+ + + + + +
+
+

Sed etiam aenean

+

Mauris et ligula arcu. Proin dapibus convallis accumsan. Lorem maximus hendrerit orci, sit amet elementum massa hendrerit sed. Donec et ullamcorper ligula. Suspendisse amet potenti. Ut pretium libero eleifend euismod sed tristique. Quisque dictum magna risus, id ultricies justo sagittis vitae. Sed id odio tempor, porttitor elit amet, gravida hendrerit fringilla lorem ipsum dolor.

+
+
+ +
+
+ + +
+
+

Amet lorem

+

Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam.

+
+
+
    +
  • Lorem
    • +
  • Ipsum
    • +
  • Dolor
    • +
  • Sit
    • +
  • Amet
    • +
  • Nullam
    • +
+
+
+ + +
+
+

Magna amet tempus

+

Mauris a cursus velit. Nunc lacinia sollicitudin egestas bibendum, magna dui bibendum ex, sagittis commodo enim risus sed magna nulla. Vestibulum ut consequat velit. Curabitur vitae libero lorem. Quisque iaculis porttitor blandit. Nullam quis sagittis maximus. Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar.

+
+
+ +
+
+ + +
+
+

Elit integer

+

Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam.

+
+
+
+ + + +
+ +
+ + + + +
+ +
+
+ + +
+
+

Contact

+

Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam.

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
    +
    • +
+
+
+
+ +
+
+
+ + +
+
+

Elements

+

Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam.

+
+
+
+ +

Text

+

This is bold and this is strong. This is italic and this is emphasized. + This is superscript text and this is subscript text. + This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

+ +

Heading Level 1

+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
Heading Level 5
+
Heading Level 6
+ +
+
+ +

Blockquote

+
Lorem ipsum dolor sit amet. Felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in vestibulum. Blandit adipiscing eu iaculis volutpat ac adipiscing volutpat ac adipiscing faucibus.
+ +

Preformatted

+ 
i = 0;
+
+while (!deck.isInOrder()) {
+    print 'Iteration ' + (i++);
+    deck.shuffle();
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';
+ +
+
+ +

Lists

+ +

Unordered

+
    +
  • Lorem ipsum dolor sit.
    • +
  • Dolor pulvinar etiam.
    • +
  • Etiam vel felis viverra.
    • +
+ +

Alternate

+
    +
  • Lorem ipsum dolor sit.
    • +
  • Dolor pulvinar etiam.
    • +
  • Etiam vel felis viverra.
    • +
  • Felis enim feugiat.
    • +
+ +
+
+ +

Ordered

+
    +
  1. Lorem ipsum dolor sit.
    2. +
  2. Dolor pulvinar etiam.
    3. +
  3. Etiam vel felis viverra.
    4. +
  4. Felis enim feugiat.
    5. +
  5. Etiam vel felis lorem.
    6. +
+ +

Actions

+ + + +
+
+ +

Icons

+ + +

Contact Icons

+ + +
+
+

Table

+

Default

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
100.00
+
+
+
+

Alternate

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
100.00
+
+
+
+

Buttons

+ + + +
    +
  • Disabled
    • +
  • Disabled
    • +
+ +
+
+

Form

+
+
+ + +
+
+ + +
+
+ +
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
    +
    • +
    • +
+
+
+
+
+ + +
© Untitled. Design: HTML5 UP.
+ +
+ +
+ + + + + + + \ No newline at end of file -- cgit v1.2.3