diff --git a/src/_includes/banner.html b/src/_includes/banner.html
index 631092f..6f6abad 100644
--- a/src/_includes/banner.html
+++ b/src/_includes/banner.html
@@ -1,11 +1,9 @@
-
-
-
Spectral
-
Another fine responsive
site template freebie
crafted by HTML5 UP.
-
-
- Learn More
-
+
+
+
+
Autonomic
+ Think outside the boss
+
+
+
diff --git a/src/_includes/footer.html b/src/_includes/footer.html
index 0576fdf..152ecf3 100644
--- a/src/_includes/footer.html
+++ b/src/_includes/footer.html
@@ -39,6 +39,7 @@
+
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index 8028cf2..7c59052 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -95,6 +95,118 @@
}
+ /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+ particlesJS('banner', {
+ "particles": {
+ "number": {
+ "value": 250,
+ "density": {
+ "enable": false,
+ "value_area": 1122.388442605866
+ }
+ },
+ "color": {
+ "value": "#ffffff"
+ },
+ "shape": {
+ "type": "circle",
+ "stroke": {
+ "width": 0,
+ "color": "#000000"
+ },
+ "polygon": {
+ "nb_sides": 5
+ },
+ "image": {
+ "src": "img/github.svg",
+ "width": 100,
+ "height": 100
+ }
+ },
+ "opacity": {
+ "value": 0.5,
+ "random": true,
+ "anim": {
+ "enable": true,
+ "speed": 1,
+ "opacity_min": 0.1,
+ "sync": false
+ }
+ },
+ "size": {
+ "value": 4.6,
+ "random": true,
+ "anim": {
+ "enable": false,
+ "speed": 6,
+ "size_min": 0.1,
+ "sync": false
+ }
+ },
+ "line_linked": {
+ "enable": true,
+ "distance": 150,
+ "color": "#ffffff",
+ "opacity": 0.4,
+ "width": 1
+ },
+ "move": {
+ "enable": true,
+ "speed": 2,
+ "direction": "none",
+ "random": true,
+ "straight": false,
+ "out_mode": "out",
+ "bounce": false,
+ "attract": {
+ "enable": true,
+ "rotateX": 600,
+ "rotateY": 1200
+ }
+ }
+ },
+ "interactivity": {
+ "detect_on": "canvas",
+ "events": {
+ "onhover": {
+ "enable": true,
+ "mode": "grab"
+ },
+ "onclick": {
+ "enable": true,
+ "mode": "push"
+ },
+ "resize": true
+ },
+ "modes": {
+ "grab": {
+ "distance": 133.99274002972194,
+ "line_linked": {
+ "opacity": 1
+ }
+ },
+ "bubble": {
+ "distance": 400,
+ "size": 40,
+ "duration": 2,
+ "opacity": 8,
+ "speed": 3
+ },
+ "repulse": {
+ "distance": 200,
+ "duration": 0.4
+ },
+ "push": {
+ "particles_nb": 4
+ },
+ "remove": {
+ "particles_nb": 2
+ }
+ }
+ },
+ "retina_detect": false
+ });
+
});
-})(jQuery);
+})(jQuery);
\ No newline at end of file
diff --git a/src/assets/styles/libs/_vars.scss b/src/assets/styles/libs/_vars.scss
index 83b0e14..4916f9b 100644
--- a/src/assets/styles/libs/_vars.scss
+++ b/src/assets/styles/libs/_vars.scss
@@ -31,7 +31,7 @@
// Palette.
$palette: (
- bg: #2e3842,
+ bg: #232B3B,
fg: #fff,
fg-bold: #fff,
fg-light: rgba(255,255,255,0.5),
@@ -108,7 +108,7 @@
accent7: (
bg: #ffffff,
- fg-bold: #2E3842,
+ fg-bold: _palette(bg),
fg: #4E4852,
fg-light: #8E8892,
border: #dfdfdf,
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 96ace5e..7657ea6 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -12,1819 +12,1844 @@
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
- @import 'libs/skel';
+@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)'
- ));
+@include skel-breakpoints((
+ 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 )
- ));
+@include skel-layout((
+ reset: 'full',
+ boxModel: 'border',
+ grid: ( gutters: 1.5em )
+));
/* Basic */
- @-ms-viewport {
- width: device-width;
- }
+@-ms-viewport {
+ width: device-width;
+}
- body {
- background: _palette(bg);
+body {
+ 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;
+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;
- @include breakpoint(xlarge) {
- font-size: 13pt;
- }
-
- @include breakpoint(large) {
- font-size: 12pt;
- }
-
- @include breakpoint(small) {
- font-size: 11pt;
- letter-spacing: _size(letter-spacing) * 0.5;
- }
+ @include breakpoint(xlarge) {
+ font-size: 13pt;
}
+ @include breakpoint(large) {
+ font-size: 12pt;
+ }
+
+ @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;
+
+ &:hover {
+ border-bottom-color: transparent;
+ }
+}
+
+strong, b {
+ color: _palette(fg-bold);
+ font-weight: _font(weight-bold);
+}
+
+em, i {
+ font-style: italic;
+}
+
+p {
+ margin: 0 0 _size(element-margin) 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ color: _palette(fg-bold);
+ font-weight: _font(weight-extrabold);
+ letter-spacing: _size(letter-spacing-alt);
+ line-height: 1em;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ text-transform: uppercase;
+
a {
- @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;
- }
}
+}
- strong, b {
- color: _palette(fg-bold);
- font-weight: _font(weight-bold);
+h2 {
+ font-size: 1.35em;
+ line-height: 1.4;
+
+ @include breakpoint(small) {
+ font-size: 1.1em;
}
+}
- em, i {
- font-style: italic;
- }
+h3 {
+ font-size: 1.15em;
+ line-height: 1.4;
- p {
- margin: 0 0 _size(element-margin) 0;
- }
-
- 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;
-
- a {
- color: inherit;
- text-decoration: none;
- }
- }
-
- h2 {
- font-size: 1.35em;
- line-height: 1.75em;
-
- @include breakpoint(small) {
- font-size: 1.1em;
- line-height: 1.65em;
- }
- }
-
- h3 {
- font-size: 1.15em;
- line-height: 1.75em;
-
- @include breakpoint(small) {
- font-size: 1em;
- line-height: 1.65em;
- }
- }
-
- h4 {
+ @include breakpoint(small) {
font-size: 1em;
- line-height: 1.5em;
}
+}
- h5 {
- font-size: 0.8em;
- line-height: 1.5em;
+h4 {
+ font-size: 1em;
+ line-height: 1.5em;
+}
+
+h5 {
+ font-size: 0.8em;
+ line-height: 1.5em;
+}
+
+h6 {
+ font-size: 0.7em;
+ line-height: 1.5em;
+}
+
+sub {
+ font-size: 0.8em;
+ position: relative;
+ top: 0.5em;
+}
+
+sup {
+ font-size: 0.8em;
+ position: relative;
+ top: -0.5em;
+}
+
+hr {
+ border: 0;
+ border-bottom: solid 2px _palette(border);
+ margin: (_size(element-margin) * 1.5) 0;
+
+ &.major {
+ margin: (_size(element-margin) * 2.25) 0;
}
+}
- h6 {
- font-size: 0.7em;
- line-height: 1.5em;
- }
+blockquote {
+ border-left: solid 4px _palette(border);
+ font-style: italic;
+ margin: 0 0 _size(element-margin) 0;
+ padding: 0.5em 0 0.5em 2em;
+}
- sub {
- font-size: 0.8em;
- position: relative;
- top: 0.5em;
- }
+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;
+}
- sup {
- 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;
-
- &.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;
- }
+pre {
+ -webkit-overflow-scrolling: touch;
+ font-family: _font(family-fixed);
+ font-size: 0.9em;
+ margin: 0 0 _size(element-margin) 0;
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;
+ display: block;
+ line-height: 1.75em;
+ padding: 1em 1.5em;
+ overflow-x: auto;
}
+}
- pre {
- -webkit-overflow-scrolling: touch;
- font-family: _font(family-fixed);
- font-size: 0.9em;
- margin: 0 0 _size(element-margin) 0;
+.align-left {
+ text-align: left;
+}
- code {
- display: block;
- line-height: 1.75em;
- padding: 1em 1.5em;
- overflow-x: auto;
- }
- }
+.align-center {
+ text-align: center;
+}
- .align-left {
- text-align: left;
- }
-
- .align-center {
- text-align: center;
- }
-
- .align-right {
- text-align: right;
- }
+.align-right {
+ text-align: right;
+}
/* Section/Article */
- section, article {
- &.special {
- text-align: center;
- }
+section, article {
+ &.special {
+ text-align: center;
+ }
+}
+
+header {
+ p {
+ color: _palette(fg-light);
+ position: relative;
+ top: -0.25em;
}
- header {
- p {
- color: _palette(fg-light);
+ h2 + p {
+ }
+
+ h3 + p {
+ font-size: 1.1em;
+ }
+
+ h4 + p,
+ h5 + p,
+ h6 + p {
+ font-size: 0.9em;
+ }
+
+ &.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;
- top: -0.25em;
- }
- h2 + p {
- }
-
- h3 + p {
- font-size: 1.1em;
- }
-
- h4 + p,
- h5 + p,
- h6 + p {
- font-size: 0.9em;
- }
-
- &.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;
-
- &:after {
- content: '';
- display: block;
- height: 1px;
- }
- }
-
- p {
- color: _palette(fg);
- top: 0;
- }
-
- @include breakpoint(small) {
- margin: 0 0 _size(element-margin) 0;
+ &:after {
+ content: '';
+ display: block;
+ height: 1px;
}
}
- @include breakpoint(medium) {
- br {
- display: none;
- }
+ p {
+ color: _palette(fg);
+ top: 0;
+ }
+
+ @include breakpoint(small) {
+ margin: 0 0 _size(element-margin) 0;
}
}
+ @include breakpoint(medium) {
+ br {
+ display: none;
+ }
+ }
+}
+
/* Form */
- form {
- margin: 0 0 _size(element-margin) 0;
+form {
+ margin: 0 0 _size(element-margin) 0;
+}
+
+label {
+ color: _palette(fg-bold);
+ display: block;
+ font-size: 0.9em;
+ font-weight: _font(weight-bold);
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+}
+
+input[type="text"],
+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%;
+
+ &:invalid {
+ box-shadow: none;
}
- label {
- color: _palette(fg-bold);
+ &:focus {
+ box-shadow: 0 0 0 2px _palette(accent1, bg);
+ }
+}
+
+.select-wrapper {
+ @include icon;
+ display: block;
+ position: relative;
+
+ &:before {
+ @include vendor('pointer-events', 'none');
+ color: _palette(border);
+ content: '\f078';
display: block;
- font-size: 0.9em;
- font-weight: _font(weight-bold);
- margin: 0 0 (_size(element-margin) * 0.5) 0;
+ height: _size(element-height);
+ line-height: _size(element-height);
+ position: absolute;
+ right: 0;
+ text-align: center;
+ top: 0;
+ width: _size(element-height);
}
- input[type="text"],
- 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%;
-
- &:invalid {
- box-shadow: none;
- }
-
- &:focus {
- box-shadow: 0 0 0 2px _palette(accent1, bg);
- }
+ select::-ms-expand {
+ display: none;
}
+}
- .select-wrapper {
+input[type="text"],
+input[type="password"],
+input[type="email"],
+select {
+ height: _size(element-height);
+}
+
+textarea {
+ padding: 0.75em 1em;
+}
+
+input[type="checkbox"],
+input[type="radio"], {
+ @include vendor('appearance', 'none');
+ display: block;
+ float: left;
+ margin-right: -2em;
+ opacity: 0;
+ width: 1em;
+ z-index: -1;
+
+ & + label {
@include icon;
- display: block;
+ 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 {
- @include vendor('pointer-events', 'none');
- color: _palette(border);
- content: '\f078';
- display: block;
- height: _size(element-height);
- line-height: _size(element-height);
+ 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;
- right: 0;
text-align: center;
top: 0;
- width: _size(element-height);
- }
-
- select::-ms-expand {
- display: none;
+ width: (_size(element-height) * 0.6);
}
}
- input[type="text"],
- input[type="password"],
- input[type="email"],
- select {
- height: _size(element-height);
- }
-
- textarea {
- padding: 0.75em 1em;
- }
-
- input[type="checkbox"],
- input[type="radio"], {
- @include vendor('appearance', 'none');
- display: block;
- float: left;
- margin-right: -2em;
- opacity: 0;
- width: 1em;
- z-index: -1;
-
- & + label {
- @include icon;
- color: _palette(fg);
- cursor: pointer;
- display: inline-block;
- font-size: 1em;
- font-weight: _font(weight);
- padding-left: (_size(element-height) * 0.6) + 0.75em;
- padding-right: 0.75em;
- position: relative;
-
- &:before {
- background: _palette(border-bg);
- border-radius: 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';
- }
- }
-
- &:focus + label {
- &:before {
- box-shadow: 0 0 0 2px _palette(accent1, bg);
- }
+ &:checked + label {
+ &:before {
+ background: _palette(bg);
+ color: _palette(fg-bold);
+ content: '\f00c';
}
}
- input[type="checkbox"] {
- & + label {
- &:before {
- border-radius: 3px;
- }
+ &:focus + label {
+ &:before {
+ box-shadow: 0 0 0 2px _palette(accent1, bg);
}
}
+}
- input[type="radio"] {
- & + label {
- &:before {
- border-radius: 100%;
- }
+input[type="checkbox"] {
+ & + label {
+ &:before {
+ border-radius: 3px;
}
}
+}
- ::-webkit-input-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
+input[type="radio"] {
+ & + label {
+ &:before {
+ border-radius: 100%;
+ }
}
+}
- :-moz-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
- }
+::-webkit-input-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+}
- ::-moz-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
- }
+:-moz-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+}
- :-ms-input-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
- }
+::-moz-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+}
- .formerize-placeholder {
- color: _palette(fg-light) !important;
- opacity: 1.0;
- }
+:-ms-input-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+}
+
+.formerize-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+}
/* Box */
- .box {
- border-radius: 3px;
- border: solid 2px _palette(border);
- margin-bottom: _size(element-margin);
- padding: 1.5em;
+.box {
+ 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;
- }
-
- &.alt {
- border: 0;
- border-radius: 0;
- padding: 0;
- }
+ > :last-child,
+ > :last-child > :last-child,
+ > :last-child > :last-child > :last-child {
+ margin-bottom: 0;
}
+ &.alt {
+ border: 0;
+ border-radius: 0;
+ padding: 0;
+ }
+}
+
/* Icon */
- .icon {
- @include icon;
- border-bottom: none;
- position: relative;
+.icon {
+ @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);
+ &.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.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;
- }
-
- @include breakpoint(small) {
- font-size: 1em;
- }
+ font-size: 1.5em;
}
- &.style1 {
- color: _palette(accent2, bg);
- }
-
- &.style2 {
- color: _palette(accent3, bg);
- }
-
- &.style3 {
- color: _palette(accent4, bg);
+ @include breakpoint(small) {
+ font-size: 1em;
}
}
+ &.style1 {
+ color: _palette(accent2, bg);
+ }
+
+ &.style2 {
+ color: _palette(accent3, bg);
+ }
+
+ &.style3 {
+ color: _palette(accent4, bg);
+ }
+}
+
/* Image */
- .image {
+.image {
+ border-radius: 3px;
+ border: 0;
+ display: inline-block;
+ position: relative;
+
+ img {
border-radius: 3px;
- border: 0;
- display: inline-block;
- position: relative;
+ display: block;
+ }
+
+ &.left {
+ float: left;
+ margin: 0 2em 2em 0;
+ top: 0.25em;
+ }
+
+ &.right {
+ float: right;
+ margin: 0 0 2em 2em;
+ top: 0.25em;
+ }
+
+ &.left,
+ &.right {
+ max-width: 40%;
img {
- border-radius: 3px;
- display: block;
- }
-
- &.left {
- float: left;
- margin: 0 2em 2em 0;
- top: 0.25em;
- }
-
- &.right {
- float: right;
- margin: 0 0 2em 2em;
- top: 0.25em;
- }
-
- &.left,
- &.right {
- max-width: 40%;
-
- img {
- width: 100%;
- }
- }
-
- &.fit {
- display: block;
- margin: 0 0 _size(element-margin) 0;
width: 100%;
-
- img {
- width: 100%;
- }
}
}
+ &.fit {
+ display: block;
+ margin: 0 0 _size(element-margin) 0;
+ width: 100%;
+
+ img {
+ width: 100%;
+ }
+ }
+}
+
/* List */
- ol {
- list-style: decimal;
- margin: 0 0 _size(element-margin) 0;
- padding-left: 1.25em;
+ol {
+ list-style: decimal;
+ margin: 0 0 _size(element-margin) 0;
+ padding-left: 1.25em;
+
+ li {
+ padding-left: 0.25em;
+ }
+}
+
+ul {
+ list-style: disc;
+ margin: 0 0 _size(element-margin) 0;
+ padding-left: 1em;
+
+ li {
+ padding-left: 0.5em;
+ }
+
+ &.alt {
+ list-style: none;
+ padding-left: 0;
li {
- padding-left: 0.25em;
+ border-top: solid 1px _palette(border);
+ padding: 0.5em 0;
+
+ &:first-child {
+ border-top: 0;
+ padding-top: 0;
+ }
}
}
- ul {
- list-style: disc;
- margin: 0 0 _size(element-margin) 0;
- padding-left: 1em;
+ &.icons {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
li {
- padding-left: 0.5em;
+ display: inline-block;
+ padding: 0 1em 0 0;
+
+ &:last-child {
+ padding-right: 0 !important;
+ }
}
- &.alt {
- list-style: none;
- padding-left: 0;
+ &.major {
+ padding: 1em 0;
li {
- border-top: solid 1px _palette(border);
- padding: 0.5em 0;
+ padding-right: 3.5em;
+
+ @include breakpoint(small) {
+ padding: 0 1em !important;
+ }
+ }
+ }
+ }
+
+ &.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;
+
+ &:last-child {
+ padding-right: 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;
&:first-child {
- border-top: 0;
padding-top: 0;
}
- }
- }
- &.icons {
- cursor: default;
- list-style: none;
- padding-left: 0;
-
- li {
- display: inline-block;
- padding: 0 1em 0 0;
-
- &:last-child {
- padding-right: 0 !important;
- }
- }
-
- &.major {
- padding: 1em 0;
-
- li {
- padding-right: 3.5em;
-
- @include breakpoint(small) {
- padding: 0 1em !important;
- }
- }
- }
- }
-
- &.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;
-
- &:last-child {
- padding-right: 0;
+ > * {
+ margin-bottom: 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;
+ padding: (_size(element-margin) * 0.375) 0 0 0;
&:first-child {
padding-top: 0;
}
-
- > * {
- margin-bottom: 0;
- }
}
-
- &.small {
- li {
- padding: (_size(element-margin) * 0.375) 0 0 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)});
-
- li {
- display: table-cell;
- padding: 0 0 0 (_size(element-margin) * 0.75);
-
- > * {
- margin-bottom: 0;
- }
- }
-
- &.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);
- }
- }
- }
-
- @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;
- }
-
- > * {
- margin: 0 auto !important;
- max-width: 30em;
- width: 100%;
-
- &.icon {
- &:before {
- margin-left: -1em;
- }
- }
- }
- }
-
- &.small {
- li {
- padding: (_size(element-margin) * 0.25) 0 0 0;
-
- &:first-child {
- padding-top: 0;
- }
- }
- }
- }
- }
- }
-
- dl {
- margin: 0 0 _size(element-margin) 0;
- }
-
-/* Table */
-
- .table-wrapper {
- -webkit-overflow-scrolling: touch;
- overflow-x: auto;
- }
-
- table {
- margin: 0 0 _size(element-margin) 0;
- width: 100%;
-
- tbody {
- tr {
- border: solid 1px _palette(border);
- border-left: 0;
- border-right: 0;
-
- &:nth-child(2n + 1) {
- background-color: _palette(border-bg);
- }
- }
- }
-
- td {
- padding: 0.75em 0.75em;
- }
-
- th {
- color: _palette(fg-bold);
- font-size: 0.9em;
- font-weight: _font(weight-bold);
- padding: 0 0.75em 0.75em 0.75em;
- text-align: left;
- }
-
- thead {
- border-bottom: solid 2px _palette(border);
- }
-
- tfoot {
- border-top: solid 2px _palette(border);
- }
-
- &.alt {
- border-collapse: separate;
-
- tbody {
- tr {
- td {
- border: solid 1px _palette(border);
- border-left-width: 0;
- border-top-width: 0;
-
- &:first-child {
- border-left-width: 1px;
- }
- }
-
- &:first-child {
- td {
- border-top-width: 1px;
- }
- }
- }
- }
-
- thead {
- border-bottom: 0;
- }
-
- tfoot {
- border-top: 0;
- }
- }
- }
-
-/* Button */
-
- input[type="submit"],
- 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;
-
- &:hover {
- background-color: _palette(border-bg);
- }
-
- &:active {
- background-color: _palette(border2-bg);
- }
-
- &.icon {
- &:before {
- margin-right: 0.5em;
}
}
&.fit {
- display: block;
- margin: 0 0 (_size(element-margin) * 0.5) 0;
- width: 100%;
- }
+ display: table;
+ margin-left: (_size(element-margin) * -0.75);
+ padding: 0;
+ table-layout: fixed;
+ width: calc(100% + #{(_size(element-margin) * 0.75)});
- &.small {
- font-size: 0.8em;
- }
+ li {
+ display: table-cell;
+ padding: 0 0 0 (_size(element-margin) * 0.75);
- &.big {
- font-size: 1.35em;
- }
-
- &.special {
- background-color: _palette(accent6, bg);
- box-shadow: none !important;
- color: _palette(accent6, fg-bold) !important;
-
- &:hover {
- background-color: lighten(_palette(accent6, bg), 5) !important;
+ > * {
+ margin-bottom: 0;
+ }
}
- &:active {
- background-color: darken(_palette(accent6, bg), 5) !important;
- }
- }
+ &.small {
+ margin-left: (_size(element-margin) * -0.375);
+ width: calc(100% + #{(_size(element-margin) * 0.375)});
- &.disabled,
- &:disabled {
- @include vendor('pointer-events', 'none');
- opacity: 0.25;
+ li {
+ padding: 0 0 0 (_size(element-margin) * 0.375);
+ }
+ }
}
@include breakpoint(small) {
- height: 3.75em;
- line-height: 3.75em;
- }
- }
-
-/* Features */
-
- .features {
- @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%;
-
- @for $i from 1 through _misc(max-features) {
- $j: 0.035 * $i;
-
- &:nth-child(#{$i}) {
- background-color: rgba(0,0,0, $j);
- }
- }
-
- &:before {
+ li {
display: block;
- color: _palette(accent2, bg);
- position: absolute;
- left: 1.75em;
- top: 2.75em;
- font-size: 1.5em;
- }
-
- &:nth-child(1) {
- border-top-left-radius: 3px;
- }
-
- &:nth-child(2) {
- border-top-right-radius: 3px;
- }
-
- &:nth-last-child(1) {
- border-bottom-right-radius: 3px;
- }
-
- &:nth-last-child(2) {
- border-bottom-left-radius: 3px;
- }
-
- @include breakpoint(medium) {
- @include padding(3em, 2em);
+ padding: (_size(element-margin) * 0.5) 0 0 0;
text-align: center;
-
- &: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%;
&:first-child {
- border-top: 0;
+ padding-top: 0;
+ }
+
+ > * {
+ margin: 0 auto !important;
+ max-width: 30em;
+ width: 100%;
+
+ &.icon {
+ &:before {
+ margin-left: -1em;
+ }
+ }
+ }
+ }
+
+ &.small {
+ li {
+ padding: (_size(element-margin) * 0.25) 0 0 0;
+
+ &:first-child {
+ padding-top: 0;
+ }
}
}
}
}
+}
-/* Spotlight */
+dl {
+ margin: 0 0 _size(element-margin) 0;
+}
- .spotlight {
- @include vendor('align-items', 'center');
- @include vendor('display', 'flex');
+/* Table */
- .image {
- @include vendor('order', '1');
- border-radius: 0;
- width: 40%;
+.table-wrapper {
+ -webkit-overflow-scrolling: touch;
+ overflow-x: auto;
+}
- img {
- border-radius: 0;
- width: 100%;
+table {
+ margin: 0 0 _size(element-margin) 0;
+ width: 100%;
+
+ tbody {
+ tr {
+ border: solid 1px _palette(border);
+ border-left: 0;
+ border-right: 0;
+
+ &:nth-child(2n + 1) {
+ background-color: _palette(border-bg);
+ }
+ }
+ }
+
+ td {
+ padding: 0.75em 0.75em;
+ }
+
+ th {
+ color: _palette(fg-bold);
+ font-size: 0.9em;
+ font-weight: _font(weight-bold);
+ padding: 0 0.75em 0.75em 0.75em;
+ text-align: left;
+ }
+
+ thead {
+ border-bottom: solid 2px _palette(border);
+ }
+
+ tfoot {
+ border-top: solid 2px _palette(border);
+ }
+
+ &.alt {
+ border-collapse: separate;
+
+ tbody {
+ tr {
+ td {
+ border: solid 1px _palette(border);
+ border-left-width: 0;
+ border-top-width: 0;
+
+ &:first-child {
+ border-left-width: 1px;
+ }
+ }
+
+ &:first-child {
+ td {
+ border-top-width: 1px;
+ }
+ }
}
}
- .content {
- @include padding(2em, 4em);
- @include vendor('order', '2');
- max-width: 48em;
- width: 60%;
+ thead {
+ border-bottom: 0;
}
- &:nth-child(2n) {
- @include vendor('flex-direction', 'row-reverse');
+ tfoot {
+ border-top: 0;
+ }
+ }
+}
+
+/* Button */
+
+input[type="submit"],
+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;
+
+ &:hover {
+ background-color: _palette(border-bg);
+ }
+
+ &:active {
+ background-color: _palette(border2-bg);
+ }
+
+ &.icon {
+ &:before {
+ margin-right: 0.5em;
+ }
+ }
+
+ &.fit {
+ display: block;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ width: 100%;
+ }
+
+ &.small {
+ font-size: 0.8em;
+ }
+
+ &.big {
+ font-size: 1.35em;
+ }
+
+ &.special {
+ background-color: _palette(accent6, bg);
+ box-shadow: none !important;
+ color: _palette(accent6, fg-bold) !important;
+
+ &:hover {
+ background-color: lighten(_palette(accent6, bg), 5) !important;
}
- @for $i from 1 through _misc(max-spotlights) {
- $j: 0.075 * $i;
+ &:active {
+ background-color: darken(_palette(accent6, bg), 5) !important;
+ }
+ }
+
+ &.disabled,
+ &:disabled {
+ @include vendor('pointer-events', 'none');
+ opacity: 0.25;
+ }
+
+ @include breakpoint(small) {
+ height: 3.75em;
+ line-height: 3.75em;
+ }
+}
+
+/* Features */
+
+.features {
+ @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%;
+
+ @for $i from 1 through _misc(max-features) {
+ $j: 0.035 * $i;
&:nth-child(#{$i}) {
background-color: rgba(0,0,0, $j);
}
}
- @include breakpoint(large) {
- .image {
- width: 45%;
- }
-
- .content {
- width: 55%;
- }
- }
-
- @include breakpoint(medium) {
+ &:before {
display: block;
-
- br {
- display: none;
- }
-
- .image {
- width: 100%;
- }
-
- .content {
- @include padding(4em, 3em);
- max-width: none;
- text-align: center;
- width: 100%;
- }
+ color: _palette(accent2, bg);
+ position: absolute;
+ left: 1.75em;
+ top: 2.75em;
+ font-size: 1.5em;
}
- @include breakpoint(small) {
- .content {
- @include padding(3em, 2em);
- }
- }
- }
-
-/* Wrapper */
-
- @mixin wrapper($p) {
- background-color: _palette($p, bg);
- color: _palette($p, fg);
-
- // Basic
-
- strong, b {
- color: _palette($p, fg-bold);
- }
-
- h2, h3, h4, h5, h6 {
- color: _palette($p, fg-bold);
- }
-
- hr {
- border-color: _palette($p, border);
- }
-
- blockquote {
- border-color: _palette($p, border);
- }
-
- code {
- background: _palette($p, border-bg);
- }
-
- // Section/Article
-
- header {
- p {
- color: _palette($p, fg-light);
- }
-
- &.major {
- h2, h3, h4, h5, h6 {
- border-color: _palette($p, border);
- }
-
- p {
- color: _palette($p, fg);
- }
- }
- }
-
- // Form
-
- label {
- color: _palette($p, fg-bold);
- }
-
- input[type="text"],
- input[type="password"],
- input[type="email"],
- select,
- textarea {
- background: _palette($p, border-bg);
- }
-
- .select-wrapper {
- &:before {
- color: _palette($p, border);
- }
- }
-
- input[type="checkbox"],
- input[type="radio"], {
- & + label {
- color: _palette($p, fg);
-
- &:before {
- background: _palette($p, border-bg);
- }
- }
-
- &:checked + label {
- &:before {
- background: _palette($p, fg-bold);
- color: _palette($p, bg);
- }
- }
- }
-
- ::-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;
- }
-
- :-ms-input-placeholder {
- color: _palette($p, fg-light) !important;
- }
-
- .formerize-placeholder {
- color: _palette($p, fg-light) !important;
- }
-
- // Icon
-
- .icon {
- &.major {
- border-color: _palette($p, border);
- }
- }
-
- // List
-
- ul {
- &.alt {
- li {
- border-color: _palette($p, border);
- }
- }
- }
-
- // Table
-
- table {
- tbody {
- tr {
- border-color: _palette($p, border);
-
- &:nth-child(2n + 1) {
- background-color: _palette($p, border-bg);
- }
- }
- }
-
- th {
- color: _palette($p, fg-bold);
- }
-
- thead {
- border-color: _palette($p, border);
- }
-
- tfoot {
- border-color: _palette($p, border);
- }
-
- &.alt {
- tbody {
- tr {
- td {
- border-color: _palette($p, border);
- }
- }
- }
- }
- }
-
- // 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);
-
- &:hover {
- background-color: _palette($p, border-bg);
- }
-
- &:active {
- background-color: _palette($p, border2-bg);
- }
- }
-
- // Features
-
- .features {
- li {
- @include breakpoint(small) {
- border-top-color: _palette($p, border);
- }
- }
- }
-
- }
-
- .wrapper {
- @include padding(6em, 0);
-
- > .inner {
- width: 60em;
- margin: 0 auto;
-
- @include breakpoint(large) {
- width: 90%;
- }
-
- @include breakpoint(medium) {
- width: 100%;
- }
+ &:nth-child(1) {
+ border-top-left-radius: 3px;
}
- &.alt {
- padding: 0;
+ &:nth-child(2) {
+ border-top-right-radius: 3px;
}
- &.style1 {
- @include wrapper(accent1);
+ &:nth-last-child(1) {
+ border-bottom-right-radius: 3px;
}
- &.style2 {
- background-color: _palette(bg);
- }
-
- &.style3 {
- @include wrapper(accent5);
- }
-
- &.style4 {
- background-color: transparent;
- }
-
- &.style5 {
- @include wrapper(accent7);
+ &:nth-last-child(2) {
+ border-bottom-left-radius: 3px;
}
@include breakpoint(medium) {
- @include padding(4em, 3em);
+ @include padding(3em, 2em);
+ text-align: center;
+
+ &: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%;
+
+ &:first-child {
+ border-top: 0;
+ }
+ }
+ }
+}
+
+/* Spotlight */
+
+.spotlight {
+ @include vendor('align-items', 'center');
+ @include vendor('display', 'flex');
+
+ .image {
+ @include vendor('order', '1');
+ border-radius: 0;
+ width: 40%;
+
+ img {
+ border-radius: 0;
+ width: 100%;
+ }
+ }
+
+ .content {
+ @include padding(2em, 4em);
+ @include vendor('order', '2');
+ max-width: 48em;
+ width: 60%;
+ }
+
+ &:nth-child(2n) {
+ @include vendor('flex-direction', 'row-reverse');
+ }
+
+ @for $i from 1 through _misc(max-spotlights) {
+ $j: 0.075 * $i;
+
+ &:nth-child(#{$i}) {
+ background-color: rgba(0,0,0, $j);
+ }
+ }
+
+ @include breakpoint(large) {
+ .image {
+ width: 45%;
+ }
+
+ .content {
+ width: 55%;
+ }
+ }
+
+ @include breakpoint(medium) {
+ display: block;
+
+ br {
+ display: none;
+ }
+
+ .image {
+ width: 100%;
+ }
+
+ .content {
+ @include padding(4em, 3em);
+ max-width: none;
+ text-align: center;
+ width: 100%;
+ }
+ }
+
+ @include breakpoint(small) {
+ .content {
@include padding(3em, 2em);
}
}
+}
+
+/* Wrapper */
+
+@mixin wrapper($p) {
+ background-color: _palette($p, bg);
+ color: _palette($p, fg);
+
+ // Basic
+
+ strong, b {
+ color: _palette($p, fg-bold);
+ }
+
+ h2, h3, h4, h5, h6 {
+ color: _palette($p, fg-bold);
+ }
+
+ hr {
+ border-color: _palette($p, border);
+ }
+
+ blockquote {
+ border-color: _palette($p, border);
+ }
+
+ code {
+ background: _palette($p, border-bg);
+ }
+
+ // Section/Article
+
+ header {
+ p {
+ color: _palette($p, fg-light);
+ }
+
+ &.major {
+ h2, h3, h4, h5, h6 {
+ border-color: _palette($p, border);
+ }
+
+ p {
+ color: _palette($p, fg);
+ }
+ }
+ }
+
+ // Form
+
+ label {
+ color: _palette($p, fg-bold);
+ }
+
+ input[type="text"],
+ input[type="password"],
+ input[type="email"],
+ select,
+ textarea {
+ background: _palette($p, border-bg);
+ }
+
+ .select-wrapper {
+ &:before {
+ color: _palette($p, border);
+ }
+ }
+
+ input[type="checkbox"],
+ input[type="radio"], {
+ & + label {
+ color: _palette($p, fg);
+
+ &:before {
+ background: _palette($p, border-bg);
+ }
+ }
+
+ &:checked + label {
+ &:before {
+ background: _palette($p, fg-bold);
+ color: _palette($p, bg);
+ }
+ }
+ }
+
+ ::-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;
+ }
+
+ :-ms-input-placeholder {
+ color: _palette($p, fg-light) !important;
+ }
+
+ .formerize-placeholder {
+ color: _palette($p, fg-light) !important;
+ }
+
+ // Icon
+
+ .icon {
+ &.major {
+ border-color: _palette($p, border);
+ }
+ }
+
+ // List
+
+ ul {
+ &.alt {
+ li {
+ border-color: _palette($p, border);
+ }
+ }
+ }
+
+ // Table
+
+ table {
+ tbody {
+ tr {
+ border-color: _palette($p, border);
+
+ &:nth-child(2n + 1) {
+ background-color: _palette($p, border-bg);
+ }
+ }
+ }
+
+ th {
+ color: _palette($p, fg-bold);
+ }
+
+ thead {
+ border-color: _palette($p, border);
+ }
+
+ tfoot {
+ border-color: _palette($p, border);
+ }
+
+ &.alt {
+ tbody {
+ tr {
+ td {
+ border-color: _palette($p, border);
+ }
+ }
+ }
+ }
+ }
+
+ // 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);
+
+ &:hover {
+ background-color: _palette($p, border-bg);
+ }
+
+ &:active {
+ background-color: _palette($p, border2-bg);
+ }
+ }
+
+ // Features
+
+ .features {
+ li {
+ @include breakpoint(small) {
+ border-top-color: _palette($p, border);
+ }
+ }
+ }
+
+}
+
+.wrapper {
+ @include padding(6em, 0);
+
+ > .inner {
+ width: 60em;
+ margin: 0 auto;
+
+ @include breakpoint(large) {
+ width: 90%;
+ }
+
+ @include breakpoint(medium) {
+ width: 100%;
+ }
+ }
+
+ &.alt {
+ padding: 0;
+ }
+
+ &.style1 {
+ @include wrapper(accent1);
+ }
+
+ &.style2 {
+ background-color: _palette(bg);
+ }
+
+ &.style3 {
+ @include wrapper(accent5);
+ }
+
+ &.style4 {
+ background-color: transparent;
+ }
+
+ &.style5 {
+ @include wrapper(accent7);
+ }
+
+ @include breakpoint(medium) {
+ @include padding(4em, 3em);
+ }
+
+ @include breakpoint(small) {
+ @include padding(3em, 2em);
+ }
+}
/* Page Wrapper + Menu */
+#page-wrapper {
+ @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;
+ }
+}
+
+#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;
+
+ 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;
+
+ &: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;
+
+ @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;
+ }
+
+ @include breakpoint(small) {
+ padding: 3em 1.5em;
+ }
+}
+
+body.is-menu-visible {
#page-wrapper {
- @include vendor('transition', 'opacity #{_duration(menu)} ease');
- opacity: 1;
- padding-top: 3em;
+ opacity: 0.35;
&: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;
-
- 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;
-
- &: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;
-
- @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;
- }
-
- @include breakpoint(small) {
- padding: 3em 1.5em;
- }
- }
-
- body.is-menu-visible {
- #page-wrapper {
- opacity: 0.35;
-
- &:before {
- display: block;
- }
- }
-
- #menu {
- @include vendor('transform', 'translateX(0)');
- }
+ @include vendor('transform', 'translateX(0)');
}
+}
/* Header */
- #header {
- @include vendor('transition', 'background-color #{_duration(transitions)} ease');
- background: _palette(bg);
- height: 3em;
- left: 0;
- line-height: 3em;
- position: fixed;
+#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);
+
+ h1 {
+ @include vendor('transition', 'opacity #{_duration(transitions)} ease');
+ height: inherit;
+ left: 1.25em;
+ line-height: inherit;
+ position: absolute;
top: 0;
- width: 100%;
- z-index: _misc(z-index-base);
- h1 {
- @include vendor('transition', 'opacity #{_duration(transitions)} ease');
+ a {
+ border: 0;
+ display: block;
height: inherit;
- left: 1.25em;
line-height: inherit;
- position: absolute;
- top: 0;
- 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;
+ > ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ white-space: nowrap;
+
+ > li {
+ display: inline-block;
padding: 0;
- white-space: nowrap;
- > 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;
- }
-
- @include breakpoint(small) {
- padding: 0 1.5em;
-
- span {
- display: none;
- }
- }
+ &: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 0 0 1.5em;
+ padding: 0 1.5em;
+
+ span {
+ display: none;
+ }
}
}
- &:first-child {
- margin-left: 0;
+ @include breakpoint(small) {
+ padding: 0 0 0 1.5em;
}
}
+
+ &: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;
}
}
+}
/* 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;
+#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;
+
+ 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;
- text-align: center;
+ 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 0.85s 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;
- }
-
- &:after {
- bottom: 0;
- right: 0;
- }
- }
-
- p {
- letter-spacing: _size(letter-spacing-alt);
- text-transform: uppercase;
-
- a {
- color: inherit;
- }
- }
-
- .more {
- @include vendor('transition', ('transform 0.75s ease', 'opacity 0.75s ease'));
- @include vendor('transition-delay', '3.5s');
- @include vendor('transform', 'translateY(0)');
- border: none;
- bottom: 0;
- color: inherit;
- font-size: 0.8em;
- height: 8.5em;
- left: 50%;
- letter-spacing: _size(letter-spacing-alt);
- margin-left: -8.5em;
- opacity: 1;
- outline: 0;
- padding-left: _size(letter-spacing-alt);
+ &: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;
- text-align: center;
- text-transform: uppercase;
- width: 16em;
- z-index: 1;
+ width: 100%;
+ }
- &:after {
- background-image: url('images/arrow.svg');
- background-position: center;
- background-repeat: no-repeat;
- background-size: contain;
- bottom: 4em;
- content: '';
- display: block;
- height: 1.5em;
- left: 50%;
- margin: 0 0 0 -0.75em;
- position: absolute;
- width: 1.5em;
- }
+ &:before {
+ top: 0;
+ left: 0;
}
&:after {
- @include vendor('pointer-events', 'none');
- @include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
- @include vendor('transition-delay', '1.25s');
- content: '';
- background: _palette(bg);
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
+ bottom: 0;
+ right: 0;
+ }
+ }
+
+ h1 {
+ @include vendor('transition', 'opacity 0.5s ease');
+ @include vendor('transition-delay', '1s');
+ margin-bottom: 25px;
+ opacity: 1;
+
+ a {
+ color: inherit;
+ }
+ }
+
+ .particles-js-canvas-el {
+ @include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
+ @include vendor('transition-delay', '1s');
+ opacity: 1;
+ }
+
+ @include breakpoint(small) {
+ @include padding(7em, 3em);
+ height: auto;
+ min-height: 0;
+
+ h2 {
+ font-size: 1.25em;
+ }
+
+ br {
+ display: none;
+ }
+ }
+}
+
+body.is-loading {
+ #banner {
+ h1 {
opacity: 0;
}
- @include breakpoint(small) {
- @include padding(7em, 3em);
- height: auto;
- min-height: 0;
+ h2 {
+ @include vendor('transform', 'scale(0.95)');
+ opacity: 0;
- h2 {
- font-size: 1.25em;
- }
-
- br {
- display: none;
- }
-
- .more {
- display: none;
+ &:before, &:after {
+ width: 0;
}
}
- }
-
- body.is-loading {
- #banner {
- h2 {
- @include vendor('transform', 'scale(0.95)');
- opacity: 0;
-
- &:before, &:after {
- width: 0;
- }
- }
-
- .more {
- @include vendor('transform', 'translateY(8.5em)');
- opacity: 0;
- }
-
- &:after {
- opacity: 1;
- }
+
+ .particles-js-canvas-el {
+ opacity: 0;
}
}
+}
/* CTA */
- #cta {
- .inner {
- @include vendor('display', 'flex');
- max-width: 45em;
+#cta {
+ .inner {
+ @include vendor('display', 'flex');
+ max-width: 45em;
- header {
- @include vendor('order', '1');
- padding-right: 3em;
- width: 70%;
-
- p {
- color: inherit;
- }
- }
-
- .actions {
- @include vendor('order', '2');
- width: 30%;
- }
-
- @include breakpoint(medium) {
- display: block;
- text-align: center;
-
- header {
- padding-right: 0;
- width: 100%;
- }
-
- .actions {
- margin-left: auto;
- margin-right: auto;
- max-width: 20em;
- width: 100%;
- }
- }
-
- @include breakpoint(small) {
- .actions {
- max-width: none;
- }
- }
- }
- }
-
-/* 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;
-
- h2 {
- font-size: 1.75em;
- margin: 0 0 (_size(element-margin) * 0.25) 0;
- }
+ header {
+ @include vendor('order', '1');
+ padding-right: 3em;
+ width: 70%;
p {
color: inherit;
- letter-spacing: _size(letter-spacing-alt);
- text-transform: uppercase;
- top: 0;
+ }
+ }
- a {
- color: inherit;
- }
+ .actions {
+ @include vendor('order', '2');
+ width: 30%;
+ }
+
+ @include breakpoint(medium) {
+ display: block;
+ text-align: center;
+
+ header {
+ padding-right: 0;
+ width: 100%;
}
- @include breakpoint(xlarge) {
- @include padding(10em, 0);
+ .actions {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 20em;
+ width: 100%;
}
+ }
- @include breakpoint(large) {
- @include padding(8em, 3em);
- }
-
- @include breakpoint(medium) {
- @include padding(10em, 3em);
- }
-
- @include breakpoint(small) {
- @include padding(5em, 3em);
-
- h2 {
- font-size: 1.25em;
- margin: 0 0 (_size(element-margin) * 0.5) 0;
- }
+ @include breakpoint(small) {
+ .actions {
+ max-width: none;
}
}
}
+}
- body.is-mobile {
- #main {
- > header {
- background-attachment: scroll;
+/* 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))'));
+ 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;
+ }
+
+ p {
+ color: inherit;
+ letter-spacing: _size(letter-spacing-alt);
+ text-transform: uppercase;
+ top: 0;
+
+ a {
+ color: inherit;
+ }
+ }
+
+ @include breakpoint(xlarge) {
+ @include padding(10em, 0);
+ }
+
+ @include breakpoint(large) {
+ @include padding(8em, 3em);
+ }
+
+ @include breakpoint(medium) {
+ @include padding(10em, 3em);
+ }
+
+ @include breakpoint(small) {
+ @include padding(5em, 3em);
+
+ h2 {
+ font-size: 1.25em;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
}
}
}
+}
+
+body.is-mobile {
+ #main {
+ > header {
+ background-attachment: scroll;
+ }
+ }
+}
/* Footer */
- #footer {
- @include padding(6em, 0);
- background-color: darken(_palette(bg), 8);
- text-align: center;
+#footer {
+ @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);
+
+ &: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;
+
+ 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;
+ }
a {
- color: _palette(fg-light);
+ color: inherit;
&: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;
-
- 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;
- }
-
- a {
- color: inherit;
-
- &: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(small) {
- @include padding(3em, 2em);
- }
}
+ @include breakpoint(medium) {
+ @include padding(4em, 3em);
+ }
+
+ @include breakpoint(small) {
+ @include padding(3em, 2em);
+ }
+}
+
/* Landing */
- body.landing {
+body.landing {
+ #page-wrapper {
+ padding-top: 0;
+ }
+
+ #footer {
+ background-color: darken(transparentize(_palette(bg), 0.1), 8);
+ }
+}
+
+body.is-mobile {
+ &.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-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
- padding-top: 0;
}
#footer {
- background-color: darken(transparentize(_palette(bg), 0.1), 8);
+ background-color: darken(_palette(bg), 8);
}
}
+}
+$main: #1a222c;
+$sec: #4B5664;
+$purple: #54516A;
+$cut: 768px;
- body.is-mobile {
- &.landing {
- #page-wrapper {
- background: none;
- }
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
- #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;
- }
+body {
+ margin: 0;
+ font-family: 'Montserrat', sans-serif;
+}
- #footer {
- background-color: darken(_palette(bg), 8);
- }
+@-webkit-keyframes pulse {
+ from {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ opacity: .4;
+ top: 0;
+ }
+ 50% {
+ -ms-filter: none;
+ -webkit-filter: none;
+ filter: none;
+ opacity: 1;
+ top: -10px;
+ }
+ to {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ opacity: .4;
+ top: 0;
+ }
+}
+
+@keyframes pulse {
+ from {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ opacity: .4;
+ top: 0
+ }
+ 50% {
+ -ms-filter: none;
+ -webkit-filter: none;
+ filter: none;
+ opacity: 1;
+ top: -10px
+ }
+ to {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+ filter: alpha(opacity=40);
+ opacity: .4;
+ top: 0
+ }
+}
+.particle {
+ position: relative;
+
+ #particles-js {
+ vertical-align: bottom;
+ width: 100%;
+ min-height: 100vh;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed;
+
+ .particles-js-canvas-el {
+ width: 100%;
+ height: 100%;
}
}
+
+ .content {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ z-index: 1;
+ }
+}
\ No newline at end of file