colors

assets/stylesheets/_base.scss

@@ -1,14 +1,19 @@
 /* brand variables */
 
-$f1: Arial, Helvetica; 
-$f2: FontAwesome;
+$f1: dense; 
+$f2: "HelveticaNeue-Light", 
+"Helvetica Neue Light", 
+"Helvetica Neue", 
+Helvetica, Arial, 
+"Lucida Grande", sans-serif;
+$f3: FontAwesome;
 $g1: 10px;                       // base gap
-$c0: white;                      // bg color
-$c1: #333;                       // text color
-$c2: lighten($c1, 20%);          // accent color
-$c3: #ccc;                       // color 3
-$c4: green;                      // color 4
-$c5: yellow;                     // color 5
+$c0: violet;                      // bg color
+$c1: green;                       // text color
+$c2: yellow;          // accent color
+$c3: brown;                       // color 3
+$c4: red;                      // color 4
+$c5: blue;                     // color 5
 
 /* gap variations */
 

assets/stylesheets/_colors.scss

@@ -0,0 +1,87 @@
+
+@function color($color, $change: n) {
+  @if $change == n {
+    @return $color;
+  }
+  @if $change == l1 {
+    @return lighten($color, 10%);
+  }
+  @if $change == l2 {
+    @return lighten($color, 25%);
+  }
+  @if $change == l3 {
+    @return lighten($color, 50%);
+  }
+  @if $change == l4 {
+    @return lighten($color, 75%);
+  }
+  @if $change == d1 {
+    @return darken($color, 10%);
+  }
+  @if $change == d2 {
+    @return darken($color, 25%);
+  }
+  @if $change == d3 {
+    @return darken($color, 50%);
+  }
+  @if $change == d4 {
+    @return darken($color, 75%);
+  }
+}
+
+@function complementary($color, $change: n) {
+  @if $change == n {
+    @return complement($color);
+  }
+  @if $change == 1 { 
+    @return complement($color);
+  }
+  @if $change == 2 {  
+    @return hsl(hue(complement($color)),saturation($color),70);
+  }
+  @if $change == 3 {
+    @return hsl(hue($color),saturation($color),30);
+  }
+  @if $change == 4 {
+   @return hsl(hue($color),saturation($color),70);
+ }
+
+}
+
+@function triad($color, $change: n) {
+  @if $change == n {
+    @return $color;
+  }
+  @if $change == 1 { 
+    @return adjust-hue($color, 120deg);
+  }
+  @if $change == 2 {  
+    @return adjust-hue($color, 240deg);
+  }
+}
+
+@function analogous($color, $change: n) {
+  @if $change == n {
+    @return $color;
+  }
+  @if $change == 1 { 
+    @return adjust-hue($color, 45deg);
+  }
+  @if $change == 2 {  
+    @return adjust-hue($color, -45deg);
+  }
+}
+
+@function split($color, $change: n) {
+  @if $change == n {
+    @return $color;
+  }
+  @if $change == 1 { 
+    @return adjust-hue($color, 150deg);
+  }
+  @if $change == 2 {  
+    @return adjust-hue($color, 210deg);
+  }
+}
+
+

assets/stylesheets/_colortest.scss

