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

messing about with colours

This commit is contained in:
czmj 2017-09-22 17:23:08 +01:00
parent 9003143e6c
commit 563c5a2552
8 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<!-- One -->
<section id="one" class="wrapper style1 special">
<section id="one" class="wrapper style5 special">
<div class="inner">
<header class="major">
<h2>Arcu aliquet vel lobortis ata nisl<br />
@ -12,11 +12,11 @@
<span class="icons__title">Sustainability</span>
</li>
<li>
<span class="icon fa-heart-o major style3"></span>
<span class="icon fa-heart-o major style1"></span>
<span class="icons__title">Privacy</span>
</li>
<li>
<span class="icon fa-heart-o major style4"></span>
<span class="icon fa-heart-o major style1"></span>
<span class="icons__title">Transparency</span>
</li>
</ul>

2
src/_includes/section-three.html
View File

@ -1,5 +1,5 @@
<!-- Three -->
<section id="three" class="wrapper style3 special">
<section id="three" class="wrapper style6 special">
<div class="inner">
<header class="major">
<h2>Accumsan mus tortor nunc aliquet</h2>

1
src/_layouts/default.html
View File

@ -13,7 +13,6 @@
{% include section-one.html %}
{% include section-two.html %}
{% include section-three.html %}
{% include cta.html %}
{% include footer.html %}
</body>

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

@ -107,7 +107,7 @@ body.is-loading {
.particle {
position: relative;
user-select: none;
background: _palette(bg);
background: _palette(accent3, bg);
@include breakpoint(medium) {
background: none;

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

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

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

@ -57,16 +57,16 @@ button,
}
&.special {
background-color: _palette(accent4, bg);
background-color: _palette(accent3, bg);
box-shadow: none !important;
color: _palette(accent4, fg-bold) !important;
color: _palette(accent3, fg-bold) !important;
&:hover {
background-color: lighten(_palette(accent4, bg), 5) !important;
background-color: lighten(_palette(accent3, bg), 5) !important;
}
&:active {
background-color: darken(_palette(accent4, bg), 5) !important;
background-color: darken(_palette(accent3, bg), 5) !important;
}
}

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

@ -229,6 +229,10 @@
&.style5 {
@include wrapper(accent2);
}
&.style6 {
@include wrapper(accent4);
}
@include breakpoint(medium) {
@include padding(4em, 3em);

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

@ -31,22 +31,20 @@
// Palette.
$palette: (
bg: #232B3B,
bg: #29335C,
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,
border2-bg: rgba(144,144,144,0.5),
accent1: (
bg: #21b2a6,
bg: #F3A712,
fg-bold: #ffffff,
fg: mix(#21b2a6, #ffffff, 25%),
fg-light: mix(#21b2a6, #ffffff, 40%),
fg-dark: darken(#21b2a6, 15%),
fg: mix(#F3A712, #ffffff, 25%),
fg-light: mix(#F3A712, #ffffff, 40%),
border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25),
@ -58,7 +56,6 @@
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,
@ -66,23 +63,21 @@
),
accent3: (
bg: #2B5681,
bg: #ed4933,
fg-bold: #ffffff,
fg: mix(#2B5681, #ffffff, 25%),
fg-light: mix(#2B5681, #ffffff, 40%),
fg-dark: darken(#2B5681, 5%),
fg: mix(#ed4933, #ffffff, 25%),
fg-light: mix(#ed4933, #ffffff, 40%),
border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25),
border2-bg: rgba(255,255,255,0.2)
),
accent4: (
bg: #ed4933,
bg: #25558C,
fg-bold: #ffffff,
fg: mix(#ed4933, #ffffff, 25%),
fg-light: mix(#ed4933, #ffffff, 40%),
fg-dark: darken(#ed4933, 10%),
fg: mix(#25558C, #ffffff, 25%),
fg-light: mix(#25558C, #ffffff, 40%),
border: rgba(0,0,0,0.125),
border-bg: rgba(255,255,255,0.075),
border2: rgba(0,0,0,0.25),