From 9003143e6ca86e1a99f41f8ac8e2b2f407808a27 Mon Sep 17 00:00:00 2001 From: czmj Date: Fri, 22 Sep 2017 16:11:09 +0100 Subject: [PATCH] section1 --- src/_includes/section-one.html | 14 ++++++++++ src/assets/js/main.js | 2 +- src/assets/styles/components/_banner.scss | 26 +++++++++--------- src/assets/styles/components/_basic.scss | 8 +++++- src/assets/styles/components/_box.scss | 10 ++++--- src/assets/styles/components/_list.scss | 31 ++++++++++++++++++++-- src/assets/styles/components/_wrapper.scss | 2 ++ src/assets/styles/libs/_vars.scss | 11 +++++--- src/assets/styles/main.scss | 13 +++++++-- 9 files changed, 92 insertions(+), 25 deletions(-) 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.

+ 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); }