@@ -0,0 +1,234 @@
+@mixin colortest($function: light, $color: white) {
+  @if $function == "light" {
+    li:nth-of-type(1){
+      background-color: color($color, l1);
+    }
+    li:nth-of-type(2){
+      background-color: color($color, l2);
+    }
+    li:nth-of-type(3){
+      background-color: color($color, l3);
+    }
+    li:nth-of-type(4){
+      background-color: color($color, l4);
+    }
+  } 
+  @else if $function == "dark" {
+    li:nth-of-type(1){
+      background-color:color($color, d1);
+    }
+    li:nth-of-type(2){
+      background-color:color($color, d2);
+    }
+    li:nth-of-type(3){
+      background-color:color($color, d3);
+    }
+    li:nth-of-type(4){
+      background-color:color($color, d4);
+    }
+  }
+  @else if $function == "complementary" {
+    li:nth-of-type(1){
+      background-color:complementary($color, 1);
+    }
+    li:nth-of-type(2){
+      background-color:complementary($color, 2);
+    }
+    li:nth-of-type(3){
+      background-color:complementary($color, 3);
+    }
+    li:nth-of-type(4){
+      background-color:complementary($color, 4);
+    }
+  } 
+  @else if $function == "triad" {
+   li:nth-of-type(1){
+    background-color: triad($color, 1);
+  }
+  li:nth-of-type(2){
+    background-color: triad($color, 2);
+  }
+} 
+@else if $function == "analogous" {
+  li:nth-of-type(1){
+    background-color:analogous($color,1);
+  }
+  li:nth-of-type(2){
+    background-color:analogous($color,2);
+  }
+}
+@else if $function == "split" {
+  li:nth-of-type(1){
+    background-color:split($color,1);
+  }
+  li:nth-of-type(2){
+    background-color:split($color,2);
+  }
+}
+}
+
+
+.colortest { 
+    @include grid(7, 10px); 
+  ul {
+    @include reset(all);
+  li{
+   heighT: 100px;
+   font-family: $f1;
+   text-transform: uppercase;
+   display: block;
+   padding: 5px 10px;
+   font-size: 20px;
+ }
+  }
+  &:last-of-type {
+    margin-bottom: 20px;
+  }
+&:first-of-type {
+   .cell:first-of-type li {
+  background-color: $c0;
+}
+.cell:nth-of-type(2) {
+  @include colortest(light, $c0);
+}
+.cell:nth-of-type(3) {
+  @include colortest(dark, $c0);
+}
+.cell:nth-of-type(4) {
+  @include colortest(complementary, $c0);
+}
+.cell:nth-of-type(5) {
+  @include colortest(triad, $c0);
+}
+.cell:nth-of-type(6) {
+  @include colortest(analogous, $c0);
+}
+.cell:nth-of-type(7) {
+  @include colortest(split, $c0);
+}
+}
+&:nth-of-type(2) {
+   .cell:first-of-type li {
+  background-color: $c1;
+}
+.cell:nth-of-type(2) {
+  @include colortest(light, $c1);
+}
+.cell:nth-of-type(3) {
+  @include colortest(dark, $c1);
+}
+.cell:nth-of-type(4) {
+  @include colortest(complementary, $c1);
+}
+.cell:nth-of-type(5) {
+  @include colortest(triad, $c1);
+}
+.cell:nth-of-type(6) {
+  @include colortest(analogous, $c1);
+}
+.cell:nth-of-type(7) {
+  @include colortest(split, $c1);
+}
+}
+
+&:nth-of-type(3) {
+   .cell:first-of-type li {
+  background-color: $c2;
+}
+.cell:nth-of-type(2) {
+  @include colortest(light, $c2);
+}
+.cell:nth-of-type(3) {
+  @include colortest(dark, $c2);
+}
+.cell:nth-of-type(4) {
+  @include colortest(complementary, $c2);
+}
+.cell:nth-of-type(5) {
+  @include colortest(triad, $c2);
+}
+.cell:nth-of-type(6) {
+  @include colortest(analogous, $c2);
+}
+.cell:nth-of-type(7) {
+  @include colortest(split, $c2);
+}
+}
+
+&:nth-of-type(4) {
+   .cell:first-of-type li {
+  background-color: $c3;
+}
+.cell:nth-of-type(2) {
+  @include colortest(light, $c3);
+}
+.cell:nth-of-type(3) {
+  @include colortest(dark, $c3);
+}
+.cell:nth-of-type(4) {
+  @include colortest(complementary, $c3);
+}
+.cell:nth-of-type(5) {
+  @include colortest(triad, $c3);
+}
+.cell:nth-of-type(6) {
+  @include colortest(analogous, $c3);
+}
+.cell:nth-of-type(7) {
+  @include colortest(split, $c3);
+}
+}
+
+&:nth-of-type(5) {
+   .cell:first-of-type li {
+  background-color: $c4;
+}
+.cell:nth-of-type(2) {
+  @include colortest(light, $c4);
+}
+.cell:nth-of-type(3) {
+  @include colortest(dark, $c4);
+}
+.cell:nth-of-type(4) {
+  @include colortest(complementary, $c4);
+}
+.cell:nth-of-type(5) {
+  @include colortest(triad, $c4);
+}
+.cell:nth-of-type(6) {
+  @include colortest(analogous, $c4);
+}
+.cell:nth-of-type(7) {
+  @include colortest(split, $c4);
+}
+}
+
+&:nth-of-type(6) {
+   .cell:first-of-type li {
+  background-color: $c5;
+}
+.cell:nth-of-type(2) {
+  @include colortest(light, $c5);
+}
+.cell:nth-of-type(3) {
+  @include colortest(dark, $c5);
+}
+.cell:nth-of-type(4) {
+  @include colortest(complementary, $c5);
+}
+.cell:nth-of-type(5) {
+  @include colortest(triad, $c5);
+}
+.cell:nth-of-type(6) {
+  @include colortest(analogous, $c5);
+}
+.cell:nth-of-type(7) {
+  @include colortest(split, $c5);
+}
+}
+}
+
+
+
+
+

assets/stylesheets/_layout.scss

@@ -7,7 +7,7 @@ a.label, .label a {
   &:after {
     content:"\f129";
     float: right;
-    font-family: $f2;
+    font-family: $f3;
     font-size: 16px;
     margin: -5px 5px 0 10px;
     background-color: darken(#D2A800, 7%);

assets/stylesheets/_modules.scss

@@ -75,7 +75,7 @@ em {
   }      
 }
 h1, h2, h3, .btn, .label, header.main, footer.footer {
-  font-family: 'dense';
+  font-family: $f1;
   text-transform: uppercase;
 }
 h1, h2, h3, header.main {