autonomic-cooperative
/
autonomic.zone
Archived
5
0
Fork 0
Code Issues 15 Pull Requests 2 Releases Activity

section1

This commit is contained in:
czmj 2017-09-22 16:11:09 +01:00
parent 27e4d581b6
commit 9003143e6c
9 changed files with 92 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/_includes/section-one.html
View File

@ -6,5 +6,19 @@
eget augue amet aliquet nisl cep donec</h2> eget augue amet aliquet nisl cep donec</h2>
<p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br /> fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p> <p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br /> fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p>
</header> </header>
<ul class="icons major icons--flex">
<li>
<span class="icon fa-heart-o major style1"></span>
<span class="icons__title">Sustainability</span>
</li>
<li>
<span class="icon fa-heart-o major style3"></span>
<span class="icons__title">Privacy</span>
</li>
<li>
<span class="icon fa-heart-o major style4"></span>
<span class="icons__title">Transparency</span>
</li>
</ul>
</div> </div>
</section> </section>

2
src/assets/js/main.js
View File

@ -205,7 +205,7 @@
"duration": 0.4 "duration": 0.4
}, },
"push": { "push": {
"particles_nb": 5 "particles_nb": 2
}, },
"remove": { "remove": {
"particles_nb": 2 "particles_nb": 2

26
src/assets/styles/components/_banner.scss
View File

@ -59,6 +59,10 @@
@include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out'); @include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
@include vendor('transition-delay', '1s'); @include vendor('transition-delay', '1s');
opacity: 1; opacity: 1;
@include breakpoint(medium) {
display: none;
}
} }
@include breakpoint(small) { @include breakpoint(small) {
@ -102,20 +106,16 @@ body.is-loading {
.particle { .particle {
position: relative; position: relative;
user-select: none; user-select: none;
background: _palette(bg);
#particles-js {
vertical-align: bottom; @include breakpoint(medium) {
width: 100%; background: none;
min-height: 100vh; }
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
.particles-js-canvas-el { .particles-js-canvas-el {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
.content { .content {

8
src/assets/styles/components/_basic.scss
View File

@ -62,6 +62,7 @@ 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 { h1, h2, h3, h4, h5, h6 {
color: _palette(fg-bold); color: _palette(fg-bold);
font-weight: _font(weight-extrabold); font-weight: _font(weight-extrabold);
@ -76,7 +77,8 @@ h1, h2, h3, h4, h5, h6 {
} }
} }
h2 { h2,
.h2 {
font-size: 1.35em; font-size: 1.35em;
line-height: 1.4; line-height: 1.4;
@ -85,6 +87,7 @@ h2 {
} }
} }
.h3,
h3 { h3 {
font-size: 1.15em; font-size: 1.15em;
line-height: 1.4; line-height: 1.4;
@ -94,16 +97,19 @@ h3 {
} }
} }
.h4,
h4 { h4 {
font-size: 1em; font-size: 1em;
line-height: 1.5em; line-height: 1.5em;
} }
.h5,
h5 { h5 {
font-size: 0.8em; font-size: 0.8em;
line-height: 1.5em; line-height: 1.5em;
} }
.h6,
h6 { h6 {
font-size: 0.7em; font-size: 0.7em;
line-height: 1.5em; line-height: 1.5em;

10
src/assets/styles/components/_box.scss
View File

@ -54,14 +54,18 @@
} }
&.style1 { &.style1 {
color: _palette(accent1, bg); color: _palette(accent1, fg-dark);
} }
&.style2 { &.style2 {
color: _palette(accent2, bg); color: _palette(accent2, fg-dark);
} }
&.style3 { &.style3 {
color: _palette(accent3, bg); color: _palette(accent3, fg-dark);
}
&.style4 {
color: _palette(accent4, fg-dark);
} }
} }

31
src/assets/styles/components/_list.scss
View File

@ -45,7 +45,7 @@ ul {
padding: 0 1em 0 0; padding: 0 1em 0 0;
&:last-child { &:last-child {
padding-right: 0 !important; padding-right: 0;
} }
} }
@ -54,12 +54,39 @@ ul {
li { li {
padding-right: 3.5em; padding-right: 3.5em;
&:last-child {
padding-right: 0;
}
@include breakpoint(small) { @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 { &.actions {

2
src/assets/styles/components/_wrapper.scss
View File

@ -11,6 +11,8 @@
color: _palette($p, fg-bold); color: _palette($p, fg-bold);
} }
.h2, .h3, .h4, .h5, .h6,
h2, h3, h4, h5, h6 { h2, h3, h4, h5, h6 {
color: _palette($p, fg-bold); color: _palette($p, fg-bold);
} }

11
src/assets/styles/libs/_vars.scss
View File

@ -35,6 +35,7 @@
fg: #fff, fg: #fff,
fg-bold: #fff, fg-bold: #fff,
fg-light: rgba(255,255,255,0.5), fg-light: rgba(255,255,255,0.5),
fg-dark: darken(#fff, 10%),
border: #fff, border: #fff,
border-bg: rgba(144,144,144,0.25), border-bg: rgba(144,144,144,0.25),
border2: #fff, border2: #fff,
@ -45,6 +46,7 @@
fg-bold: #ffffff, fg-bold: #ffffff,
fg: mix(#21b2a6, #ffffff, 25%), fg: mix(#21b2a6, #ffffff, 25%),
fg-light: mix(#21b2a6, #ffffff, 40%), fg-light: mix(#21b2a6, #ffffff, 40%),
fg-dark: darken(#21b2a6, 15%),
border: rgba(0,0,0,0.125), border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075), border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25), border2: rgba(0,0,0,0.25),
@ -56,6 +58,7 @@
fg-bold: #2E3842, fg-bold: #2E3842,
fg: #4E4852, fg: #4E4852,
fg-light: #8E8892, fg-light: #8E8892,
fg-dark: darken(#4E4852, 10%),
border: #dfdfdf, border: #dfdfdf,
border-bg: rgba(0,0,0,0.0375), border-bg: rgba(0,0,0,0.0375),
border2: #bfbfbf, border2: #bfbfbf,
@ -63,10 +66,11 @@
), ),
accent3: ( accent3: (
bg: #505393, bg: #2B5681,
fg-bold: #ffffff, fg-bold: #ffffff,
fg: mix(#505393, #ffffff, 25%), fg: mix(#2B5681, #ffffff, 25%),
fg-light: mix(#505393, #ffffff, 40%), fg-light: mix(#2B5681, #ffffff, 40%),
fg-dark: darken(#2B5681, 5%),
border: rgba(0,0,0,0.125), border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075), border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25), border2: rgba(0,0,0,0.25),
@ -78,6 +82,7 @@
fg-bold: #ffffff, fg-bold: #ffffff,
fg: mix(#ed4933, #ffffff, 25%), fg: mix(#ed4933, #ffffff, 25%),
fg-light: mix(#ed4933, #ffffff, 40%), fg-light: mix(#ed4933, #ffffff, 40%),
fg-dark: darken(#ed4933, 10%),
border: rgba(0,0,0,0.125), border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075), border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25), border2: rgba(0,0,0,0.25),

13
src/assets/styles/main.scss
View File

@ -49,7 +49,7 @@
#main { #main {
> header { > header {
@include padding(12em, 0); @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-attachment: fixed;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -174,9 +174,18 @@ body.is-mobile {
body.landing { body.landing {
#page-wrapper { #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; padding-top: 0;
} }
#page-wrapper {
padding-top: 0;
}
#footer { #footer {
background-color: darken(transparentize(_palette(bg), 0.1), 8); background-color: darken(transparentize(_palette(bg), 0.1), 8);
} }
@ -195,7 +204,7 @@ body.is-mobile {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
#footer { #footer {
background-color: darken(_palette(bg), 8); background-color: darken(_palette(bg), 8);
} }