diff --git a/src/_includes/section-one.html b/src/_includes/section-one.html
index 3e3db3d..0426d43 100644
--- a/src/_includes/section-one.html
+++ b/src/_includes/section-one.html
@@ -6,5 +6,19 @@
eget augue amet aliquet nisl cep donec
Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend
fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.
+
+ -
+
+ Sustainability
+
+ -
+
+ Privacy
+
+ -
+
+ Transparency
+
+
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index 43641d2..66f6e0d 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -205,7 +205,7 @@
"duration": 0.4
},
"push": {
- "particles_nb": 5
+ "particles_nb": 2
},
"remove": {
"particles_nb": 2
diff --git a/src/assets/styles/components/_banner.scss b/src/assets/styles/components/_banner.scss
index 786fc01..ae72df3 100644
--- a/src/assets/styles/components/_banner.scss
+++ b/src/assets/styles/components/_banner.scss
@@ -59,6 +59,10 @@
@include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
@include vendor('transition-delay', '1s');
opacity: 1;
+
+ @include breakpoint(medium) {
+ display: none;
+ }
}
@include breakpoint(small) {
@@ -102,20 +106,16 @@ body.is-loading {
.particle {
position: relative;
- user-select: none;
-
- #particles-js {
- vertical-align: bottom;
- width: 100%;
- min-height: 100vh;
- background-repeat: no-repeat;
- background-size: cover;
- background-attachment: fixed;
+ user-select: none;
+ background: _palette(bg);
+
+ @include breakpoint(medium) {
+ background: none;
+ }
- .particles-js-canvas-el {
- width: 100%;
- height: 100%;
- }
+ .particles-js-canvas-el {
+ width: 100%;
+ height: 100%;
}
.content {
diff --git a/src/assets/styles/components/_basic.scss b/src/assets/styles/components/_basic.scss
index cc687dc..0fe1789 100644
--- a/src/assets/styles/components/_basic.scss
+++ b/src/assets/styles/components/_basic.scss
@@ -62,6 +62,7 @@ p {
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);
@@ -76,7 +77,8 @@ h1, h2, h3, h4, h5, h6 {
}
}
-h2 {
+h2,
+.h2 {
font-size: 1.35em;
line-height: 1.4;
@@ -85,6 +87,7 @@ h2 {
}
}
+.h3,
h3 {
font-size: 1.15em;
line-height: 1.4;
@@ -94,16 +97,19 @@ h3 {
}
}
+.h4,
h4 {
font-size: 1em;
line-height: 1.5em;
}
+.h5,
h5 {
font-size: 0.8em;
line-height: 1.5em;
}
+.h6,
h6 {
font-size: 0.7em;
line-height: 1.5em;
diff --git a/src/assets/styles/components/_box.scss b/src/assets/styles/components/_box.scss
index 6be423e..8a9aaeb 100644
--- a/src/assets/styles/components/_box.scss
+++ b/src/assets/styles/components/_box.scss
@@ -54,14 +54,18 @@
}
&.style1 {
- color: _palette(accent1, bg);
+ color: _palette(accent1, fg-dark);
}
&.style2 {
- color: _palette(accent2, bg);
+ color: _palette(accent2, fg-dark);
}
&.style3 {
- color: _palette(accent3, bg);
+ color: _palette(accent3, fg-dark);
+ }
+
+ &.style4 {
+ color: _palette(accent4, fg-dark);
}
}
\ No newline at end of file
diff --git a/src/assets/styles/components/_list.scss b/src/assets/styles/components/_list.scss
index e934746..8b9ae36 100644
--- a/src/assets/styles/components/_list.scss
+++ b/src/assets/styles/components/_list.scss
@@ -45,7 +45,7 @@ ul {
padding: 0 1em 0 0;
&:last-child {
- padding-right: 0 !important;
+ padding-right: 0;
}
}
@@ -54,12 +54,39 @@ ul {
li {
padding-right: 3.5em;
+
+ &:last-child {
+ padding-right: 0;
+ }
@include breakpoint(small) {
- padding: 0 1em !important;
+ 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;
+ }
+
+ .icon {
+ margin-right: 8px;
+ }
+ }
+
+ .icons__title {
+ display: block;
+ @extend .h3;
+ margin-top: 40px;
+ }
}
&.actions {
diff --git a/src/assets/styles/components/_wrapper.scss b/src/assets/styles/components/_wrapper.scss
index c914689..b5e8901 100644
--- a/src/assets/styles/components/_wrapper.scss
+++ b/src/assets/styles/components/_wrapper.scss
@@ -11,6 +11,8 @@
color: _palette($p, fg-bold);
}
+
+ .h2, .h3, .h4, .h5, .h6,
h2, h3, h4, h5, h6 {
color: _palette($p, fg-bold);
}
diff --git a/src/assets/styles/libs/_vars.scss b/src/assets/styles/libs/_vars.scss
index af36180..8e9ac69 100644
--- a/src/assets/styles/libs/_vars.scss
+++ b/src/assets/styles/libs/_vars.scss
@@ -35,6 +35,7 @@
fg: #fff,
fg-bold: #fff,
fg-light: rgba(255,255,255,0.5),
+ fg-dark: darken(#fff, 10%),
border: #fff,
border-bg: rgba(144,144,144,0.25),
border2: #fff,
@@ -45,6 +46,7 @@
fg-bold: #ffffff,
fg: mix(#21b2a6, #ffffff, 25%),
fg-light: mix(#21b2a6, #ffffff, 40%),
+ fg-dark: darken(#21b2a6, 15%),
border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25),
@@ -56,6 +58,7 @@
fg-bold: #2E3842,
fg: #4E4852,
fg-light: #8E8892,
+ fg-dark: darken(#4E4852, 10%),
border: #dfdfdf,
border-bg: rgba(0,0,0,0.0375),
border2: #bfbfbf,
@@ -63,10 +66,11 @@
),
accent3: (
- bg: #505393,
+ bg: #2B5681,
fg-bold: #ffffff,
- fg: mix(#505393, #ffffff, 25%),
- fg-light: mix(#505393, #ffffff, 40%),
+ fg: mix(#2B5681, #ffffff, 25%),
+ fg-light: mix(#2B5681, #ffffff, 40%),
+ fg-dark: darken(#2B5681, 5%),
border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25),
@@ -78,6 +82,7 @@
fg-bold: #ffffff,
fg: mix(#ed4933, #ffffff, 25%),
fg-light: mix(#ed4933, #ffffff, 40%),
+ fg-dark: darken(#ed4933, 10%),
border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25),
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index e1f1b77..6bdc13a 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -49,7 +49,7 @@
#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))'));
+ @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;
@@ -174,9 +174,18 @@ body.is-mobile {
body.landing {
#page-wrapper {
+ @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,0.4))', '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;
+ }
+
#footer {
background-color: darken(transparentize(_palette(bg), 0.1), 8);
}
@@ -195,7 +204,7 @@ body.is-mobile {
background-repeat: no-repeat;
background-size: cover;
}
-
+
#footer {
background-color: darken(_palette(bg), 8);
}