{{ post.title }}
-{{ post.description }}
-Autonomic
- -Autonomic
+ +
-
- Autonomic is a co-operative
-
+
Autonomic is a co-operative
- that is owned and run by its workers
- We are committed to a set of core values to build progressive technologies
and
+
+
+ Autonomic is a co-operative
+
-
+ Autonomic is a co-operative
+ that is owned and run by its workers
+ We are committed to a set of core values to build progressive technologies
and
infrastructure that empower users to make a positive impact on the world
-
-
- - - Sustainability - -
- - - Transparency - -
- - - Privacy - -
-
+
- + + Sustainability + +
- + + Transparency + +
- + + Privacy + +
-
-
+
Services we offer
-We design intergrated infrastructure tailored to your needs utilising technologies from
the
+
+
+
-
+ Services we offer
+We design intergrated infrastructure tailored to your needs utilising technologies from
the
best free and open source software projects available. Your data under your control.
Here are some examples of the
applications we have deployed for our clients (insert link to clients page).
-
-
-
-
Encrypted Email Server
-Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
-
- -
-
Rocket.Chat
-Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
-
- -
-
Visual Data
-Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
-
- -
-
Mumble Voice Chat
-Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
-
- -
-
Discourse Forum
-Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
-
- -
-
Interactive Mapping
-Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
-
-
-
+
-
+
Encrypted Email Server
+Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
+
+ -
+
Rocket.Chat
+Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
+
+ -
+
Visual Data
+Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
+
+ -
+
Mumble Voice Chat
+Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
+
+ -
+
Discourse Forum
+Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
+
+ -
+
Interactive Mapping
+Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.
+
+
{% if post.image %}
{% endif %}
-
-
- {% if post.image %}{% endif %}
+
+
+ {{ post.title }}
+{{ post.description }}
+{% if page.image %}
{% endif %}
-
-
- {{ page.title }}
-{{ page.description }}
-{% if page.image %}{% endif %}
+
+
+ {{ page.title }}
+{{ page.description }}
+')
- .append(i.clone())
- .remove()
- .html()
- .replace(/type="password"/i, 'type="text"')
- .replace(/type=password/i, 'type=text')
- );
+ 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('id') != '')
+ x.attr('id', i.attr('id') + '-polyfill-field');
- if (i.attr('name') != '')
- x.attr('name', i.attr('name') + '-polyfill-field');
+ if (i.attr('name') != '')
+ x.attr('name', i.attr('name') + '-polyfill-field');
- x.addClass('polyfill-placeholder')
- .val(x.attr('placeholder')).insertAfter(i);
+ x.addClass('polyfill-placeholder')
+ .val(x.attr('placeholder')).insertAfter(i);
- if (i.val() == '')
- i.hide();
- else
- x.hide();
+ if (i.val() == '')
+ i.hide();
+ else
+ x.hide();
- i
- .on('blur', function(event) {
+ i
+ .on('blur', function(event) {
- event.preventDefault();
+ event.preventDefault();
- var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
+ var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
- if (i.val() == '') {
+ if (i.val() == '') {
- i.hide();
- x.show();
+ i.hide();
+ x.show();
- }
+ }
- });
+ });
- x
- .on('focus', function(event) {
+ x
+ .on('focus', function(event) {
- event.preventDefault();
+ event.preventDefault();
- var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
+ var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
- x.hide();
+ x.hide();
- i
- .show()
- .focus();
+ i
+ .show()
+ .focus();
- })
- .on('keypress', function(event) {
+ })
+ .on('keypress', function(event) {
- event.preventDefault();
- x.val('');
+ event.preventDefault();
+ x.val('');
- });
+ });
- });
+ });
- // Events.
- $this
- .on('submit', function() {
+ // Events.
+ $this
+ .on('submit', function() {
- $this.find('input[type=text],input[type=password],textarea')
- .each(function(event) {
+ $this.find('input[type=text],input[type=password],textarea')
+ .each(function(event) {
- var i = $(this);
+ var i = $(this);
- if (i.attr('name').match(/-polyfill-field$/))
- i.attr('name', '');
+ if (i.attr('name').match(/-polyfill-field$/))
+ i.attr('name', '');
- if (i.val() == i.attr('placeholder')) {
+ if (i.val() == i.attr('placeholder')) {
- i.removeClass('polyfill-placeholder');
- i.val('');
+ i.removeClass('polyfill-placeholder');
+ i.val('');
- }
+ }
- });
+ });
- })
- .on('reset', function(event) {
+ })
+ .on('reset', function(event) {
- event.preventDefault();
+ event.preventDefault();
- $this.find('select')
- .val($('option:first').val());
+ $this.find('select')
+ .val($('option:first').val());
- $this.find('input,textarea')
- .each(function() {
+ $this.find('input,textarea')
+ .each(function() {
- var i = $(this),
- x;
+ var i = $(this),
+ x;
- i.removeClass('polyfill-placeholder');
+ i.removeClass('polyfill-placeholder');
- switch (this.type) {
+ switch (this.type) {
- case 'submit':
- case 'reset':
- break;
+ case 'submit':
+ case 'reset':
+ break;
- case 'password':
- i.val(i.attr('defaultValue'));
+ case 'password':
+ i.val(i.attr('defaultValue'));
- x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
+ x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
- if (i.val() == '') {
- i.hide();
- x.show();
- }
- else {
- i.show();
- x.hide();
- }
+ if (i.val() == '') {
+ i.hide();
+ x.show();
+ }
+ else {
+ i.show();
+ x.hide();
+ }
- break;
+ break;
- case 'checkbox':
- case 'radio':
- i.attr('checked', i.attr('defaultValue'));
- break;
+ case 'checkbox':
+ case 'radio':
+ i.attr('checked', i.attr('defaultValue'));
+ break;
- case 'text':
- case 'textarea':
- i.val(i.attr('defaultValue'));
+ case 'text':
+ case 'textarea':
+ i.val(i.attr('defaultValue'));
- if (i.val() == '') {
- i.addClass('polyfill-placeholder');
- i.val(i.attr('placeholder'));
- }
+ if (i.val() == '') {
+ i.addClass('polyfill-placeholder');
+ i.val(i.attr('placeholder'));
+ }
- break;
+ break;
- default:
- i.val(i.attr('defaultValue'));
- break;
+ default:
+ i.val(i.attr('defaultValue'));
+ break;
- }
- });
+ }
+ });
- });
+ });
- return $this;
+ 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) {
+ /**
+ * 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';
+ var key = '__prioritize';
- // Expand $elements if it's not already a jQuery object.
- if (typeof $elements != 'jQuery')
- $elements = $($elements);
+ // Expand $elements if it's not already a jQuery object.
+ if (typeof $elements != 'jQuery')
+ $elements = $($elements);
- // Step through elements.
- $elements.each(function() {
+ // Step through elements.
+ $elements.each(function() {
- var $e = $(this), $p,
- $parent = $e.parent();
+ var $e = $(this), $p,
+ $parent = $e.parent();
- // No parent? Bail.
- if ($parent.length == 0)
- return;
+ // No parent? Bail.
+ if ($parent.length == 0)
+ return;
- // Not moved? Move it.
- if (!$e.data(key)) {
+ // Not moved? Move it.
+ if (!$e.data(key)) {
- // Condition is false? Bail.
- if (!condition)
- return;
+ // 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();
+ // 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;
+ // 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);
+ // Move element to top of parent.
+ $e.prependTo($parent);
- // Mark element as moved.
- $e.data(key, $p);
+ // Mark element as moved.
+ $e.data(key, $p);
- }
+ }
- // Moved already?
- else {
+ // Moved already?
+ else {
- // Condition is true? Bail.
- if (condition)
- return;
+ // Condition is true? Bail.
+ if (condition)
+ return;
- $p = $e.data(key);
+ $p = $e.data(key);
- // Move element back to its original location (using our placeholder).
- $e.insertAfter($p);
+ // Move element back to its original location (using our placeholder).
+ $e.insertAfter($p);
- // Unmark element as moved.
- $e.removeData(key);
+ // Unmark element as moved.
+ $e.removeData(key);
- }
+ }
- });
+ });
- };
+ };
})(jQuery);
\ No newline at end of file
diff --git a/src/assets/styles/components/_banner.scss b/src/assets/styles/components/_banner.scss
index 2d936cc..6557b3d 100644
--- a/src/assets/styles/components/_banner.scss
+++ b/src/assets/styles/components/_banner.scss
@@ -2,87 +2,87 @@
/* Banner */
#banner {
- @include vendor('display', 'flex');
- @include vendor('flex-direction', 'column');
- @include vendor('justify-content', 'center');
- cursor: default;
- height: 100vh;
- min-height: 35em;
- overflow: hidden;
- position: relative;
- text-align: center;
+ @include vendor('display', 'flex');
+ @include vendor('flex-direction', 'column');
+ @include vendor('justify-content', 'center');
+ cursor: default;
+ height: 100vh;
+ min-height: 35em;
+ overflow: hidden;
+ position: relative;
+ text-align: center;
- h2 {
- @include vendor('transform', 'scale(1)');
- @include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease'));
- display: inline-block;
- font-size: 1.75em;
- opacity: 1;
- padding: 0.35em 1em;
- position: relative;
- z-index: 1;
+ h2 {
+ @include vendor('transform', 'scale(1)');
+ @include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease'));
+ display: inline-block;
+ font-size: 1.75em;
+ opacity: 1;
+ padding: 0.35em 1em;
+ position: relative;
+ z-index: 1;
- &:before, &:after {
- @include vendor('transition', 'width 1s ease');
- @include vendor('transition-delay', '0.25s');
- background: _palette(fg-bold);
- content: '';
- display: block;
- height: 2px;
- position: absolute;
- width: 100%;
- }
+ &:before, &:after {
+ @include vendor('transition', 'width 1s ease');
+ @include vendor('transition-delay', '0.25s');
+ background: _palette(fg-bold);
+ content: '';
+ display: block;
+ height: 2px;
+ position: absolute;
+ width: 100%;
+ }
- &:before {
- top: 0;
- left: 0;
- }
+ &:before {
+ top: 0;
+ left: 0;
+ }
- &:after {
- bottom: 0;
- right: 0;
- }
- }
+ &:after {
+ bottom: 0;
+ right: 0;
+ }
+ }
- h1 {
- @include vendor('transition', 'opacity 0.5s ease');
- @include vendor('transition-delay', '1s');
- margin-bottom: 25px;
- opacity: 1;
+ h1 {
+ @include vendor('transition', 'opacity 0.5s ease');
+ @include vendor('transition-delay', '1s');
+ margin-bottom: 25px;
+ opacity: 1;
- a {
- color: inherit;
- }
- }
+ a {
+ color: inherit;
+ }
+ }
- @include breakpoint(small) {
- @include padding(7em, 3em);
- height: auto;
- min-height: 0;
+ @include breakpoint(small) {
+ @include padding(7em, 3em);
+ height: auto;
+ min-height: 0;
- h2 {
- font-size: 1.25em;
- }
+ h2 {
+ font-size: 1.25em;
+ }
- br {
- display: none;
- }
- }
+ br {
+ display: none;
+ }
+ }
}
body.is-loading {
- #banner {
- h1 {
- opacity: 0;
- }
+ #banner {
+ h1 {
+ opacity: 0;
+ }
- h2 {
- @include vendor('transform', 'scale(0.95)');
- opacity: 0;
+ h2 {
+ @include vendor('transform', 'scale(0.95)');
+ opacity: 0;
- &:before, &:after {
- width: 0;
- }
- }
- }
+ &:before, &:after {
+ width: 0;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_basic.scss b/src/assets/styles/components/_basic.scss
index 0fe1789..0720a1b 100644
--- a/src/assets/styles/components/_basic.scss
+++ b/src/assets/styles/components/_basic.scss
@@ -2,234 +2,234 @@
/* Basic */
@-ms-viewport {
- width: device-width;
+ width: device-width;
}
body {
- background: _palette(bg);
+ background: _palette(bg);
- &.is-loading {
- *, *:before, *:after {
- @include vendor('animation', 'none !important');
- @include vendor('transition', 'none !important');
- }
- }
+ &.is-loading {
+ *, *:before, *:after {
+ @include vendor('animation', 'none !important');
+ @include vendor('transition', 'none !important');
+ }
+ }
}
body, input, select, textarea {
- color: _palette(fg);
- font-family: _font(family);
- font-size: 15pt;
- font-weight: _font(weight);
- letter-spacing: _size(letter-spacing);
- line-height: 1.65em;
+ color: _palette(fg);
+ font-family: _font(family);
+ font-size: 15pt;
+ font-weight: _font(weight);
+ letter-spacing: _size(letter-spacing);
+ line-height: 1.65em;
- @include breakpoint(xlarge) {
- font-size: 13pt;
- }
+ @include breakpoint(xlarge) {
+ font-size: 13pt;
+ }
- @include breakpoint(large) {
- font-size: 12pt;
- }
+ @include breakpoint(large) {
+ font-size: 12pt;
+ }
- @include breakpoint(small) {
- font-size: 11pt;
- letter-spacing: _size(letter-spacing) * 0.5;
- }
+ @include breakpoint(small) {
+ font-size: 11pt;
+ letter-spacing: _size(letter-spacing) * 0.5;
+ }
}
a {
- @include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease'));
- border-bottom: dotted 1px;
- color: inherit;
- text-decoration: none;
+ @include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease'));
+ border-bottom: dotted 1px;
+ color: inherit;
+ text-decoration: none;
- &:hover {
- border-bottom-color: transparent;
- }
+ &:hover {
+ border-bottom-color: transparent;
+ }
}
strong, b {
- color: _palette(fg-bold);
- font-weight: _font(weight-bold);
+ color: _palette(fg-bold);
+ font-weight: _font(weight-bold);
}
em, i {
- font-style: italic;
+ font-style: italic;
}
p {
- margin: 0 0 _size(element-margin) 0;
+ margin: 0 0 _size(element-margin) 0;
}
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
- color: _palette(fg-bold);
- font-weight: _font(weight-extrabold);
- letter-spacing: _size(letter-spacing-alt);
- line-height: 1em;
- margin: 0 0 (_size(element-margin) * 0.5) 0;
- text-transform: uppercase;
+ color: _palette(fg-bold);
+ font-weight: _font(weight-extrabold);
+ letter-spacing: _size(letter-spacing-alt);
+ line-height: 1em;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ text-transform: uppercase;
- a {
- color: inherit;
- text-decoration: none;
- }
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
}
h2,
.h2 {
- font-size: 1.35em;
- line-height: 1.4;
+ font-size: 1.35em;
+ line-height: 1.4;
- @include breakpoint(small) {
- font-size: 1.1em;
- }
+ @include breakpoint(small) {
+ font-size: 1.1em;
+ }
}
.h3,
h3 {
- font-size: 1.15em;
- line-height: 1.4;
+ font-size: 1.15em;
+ line-height: 1.4;
- @include breakpoint(small) {
- font-size: 1em;
- }
+ @include breakpoint(small) {
+ font-size: 1em;
+ }
}
.h4,
h4 {
- font-size: 1em;
- line-height: 1.5em;
+ font-size: 1em;
+ line-height: 1.5em;
}
.h5,
h5 {
- font-size: 0.8em;
- line-height: 1.5em;
+ font-size: 0.8em;
+ line-height: 1.5em;
}
.h6,
h6 {
- font-size: 0.7em;
- line-height: 1.5em;
+ font-size: 0.7em;
+ line-height: 1.5em;
}
sub {
- font-size: 0.8em;
- position: relative;
- top: 0.5em;
+ font-size: 0.8em;
+ position: relative;
+ top: 0.5em;
}
sup {
- font-size: 0.8em;
- position: relative;
- top: -0.5em;
+ font-size: 0.8em;
+ position: relative;
+ top: -0.5em;
}
hr {
- border: 0;
- border-bottom: solid 2px _palette(border);
- margin: (_size(element-margin) * 1.5) 0;
+ border: 0;
+ border-bottom: solid 2px _palette(border);
+ margin: (_size(element-margin) * 1.5) 0;
- &.major {
- margin: (_size(element-margin) * 2.25) 0;
- }
+ &.major {
+ margin: (_size(element-margin) * 2.25) 0;
+ }
}
blockquote {
- border-left: solid 4px _palette(border);
- font-style: italic;
- margin: 0 0 _size(element-margin) 0;
- padding: 0.5em 0 0.5em 2em;
+ border-left: solid 4px _palette(border);
+ font-style: italic;
+ margin: 0 0 _size(element-margin) 0;
+ padding: 0.5em 0 0.5em 2em;
}
code {
- background: _palette(border-bg);
- border-radius: 3px;
- font-family: _font(family-fixed);
- font-size: 0.9em;
- letter-spacing: 0;
- margin: 0 0.25em;
- padding: 0.25em 0.65em;
+ background: _palette(border-bg);
+ border-radius: 3px;
+ font-family: _font(family-fixed);
+ font-size: 0.9em;
+ letter-spacing: 0;
+ margin: 0 0.25em;
+ padding: 0.25em 0.65em;
}
pre {
- -webkit-overflow-scrolling: touch;
- font-family: _font(family-fixed);
- font-size: 0.9em;
- margin: 0 0 _size(element-margin) 0;
+ -webkit-overflow-scrolling: touch;
+ font-family: _font(family-fixed);
+ font-size: 0.9em;
+ margin: 0 0 _size(element-margin) 0;
- code {
- display: block;
- line-height: 1.75em;
- padding: 1em 1.5em;
- overflow-x: auto;
- }
+ code {
+ display: block;
+ line-height: 1.75em;
+ padding: 1em 1.5em;
+ overflow-x: auto;
+ }
}
.align-left {
- text-align: left;
+ text-align: left;
}
.align-center {
- text-align: center;
+ text-align: center;
}
.align-right {
- text-align: right;
+ text-align: right;
}
header {
- p {
- color: _palette(fg-light);
- position: relative;
- top: -0.25em;
- }
+ p {
+ color: _palette(fg-light);
+ position: relative;
+ top: -0.25em;
+ }
- h2 + p {
- }
+ h2 + p {
+ }
- h3 + p {
- font-size: 1.1em;
- }
+ h3 + p {
+ font-size: 1.1em;
+ }
- h4 + p,
- h5 + p,
- h6 + p {
- font-size: 0.9em;
- }
+ h4 + p,
+ h5 + p,
+ h6 + p {
+ font-size: 0.9em;
+ }
- &.major {
- margin: 0 0 (_size(element-margin) * 1.75) 0;
+ &.major {
+ margin: 0 0 (_size(element-margin) * 1.75) 0;
- h2, h3, h4, h5, h6 {
- border-bottom: solid 2px _palette(border);
- display: inline-block;
- padding-bottom: 1em;
- position: relative;
+ h2, h3, h4, h5, h6 {
+ border-bottom: solid 2px _palette(border);
+ display: inline-block;
+ padding-bottom: 1em;
+ position: relative;
- &:after {
- content: '';
- display: block;
- height: 1px;
- }
- }
+ &:after {
+ content: '';
+ display: block;
+ height: 1px;
+ }
+ }
- p {
- color: _palette(fg);
- top: 0;
- }
+ p {
+ color: _palette(fg);
+ top: 0;
+ }
- @include breakpoint(small) {
- margin: 0 0 _size(element-margin) 0;
- }
- }
+ @include breakpoint(small) {
+ margin: 0 0 _size(element-margin) 0;
+ }
+ }
- @include breakpoint(medium) {
- br {
- display: none;
- }
- }
+ @include breakpoint(medium) {
+ br {
+ display: none;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_box.scss b/src/assets/styles/components/_box.scss
index 146a4a6..98d5cf2 100644
--- a/src/assets/styles/components/_box.scss
+++ b/src/assets/styles/components/_box.scss
@@ -2,70 +2,70 @@
/* Box */
.box {
- border-radius: 3px;
- border: solid 2px _palette(border);
- margin-bottom: _size(element-margin);
- padding: 1.5em;
+ border-radius: 3px;
+ border: solid 2px _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;
- }
+ > :last-child,
+ > :last-child > :last-child,
+ > :last-child > :last-child > :last-child {
+ margin-bottom: 0;
+ }
- &.alt {
- border: 0;
- border-radius: 0;
- padding: 0;
- }
+ &.alt {
+ border: 0;
+ border-radius: 0;
+ padding: 0;
+ }
}
/* Icon */
.icon {
- @include icon;
- border-bottom: none;
- position: relative;
+ @include icon;
+ border-bottom: none;
+ position: relative;
- > .label {
- display: none;
- }
+ > .label {
+ display: none;
+ }
- &.major {
- @include vendor('transform', 'rotate(-45deg)');
- border-radius: 3px;
- border: solid 2px _palette(border);
- display: inline-block;
- font-size: 1.35em;
- height: calc(3em + 2px);
- line-height: 3em;
- text-align: center;
- width: calc(3em + 2px);
+ &.major {
+ @include vendor('transform', 'rotate(-45deg)');
+ border-radius: 3px;
+ border: solid 2px _palette(border);
+ display: inline-block;
+ font-size: 1.35em;
+ height: calc(3em + 2px);
+ line-height: 3em;
+ text-align: center;
+ width: calc(3em + 2px);
- &:before {
- @include vendor('transform', 'rotate(45deg)');
- display: inline-block;
- font-size: 1.5em;
- }
+ &:before {
+ @include vendor('transform', 'rotate(45deg)');
+ display: inline-block;
+ font-size: 1.5em;
+ }
- @include breakpoint(small) {
- font-size: 1em;
- }
- }
+ @include breakpoint(small) {
+ font-size: 1em;
+ }
+ }
- &.style1 {
- color: _palette(bg);
- }
+ &.style1 {
+ color: _palette(bg);
+ }
- &.style2 {
- color: _palette(accent2, bg);
- }
+ &.style2 {
+ color: _palette(accent2, bg);
+ }
- &.style3 {
- color: _palette(accent3, bg);
- }
-
- &.style4 {
- color: _palette(accent4, bg);
- }
+ &.style3 {
+ color: _palette(accent3, bg);
+ }
+
+ &.style4 {
+ color: _palette(accent4, bg);
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_button.scss b/src/assets/styles/components/_button.scss
index e7eddcd..8c855f4 100644
--- a/src/assets/styles/components/_button.scss
+++ b/src/assets/styles/components/_button.scss
@@ -6,78 +6,78 @@ input[type="reset"],
input[type="button"],
button,
.button {
- @include vendor('appearance', 'none');
- @include vendor('transition', ('background-color #{_duration(transitions)} ease-in-out', 'color #{_duration(transitions)} ease-in-out'));
- background-color: transparent;
- border-radius: 3px;
- border: 0;
- box-shadow: inset 0 0 0 2px _palette(border);
- color: _palette(fg-bold);
- cursor: pointer;
- display: inline-block;
- font-size: 0.8em;
- font-weight: _font(weight-bold);
- height: 3.125em;
- letter-spacing: _size(letter-spacing-alt);
- line-height: 3.125em;
- padding: 0 2.75em;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ @include vendor('appearance', 'none');
+ @include vendor('transition', ('background-color #{_duration(transitions)} ease-in-out', 'color #{_duration(transitions)} ease-in-out'));
+ background-color: transparent;
+ border-radius: 3px;
+ border: 0;
+ box-shadow: inset 0 0 0 2px _palette(border);
+ color: _palette(fg-bold);
+ cursor: pointer;
+ display: inline-block;
+ font-size: 0.8em;
+ font-weight: _font(weight-bold);
+ height: 3.125em;
+ letter-spacing: _size(letter-spacing-alt);
+ line-height: 3.125em;
+ padding: 0 2.75em;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
- &:hover {
- background-color: _palette(border-bg);
- }
+ &:hover {
+ background-color: _palette(border-bg);
+ }
- &:active {
- background-color: _palette(border2-bg);
- }
+ &:active {
+ background-color: _palette(border2-bg);
+ }
- &.icon {
- &:before {
- margin-right: 0.5em;
- }
- }
+ &.icon {
+ &:before {
+ margin-right: 0.5em;
+ }
+ }
- &.fit {
- display: block;
- margin: 0 0 (_size(element-margin) * 0.5) 0;
- width: 100%;
- }
+ &.fit {
+ display: block;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ width: 100%;
+ }
- &.small {
- font-size: 0.8em;
- }
+ &.small {
+ font-size: 0.8em;
+ }
- &.big {
- font-size: 1.35em;
- }
+ &.big {
+ font-size: 1.35em;
+ }
- &.special {
- background-color: _palette(accent3, bg);
- box-shadow: none !important;
- color: _palette(accent3, fg-bold) !important;
+ &.special {
+ background-color: _palette(accent3, bg);
+ box-shadow: none !important;
+ color: _palette(accent3, fg-bold) !important;
- &:hover {
- background-color: lighten(_palette(accent3, bg), 5) !important;
- }
+ &:hover {
+ background-color: lighten(_palette(accent3, bg), 5) !important;
+ }
- &:active {
- background-color: darken(_palette(accent3, bg), 5) !important;
- }
- }
+ &:active {
+ background-color: darken(_palette(accent3, bg), 5) !important;
+ }
+ }
- &.disabled,
- &:disabled {
- @include vendor('pointer-events', 'none');
- opacity: 0.25;
- }
+ &.disabled,
+ &:disabled {
+ @include vendor('pointer-events', 'none');
+ opacity: 0.25;
+ }
- @include breakpoint(small) {
- height: 3.75em;
- line-height: 3.75em;
- }
+ @include breakpoint(small) {
+ height: 3.75em;
+ line-height: 3.75em;
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_cta.scss b/src/assets/styles/components/_cta.scss
index 55e7349..94d8c67 100644
--- a/src/assets/styles/components/_cta.scss
+++ b/src/assets/styles/components/_cta.scss
@@ -5,46 +5,46 @@
/* CTA */
#cta {
- .inner {
- @include vendor('display', 'flex');
- max-width: 45em;
+ .inner {
+ @include vendor('display', 'flex');
+ max-width: 45em;
- header {
- @include vendor('order', '1');
- padding-right: 3em;
- width: 70%;
+ header {
+ @include vendor('order', '1');
+ padding-right: 3em;
+ width: 70%;
- p {
- color: inherit;
- }
- }
+ p {
+ color: inherit;
+ }
+ }
- .actions {
- @include vendor('order', '2');
- width: 30%;
- }
+ .actions {
+ @include vendor('order', '2');
+ width: 30%;
+ }
- @include breakpoint(medium) {
- display: block;
- text-align: center;
+ @include breakpoint(medium) {
+ display: block;
+ text-align: center;
- header {
- padding-right: 0;
- width: 100%;
- }
+ header {
+ padding-right: 0;
+ width: 100%;
+ }
- .actions {
- margin-left: auto;
- margin-right: auto;
- max-width: 20em;
- width: 100%;
- }
- }
+ .actions {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 20em;
+ width: 100%;
+ }
+ }
- @include breakpoint(small) {
- .actions {
- max-width: none;
- }
- }
- }
+ @include breakpoint(small) {
+ .actions {
+ max-width: none;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_features.scss b/src/assets/styles/components/_features.scss
index ff08bfd..5260d8f 100644
--- a/src/assets/styles/components/_features.scss
+++ b/src/assets/styles/components/_features.scss
@@ -2,74 +2,74 @@
/* Features */
.features {
- @include vendor('display', 'flex');
- @include vendor('flex-wrap', 'wrap');
- @include vendor('justify-content', 'center');
- list-style: none;
- padding: 0;
- width: 100%;
+ @include vendor('display', 'flex');
+ @include vendor('flex-wrap', 'wrap');
+ @include vendor('justify-content', 'center');
+ list-style: none;
+ padding: 0;
+ width: 100%;
- li {
- @include padding(4em, 4em, (0,0,0,2em));
- display: block;
- position: relative;
- text-align: left;
- width: 50%;
+ li {
+ @include padding(4em, 4em, (0,0,0,2em));
+ display: block;
+ position: relative;
+ text-align: left;
+ width: 50%;
- @for $i from 1 through _misc(max-features) {
- $j: 0.035 * $i;
+ @for $i from 1 through _misc(max-features) {
+ $j: 0.035 * $i;
- &:nth-child(#{$i}) {
- background-color: rgba(0,0,0, $j);
- }
- }
+ &:nth-child(#{$i}) {
+ background-color: rgba(0,0,0, $j);
+ }
+ }
- &:before {
- display: block;
- color: _palette(accent1, bg);
- position: absolute;
- left: 1.75em;
- top: 2.75em;
- font-size: 1.5em;
- }
+ &:before {
+ display: block;
+ color: _palette(accent1, bg);
+ position: absolute;
+ left: 1.75em;
+ top: 2.75em;
+ font-size: 1.5em;
+ }
- &:nth-child(1) {
- border-top-left-radius: 3px;
- }
+ &:nth-child(1) {
+ border-top-left-radius: 3px;
+ }
- &:nth-child(2) {
- border-top-right-radius: 3px;
- }
+ &:nth-child(2) {
+ border-top-right-radius: 3px;
+ }
- &:nth-last-child(1) {
- border-bottom-right-radius: 3px;
- }
+ &:nth-last-child(1) {
+ border-bottom-right-radius: 3px;
+ }
- &:nth-last-child(2) {
- border-bottom-left-radius: 3px;
- }
+ &:nth-last-child(2) {
+ border-bottom-left-radius: 3px;
+ }
- @include breakpoint(medium) {
- @include padding(3em, 2em);
- text-align: center;
+ @include breakpoint(medium) {
+ @include padding(3em, 2em);
+ text-align: center;
- &:before {
- left: 0;
- margin: 0 0 (_size(element-margin) * 0.5) 0;
- position: relative;
- top: 0;
- }
- }
+ &:before {
+ left: 0;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ position: relative;
+ top: 0;
+ }
+ }
- @include breakpoint(small) {
- @include padding(3em, 0);
- background-color: transparent !important;
- border-top: solid 2px _palette(border);
- width: 100%;
+ @include breakpoint(small) {
+ @include padding(3em, 0);
+ background-color: transparent !important;
+ border-top: solid 2px _palette(border);
+ width: 100%;
- &:first-child {
- border-top: 0;
- }
- }
- }
+ &:first-child {
+ border-top: 0;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_form.scss b/src/assets/styles/components/_form.scss
index b22f38b..3cbbf59 100644
--- a/src/assets/styles/components/_form.scss
+++ b/src/assets/styles/components/_form.scss
@@ -2,15 +2,15 @@
/* Form */
form {
- margin: 0 0 _size(element-margin) 0;
+ 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;
+ 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[type="text"],
@@ -18,149 +18,149 @@ input[type="password"],
input[type="email"],
select,
textarea {
- @include vendor('appearance', 'none');
- background: _palette(border-bg);
- border-radius: 3px;
- border: none;
- color: inherit;
- display: block;
- outline: 0;
- padding: 0 1em;
- text-decoration: none;
- width: 100%;
+ @include vendor('appearance', 'none');
+ background: _palette(border-bg);
+ border-radius: 3px;
+ border: none;
+ color: inherit;
+ display: block;
+ outline: 0;
+ padding: 0 1em;
+ text-decoration: none;
+ width: 100%;
- &:invalid {
- box-shadow: none;
- }
+ &:invalid {
+ box-shadow: none;
+ }
- &:focus {
- box-shadow: 0 0 0 2px _palette(accent1, bg);
- }
+ &:focus {
+ box-shadow: 0 0 0 2px _palette(accent1, bg);
+ }
}
.select-wrapper {
- @include icon;
- display: block;
- position: relative;
+ @include icon;
+ display: block;
+ position: relative;
- &:before {
- @include vendor('pointer-events', 'none');
- color: _palette(border);
- content: '\f078';
- display: block;
- height: _size(element-height);
- line-height: _size(element-height);
- position: absolute;
- right: 0;
- text-align: center;
- top: 0;
- width: _size(element-height);
- }
+ &:before {
+ @include vendor('pointer-events', 'none');
+ color: _palette(border);
+ content: '\f078';
+ display: block;
+ height: _size(element-height);
+ line-height: _size(element-height);
+ position: absolute;
+ right: 0;
+ text-align: center;
+ top: 0;
+ width: _size(element-height);
+ }
- select::-ms-expand {
- display: none;
- }
+ select::-ms-expand {
+ display: none;
+ }
}
input[type="text"],
input[type="password"],
input[type="email"],
select {
- height: _size(element-height);
+ height: _size(element-height);
}
textarea {
- padding: 0.75em 1em;
+ 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;
+ @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;
+ & + 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: 3px;
- 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);
- }
- }
+ &:before {
+ background: _palette(border-bg);
+ border-radius: 3px;
+ 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(bg);
- color: _palette(fg-bold);
- content: '\f00c';
- }
- }
+ &:checked + label {
+ &:before {
+ background: _palette(bg);
+ color: _palette(fg-bold);
+ content: '\f00c';
+ }
+ }
- &:focus + label {
- &:before {
- box-shadow: 0 0 0 2px _palette(accent1, bg);
- }
- }
+ &:focus + label {
+ &:before {
+ box-shadow: 0 0 0 2px _palette(accent1, bg);
+ }
+ }
}
input[type="checkbox"] {
- & + label {
- &:before {
- border-radius: 3px;
- }
- }
+ & + label {
+ &:before {
+ border-radius: 3px;
+ }
+ }
}
input[type="radio"] {
- & + label {
- &:before {
- border-radius: 100%;
- }
- }
+ & + label {
+ &:before {
+ border-radius: 100%;
+ }
+ }
}
::-webkit-input-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
}
:-moz-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
}
::-moz-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
}
:-ms-input-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
}
.formerize-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_header.scss b/src/assets/styles/components/_header.scss
index afa5278..014a2f1 100644
--- a/src/assets/styles/components/_header.scss
+++ b/src/assets/styles/components/_header.scss
@@ -2,104 +2,104 @@
/* Header */
#header {
- @include vendor('transition', 'background-color #{_duration(transitions)} ease');
- background: _palette(bg);
- height: 3em;
- left: 0;
- line-height: 3em;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: _misc(z-index-base);
+ @include vendor('transition', 'background-color #{_duration(transitions)} ease');
+ background: _palette(bg);
+ height: 3em;
+ left: 0;
+ line-height: 3em;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: _misc(z-index-base);
- h1 {
- @include vendor('transition', 'opacity #{_duration(transitions)} ease');
- height: inherit;
- left: 1.25em;
- line-height: inherit;
- position: absolute;
- top: 0;
+ h1 {
+ @include vendor('transition', 'opacity #{_duration(transitions)} ease');
+ height: inherit;
+ left: 1.25em;
+ line-height: inherit;
+ position: absolute;
+ top: 0;
- a {
- border: 0;
- display: block;
- height: inherit;
- line-height: inherit;
+ a {
+ border: 0;
+ display: block;
+ height: inherit;
+ line-height: inherit;
- @include breakpoint(small) {
- font-size: 0.8em;
- }
- }
- }
+ @include breakpoint(small) {
+ font-size: 0.8em;
+ }
+ }
+ }
- nav {
- height: inherit;
- line-height: inherit;
- position: absolute;
- right: 0;
- top: 0;
+ nav {
+ height: inherit;
+ line-height: inherit;
+ position: absolute;
+ right: 0;
+ top: 0;
- > ul {
- list-style: none;
- margin: 0;
- padding: 0;
- white-space: nowrap;
+ > ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ white-space: nowrap;
- > li {
- display: inline-block;
- padding: 0;
+ > li {
+ display: inline-block;
+ padding: 0;
- > a {
- border: 0;
- color: _palette(fg-bold);
- display: block;
- font-size: 0.8em;
- letter-spacing: _size(letter-spacing-alt);
- padding: 0 1.5em;
- text-transform: uppercase;
+ > a {
+ border: 0;
+ color: _palette(fg-bold);
+ display: block;
+ font-size: 0.8em;
+ letter-spacing: _size(letter-spacing-alt);
+ padding: 0 1.5em;
+ text-transform: uppercase;
- &.menuToggle {
- outline: 0;
- position: relative;
+ &.menuToggle {
+ outline: 0;
+ position: relative;
- &:after {
- background-image: url('images/bars.svg');
- background-position: right center;
- background-repeat: no-repeat;
- content: '';
- display: inline-block;
- height: 3.75em;
- vertical-align: top;
- width: 2em;
- }
+ &:after {
+ background-image: url('images/bars.svg');
+ background-position: right center;
+ background-repeat: no-repeat;
+ content: '';
+ display: inline-block;
+ height: 3.75em;
+ vertical-align: top;
+ width: 2em;
+ }
- @include breakpoint(small) {
- padding: 0 1.5em;
+ @include breakpoint(small) {
+ padding: 0 1.5em;
- span {
- display: none;
- }
- }
- }
+ span {
+ display: none;
+ }
+ }
+ }
- @include breakpoint(small) {
- padding: 0 0 0 1.5em;
- }
- }
+ @include breakpoint(small) {
+ padding: 0 0 0 1.5em;
+ }
+ }
- &:first-child {
- margin-left: 0;
- }
- }
- }
- }
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+ }
+ }
- &.alt {
- background: transparent;
+ &.alt {
+ background: transparent;
- h1 {
- @include vendor('pointer-events', 'none');
- opacity: 0;
- }
- }
+ h1 {
+ @include vendor('pointer-events', 'none');
+ opacity: 0;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_image.scss b/src/assets/styles/components/_image.scss
index cbad272..8029f16 100644
--- a/src/assets/styles/components/_image.scss
+++ b/src/assets/styles/components/_image.scss
@@ -2,44 +2,44 @@
/* Image */
.image {
- border-radius: 3px;
- border: 0;
- display: inline-block;
- position: relative;
+ border-radius: 3px;
+ border: 0;
+ display: inline-block;
+ position: relative;
- img {
- border-radius: 3px;
- display: block;
- }
+ img {
+ border-radius: 3px;
+ display: block;
+ }
- &.left {
- float: left;
- margin: 0 2em 2em 0;
- top: 0.25em;
- }
+ &.left {
+ float: left;
+ margin: 0 2em 2em 0;
+ top: 0.25em;
+ }
- &.right {
- float: right;
- margin: 0 0 2em 2em;
- top: 0.25em;
- }
+ &.right {
+ float: right;
+ margin: 0 0 2em 2em;
+ top: 0.25em;
+ }
- &.left,
- &.right {
- max-width: 40%;
+ &.left,
+ &.right {
+ max-width: 40%;
- img {
- width: 100%;
- }
- }
+ img {
+ width: 100%;
+ }
+ }
- &.fit {
- display: block;
- margin: 0 0 _size(element-margin) 0;
- width: 100%;
+ &.fit {
+ display: block;
+ margin: 0 0 _size(element-margin) 0;
+ width: 100%;
- img {
- width: 100%;
- }
- }
+ img {
+ width: 100%;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_list.scss b/src/assets/styles/components/_list.scss
index ee1fdfb..fab990d 100644
--- a/src/assets/styles/components/_list.scss
+++ b/src/assets/styles/components/_list.scss
@@ -2,218 +2,218 @@
/* List */
ol {
- list-style: decimal;
- margin: 0 0 _size(element-margin) 0;
- padding-left: 1.25em;
+ list-style: decimal;
+ margin: 0 0 _size(element-margin) 0;
+ padding-left: 1.25em;
- li {
- padding-left: 0.25em;
- }
+ li {
+ padding-left: 0.25em;
+ }
}
ul {
- list-style: disc;
- margin: 0 0 _size(element-margin) 0;
- padding-left: 1em;
+ list-style: disc;
+ margin: 0 0 _size(element-margin) 0;
+ padding-left: 1em;
- li {
- padding-left: 0.5em;
- }
+ li {
+ padding-left: 0.5em;
+ }
- &.alt {
- list-style: none;
- padding-left: 0;
+ &.alt {
+ list-style: none;
+ padding-left: 0;
- li {
- border-top: solid 1px _palette(border);
- padding: 0.5em 0;
+ li {
+ border-top: solid 1px _palette(border);
+ padding: 0.5em 0;
- &:first-child {
- border-top: 0;
- padding-top: 0;
- }
- }
- }
+ &:first-child {
+ border-top: 0;
+ padding-top: 0;
+ }
+ }
+ }
- &.icons {
- cursor: default;
- list-style: none;
- padding-left: 0;
+ &.icons {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
- li {
- display: inline-block;
- padding: 0 1em 0 0;
+ li {
+ display: inline-block;
+ padding: 0 1em 0 0;
- &:last-child {
- padding-right: 0;
- }
- }
+ &:last-child {
+ padding-right: 0;
+ }
+ }
- &.major {
- padding: 1em 0;
+ &.major {
+ padding: 1em 0;
- li {
- padding-right: 3.5em;
-
- &:last-child {
- padding-right: 0;
- }
+ li {
+ padding-right: 3.5em;
+
+ &:last-child {
+ padding-right: 0;
+ }
- @include breakpoint(small) {
- padding: 0 1em;
- }
- }
- }
+ @include breakpoint(small) {
+ padding: 0 1em;
+ }
+ }
+ }
- &.icons--flex {
- display: flex;
- justify-content: space-between;
- max-width: 980px;
- margin: auto;
- padding-left: 16px;
-
- li {
- flex-basis: 33.333%;
- padding-right: 0;
- }
+ &.icons--flex {
+ display: flex;
+ justify-content: space-between;
+ max-width: 980px;
+ margin: auto;
+ padding-left: 16px;
+
+ li {
+ flex-basis: 33.333%;
+ padding-right: 0;
+ }
- @include breakpoint(small) {
- display: block;
- padding: 0;
+ @include breakpoint(small) {
+ display: block;
+ padding: 0;
- li {
- display: block;
- margin: 40px 0;
- padding: 0;
- }
- }
-
- .icon {
- margin-right: 8px;
- }
- }
+ li {
+ display: block;
+ margin: 40px 0;
+ padding: 0;
+ }
+ }
+
+ .icon {
+ margin-right: 8px;
+ }
+ }
- .icons__title {
- display: block;
- @extend .h3;
- margin-top: 40px;
+ .icons__title {
+ display: block;
+ @extend .h3;
+ margin-top: 40px;
- @include breakpoint(small) {
- margin-top: 20px;
- }
- }
- }
+ @include breakpoint(small) {
+ margin-top: 20px;
+ }
+ }
+ }
- &.actions {
- cursor: default;
- list-style: none;
- padding-left: 0;
+ &.actions {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
- li {
- display: inline-block;
- padding: 0 (_size(element-margin) * 0.75) 0 0;
- vertical-align: middle;
+ li {
+ display: inline-block;
+ padding: 0 (_size(element-margin) * 0.75) 0 0;
+ vertical-align: middle;
- &:last-child {
- padding-right: 0;
- }
- }
+ &:last-child {
+ padding-right: 0;
+ }
+ }
- &.small {
- li {
- padding: 0 (_size(element-margin) * 0.375) 0 0;
- }
- }
+ &.small {
+ li {
+ padding: 0 (_size(element-margin) * 0.375) 0 0;
+ }
+ }
- &.vertical {
- li {
- display: block;
- padding: (_size(element-margin) * 0.75) 0 0 0;
+ &.vertical {
+ li {
+ display: block;
+ padding: (_size(element-margin) * 0.75) 0 0 0;
- &:first-child {
- padding-top: 0;
- }
+ &:first-child {
+ padding-top: 0;
+ }
- > * {
- margin-bottom: 0;
- }
- }
+ > * {
+ margin-bottom: 0;
+ }
+ }
- &.small {
- li {
- padding: (_size(element-margin) * 0.375) 0 0 0;
+ &.small {
+ li {
+ padding: (_size(element-margin) * 0.375) 0 0 0;
- &:first-child {
- padding-top: 0;
- }
- }
- }
- }
+ &:first-child {
+ padding-top: 0;
+ }
+ }
+ }
+ }
- &.fit {
- display: table;
- margin-left: (_size(element-margin) * -0.75);
- padding: 0;
- table-layout: fixed;
- width: calc(100% + #{(_size(element-margin) * 0.75)});
+ &.fit {
+ display: table;
+ margin-left: (_size(element-margin) * -0.75);
+ padding: 0;
+ table-layout: fixed;
+ width: calc(100% + #{(_size(element-margin) * 0.75)});
- li {
- display: table-cell;
- padding: 0 0 0 (_size(element-margin) * 0.75);
+ li {
+ display: table-cell;
+ padding: 0 0 0 (_size(element-margin) * 0.75);
- > * {
- margin-bottom: 0;
- }
- }
+ > * {
+ margin-bottom: 0;
+ }
+ }
- &.small {
- margin-left: (_size(element-margin) * -0.375);
- width: calc(100% + #{(_size(element-margin) * 0.375)});
+ &.small {
+ margin-left: (_size(element-margin) * -0.375);
+ width: calc(100% + #{(_size(element-margin) * 0.375)});
- li {
- padding: 0 0 0 (_size(element-margin) * 0.375);
- }
- }
- }
+ li {
+ padding: 0 0 0 (_size(element-margin) * 0.375);
+ }
+ }
+ }
- @include breakpoint(small) {
- li {
- display: block;
- padding: (_size(element-margin) * 0.5) 0 0 0;
- text-align: center;
- width: 100%;
+ @include breakpoint(small) {
+ li {
+ display: block;
+ padding: (_size(element-margin) * 0.5) 0 0 0;
+ text-align: center;
+ width: 100%;
- &:first-child {
- padding-top: 0;
- }
+ &:first-child {
+ padding-top: 0;
+ }
- > * {
- margin: 0 auto !important;
- max-width: 30em;
- width: 100%;
+ > * {
+ margin: 0 auto !important;
+ max-width: 30em;
+ width: 100%;
- &.icon {
- &:before {
- margin-left: -1em;
- }
- }
- }
- }
+ &.icon {
+ &:before {
+ margin-left: -1em;
+ }
+ }
+ }
+ }
- &.small {
- li {
- padding: (_size(element-margin) * 0.25) 0 0 0;
+ &.small {
+ li {
+ padding: (_size(element-margin) * 0.25) 0 0 0;
- &:first-child {
- padding-top: 0;
- }
- }
- }
- }
- }
+ &:first-child {
+ padding-top: 0;
+ }
+ }
+ }
+ }
+ }
}
dl {
- margin: 0 0 _size(element-margin) 0;
+ margin: 0 0 _size(element-margin) 0;
}
diff --git a/src/assets/styles/components/_menu.scss b/src/assets/styles/components/_menu.scss
index a4418f2..d1a7e6d 100644
--- a/src/assets/styles/components/_menu.scss
+++ b/src/assets/styles/components/_menu.scss
@@ -2,102 +2,102 @@
/* Page Wrapper + Menu */
#page-wrapper {
- @include vendor('transition', 'opacity #{_duration(menu)} ease');
- opacity: 1;
- padding-top: 3em;
+ @include vendor('transition', 'opacity #{_duration(menu)} ease');
+ opacity: 1;
+ padding-top: 3em;
- &:before {
- background: rgba(0,0,0,0);
- content: '';
- display: block;
- display: none;
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: _misc(z-index-base) + 1;
- }
+ &:before {
+ background: rgba(0,0,0,0);
+ content: '';
+ display: block;
+ display: none;
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: _misc(z-index-base) + 1;
+ }
}
#menu {
- @include vendor('transform', 'translateX(20em)');
- @include vendor('transition', 'transform #{_duration(menu)} ease');
- -webkit-overflow-scrolling: touch;
- background: _palette(accent1, bg);
- color: _palette(accent1, fg-bold);
- height: 100%;
- max-width: 80%;
- overflow-y: auto;
- padding: 3em 2em;
- position: fixed;
- right: 0;
- top: 0;
- width: 20em;
- z-index: _misc(z-index-base) + 2;
+ @include vendor('transform', 'translateX(20em)');
+ @include vendor('transition', 'transform #{_duration(menu)} ease');
+ -webkit-overflow-scrolling: touch;
+ background: _palette(accent1, bg);
+ color: _palette(accent1, fg-bold);
+ height: 100%;
+ max-width: 80%;
+ overflow-y: auto;
+ padding: 3em 2em;
+ position: fixed;
+ right: 0;
+ top: 0;
+ width: 20em;
+ z-index: _misc(z-index-base) + 2;
- ul {
- list-style: none;
- padding: 0;
+ ul {
+ list-style: none;
+ padding: 0;
- > li {
- border-top: solid 1px _palette(accent1, border);
- margin: 0.5em 0 0 0;
- padding: 0.5em 0 0 0;
+ > li {
+ border-top: solid 1px _palette(accent1, border);
+ margin: 0.5em 0 0 0;
+ padding: 0.5em 0 0 0;
- &:first-child {
- border-top: 0 !important;
- margin-top: 0 !important;
- padding-top: 0 !important;
- }
+ &:first-child {
+ border-top: 0 !important;
+ margin-top: 0 !important;
+ padding-top: 0 !important;
+ }
- > a {
- border: 0;
- color: inherit;
- display: block;
- font-size: 0.8em;
- letter-spacing: _size(letter-spacing-alt);
- outline: 0;
- text-decoration: none;
- text-transform: uppercase;
+ > a {
+ border: 0;
+ color: inherit;
+ display: block;
+ font-size: 0.8em;
+ letter-spacing: _size(letter-spacing-alt);
+ outline: 0;
+ text-decoration: none;
+ text-transform: uppercase;
- @include breakpoint(small) {
- line-height: 3em;
- }
- }
- }
- }
+ @include breakpoint(small) {
+ line-height: 3em;
+ }
+ }
+ }
+ }
- .close {
- background-image: url('images/close.svg');
- background-position: 4.85em 1em;
- background-repeat: no-repeat;
- border: 0;
- cursor: pointer;
- display: block;
- height: 3em;
- position: absolute;
- right: 0;
- top: 0;
- vertical-align: middle;
- width: 7em;
- }
+ .close {
+ background-image: url('images/close.svg');
+ background-position: 4.85em 1em;
+ background-repeat: no-repeat;
+ border: 0;
+ cursor: pointer;
+ display: block;
+ height: 3em;
+ position: absolute;
+ right: 0;
+ top: 0;
+ vertical-align: middle;
+ width: 7em;
+ }
- @include breakpoint(small) {
- padding: 3em 1.5em;
- }
+ @include breakpoint(small) {
+ padding: 3em 1.5em;
+ }
}
body.is-menu-visible {
- #page-wrapper {
- opacity: 0.35;
+ #page-wrapper {
+ opacity: 0.35;
- &:before {
- display: block;
- }
- }
+ &:before {
+ display: block;
+ }
+ }
- #menu {
- @include vendor('transform', 'translateX(0)');
- }
+ #menu {
+ @include vendor('transform', 'translateX(0)');
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_section.scss b/src/assets/styles/components/_section.scss
index 24c3f8d..c2f1878 100644
--- a/src/assets/styles/components/_section.scss
+++ b/src/assets/styles/components/_section.scss
@@ -1,7 +1,7 @@
/* Section/Article */
section, article {
- &.special {
- text-align: center;
- }
+ &.special {
+ text-align: center;
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_spotlight.scss b/src/assets/styles/components/_spotlight.scss
index 29bde73..a81a459 100644
--- a/src/assets/styles/components/_spotlight.scss
+++ b/src/assets/styles/components/_spotlight.scss
@@ -2,71 +2,71 @@
/* Spotlight */
.spotlight {
- @include vendor('align-items', 'center');
- @include vendor('display', 'flex');
+ @include vendor('align-items', 'center');
+ @include vendor('display', 'flex');
- .image {
- @include vendor('order', '1');
- border-radius: 0;
- width: 40%;
+ .image {
+ @include vendor('order', '1');
+ border-radius: 0;
+ width: 40%;
- img {
- border-radius: 0;
- width: 100%;
- }
- }
+ img {
+ border-radius: 0;
+ width: 100%;
+ }
+ }
- .content {
- @include padding(2em, 4em);
- @include vendor('order', '2');
- max-width: 48em;
- width: 60%;
- }
+ .content {
+ @include padding(2em, 4em);
+ @include vendor('order', '2');
+ max-width: 48em;
+ width: 60%;
+ }
- &:nth-child(2n) {
- @include vendor('flex-direction', 'row-reverse');
- }
+ &:nth-child(2n) {
+ @include vendor('flex-direction', 'row-reverse');
+ }
- @for $i from 1 through _misc(max-spotlights) {
- $j: 0.075 * $i;
+ @for $i from 1 through _misc(max-spotlights) {
+ $j: 0.075 * $i;
- &:nth-child(#{$i}) {
- background-color: rgba(0,0,0, $j);
- }
- }
+ &:nth-child(#{$i}) {
+ background-color: rgba(0,0,0, $j);
+ }
+ }
- @include breakpoint(large) {
- .image {
- width: 45%;
- }
+ @include breakpoint(large) {
+ .image {
+ width: 45%;
+ }
- .content {
- width: 55%;
- }
- }
+ .content {
+ width: 55%;
+ }
+ }
- @include breakpoint(medium) {
- display: block;
+ @include breakpoint(medium) {
+ display: block;
- br {
- display: none;
- }
+ br {
+ display: none;
+ }
- .image {
- width: 100%;
- }
+ .image {
+ width: 100%;
+ }
- .content {
- @include padding(4em, 3em);
- max-width: none;
- text-align: center;
- width: 100%;
- }
- }
+ .content {
+ @include padding(4em, 3em);
+ max-width: none;
+ text-align: center;
+ width: 100%;
+ }
+ }
- @include breakpoint(small) {
- .content {
- @include padding(3em, 2em);
- }
- }
+ @include breakpoint(small) {
+ .content {
+ @include padding(3em, 2em);
+ }
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_table.scss b/src/assets/styles/components/_table.scss
index 2093c25..81eea42 100644
--- a/src/assets/styles/components/_table.scss
+++ b/src/assets/styles/components/_table.scss
@@ -2,75 +2,75 @@
/* Table */
.table-wrapper {
- -webkit-overflow-scrolling: touch;
- overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ overflow-x: auto;
}
table {
- margin: 0 0 _size(element-margin) 0;
- width: 100%;
+ margin: 0 0 _size(element-margin) 0;
+ width: 100%;
- tbody {
- tr {
- border: solid 1px _palette(border);
- border-left: 0;
- border-right: 0;
+ tbody {
+ tr {
+ border: solid 1px _palette(border);
+ border-left: 0;
+ border-right: 0;
- &:nth-child(2n + 1) {
- background-color: _palette(border-bg);
- }
- }
- }
+ &:nth-child(2n + 1) {
+ background-color: _palette(border-bg);
+ }
+ }
+ }
- td {
- padding: 0.75em 0.75em;
- }
+ 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;
- }
+ 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 2px _palette(border);
- }
+ thead {
+ border-bottom: solid 2px _palette(border);
+ }
- tfoot {
- border-top: solid 2px _palette(border);
- }
+ tfoot {
+ border-top: solid 2px _palette(border);
+ }
- &.alt {
- border-collapse: separate;
+ &.alt {
+ border-collapse: separate;
- tbody {
- tr {
- td {
- border: solid 1px _palette(border);
- border-left-width: 0;
- border-top-width: 0;
+ tbody {
+ tr {
+ td {
+ border: solid 1px _palette(border);
+ border-left-width: 0;
+ border-top-width: 0;
- &:first-child {
- border-left-width: 1px;
- }
- }
+ &:first-child {
+ border-left-width: 1px;
+ }
+ }
- &:first-child {
- td {
- border-top-width: 1px;
- }
- }
- }
- }
+ &:first-child {
+ td {
+ border-top-width: 1px;
+ }
+ }
+ }
+ }
- thead {
- border-bottom: 0;
- }
+ thead {
+ border-bottom: 0;
+ }
- tfoot {
- border-top: 0;
- }
- }
+ tfoot {
+ border-top: 0;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_wrapper.scss b/src/assets/styles/components/_wrapper.scss
index 2253652..c6bdd6e 100644
--- a/src/assets/styles/components/_wrapper.scss
+++ b/src/assets/styles/components/_wrapper.scss
@@ -2,243 +2,243 @@
/* Wrapper */
@mixin wrapper($p) {
- background-color: _palette($p, bg);
- color: _palette($p, fg);
+ background-color: _palette($p, bg);
+ color: _palette($p, fg);
- // Basic
+ // Basic
- strong, b {
- color: _palette($p, fg-bold);
- }
+ strong, b {
+ color: _palette($p, fg-bold);
+ }
-
- .h2, .h3, .h4, .h5, .h6,
- h2, h3, h4, h5, h6 {
- color: _palette($p, fg-bold);
- }
+
+ .h2, .h3, .h4, .h5, .h6,
+ h2, h3, h4, h5, h6 {
+ color: _palette($p, fg-bold);
+ }
- hr {
- border-color: _palette($p, border);
- }
+ hr {
+ border-color: _palette($p, border);
+ }
- blockquote {
- border-color: _palette($p, border);
- }
+ blockquote {
+ border-color: _palette($p, border);
+ }
- code {
- background: _palette($p, border-bg);
- }
+ code {
+ background: _palette($p, border-bg);
+ }
- // Section/Article
+ // Section/Article
- header {
- p {
- color: _palette($p, fg-light);
- }
+ header {
+ p {
+ color: _palette($p, fg-light);
+ }
- &.major {
- h2, h3, h4, h5, h6 {
- border-color: _palette($p, border);
- }
+ &.major {
+ h2, h3, h4, h5, h6 {
+ border-color: _palette($p, border);
+ }
- p {
- color: _palette($p, fg);
- }
- }
- }
+ p {
+ color: _palette($p, fg);
+ }
+ }
+ }
- // Form
+ // Form
- label {
- color: _palette($p, fg-bold);
- }
+ label {
+ color: _palette($p, fg-bold);
+ }
- input[type="text"],
- input[type="password"],
- input[type="email"],
- select,
- textarea {
- background: _palette($p, border-bg);
- }
+ input[type="text"],
+ input[type="password"],
+ input[type="email"],
+ select,
+ textarea {
+ background: _palette($p, border-bg);
+ }
- .select-wrapper {
- &:before {
- color: _palette($p, border);
- }
- }
+ .select-wrapper {
+ &:before {
+ color: _palette($p, border);
+ }
+ }
- input[type="checkbox"],
- input[type="radio"], {
- & + label {
- color: _palette($p, fg);
+ input[type="checkbox"],
+ input[type="radio"], {
+ & + label {
+ color: _palette($p, fg);
- &:before {
- background: _palette($p, border-bg);
- }
- }
+ &:before {
+ background: _palette($p, border-bg);
+ }
+ }
- &:checked + label {
- &:before {
- background: _palette($p, fg-bold);
- color: _palette($p, bg);
- }
- }
- }
+ &:checked + label {
+ &:before {
+ background: _palette($p, fg-bold);
+ color: _palette($p, bg);
+ }
+ }
+ }
- ::-webkit-input-placeholder {
- color: _palette($p, fg-light) !important;
- }
+ ::-webkit-input-placeholder {
+ color: _palette($p, fg-light) !important;
+ }
- :-moz-placeholder {
- color: _palette($p, fg-light) !important;
- }
+ :-moz-placeholder {
+ color: _palette($p, fg-light) !important;
+ }
- ::-moz-placeholder {
- color: _palette($p, fg-light) !important;
- }
+ ::-moz-placeholder {
+ color: _palette($p, fg-light) !important;
+ }
- :-ms-input-placeholder {
- color: _palette($p, fg-light) !important;
- }
+ :-ms-input-placeholder {
+ color: _palette($p, fg-light) !important;
+ }
- .formerize-placeholder {
- color: _palette($p, fg-light) !important;
- }
+ .formerize-placeholder {
+ color: _palette($p, fg-light) !important;
+ }
- // Icon
+ // Icon
- .icon {
- &.major {
- border-color: _palette($p, border);
- }
- }
+ .icon {
+ &.major {
+ border-color: _palette($p, border);
+ }
+ }
- // List
+ // List
- ul {
- &.alt {
- li {
- border-color: _palette($p, border);
- }
- }
- }
+ ul {
+ &.alt {
+ li {
+ border-color: _palette($p, border);
+ }
+ }
+ }
- // Table
+ // Table
- table {
- tbody {
- tr {
- border-color: _palette($p, border);
+ table {
+ tbody {
+ tr {
+ border-color: _palette($p, border);
- &:nth-child(2n + 1) {
- background-color: _palette($p, border-bg);
- }
- }
- }
+ &:nth-child(2n + 1) {
+ background-color: _palette($p, border-bg);
+ }
+ }
+ }
- th {
- color: _palette($p, fg-bold);
- }
+ th {
+ color: _palette($p, fg-bold);
+ }
- thead {
- border-color: _palette($p, border);
- }
+ thead {
+ border-color: _palette($p, border);
+ }
- tfoot {
- border-color: _palette($p, border);
- }
+ tfoot {
+ border-color: _palette($p, border);
+ }
- &.alt {
- tbody {
- tr {
- td {
- border-color: _palette($p, border);
- }
- }
- }
- }
- }
+ &.alt {
+ tbody {
+ tr {
+ td {
+ border-color: _palette($p, border);
+ }
+ }
+ }
+ }
+ }
- // Button
+ // Button
- input[type="submit"],
- input[type="reset"],
- input[type="button"],
- button,
- .button {
- box-shadow: inset 0 0 0 2px _palette($p, border);
- color: _palette($p, fg-bold);
+ input[type="submit"],
+ input[type="reset"],
+ input[type="button"],
+ button,
+ .button {
+ box-shadow: inset 0 0 0 2px _palette($p, border);
+ color: _palette($p, fg-bold);
- &:hover {
- background-color: _palette($p, border-bg);
- }
+ &:hover {
+ background-color: _palette($p, border-bg);
+ }
- &:active {
- background-color: _palette($p, border2-bg);
- }
- }
+ &:active {
+ background-color: _palette($p, border2-bg);
+ }
+ }
- // Features
+ // Features
- .features {
- li {
- @include breakpoint(small) {
- border-top-color: _palette($p, border);
- }
- }
- }
+ .features {
+ li {
+ @include breakpoint(small) {
+ border-top-color: _palette($p, border);
+ }
+ }
+ }
}
.wrapper {
- @include padding(6em, 0);
+ @include padding(6em, 0);
- > .inner {
- width: 60em;
- margin: 0 auto;
+ > .inner {
+ width: 60em;
+ margin: 0 auto;
- @include breakpoint(large) {
- width: 90%;
- }
+ @include breakpoint(large) {
+ width: 90%;
+ }
- @include breakpoint(medium) {
- width: 100%;
- }
- }
+ @include breakpoint(medium) {
+ width: 100%;
+ }
+ }
- &.alt {
- padding: 0;
- }
+ &.alt {
+ padding: 0;
+ }
- &.style1 {
- @include wrapper(accent1);
- }
+ &.style1 {
+ @include wrapper(accent1);
+ }
- &.style2 {
- background-color: _palette(bg);
- }
+ &.style2 {
+ background-color: _palette(bg);
+ }
- &.style3 {
- @include wrapper(accent3);
- }
+ &.style3 {
+ @include wrapper(accent3);
+ }
- &.style4 {
- background-color: transparent;
- }
+ &.style4 {
+ background-color: transparent;
+ }
- &.style5 {
- @include wrapper(accent2);
- }
-
- &.style6 {
- @include wrapper(accent4);
- }
+ &.style5 {
+ @include wrapper(accent2);
+ }
+
+ &.style6 {
+ @include wrapper(accent4);
+ }
- @include breakpoint(medium) {
- @include padding(4em, 3em);
- }
+ @include breakpoint(medium) {
+ @include padding(4em, 3em);
+ }
- @include breakpoint(small) {
- @include padding(3em, 2em);
- }
+ @include breakpoint(small) {
+ @include padding(3em, 2em);
+ }
}
\ No newline at end of file
diff --git a/src/assets/styles/ie8.scss b/src/assets/styles/ie8.scss
index 24c0656..a4a60fb 100644
--- a/src/assets/styles/ie8.scss
+++ b/src/assets/styles/ie8.scss
@@ -6,112 +6,112 @@
@import 'libs/skel';
/*
- Spectral by HTML5 UP
- html5up.net | @ajlkn
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+ Spectral by HTML5 UP
+ html5up.net | @ajlkn
+ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Icon */
- .icon {
- &.major {
- border: none;
+ .icon {
+ &.major {
+ border: none;
- &:before {
- font-size: 3em;
- }
- }
- }
+ &:before {
+ font-size: 3em;
+ }
+ }
+ }
/* Form */
- label {
- color: _palette(accent2, fg-bold);
- }
+ label {
+ color: _palette(accent2, fg-bold);
+ }
- input[type="text"],
- input[type="password"],
- input[type="email"],
- select,
- textarea {
- border: solid 1px _palette(accent2, border);
- }
+ input[type="text"],
+ input[type="password"],
+ input[type="email"],
+ select,
+ textarea {
+ border: solid 1px _palette(accent2, border);
+ }
/* Button */
- input[type="submit"],
- input[type="reset"],
- input[type="button"],
- button,
- .button {
- border: solid 2px _palette(accent2, border);
+ input[type="submit"],
+ input[type="reset"],
+ input[type="button"],
+ button,
+ .button {
+ border: solid 2px _palette(accent2, border);
- &.special {
- border: 0 !important;
- }
- }
+ &.special {
+ border: 0 !important;
+ }
+ }
/* Page Wrapper + Menu */
- #menu {
- display: none;
- }
+ #menu {
+ display: none;
+ }
- body.is-menu-visible {
- #menu {
- display: block;
- }
- }
+ body.is-menu-visible {
+ #menu {
+ display: block;
+ }
+ }
/* Header */
- #header {
- nav {
- > ul {
- > li {
- > a {
- &.menuToggle {
- &:after {
- display: none;
- }
- }
- }
- }
- }
- }
- }
+ #header {
+ nav {
+ > ul {
+ > li {
+ > a {
+ &.menuToggle {
+ &:after {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
/* Banner + Wrapper (style4) */
- #banner,
- .wrapper.style4 {
- -ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
+ #banner,
+ .wrapper.style4 {
+ -ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
- &:before {
- display: none;
- }
- }
+ &:before {
+ display: none;
+ }
+ }
/* Banner */
- #banner {
- .more {
- height: 4em;
+ #banner {
+ .more {
+ height: 4em;
- &:after {
- display: none;
- }
- }
- }
+ &:after {
+ display: none;
+ }
+ }
+ }
/* Main */
- #main {
- > header {
- -ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
+ #main {
+ > header {
+ -ms-behavior: url('assets/js/ie/backgroundsize.min.htc');
- &:before {
- display: none;
- }
- }
- }
\ No newline at end of file
+ &:before {
+ display: none;
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/assets/styles/ie9.scss b/src/assets/styles/ie9.scss
index 1b733b0..f30c418 100644
--- a/src/assets/styles/ie9.scss
+++ b/src/assets/styles/ie9.scss
@@ -6,131 +6,131 @@
@import 'libs/skel';
/*
- Spectral by HTML5 UP
- html5up.net | @ajlkn
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+ Spectral by HTML5 UP
+ html5up.net | @ajlkn
+ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Spotlight */
- .spotlight {
- display: block;
+ .spotlight {
+ display: block;
- .image {
- display: inline-block;
- vertical-align: top;
- }
+ .image {
+ display: inline-block;
+ vertical-align: top;
+ }
- .content {
- @include padding(4em, 4em);
- display: inline-block;
- }
+ .content {
+ @include padding(4em, 4em);
+ display: inline-block;
+ }
- &:after {
- clear: both;
- content: '';
- display: block;
- }
- }
+ &:after {
+ clear: both;
+ content: '';
+ display: block;
+ }
+ }
/* Features */
- .features {
- display: block;
+ .features {
+ display: block;
- li {
- float: left;
- }
+ li {
+ float: left;
+ }
- &:after {
- content: '';
- display: block;
- clear: both;
- }
- }
+ &:after {
+ content: '';
+ display: block;
+ clear: both;
+ }
+ }
/* Banner + Wrapper (style4) */
- #banner,
- .wrapper.style4 {
- background-image: url("../../assets/images/banner.jpg");
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- position: relative;
+ #banner,
+ .wrapper.style4 {
+ background-image: url("../../assets/images/banner.jpg");
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
- &:before {
- background: #000000;
- content: '';
- height: 100%;
- left: 0;
- opacity: 0.5;
- position: absolute;
- top: 0;
- width: 100%;
- }
+ &:before {
+ background: #000000;
+ content: '';
+ height: 100%;
+ left: 0;
+ opacity: 0.5;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
- .inner {
- position: relative;
- z-index: 1;
- }
- }
+ .inner {
+ position: relative;
+ z-index: 1;
+ }
+ }
/* Banner */
- #banner {
- @include padding(14em, 0);
- height: auto;
+ #banner {
+ @include padding(14em, 0);
+ height: auto;
- &:after {
- display: none;
- }
- }
+ &:after {
+ display: none;
+ }
+ }
/* CTA */
- #cta {
- .inner {
- header {
- float: left;
- }
+ #cta {
+ .inner {
+ header {
+ float: left;
+ }
- .actions {
- float: left;
- }
+ .actions {
+ float: left;
+ }
- &:after {
- clear: both;
- content: '';
- display: block;
- }
- }
- }
+ &:after {
+ clear: both;
+ content: '';
+ display: block;
+ }
+ }
+ }
/* Main */
- #main {
- > header {
- background-image: url("../../assets/images/banner.jpg");
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- position: relative;
+ #main {
+ > header {
+ background-image: url("../../assets/images/banner.jpg");
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
- &:before {
- background: #000000;
- content: '';
- height: 100%;
- left: 0;
- opacity: 0.5;
- position: absolute;
- top: 0;
- width: 100%;
- }
+ &:before {
+ background: #000000;
+ content: '';
+ height: 100%;
+ left: 0;
+ opacity: 0.5;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
- > * {
- position: relative;
- z-index: 1;
- }
- }
- }
+ > * {
+ position: relative;
+ z-index: 1;
+ }
+ }
+ }
diff --git a/src/assets/styles/images/arrow.svg b/src/assets/styles/images/arrow.svg
index 49ee37c..a62d945 100644
--- a/src/assets/styles/images/arrow.svg
+++ b/src/assets/styles/images/arrow.svg
@@ -1,6 +1,6 @@
\ No newline at end of file
diff --git a/src/assets/styles/images/bars.svg b/src/assets/styles/images/bars.svg
index 50e4e41..655ef07 100644
--- a/src/assets/styles/images/bars.svg
+++ b/src/assets/styles/images/bars.svg
@@ -1,6 +1,6 @@
\ No newline at end of file
diff --git a/src/assets/styles/images/close.svg b/src/assets/styles/images/close.svg
index 3ad8786..ab59b59 100644
--- a/src/assets/styles/images/close.svg
+++ b/src/assets/styles/images/close.svg
@@ -1,5 +1,5 @@
\ No newline at end of file
diff --git a/src/assets/styles/libs/_functions.scss b/src/assets/styles/libs/_functions.scss
index 0e08c1a..4970282 100644
--- a/src/assets/styles/libs/_functions.scss
+++ b/src/assets/styles/libs/_functions.scss
@@ -2,33 +2,33 @@
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _duration($keys...) {
- @return val($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...);
+ @return val($font, $keys...);
}
/// Gets a misc value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _misc($keys...) {
- @return val($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...);
+ @return val($palette, $keys...);
}
/// Gets a size value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _size($keys...) {
- @return val($size, $keys...);
+ @return val($size, $keys...);
}
\ No newline at end of file
diff --git a/src/assets/styles/libs/_mixins.scss b/src/assets/styles/libs/_mixins.scss
index 3325df0..052e45b 100644
--- a/src/assets/styles/libs/_mixins.scss
+++ b/src/assets/styles/libs/_mixins.scss
@@ -3,22 +3,22 @@
/// @param {string} $where Optional pseudoelement to target (before or after).
@mixin icon($content: false, $where: before) {
- text-decoration: none;
+ text-decoration: none;
- &:#{$where} {
+ &:#{$where} {
- @if $content {
- content: $content;
- }
+ @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;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ text-transform: none !important;
- }
+ }
}
@@ -29,11 +29,11 @@
/// @param {bool} $important If true, adds !important.
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
- @if $important {
- $important: '!important';
- }
+ @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};
+ padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
}
@@ -42,15 +42,15 @@
/// @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');
+ $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}");
+ @return url("data:image/svg+xml;charset=utf8,#{$svg}");
}
\ No newline at end of file
diff --git a/src/assets/styles/libs/_skel.scss b/src/assets/styles/libs/_skel.scss
index 438b147..c0f318d 100644
--- a/src/assets/styles/libs/_skel.scss
+++ b/src/assets/styles/libs/_skel.scss
@@ -2,584 +2,584 @@
// Vars.
- /// Breakpoints.
- /// @var {list}
- $breakpoints: () !global;
+ /// Breakpoints.
+ /// @var {list}
+ $breakpoints: () !global;
- /// Vendor prefixes.
- /// @var {list}
- $vendor-prefixes: (
- '-moz-',
- '-webkit-',
- '-ms-',
- ''
- );
+ /// 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'
- );
+ /// 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'
- );
+ /// 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) {
+ /// 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;
+ $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 {
+ @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);
+ $result: ();
+ $index: if($index < 0, length($list) + $index + 1, $index);
- @for $i from 1 through length($list) {
+ @for $i from 1 through length($list) {
- @if $i != $index {
- $result: append($result, nth($list, $i));
- }
+ @if $i != $index {
+ $result: append($result, nth($list, $i));
+ }
- }
+ }
- }
+ }
- @return $result;
+ @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: '') {
+ /// 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);
+ $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);
- }
+ @if $index {
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
- @return $string;
+ @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: '') {
+ /// 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));
- }
+ @each $string in $strings {
+ $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
+ }
- @return $strings;
+ @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...) {
+ /// 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);
- }
+ @if nth($keys, 1) == null {
+ $keys: remove-nth($keys, 1);
+ }
- @each $key in $keys {
- $map: map-get($map, $key);
- }
+ @each $key in $keys {
+ $map: map-get($map, $key);
+ }
- @return $map;
+ @return $map;
- }
+ }
// Mixins.
- /// Sets the global box model.
- /// @param {string} $model Model (default is content).
- @mixin boxModel($model: 'content') {
+ /// Sets the global box model.
+ /// @param {string} $model Model (default is content).
+ @mixin boxModel($model: 'content') {
- $x: $model + '-box';
+ $x: $model + '-box';
- *, *:before, *:after {
- -moz-box-sizing: #{$x};
- -webkit-box-sizing: #{$x};
- box-sizing: #{$x};
- }
+ *, *: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) {
+ /// 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';
+ $query: 'screen';
- // Breakpoint.
- @if $breakpoint and map-has-key($breakpoints, $breakpoint) {
- $query: $query + ' and ' + map-get($breakpoints, $breakpoint);
- }
+ // 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 + ')';
- }
- }
+ // 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) {
+ }
+
+ /// 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; }
+ @-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;
- }
+ ///
+ /// Sets breakpoints.
+ /// @param {map} $x Breakpoints.
+ ///
+ @mixin skel-breakpoints($x: ()) {
+ $breakpoints: $x !global;
+ }
- ///
- /// Initializes layout module.
- /// @param {map} config Config.
- ///
- @mixin skel-layout($config: ()) {
+ ///
+ /// Initializes layout module.
+ /// @param {map} config Config.
+ ///
+ @mixin skel-layout($config: ()) {
- // Config.
- $configPerBreakpoint: ();
+ // Config.
+ $configPerBreakpoint: ();
- $z: map-get($config, 'breakpoints');
+ $z: map-get($config, 'breakpoints');
- @if $z {
- $configPerBreakpoint: $z;
- }
+ @if $z {
+ $configPerBreakpoint: $z;
+ }
- // Reset.
- $x: map-get($config, 'reset');
+ // Reset.
+ $x: map-get($config, 'reset');
- @if $x {
+ @if $x {
- /* Reset */
+ /* Reset */
- @include reset($x);
+ @include reset($x);
- }
+ }
- // Box model.
- $x: map-get($config, 'boxModel');
+ // Box model.
+ $x: map-get($config, 'boxModel');
- @if $x {
+ @if $x {
- /* Box Model */
+ /* Box Model */
- @include boxModel($x);
+ @include boxModel($x);
- }
+ }
- // Containers.
- $containers: map-get($config, 'containers');
+ // Containers.
+ $containers: map-get($config, 'containers');
- @if $containers {
+ @if $containers {
- /* Containers */
+ /* Containers */
- .container {
- margin-left: auto;
- margin-right: auto;
- }
+ .container {
+ margin-left: auto;
+ margin-right: auto;
+ }
- // Use default is $containers is just "true".
- @if $containers == true {
- $containers: 960px;
- }
+ // Use default is $containers is just "true".
+ @if $containers == true {
+ $containers: 960px;
+ }
- // Apply base.
- @include containers($containers);
+ // Apply base.
+ @include containers($containers);
- // Apply per-breakpoint.
- @each $name in map-keys($breakpoints) {
+ // Apply per-breakpoint.
+ @each $name in map-keys($breakpoints) {
- // Get/use breakpoint setting if it exists.
- $x: map-get($configPerBreakpoint, $name);
+ // Get/use breakpoint setting if it exists.
+ $x: map-get($configPerBreakpoint, $name);
- // Per-breakpoint config exists?
- @if $x {
- $y: map-get($x, 'containers');
+ // Per-breakpoint config exists?
+ @if $x {
+ $y: map-get($x, 'containers');
- // Setting exists? Use it.
- @if $y {
- $containers: $y;
- }
+ // Setting exists? Use it.
+ @if $y {
+ $containers: $y;
+ }
- }
+ }
- // Create @media block.
- @media screen and #{map-get($breakpoints, $name)} {
- @include containers($containers);
- }
+ // Create @media block.
+ @media screen and #{map-get($breakpoints, $name)} {
+ @include containers($containers);
+ }
- }
+ }
- }
+ }
- // Grid.
- $grid: map-get($config, 'grid');
+ // Grid.
+ $grid: map-get($config, 'grid');
- @if $grid {
+ @if $grid {
- /* Grid */
+ /* Grid */
- // Use defaults if $grid is just "true".
- @if $grid == true {
- $grid: ();
- }
+ // Use defaults if $grid is just "true".
+ @if $grid == true {
+ $grid: ();
+ }
- // Sub-setting: Gutters.
- $grid-gutters: 40px;
- $x: map-get($grid, 'gutters');
+ // Sub-setting: Gutters.
+ $grid-gutters: 40px;
+ $x: map-get($grid, 'gutters');
- @if $x {
- $grid-gutters: $x;
- }
+ @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;
- }
+ // 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 > * {
+ 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:after, .row:before {
+ content: '';
+ display: block;
+ clear: both;
+ height: 0;
+ }
- .row.uniform > * > :first-child {
- margin-top: 0;
- }
+ .row.uniform > * > :first-child {
+ margin-top: 0;
+ }
- .row.uniform > * > :last-child {
- margin-bottom: 0;
- }
+ .row.uniform > * > :last-child {
+ margin-bottom: 0;
+ }
- // Gutters (0%).
- @include grid-gutters($grid-gutters, \30 \25, 0);
+ // Gutters (0%).
+ @include grid-gutters($grid-gutters, \30 \25, 0);
- // Apply base.
- @include grid($grid-gutters);
+ // Apply base.
+ @include grid($grid-gutters);
- // Apply per-breakpoint.
- @each $name in map-keys($breakpoints) {
+ // Apply per-breakpoint.
+ @each $name in map-keys($breakpoints) {
- // Get/use breakpoint setting if it exists.
- $x: map-get($configPerBreakpoint, $name);
+ // Get/use breakpoint setting if it exists.
+ $x: map-get($configPerBreakpoint, $name);
- // Per-breakpoint config exists?
- @if $x {
- $y: map-get($x, 'grid');
+ // Per-breakpoint config exists?
+ @if $x {
+ $y: map-get($x, 'grid');
- // Setting exists?
- @if $y {
+ // Setting exists?
+ @if $y {
- // Sub-setting: Gutters.
- $x: map-get($y, 'gutters');
+ // Sub-setting: Gutters.
+ $x: map-get($y, 'gutters');
- @if $x {
- $grid-gutters: $x;
- }
+ @if $x {
+ $grid-gutters: $x;
+ }
- }
+ }
- }
+ }
- // Create @media block.
- @media screen and #{map-get($breakpoints, $name)} {
- @include grid($grid-gutters, $name);
- }
+ // 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') {
+ /// Resets browser styles.
+ /// @param {string} $mode Mode (default is 'normalize').
+ @mixin reset($mode: 'normalize') {
- @if $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}
+ // 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' {
+ }
+ @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}
+ // 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) {
+ /// 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 property should expand.
+ $expandProperty: index($vendor-properties, $property);
- // Determine if value should expand (and if so, add '-prefix-' placeholder).
- $expandValue: false;
+ // 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)) {
+ @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;
+ $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 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)};
- }
- }
+ // 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};
- }
+ // Neither? Treat them as a normal declaration.
+ @else {
+ #{$property}: #{$value};
+ }
- }
\ No newline at end of file
+ }
\ No newline at end of file
diff --git a/src/assets/styles/libs/_vars.scss b/src/assets/styles/libs/_vars.scss
index 86ecb80..7b46e1c 100644
--- a/src/assets/styles/libs/_vars.scss
+++ b/src/assets/styles/libs/_vars.scss
@@ -1,86 +1,86 @@
// Misc.
- $misc: (
- max-spotlights: 10,
- max-features: 10,
- z-index-base: 10000
- );
+ $misc: (
+ max-spotlights: 10,
+ max-features: 10,
+ z-index-base: 10000
+ );
// Duration.
- $duration: (
- transitions: 0.2s,
- menu: 0.5s,
- fadein: 3s
- );
+ $duration: (
+ transitions: 0.2s,
+ menu: 0.5s,
+ fadein: 3s
+ );
// Size.
- $size: (
- element-height: 2.75em,
- element-margin: 2em,
- letter-spacing: 0.075em,
- letter-spacing-alt: 0.225em
- );
+ $size: (
+ element-height: 2.75em,
+ element-margin: 2em,
+ letter-spacing: 0.075em,
+ letter-spacing-alt: 0.225em
+ );
// Font.
- $font: (
- family: ('Open Sans', Helvetica, sans-serif),
- family-fixed: ('Courier New', monospace),
- weight: 400,
- weight-bold: 600,
- weight-extrabold: 800
- );
+ $font: (
+ family: ('Open Sans', Helvetica, sans-serif),
+ family-fixed: ('Courier New', monospace),
+ weight: 400,
+ weight-bold: 600,
+ weight-extrabold: 800
+ );
// Palette.
- $palette: (
- bg: #29335C,
- fg: #fff,
- fg-bold: #fff,
- fg-light: rgba(255,255,255,0.5),
- border: #fff,
- border-bg: rgba(144,144,144,0.25),
- border2: #fff,
- border2-bg: rgba(144,144,144,0.5),
+ $palette: (
+ bg: #29335C,
+ fg: #fff,
+ fg-bold: #fff,
+ fg-light: rgba(255,255,255,0.5),
+ border: #fff,
+ border-bg: rgba(144,144,144,0.25),
+ border2: #fff,
+ border2-bg: rgba(144,144,144,0.5),
- accent1: (
- bg: #F3A712,
- fg-bold: #ffffff,
- fg: mix(#F3A712, #ffffff, 25%),
- fg-light: mix(#F3A712, #ffffff, 40%),
- border: rgba(0,0,0,0.125),
- border-bg: rgba(255,255,255,0.075),
- border2: rgba(0,0,0,0.25),
- border2-bg: rgba(255,255,255,0.2)
- ),
-
- accent2: (
- bg: #ffffff,
- fg-bold: #2E3842,
- fg: #4E4852,
- fg-light: #8E8892,
- border: #dfdfdf,
- border-bg: rgba(0,0,0,0.0375),
- border2: #bfbfbf,
- border2-bg: rgba(0,0,0,0.1)
- ),
+ accent1: (
+ bg: #F3A712,
+ fg-bold: #ffffff,
+ fg: mix(#F3A712, #ffffff, 25%),
+ fg-light: mix(#F3A712, #ffffff, 40%),
+ border: rgba(0,0,0,0.125),
+ border-bg: rgba(255,255,255,0.075),
+ border2: rgba(0,0,0,0.25),
+ border2-bg: rgba(255,255,255,0.2)
+ ),
+
+ accent2: (
+ bg: #ffffff,
+ fg-bold: #2E3842,
+ fg: #4E4852,
+ fg-light: #8E8892,
+ border: #dfdfdf,
+ border-bg: rgba(0,0,0,0.0375),
+ border2: #bfbfbf,
+ border2-bg: rgba(0,0,0,0.1)
+ ),
- accent3: (
- bg: #ed4933,
- fg-bold: #ffffff,
- fg: mix(#ed4933, #ffffff, 25%),
- fg-light: mix(#ed4933, #ffffff, 40%),
- border: rgba(0,0,0,0.125),
- border-bg: rgba(255,255,255,0.075),
- border2: rgba(0,0,0,0.25),
- border2-bg: rgba(255,255,255,0.2)
- ),
-
- accent4: (
- bg: #25558C,
- fg-bold: #ffffff,
- fg: mix(#25558C, #ffffff, 25%),
- fg-light: mix(#25558C, #ffffff, 40%),
- border: rgba(0,0,0,0.125),
- border-bg: rgba(255,255,255,0.075),
- border2: rgba(0,0,0,0.25),
- border2-bg: rgba(255,255,255,0.2)
- )
- );
\ No newline at end of file
+ accent3: (
+ bg: #ed4933,
+ fg-bold: #ffffff,
+ fg: mix(#ed4933, #ffffff, 25%),
+ fg-light: mix(#ed4933, #ffffff, 40%),
+ border: rgba(0,0,0,0.125),
+ border-bg: rgba(255,255,255,0.075),
+ border2: rgba(0,0,0,0.25),
+ border2-bg: rgba(255,255,255,0.2)
+ ),
+
+ accent4: (
+ bg: #25558C,
+ fg-bold: #ffffff,
+ fg: mix(#25558C, #ffffff, 25%),
+ fg-light: mix(#25558C, #ffffff, 40%),
+ border: rgba(0,0,0,0.125),
+ border-bg: rgba(255,255,255,0.075),
+ border2: rgba(0,0,0,0.25),
+ border2-bg: rgba(255,255,255,0.2)
+ )
+ );
\ No newline at end of file
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 102a021..cf0496a 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -7,25 +7,25 @@
@import url("../fonts/opensans-google.css");
/*
- Spectral by HTML5 UP
- html5up.net | @ajlkn
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+ Spectral 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: 980px)',
- small: '(max-width: 736px)',
- xsmall: '(max-width: 480px)'
+ xlarge: '(max-width: 1680px)',
+ large: '(max-width: 1280px)',
+ medium: '(max-width: 980px)',
+ small: '(max-width: 736px)',
+ xsmall: '(max-width: 480px)'
));
@include skel-layout((
- reset: 'full',
- boxModel: 'border',
- grid: ( gutters: 1.5em )
+ reset: 'full',
+ boxModel: 'border',
+ grid: ( gutters: 1.5em )
));
@import 'components/basic';
@@ -47,166 +47,166 @@
/* Main */
#main {
- > header {
- @include padding(12em, 0);
- @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
- background-attachment: fixed;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- text-align: center;
+ > header {
+ @include padding(12em, 0);
+ @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
+ background-attachment: fixed;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ text-align: center;
- h2 {
- font-size: 1.75em;
- margin: 0 0 (_size(element-margin) * 0.25) 0;
- }
+ h2 {
+ font-size: 1.75em;
+ margin: 0 0 (_size(element-margin) * 0.25) 0;
+ }
- p {
- color: inherit;
- letter-spacing: _size(letter-spacing-alt);
- text-transform: uppercase;
- top: 0;
+ p {
+ color: inherit;
+ letter-spacing: _size(letter-spacing-alt);
+ text-transform: uppercase;
+ top: 0;
- a {
- color: inherit;
- }
- }
+ a {
+ color: inherit;
+ }
+ }
- @include breakpoint(xlarge) {
- @include padding(10em, 0);
- }
+ @include breakpoint(xlarge) {
+ @include padding(10em, 0);
+ }
- @include breakpoint(large) {
- @include padding(8em, 3em);
- }
+ @include breakpoint(large) {
+ @include padding(8em, 3em);
+ }
- @include breakpoint(medium) {
- @include padding(10em, 3em);
- }
+ @include breakpoint(medium) {
+ @include padding(10em, 3em);
+ }
- @include breakpoint(small) {
- @include padding(5em, 3em);
+ @include breakpoint(small) {
+ @include padding(5em, 3em);
- h2 {
- font-size: 1.25em;
- margin: 0 0 (_size(element-margin) * 0.5) 0;
- }
- }
- }
+ h2 {
+ font-size: 1.25em;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ }
+ }
+ }
}
body.is-mobile {
- #main {
- > header {
- background-attachment: scroll;
- }
- }
+ #main {
+ > header {
+ background-attachment: scroll;
+ }
+ }
}
/* Footer */
#footer {
- @include padding(6em, 0);
- background-color: darken(_palette(bg), 8);
- text-align: center;
+ @include padding(6em, 0);
+ background-color: darken(_palette(bg), 8);
+ text-align: center;
- .icons {
- font-size: 1.25em;
+ .icons {
+ font-size: 1.25em;
- a {
- color: _palette(fg-light);
+ a {
+ color: _palette(fg-light);
- &:hover {
- color: _palette(fg);
- }
- }
- }
+ &:hover {
+ color: _palette(fg);
+ }
+ }
+ }
- .copyright {
- color: _palette(fg-light);
- font-size: 0.8em;
- letter-spacing: _size(letter-spacing-alt);
- list-style: none;
- padding: 0;
- text-transform: uppercase;
+ .copyright {
+ color: _palette(fg-light);
+ font-size: 0.8em;
+ letter-spacing: _size(letter-spacing-alt);
+ list-style: none;
+ padding: 0;
+ text-transform: uppercase;
- li {
- border-left: solid 1px _palette(fg-light);
- display: inline-block;
- line-height: 1em;
- margin-left: 1em;
- padding-left: 1em;
+ li {
+ border-left: solid 1px _palette(fg-light);
+ display: inline-block;
+ line-height: 1em;
+ margin-left: 1em;
+ padding-left: 1em;
- &:first-child {
- border-left: 0;
- margin-left: 0;
- padding-left: 0;
- }
+ &:first-child {
+ border-left: 0;
+ margin-left: 0;
+ padding-left: 0;
+ }
- a {
- color: inherit;
+ a {
+ color: inherit;
- &:hover {
- color: _palette(fg);
- }
- }
+ &:hover {
+ color: _palette(fg);
+ }
+ }
- @include breakpoint(xsmall) {
- border: 0;
- display: block;
- line-height: 1.65em;
- margin: 0;
- padding: 0.5em 0;
- }
- }
- }
+ @include breakpoint(xsmall) {
+ border: 0;
+ display: block;
+ line-height: 1.65em;
+ margin: 0;
+ padding: 0.5em 0;
+ }
+ }
+ }
- @include breakpoint(medium) {
- @include padding(4em, 3em);
- }
+ @include breakpoint(medium) {
+ @include padding(4em, 3em);
+ }
- @include breakpoint(small) {
- @include padding(3em, 2em);
- }
+ @include breakpoint(small) {
+ @include padding(3em, 2em);
+ }
}
/* Landing */
body.landing {
- #page-wrapper {
- @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
- background-attachment: fixed;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- padding-top: 0;
- }
+ #page-wrapper {
+ @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
+ background-attachment: fixed;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ padding-top: 0;
+ }
- #page-wrapper {
- padding-top: 0;
- }
+ #page-wrapper {
+ padding-top: 0;
+ }
- #footer {
- background-color: darken(transparentize(_palette(bg), 0.1), 8);
- }
+ #footer {
+ background-color: darken(transparentize(_palette(bg), 0.1), 8);
+ }
}
body.is-mobile {
- &.landing {
- #page-wrapper {
- background: none;
- }
+ &.landing {
+ #page-wrapper {
+ background: none;
+ }
- #banner,
- .wrapper.style4 {
- @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- }
+ #banner,
+ .wrapper.style4 {
+ @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ }
- #footer {
- background-color: darken(_palette(bg), 8);
- }
- }
+ #footer {
+ background-color: darken(_palette(bg), 8);
+ }
+ }
}
diff --git a/src/stylesheet.md b/src/stylesheet.md
index 14e3475..4c68532 100644
--- a/src/stylesheet.md
+++ b/src/stylesheet.md
@@ -6,32 +6,32 @@ description: Just for reference
---
-
-
-
-
-
-
-
-
-
-
-
-
-
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 with a Subtitle
-Lorem ipsum dolor sit amet nullam id egestas urna aliquam
-Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
-Heading with a Subtitle
-Lorem ipsum dolor sit amet nullam id egestas urna aliquam
-Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
--
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;
+ 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 with a Subtitle
+ Lorem ipsum dolor sit amet nullam id egestas urna aliquam
+
+ Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
+
+ Heading with a Subtitle
+ Lorem ipsum dolor sit amet nullam id egestas urna aliquam
+
+ Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
+
+ 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;
@@ -43,272 +43,272 @@ 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. -
Actions
-
-
-
-
+ Lists
+
+
+
+
+
+ Unordered
+-
+
- Dolor pulvinar etiam. +
- Sagittis adipiscing. +
- Felis enim feugiat. +
Alternate
+-
+
- Dolor pulvinar etiam. +
- Sagittis adipiscing. +
- Felis enim feugiat. +
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 | -|
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 | -|
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 | +|
Buttons
- - - --
-
- Fit + Small -
- Fit + Small -
- Fit + Small -
-
-
- -
- -
Buttons
+ + + +-
+
- Fit + Small +
- Fit + Small +
- Fit + Small +
-
+
- +
- +
Form
- +Form
+Image
-Fit
-
-
-
- 
- 
- 
- 
-
-
-
-
-
-
-
- Left & Right
-
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.
Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui.
Image
+Fit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left & Right
+Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.
Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui.