')
+ .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/.DS_Store b/assets/sass/.DS_Store
deleted file mode 100644
index 28cae86..0000000
Binary files a/assets/sass/.DS_Store and /dev/null differ
diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss
new file mode 100644
index 0000000..2c33426
--- /dev/null
+++ b/assets/sass/base/_page.scss
@@ -0,0 +1,42 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Basic */
+
+ // MSIE: Required for IEMobile.
+ @-ms-viewport {
+ width: device-width;
+ }
+
+ // Ensures page width is always >=320px.
+ @include breakpoint('<=xsmall') {
+ html, body {
+ min-width: 320px;
+ }
+ }
+
+ // Set box model to border-box.
+ // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+ html {
+ box-sizing: border-box;
+ }
+
+ *, *:before, *:after {
+ box-sizing: inherit;
+ }
+
+ body {
+ background: _palette(bg);
+
+ // Stops initial animations until page loads.
+ &.is-preload {
+ *, *:before, *:after {
+ @include vendor('animation', 'none !important');
+ @include vendor('transition', 'none !important');
+ }
+ }
+
+ }
\ No newline at end of file
diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss
new file mode 100644
index 0000000..ddcf73e
--- /dev/null
+++ b/assets/sass/base/_reset.scss
@@ -0,0 +1,76 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: 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;
+
+ &:before,
+ &:after {
+ content: '';
+ content: none;
+ }
+ }
+
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+
+ body {
+ -webkit-text-size-adjust: none;
+ }
+
+ mark {
+ background-color: transparent;
+ color: inherit;
+ }
+
+ input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+
+ input, select, textarea {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ }
\ 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..bc9b7cc
--- /dev/null
+++ b/assets/sass/base/_typography.scss
@@ -0,0 +1,183 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Type */
+
+ html {
+ font-size: 16pt;
+
+ @include breakpoint('<=xlarge') {
+ font-size: 12pt;
+ }
+
+ @include breakpoint('<=small') {
+ font-size: 11pt;
+ }
+
+ @include breakpoint('<=xxsmall') {
+ font-size: 10pt;
+ }
+ }
+
+ body, input, select, textarea {
+ color: _palette(fg);
+ font-family: _font(family);
+ font-weight: _font(weight);
+ font-size: 1rem;
+ line-height: 1.65;
+ }
+
+ a {
+ @include vendor('transition', (
+ 'color #{_duration(transition)} ease-in-out',
+ 'background-color #{_duration(transition)} ease-in-out',
+ 'border-bottom-color #{_duration(transition)} ease-in-out'
+ ));
+ border-bottom: dotted 1px _palette(fg-light);
+ text-decoration: none;
+ color: inherit;
+
+ &:hover {
+ border-bottom-color: transparent;
+ }
+ }
+
+ 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: 1.5;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ text-transform: uppercase;
+ letter-spacing: _font(letter-spacing);
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ &.major {
+ border-bottom: solid _size(border-width) _palette(border);
+ width: -moz-max-content;
+ width: -webkit-max-content;
+ width: -ms-max-content;
+ width: max-content;
+ padding-bottom: 0.5rem;
+ margin: 0 0 (_size(element-margin) * 1) 0;
+ }
+ }
+
+ h1 {
+ font-size: 2.25rem;
+ line-height: 1.3;
+ letter-spacing: _font(letter-spacing-heading);
+ }
+
+ h2 {
+ font-size: 1.5rem;
+ line-height: 1.4;
+ letter-spacing: _font(letter-spacing-heading);
+ }
+
+ h3 {
+ font-size: 1rem;
+ }
+
+ h4 {
+ font-size: 0.8rem;
+ }
+
+ h5 {
+ font-size: 0.7rem;
+ }
+
+ h6 {
+ font-size: 0.6rem;
+ }
+
+ @include breakpoint('<=small') {
+ h1 {
+ font-size: 1.75rem;
+ line-height: 1.4;
+ }
+
+ h2 {
+ font-size: 1.25em;
+ line-height: 1.5;
+ }
+ }
+
+ sub {
+ font-size: 0.8rem;
+ position: relative;
+ top: 0.5rem;
+ }
+
+ sup {
+ font-size: 0.8rem;
+ position: relative;
+ top: -0.5rem;
+ }
+
+ blockquote {
+ border-left: solid (_size(border-width) * 4) _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.9rem;
+ margin: 0 0.25rem;
+ padding: 0.25rem 0.65rem;
+ }
+
+ pre {
+ -webkit-overflow-scrolling: touch;
+ font-family: _font(family-fixed);
+ font-size: 0.9rem;
+ margin: 0 0 _size(element-margin) 0;
+
+ code {
+ display: block;
+ line-height: 1.75;
+ padding: 1rem 1.5rem;
+ overflow-x: auto;
+ }
+ }
+
+ hr {
+ border: 0;
+ border-bottom: solid _size(border-width) _palette(border);
+ margin: (_size(element-margin) * 1.375) 0;
+ }
+
+ .align-left {
+ text-align: left;
+ }
+
+ .align-center {
+ text-align: center;
+ }
+
+ .align-right {
+ text-align: right;
+ }
\ No newline at end of file
diff --git a/assets/sass/components/_actions.scss b/assets/sass/components/_actions.scss
new file mode 100644
index 0000000..c3605a0
--- /dev/null
+++ b/assets/sass/components/_actions.scss
@@ -0,0 +1,101 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Actions */
+
+ ul.actions {
+ @include vendor('display', 'flex');
+ cursor: default;
+ list-style: none;
+ margin-left: (_size(element-margin) * -0.5);
+ padding-left: 0;
+
+ li {
+ padding: 0 0 0 (_size(element-margin) * 0.5);
+ vertical-align: middle;
+ }
+
+ &.special {
+ @include vendor('justify-content', 'center');
+ width: 100%;
+ margin-left: 0;
+
+ li {
+ &:first-child {
+ padding-left: 0;
+ }
+ }
+ }
+
+ &.stacked {
+ @include vendor('flex-direction', 'column');
+ margin-left: 0;
+
+ li {
+ padding: (_size(element-margin) * 0.65) 0 0 0;
+
+ &:first-child {
+ padding-top: 0;
+ }
+ }
+ }
+
+ &.fit {
+ width: calc(100% + #{_size(element-margin) * 0.5});
+
+ li {
+ @include vendor('flex-grow', '1');
+ @include vendor('flex-shrink', '1');
+ width: 100%;
+
+ > * {
+ width: 100%;
+ }
+ }
+
+ &.stacked {
+ width: 100%;
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ &:not(.fixed) {
+ @include vendor('flex-direction', 'column');
+ margin-left: 0;
+ width: 100% !important;
+
+ li {
+ @include vendor('flex-grow', '1');
+ @include vendor('flex-shrink', '1');
+ padding: (_size(element-margin) * 0.5) 0 0 0;
+ text-align: center;
+ width: 100%;
+
+ > * {
+ width: 100%;
+ }
+
+ &:first-child {
+ padding-top: 0;
+ }
+
+ input[type="submit"],
+ input[type="reset"],
+ input[type="button"],
+ button,
+ .button {
+ width: 100%;
+
+ &.icon {
+ &:before {
+ margin-left: -0.5em;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss
new file mode 100644
index 0000000..ec5ab0d
--- /dev/null
+++ b/assets/sass/components/_box.scss
@@ -0,0 +1,26 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Box */
+
+ .box {
+ border-radius: _size(border-radius);
+ border: solid _size(border-width) _palette(border);
+ 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;
+ }
+ }
\ 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..61fe069
--- /dev/null
+++ b/assets/sass/components/_button.scss
@@ -0,0 +1,84 @@
+///
+/// Dimension 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, color #{_duration(transition)} ease-in-out');
+ background-color: transparent;
+ border-radius: _size(border-radius);
+ border: 0;
+ box-shadow: inset 0 0 0 _size(border-width) _palette(border);
+ color: _palette(fg-bold) !important;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 0.8rem;
+ font-weight: _font(weight);
+ height: _size(element-height);
+ letter-spacing: _font(letter-spacing);
+ line-height: _size(element-height);
+ outline: 0;
+ padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5));
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ white-space: nowrap;
+
+ &:hover {
+ background-color: _palette(border-bg);
+ }
+
+ &:active {
+ background-color: _palette(border-bg-alt);
+ }
+
+ &.icon {
+ &:before {
+ margin-right: 0.5em;
+ }
+ }
+
+ &.fit {
+ width: 100%;
+ }
+
+ &.small {
+ font-size: 0.6rem;
+ height: (_size(element-height) * 0.75);
+ line-height: (_size(element-height) * 0.75);
+ }
+
+ &.primary {
+ background-color: _palette(fg-bold);
+ color: _palette(bg) !important;
+ font-weight: _font(weight-bold);
+
+ &:hover {
+ }
+
+ &:active {
+ }
+ }
+
+ &.disabled,
+ &:disabled {
+ @include vendor('pointer-events', 'none');
+ cursor: default;
+ opacity: 0.25;
+ }
+ }
+
+ input[type="submit"],
+ input[type="reset"],
+ input[type="button"],
+ button {
+ line-height: calc(#{_size(element-height)} - 2px);
+ }
\ 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..fdae12e
--- /dev/null
+++ b/assets/sass/components/_form.scss
@@ -0,0 +1,252 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Form */
+
+ form {
+ margin: 0 0 _size(element-margin) 0;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+
+ > .fields {
+ $gutter: (_size(element-margin) * 0.75);
+
+ @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});
+ }
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ > .fields {
+ $gutter: (_size(element-margin) * 0.75);
+
+ width: calc(100% + #{$gutter * 2});
+ margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
+
+ > .field {
+ padding: $gutter 0 0 $gutter;
+ width: calc(100% - #{$gutter * 1});
+
+ &.half {
+ width: calc(100% - #{$gutter * 1});
+ }
+
+ &.third {
+ width: calc(100% - #{$gutter * 1});
+ }
+
+ &.quarter {
+ width: calc(100% - #{$gutter * 1});
+ }
+ }
+ }
+ }
+ }
+
+ label {
+ color: _palette(fg-bold);
+ display: block;
+ font-size: 0.8rem;
+ font-weight: _font(weight);
+ letter-spacing: _font(letter-spacing);
+ line-height: 1.5;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ text-transform: uppercase;
+ }
+
+ input[type="text"],
+ input[type="password"],
+ input[type="email"],
+ input[type="tel"],
+ select,
+ textarea {
+ @include vendor('appearance', 'none');
+ @include vendor('transition', (
+ 'border-color #{_duration(transition)} ease-in-out',
+ 'box-shadow #{_duration(transition)} ease-in-out',
+ 'background-color #{_duration(transition)} ease-in-out'
+ ));
+ background-color: transparent;
+ border-radius: _size(border-radius);
+ border: solid _size(border-width) _palette(border);
+ color: inherit;
+ display: block;
+ outline: 0;
+ padding: 0 1rem;
+ text-decoration: none;
+ width: 100%;
+
+ &:invalid {
+ box-shadow: none;
+ }
+
+ &:focus {
+ background: _palette(border-bg);
+ border-color: _palette(fg-bold);
+ box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
+ }
+ }
+
+ select {
+ background-image: svg-url("
");
+ background-size: 1.25rem;
+ background-repeat: no-repeat;
+ background-position: calc(100% - 1rem) center;
+ height: _size(element-height);
+ padding-right: _size(element-height);
+ text-overflow: ellipsis;
+
+ option {
+ color: _palette(fg);
+ background: _palette(bg);
+ }
+
+ &:focus {
+ &::-ms-value {
+ background-color: transparent;
+ }
+ }
+
+ &::-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(false, solid);
+ @include vendor('user-select', 'none');
+ color: _palette(fg);
+ cursor: pointer;
+ display: inline-block;
+ font-size: 0.8rem;
+ font-weight: _font(weight);
+ margin: 0 0 (_size(element-margin) * 0.25) 0;
+ padding-left: (_size(element-height) * 0.6) + 1rem;
+ padding-right: 0.75rem;
+ position: relative;
+
+ &:before {
+ @include vendor('transition', (
+ 'border-color #{_duration(transition)} ease-in-out',
+ 'box-shadow #{_duration(transition)} ease-in-out',
+ 'background-color #{_duration(transition)} ease-in-out'
+ ));
+ border-radius: _size(border-radius);
+ border: solid _size(border-width) _palette(border);
+ content: '';
+ display: inline-block;
+ height: (_size(element-height) * 0.6);
+ left: 0;
+ line-height: (_size(element-height) * 0.6);
+ //line-height: calc(#{_size(element-height) * 0.6} + 0em);
+ position: absolute;
+ text-align: center;
+ top: -0.15rem;
+ width: (_size(element-height) * 0.6);
+ }
+ }
+
+ &:checked + label {
+ &:before {
+ background: _palette(fg-bold) !important;
+ border-color: _palette(fg-bold) !important;
+ color: _palette(bg);
+ content: '\f00c';
+ }
+ }
+
+ &:focus + label {
+ &:before {
+ background: _palette(border-bg);
+ border-color: _palette(fg-bold);
+ box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
+ }
+ }
+ }
+
+ 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;
+ }
\ 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..4726114
--- /dev/null
+++ b/assets/sass/components/_icon.scss
@@ -0,0 +1,33 @@
+///
+/// Dimension 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;
+ border-bottom: none;
+ position: relative;
+
+ > .label {
+ display: none;
+ }
+
+ &:before {
+ line-height: inherit;
+ }
+
+ &.solid {
+ &:before {
+ font-weight: 900;
+ }
+ }
+
+ &.brands {
+ &:before {
+ font-family: 'Font Awesome 5 Brands';
+ }
+ }
+ }
\ No newline at end of file
diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss
new file mode 100644
index 0000000..f096a32
--- /dev/null
+++ b/assets/sass/components/_icons.scss
@@ -0,0 +1,40 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icons */
+
+ ul.icons {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
+
+ li {
+ display: inline-block;
+ padding: 0 0.75em 0 0;
+
+ &:last-child {
+ padding-right: 0;
+ }
+
+ a {
+ border-radius: 100%;
+ box-shadow: inset 0 0 0 _size(border-width) _palette(border);
+ display: inline-block;
+ height: 2.25rem;
+ line-height: 2.25rem;
+ text-align: center;
+ width: 2.25rem;
+
+ &:hover {
+ background-color: _palette(border-bg);
+ }
+
+ &:active {
+ background-color: _palette(border-bg-alt);
+ }
+ }
+ }
+ }
\ 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..ed94ed7
--- /dev/null
+++ b/assets/sass/components/_image.scss
@@ -0,0 +1,87 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Image */
+
+ .image {
+ border-radius: _size(border-radius);
+ border: 0;
+ display: inline-block;
+ position: relative;
+
+ &:before {
+ @include vendor('pointer-events', 'none');
+ background-image: url('../../images/overlay.png');
+ background-color: _palette(bg-overlay);
+ border-radius: _size(border-radius);
+ content: '';
+ display: block;
+ height: 100%;
+ left: 0;
+ opacity: 0.5;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+
+ img {
+ border-radius: _size(border-radius);
+ display: block;
+ }
+
+ &.left,
+ &.right {
+ max-width: 40%;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ &.left {
+ float: left;
+ padding: 0 1.5em 1em 0;
+ top: 0.25em;
+ }
+
+ &.right {
+ float: right;
+ padding: 0 0 1em 1.5em;
+ top: 0.25em;
+ }
+
+ &.fit {
+ display: block;
+ margin: 0 0 _size(element-margin) 0;
+ width: 100%;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ &.main {
+ display: block;
+ margin: (_size(element-margin) * 1.25) 0;
+ width: 100%;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ @include breakpoint('<=small') {
+ &.main {
+ margin: (_size(element-margin) * 1) 0;
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ &.main {
+ margin: (_size(element-margin) * 0.75) 0;
+ }
+ }
+ }
\ 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..1b384c2
--- /dev/null
+++ b/assets/sass/components/_list.scss
@@ -0,0 +1,56 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* 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;
+ }
+ }
+ }
+ }
+
+ 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);
+ }
+ }
\ 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..0c51148
--- /dev/null
+++ b/assets/sass/components/_table.scss
@@ -0,0 +1,81 @@
+///
+/// Dimension 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 _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(border);
+ }
+
+ tfoot {
+ border-top: solid (_size(border-width) * 2) _palette(border);
+ }
+
+ &.alt {
+ border-collapse: separate;
+
+ tbody {
+ tr {
+ td {
+ border: solid _size(border-width) _palette(border);
+ 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;
+ }
+ }
+ }
\ No newline at end of file
diff --git a/assets/sass/layout/_bg.scss b/assets/sass/layout/_bg.scss
new file mode 100644
index 0000000..ab1b8b6
--- /dev/null
+++ b/assets/sass/layout/_bg.scss
@@ -0,0 +1,68 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* BG */
+
+ #bg {
+ @include vendor('transform', 'scale(1.0)');
+ -webkit-backface-visibility: hidden;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ z-index: 1;
+
+ &:before, &:after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ &:before {
+ @include vendor('transition', 'background-color #{_duration(bg)} ease-in-out');
+ @include vendor('transition-delay', '#{_duration(intro)}');
+ background-image: linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}),
+ url('../../images/overlay.png');
+ background-size: auto,
+ 256px 256px;
+ background-position: center,
+ center;
+ background-repeat: no-repeat,
+ repeat;
+ z-index: 2;
+ }
+
+ &:after {
+ @include vendor('transform', 'scale(1.125)');
+ @include vendor('transition', (
+ 'transform #{_duration(article)} ease-in-out',
+ 'filter #{_duration(article)} ease-in-out'
+ ));
+ background-image: url('../../images/bg.jpg');
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ z-index: 1;
+ }
+
+ body.is-article-visible & {
+ &:after {
+ @include vendor('transform', 'scale(1.0825)');
+ @include vendor('filter', 'blur(0.2rem)');
+ }
+ }
+
+ body.is-preload & {
+ &:before {
+ background-color: _palette(bg-alt);
+ }
+ }
+ }
\ No newline at end of file
diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss
new file mode 100644
index 0000000..b87cc7a
--- /dev/null
+++ b/assets/sass/layout/_footer.scss
@@ -0,0 +1,37 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Footer */
+
+ #footer {
+ @include vendor('transition', (
+ 'transform #{_duration(article)} ease-in-out',
+ 'filter #{_duration(article)} ease-in-out',
+ 'opacity #{_duration(article)} ease-in-out',
+ ));
+ width: 100%;
+ max-width: 100%;
+ margin-top: 2rem;
+ text-align: center;
+
+ .copyright {
+ letter-spacing: _font(letter-spacing);
+ font-size: 0.6rem;
+ opacity: 0.75;
+ margin-bottom: 0;
+ text-transform: uppercase;
+ }
+
+ body.is-article-visible & {
+ @include vendor('transform', 'scale(0.95)');
+ @include vendor('filter', 'blur(0.1rem)');
+ opacity: 0;
+ }
+
+ body.is-preload & {
+ opacity: 0;
+ }
+ }
\ No newline at end of file
diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss
new file mode 100644
index 0000000..52b3ce5
--- /dev/null
+++ b/assets/sass/layout/_header.scss
@@ -0,0 +1,261 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Header */
+
+ #header {
+ @include vendor('display', 'flex');
+ @include vendor('flex-direction', 'column');
+ @include vendor('align-items', 'center');
+ @include vendor('transition', (
+ 'transform #{_duration(article)} ease-in-out',
+ 'filter #{_duration(article)} ease-in-out',
+ 'opacity #{_duration(article)} ease-in-out',
+ ));
+ background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+ background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+ background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+ background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+ max-width: 100%;
+ text-align: center;
+
+ > * {
+ @include vendor('transition', 'opacity #{_duration(article)} ease-in-out');
+ position: relative;
+ margin-top: 3.5rem;
+
+ &:before {
+ content: '';
+ display: block;
+ position: absolute;
+ top: calc(-3.5rem - 1px);
+ left: calc(50% - #{_size(border-width) * 1});
+ width: _size(border-width);
+ height: calc(3.5rem + 1px);
+ background: _palette(border);
+ }
+ }
+
+ > :first-child {
+ margin-top: 0;
+
+ &:before {
+ display: none;
+ }
+ }
+
+ .logo {
+ width: 5.5rem;
+ height: 5.5rem;
+ line-height: 5.5rem;
+ border: solid _size(border-width) _palette(border);
+ border-radius: 100%;
+
+ .icon {
+ &:before {
+ font-size: 2rem;
+ }
+ }
+ }
+
+ .content {
+ border-style: solid;
+ border-color: _palette(border);
+ border-top-width: _size(border-width);
+ border-bottom-width: _size(border-width);
+ max-width: 100%;
+
+ .inner {
+ @include vendor('transition', (
+ 'max-height #{_duration(intro)} ease',
+ 'padding #{_duration(intro)} ease',
+ 'opacity #{_duration(article)} ease-in-out'
+ ));
+ @include vendor('transition-delay', '0.25s');
+ padding: 3rem 2rem;
+ max-height: 40rem;
+ overflow: hidden;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ p {
+ text-transform: uppercase;
+ letter-spacing: _font(letter-spacing);
+ font-size: 0.8rem;
+ line-height: 2;
+ }
+ }
+
+ nav {
+ ul {
+ @include vendor('display', 'flex');
+ margin-bottom: 0;
+ list-style: none;
+ padding-left: 0;
+ border: solid _size(border-width) _palette(border);
+ border-radius: _size(border-radius);
+
+ li {
+ padding-left: 0;
+ border-left: solid _size(border-width) _palette(border);
+
+ &:first-child {
+ border-left: 0;
+ }
+
+ a {
+ display: block;
+ min-width: 7.5rem;
+ height: 2.75rem;
+ line-height: 2.75rem;
+ padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing));
+ text-transform: uppercase;
+ letter-spacing: _font(letter-spacing);
+ font-size: 0.8rem;
+ border-bottom: 0;
+
+ &:hover {
+ background-color: _palette(border-bg);
+ }
+
+ &:active {
+ background-color: _palette(border-bg-alt);
+ }
+ }
+ }
+ }
+
+ &.use-middle {
+ &:after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: calc(50% - #{_size(border-width) * 1});
+ width: _size(border-width);
+ height: 100%;
+ background: _palette(border);
+ }
+
+ ul {
+ li {
+ &.is-middle {
+ border-left: 0;
+ }
+ }
+ }
+ }
+ }
+
+ body.is-article-visible & {
+ @include vendor('transform', 'scale(0.95)');
+ @include vendor('filter', 'blur(0.1rem)');
+ opacity: 0;
+ }
+
+ body.is-preload & {
+ > * {
+ opacity: 0;
+ }
+
+ @include vendor('filter', 'blur(0.125rem)');
+
+ .content {
+ .inner {
+ max-height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ opacity: 0;
+ }
+ }
+ }
+
+ @include breakpoint('<=medium') {
+ .content {
+ p {
+ br {
+ display: none;
+ }
+ }
+ }
+ }
+
+ @include breakpoint('<=small') {
+ > * {
+ margin-top: 2rem;
+
+ &:before {
+ top: calc(-2rem - 1px);
+ height: calc(2rem + 1px);
+ }
+ }
+
+ .logo {
+ width: 4.75rem;
+ height: 4.75rem;
+ line-height: 4.75rem;
+
+ .icon {
+ &:before {
+ font-size: 1.75rem;
+ }
+ }
+ }
+
+ .content {
+ .inner {
+ padding: 2.5rem 1rem;
+ }
+
+ p {
+ line-height: 1.875;
+ }
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ padding: 1.5rem 0;
+
+ .content {
+ .inner {
+ padding: 2.5rem 0;
+ }
+ }
+
+ nav {
+ ul {
+ @include vendor('flex-direction', 'column');
+ min-width: 10rem;
+ max-width: 100%;
+
+ li {
+ border-left: 0;
+ border-top: solid _size(border-width) _palette(border);
+
+ &:first-child {
+ border-top: 0;
+ }
+
+ a {
+ height: 3rem;
+ line-height: 3rem;
+ min-width: 0;
+ width: 100%;
+ }
+ }
+ }
+
+ &.use-middle {
+ &:after {
+ display: none;
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss
new file mode 100644
index 0000000..0588446
--- /dev/null
+++ b/assets/sass/layout/_main.scss
@@ -0,0 +1,102 @@
+///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Main */
+
+ #main {
+ @include vendor('flex-grow', '1');
+ @include vendor('flex-shrink', '1');
+ @include vendor('display', 'flex');
+ @include vendor('align-items', 'center');
+ @include vendor('justify-content', 'center');
+ @include vendor('flex-direction', 'column');
+ position: relative;
+ max-width: 100%;
+ z-index: 3;
+
+ article {
+ @include vendor('transform', 'translateY(0.25rem)');
+ @include vendor('transition', (
+ 'opacity #{_duration(article)} ease-in-out',
+ 'transform #{_duration(article)} ease-in-out'
+ ));
+ @include padding(2.5rem, 2.5rem, (2rem, 0, 1rem, 0));
+ position: relative;
+ width: 40rem;
+ max-width: 100%;
+ background-color: transparentize(_palette(bg), 0.15);
+ border-radius: _size(border-radius);
+ opacity: 0;
+
+ &.active {
+ @include vendor('transform', 'translateY(0)');
+ opacity: 1;
+ }
+
+ .close {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 4rem;
+ height: 4rem;
+ cursor: pointer;
+ text-indent: 4rem;
+ overflow: hidden;
+ white-space: nowrap;
+
+ &:before {
+ @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0.75rem;
+ left: 0.75rem;
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: 100%;
+ background-position: center;
+ background-image: svg-url('
');
+ background-size: 20px 20px;
+ background-repeat: no-repeat;
+ }
+
+ &:hover {
+ &:before {
+ background-color: _palette(border-bg);
+ }
+ }
+
+ &:active {
+ &:before {
+ background-color: _palette(border-bg-alt);
+ }
+ }
+ }
+ }
+
+ @include breakpoint('<=small') {
+ article {
+ @include padding(2rem, 2rem, (1.5rem, 0, 0.5rem, 0));
+
+ .close {
+ &:before {
+ top: 0.875rem;
+ left: 0.875rem;
+ width: 2.25rem;
+ height: 2.25rem;
+ background-size: 14px 14px;
+ }
+ }
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ article {
+ @include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 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..9a8c9ca
--- /dev/null
+++ b/assets/sass/layout/_wrapper.scss
@@ -0,0 +1,36 @@
+///
+/// Dimension 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', 'column');
+ @include vendor('align-items', 'center');
+ @include vendor('justify-content', 'space-between');
+ position: relative;
+ min-height: 100vh;
+ width: 100%;
+ padding: 4rem 2rem;
+ z-index: 3;
+
+ &:before {
+ content: '';
+ display: block;
+ }
+
+ @include breakpoint('<=xlarge') {
+ padding: 3rem 2rem;
+ }
+
+ @include breakpoint('<=small') {
+ padding: 2rem 1rem;
+ }
+
+ @include breakpoint('<=xsmall') {
+ padding: 1rem;
+ }
+ }
\ No newline at end of file
diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss
index 04af088..3be728c 100644
--- a/assets/sass/libs/_vars.scss
+++ b/assets/sass/libs/_vars.scss
@@ -1,37 +1,43 @@
// Misc.
$misc: (
- bg: #348cb2 url("images/bg.jpg") bottom left,
- bg-width: 1500px
+ z-index-base: 10000
);
// Duration.
$duration: (
- bg: 60s,
- wrapper: 3s,
- overlay: 1.5s,
- header: 1s,
- nav-icons: 0.5s
+ transition: 0.2s,
+ bg: 2.5s,
+ intro: 0.75s,
+ article: 0.325s
);
// Size.
$size: (
- nav-icon-wrapper: 5.35em,
- nav-icon: 1.75em
+ border-radius: 4px,
+ border-width: 1px,
+ element-height: 2.75rem,
+ element-margin: 2rem
);
// Font.
$font: (
+ family: ('Source Sans Pro', sans-serif),
+ family-fixed: ('Courier New', monospace),
+ weight: 300,
+ weight-bold: 600,
+ letter-spacing: 0.2rem,
+ letter-spacing-heading: 0.5rem
);
// Palette.
$palette: (
- bg: #fff,
- fg: #fff,
-
- nav-icon: (
- hover-bg: rgba(255,255,255,0.175),
- hover-fg: #fff,
- active-bg: rgba(255,255,255,0.35),
- active-fg: #fff
- )
+ bg: #1b1f22,
+ bg-alt: #000000,
+ bg-overlay: rgba(19,21,25,0.5),
+ fg: #ffffff,
+ fg-bold: #ffffff,
+ fg-light: rgba(255,255,255,0.5),
+ border: #ffffff,
+ border-bg: rgba(255,255,255,0.075),
+ border-bg-alt: rgba(255,255,255,0.175)
);
\ No newline at end of file
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index be05379..2ab4be5 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,478 +1,50 @@
-@import 'libs/vars';
-@import 'libs/functions';
-@import 'libs/mixins';
-@import 'libs/vendor';
-@import 'libs/breakpoints';
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");
-@import url("fontawesome-all.min.css");
-
-/*
- Aerial by HTML5 UP
- html5up.net | @ajlkn
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-*/
-
-// Breakpoints.
-
- @include breakpoints((
- wide: ( 1281px, 1680px ),
- normal: ( 737px, 1280px ),
- mobile: ( 481px, 736px ),
- mobilep: ( null, 480px )
- ));
-
-// Mixins.
-
- @mixin bg($width) {
- @include keyframes('bg') {
- 0% { @include vendor('transform', 'translate3d(0,0,0)'); }
- 100% { @include vendor('transform', 'translate3d(#{$width * -1},0,0)'); }
- }
-
- #bg {
- background-size: $width auto;
- width: ($width * 3);
- }
- }
-
- $delay-wrapper: _duration(wrapper) - 1s;
- $delay-overlay: $delay-wrapper - 0.5s;
- $delay-header: $delay-overlay + _duration(overlay) - 0.75s;
- $delay-nav-icons: $delay-header + _duration(header) - 1s;
- $delay-nav-icon: 0.25s;
-
-// Reset.
-// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: 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;
-
- &:before,
- &:after {
- content: '';
- content: none;
- }
- }
-
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
-
- body {
- -webkit-text-size-adjust: none;
- }
-
- mark {
- background-color: transparent;
- color: inherit;
- }
-
- input::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
-
- input, select, textarea {
- -moz-appearance: none;
- -webkit-appearance: none;
- -ms-appearance: none;
- appearance: none;
- }
-
-/* Basic */
-
- // Set box model to border-box.
- // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
- html {
- box-sizing: border-box;
- }
-
- *, *:before, *:after {
- box-sizing: inherit;
- }
-
- body {
- background: _palette(bg);
- overflow: hidden;
-
- // Stops initial animations until page loads.
- &.is-preload {
- *, *:before, *:after {
- @include vendor('animation', 'none !important');
- @include vendor('transition', 'none !important');
- }
- }
-
- }
-
- body, input, select, textarea {
- color: _palette(fg);
- font-family: 'Source Sans Pro', sans-serif;
- font-size: 15pt;
- font-weight: 300 !important;
- letter-spacing: -0.025em;
- line-height: 1.75em;
- }
-
- a {
- @include vendor('transition', 'border-color 0.2s ease-in-out');
- border-bottom: dotted 1px;
- color: inherit;
- outline: 0;
- text-decoration: none;
-
- &:hover {
- border-color: transparent;
- }
- }
-
-/* Icon */
-
- .icon {
- @include icon;
- position: relative;
-
- > .label {
- display: none;
- }
-
- &.solid {
- &:before {
- font-weight: 900;
- }
- }
-
- &.brands {
- &:before {
- font-family: 'Font Awesome 5 Brands';
- }
- }
- }
-
-/* Wrapper */
-
- @include keyframes('wrapper') {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
- }
-
- #wrapper {
- @include vendor('animation', 'wrapper #{_duration(wrapper)} forwards');
- height: 100%;
- left: 0;
- opacity: 0;
- position: fixed;
- top: 0;
- width: 100%;
- }
-
-/* BG */
-
- #bg {
- @include vendor('animation', 'bg #{_duration(bg)} linear infinite');
- @include vendor('backface-visibility', 'hidden');
- @include vendor('transform', 'translate3d(0,0,0)');
-
- /* Set your background with this */
- background: _misc(bg);
-
- background-repeat: repeat-x;
- height: 100%;
- left: 0;
- opacity: 1;
- position: fixed;
- top: 0;
- }
-
- @include bg(_misc(bg-width) * 1.5);
-
-/* Overlay */
-
- @include keyframes('overlay') {
- 0% { opacity: 0; }
- 100% { opacity: 1; }
- }
-
- #overlay {
- @include vendor('animation', 'overlay #{_duration(overlay)} #{$delay-overlay} forwards');
- background-attachment: fixed, fixed;
- background-image: url('images/overlay-pattern.png'), url('images/overlay.svg');
- background-position: top left, center center;
- background-repeat: repeat, no-repeat;
- background-size: auto, cover;
- height: 100%;
- left: 0;
- opacity: 0;
- position: fixed;
- top: 0;
- width: 100%;
- }
-
-/* Main */
-
- #main {
- height: 100%;
- left: 0;
- position: fixed;
- text-align: center;
- top: 0;
- width: 100%;
-
- &:before {
- content: '';
- display: inline-block;
- height: 100%;
- margin-right: 0;
- vertical-align: middle;
- width: 1px;
- }
- }
-
-/* Header */
-
- @include keyframes('header') {
- 0% { @include vendor('transform', 'translate3d(0,1em,0)'); opacity: 0; }
- 100% { @include vendor('transform', 'translate3d(0,0,0)'); opacity: 1; }
- }
-
- @include keyframes('nav-icons') {
- 0% { @include vendor('transform', 'translate3d(0,1em,0)'); opacity: 0; }
- 100% { @include vendor('transform', 'translate3d(0,0,0)'); opacity: 1; }
- }
-
- #header {
- @include vendor('animation', 'header #{_duration(header)} #{$delay-header} forwards');
- @include vendor('backface-visibility', 'hidden');
- @include vendor('transform', 'translate3d(0,0,0)');
- cursor: default;
- display: inline-block;
- opacity: 0;
- position: relative;
- text-align: center;
- top: -1em;
- vertical-align: middle;
- width: 90%;
-
- h1 {
- font-size: 4.35em;
- font-weight: 900;
- letter-spacing: -0.035em;
- line-height: 1em;
- }
-
- p {
- font-size: 1.25em;
- margin: 0.75em 0 0.25em 0;
- opacity: 0.75;
- }
-
- nav {
- margin: 1.5em 0 0 0;
-
- li {
- @include vendor('animation', 'nav-icons #{_duration(nav-icons)} ease-in-out forwards');
- @include vendor('backface-visibility', 'hidden');
- @include vendor('transform', 'translate3d(0,0,0)');
- display: inline-block;
- height: _size(nav-icon-wrapper);
- line-height: _size(nav-icon-wrapper) * 1.1;
- opacity: 0;
- position: relative;
- top: 0;
- width: _size(nav-icon-wrapper);
-
- @for $x from 1 through 10 {
- &:nth-child(#{$x}) {
- @include vendor('animation-delay', ($delay-nav-icons + ($x * $delay-nav-icon)) + '');
- }
- }
- }
-
- a {
- -webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-touch-callout: none;
- border: 0;
- display: inline-block;
-
- &:before {
- @include vendor('transition', 'all 0.2s ease-in-out');
- border-radius: 100%;
- border: solid 1px _palette(fg);
- display: block;
- font-size: _size(nav-icon);
- height: 2.5em;
- line-height: 2.5em;
- position: relative;
- text-align: center;
- top: 0;
- width: 2.5em;
- }
-
- &:hover {
- font-size: 1.1em;
-
- &:before {
- background-color: _palette(nav-icon, hover-bg);
- color: _palette(nav-icon, hover-fg);
- }
- }
-
- &:active {
- font-size: 0.95em;
- background: none;
-
- &:before {
- background-color: _palette(nav-icon, active-bg);
- color: _palette(nav-icon, active-fg);
- }
- }
-
- span {
- display: none;
- }
- }
- }
- }
-
-/* Footer */
-
- #footer {
- @include vendor('background-image', 'linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%)');
- bottom: 0;
- cursor: default;
- height: 6em;
- left: 0;
- line-height: 8em;
- position: absolute;
- text-align: center;
- width: 100%;
- }
-
-/* Wide */
-
- @include breakpoint('<=wide') {
-
- /* Basic */
-
- body, input, select, textarea {
- font-size: 13pt;
- }
-
- /* BG */
-
- @include bg(_misc(bg-width));
-
- }
-
-/* Normal */
-
- @include breakpoint('<=normal') {
-
- /* Basic */
-
- body, input, select, textarea {
- font-size: 12pt;
- }
-
- /* BG */
-
- @include bg(_misc(bg-width) * 0.5);
-
- }
-
-/* Mobile */
-
- @include breakpoint('<=mobile') {
-
- /* Basic */
-
- body {
- min-width: 320px;
- }
-
- body, input, select, textarea {
- font-size: 11pt;
- }
-
- /* BG */
-
- @include bg(_misc(bg-width) * 0.2);
-
- /* Header */
-
- #header {
- h1 {
- font-size: 2.5em;
- }
-
- p {
- font-size: 1em;
- }
-
- nav {
- font-size: 1em;
-
- a {
- &:hover {
- font-size: 1em;
- }
-
- &:active {
- font-size: 1em;
- }
- }
- }
- }
-
- }
-
-/* Mobile (Portrait) */
-
- @include breakpoint('<=mobilep') {
-
- /* BG */
-
- @include bg(_misc(bg-width) * 0.275);
-
- /* Header */
-
- #header {
- nav {
- padding: 0 1em;
- }
- }
-
- }
\ No newline at end of file
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'fontawesome-all.min.css';
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600');
+
+/*
+ Dimension by HTML5 UP
+ html5up.net | @ajlkn
+ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+// Breakpoints.
+
+ @include breakpoints((
+ xlarge: ( 1281px, 1680px ),
+ large: ( 981px, 1280px ),
+ medium: ( 737px, 980px ),
+ small: ( 481px, 736px ),
+ xsmall: ( 361px, 480px ),
+ xxsmall: ( null, 360px )
+ ));
+
+// Base.
+
+ @import 'base/reset';
+ @import 'base/page';
+ @import 'base/typography';
+
+// Component.
+
+ @import 'components/form';
+ @import 'components/box';
+ @import 'components/icon';
+ @import 'components/image';
+ @import 'components/list';
+ @import 'components/actions';
+ @import 'components/icons';
+ @import 'components/table';
+ @import 'components/button';
+
+// Layout.
+
+ @import 'layout/bg';
+ @import 'layout/wrapper';
+ @import 'layout/header';
+ @import 'layout/main';
+ @import 'layout/footer';
\ No newline at end of file
diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss
index 1c73c3c..b101db7 100644
--- a/assets/sass/noscript.scss
+++ b/assets/sass/noscript.scss
@@ -1,35 +1,50 @@
-@import 'libs/vars';
-@import 'libs/functions';
-@import 'libs/mixins';
-@import 'libs/vendor';
-@import 'libs/breakpoints';
-
-/*
- Aerial by HTML5 UP
- html5up.net | @ajlkn
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-*/
-
-/* Wrapper */
-
- #wrapper {
- opacity: 1 !important;
- }
-
-/* Overlay */
-
- #overlay {
- opacity: 1 !important;
- }
-
-/* Header */
-
- #header {
- opacity: 1 !important;
-
- nav {
- li {
- opacity: 1 !important;
- }
- }
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+
+/*
+ Dimension by HTML5 UP
+ html5up.net | @ajlkn
+ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* BG */
+
+ #bg {
+ body.is-preload & {
+ &:before {
+ background-color: transparent;
+ }
+ }
+ }
+
+/* Header */
+
+ #header {
+ body.is-preload & {
+ > * {
+ opacity: 1;
+ }
+
+ @include vendor('filter', 'none');
+
+ .content {
+ .inner {
+ max-height: none;
+ padding: 3rem 2rem;
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+/* Main */
+
+ #main {
+ article {
+ opacity: 1;
+ margin: (_size(element-margin) * 2) 0 0 0;
+ }
}
\ No newline at end of file
diff --git a/images/bg.jpg b/images/bg.jpg
new file mode 100644
index 0000000..d27f914
Binary files /dev/null and b/images/bg.jpg differ
diff --git a/images/overlay.png b/images/overlay.png
new file mode 100644
index 0000000..3cd22cc
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..2c4200c
Binary files /dev/null and b/images/pic01.jpg differ
diff --git a/images/pic02.jpg b/images/pic02.jpg
new file mode 100644
index 0000000..34ac5e8
Binary files /dev/null and b/images/pic02.jpg differ
diff --git a/images/pic03.jpg b/images/pic03.jpg
new file mode 100644
index 0000000..db24317
Binary files /dev/null and b/images/pic03.jpg differ
diff --git a/index.html b/index.html
index b1b03e6..94529a5 100644
--- a/index.html
+++ b/index.html
@@ -1,49 +1,362 @@
-
Aerial by HTML5 UP
+
Dimension by HTML5 UP
-
+
-
-
-
-
+
+
+
+
+
+
+
+
+ Intro
+ Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my awesome work .
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.
+
+
+
+
+ Work
+ Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.
+ Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus.
+
+
+
+
+ About
+ Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.
+
+
+
+
+ Contact
+
+
+
+
+
+
+ Elements
+
+
+ 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 2
+ Heading Level 3
+ Heading Level 4
+ Heading Level 5
+ Heading Level 6
+ Blockquote
+ Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
+ Preformatted
+ i = 0;
+
+while (!deck.isInOrder()) {
+ print 'Iteration ' + i;
+ deck.shuffle();
+ i++;
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';
+
+
+ Lists
+
+ Unordered
+
+ Dolor pulvinar etiam.
+ Sagittis adipiscing.
+ Felis enim feugiat.
+
+
+ Alternate
+
+ Dolor pulvinar etiam.
+ Sagittis adipiscing.
+ Felis enim feugiat.
+
+
+ Ordered
+
+ Dolor pulvinar etiam.
+ Etiam vel felis viverra.
+ Felis enim feugiat.
+ Dolor pulvinar etiam.
+ Etiam vel felis lorem.
+ Felis enim et feugiat.
+
+ Icons
+
+
+ Actions
+
+
+
+
+
+ Table
+ Default
+
+
+
+
+ Name
+ Description
+ Price
+
+
+
+
+ Item One
+ Ante turpis integer aliquet porttitor.
+ 29.99
+
+
+ Item Two
+ Vis ac commodo adipiscing arcu aliquet.
+ 19.99
+
+
+ Item Three
+ Morbi faucibus arcu accumsan lorem.
+ 29.99
+
+
+ Item Four
+ Vitae integer tempus condimentum.
+ 19.99
+
+
+ Item Five
+ Ante turpis integer aliquet porttitor.
+ 29.99
+
+
+
+
+ 100.00
+
+
+
+
Alternate
+
+
+
+
+ Name
+ Description
+ Price
+
+
+
+
+ Item One
+ Ante turpis integer aliquet porttitor.
+ 29.99
+
+
+ Item Two
+ Vis ac commodo adipiscing arcu aliquet.
+ 19.99
+
+
+ Item Three
+ Morbi faucibus arcu accumsan lorem.
+ 29.99
+
+
+ Item Four
+ Vitae integer tempus condimentum.
+ 19.99
+
+
+ Item Five
+ Ante turpis integer aliquet porttitor.
+ 29.99
+
+
+
+
+ 100.00
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
-
\ No newline at end of file
+
+ 
