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>
<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>
<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>
</section>

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

@ -205,7 +205,7 @@
"duration": 0.4
},
"push": {
"particles_nb": 5
"particles_nb": 2
},
"remove": {
"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-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 {

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

@ -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;

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

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

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

@ -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 {

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

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

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

@ -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),

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

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