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 --> <!-- One -->
<section id="one" class="wrapper style1 special"> <section id="one" class="wrapper style5 special">
<div class="inner"> <div class="inner">
<header class="major"> <header class="major">
<h2>Arcu aliquet vel lobortis ata nisl<br /> <h2>Arcu aliquet vel lobortis ata nisl<br />
@ -12,11 +12,11 @@
<span class="icons__title">Sustainability</span> <span class="icons__title">Sustainability</span>
</li> </li>
<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> <span class="icons__title">Privacy</span>
</li> </li>
<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> <span class="icons__title">Transparency</span>
</li> </li>
</ul> </ul>

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

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

1
src/_layouts/default.html
View File

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

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

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

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

@ -54,18 +54,18 @@
} }
&.style1 { &.style1 {
color: _palette(accent1, fg-dark); color: _palette(bg);
} }
&.style2 { &.style2 {
color: _palette(accent2, fg-dark); color: _palette(accent2, bg);
} }
&.style3 { &.style3 {
color: _palette(accent3, fg-dark); color: _palette(accent3, bg);
} }
&.style4 { &.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 { &.special {
background-color: _palette(accent4, bg); background-color: _palette(accent3, bg);
box-shadow: none !important; box-shadow: none !important;
color: _palette(accent4, fg-bold) !important; color: _palette(accent3, fg-bold) !important;
&:hover { &:hover {
background-color: lighten(_palette(accent4, bg), 5) !important; background-color: lighten(_palette(accent3, bg), 5) !important;
} }
&:active { &: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 { &.style5 {
@include wrapper(accent2); @include wrapper(accent2);
} }
&.style6 {
@include wrapper(accent4);
}
@include breakpoint(medium) { @include breakpoint(medium) {
@include padding(4em, 3em); @include padding(4em, 3em);

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

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