[SITE CSS] set colors as variables + base on 2 colors

assets/css/main.css

@@ -20,6 +20,11 @@ p {
   margin-top: 0;
   line-height: 1.5em; }
 
+a {
+  color: #2da301; }
+  a:active, a:hover {
+    color: #1f7001; }
+
 main div.container {
   margin-top: 10px; }
   @media (min-width: 992px) {

assets/css/templates/photo.css

@@ -6,9 +6,9 @@ body {
   color: #fff; }
 
 a {
-  color: #108ffd; }
+  color: #34bc01; }
   a:active, a:hover {
-    color: #75bffe; }
+    color: #42ef01; }
 
 @media (min-width: 544px) {
   nav ul.nav.main {

assets/scss/_mainvariables.scss

@@ -1,8 +1,23 @@
-$fontcolor: #000;
+$color_font: #000;
+$color_bg: #fff;
+$color_base: #1779ff;
+$color_accent: #2da301;
+
+$link_color: $color_accent;
+$link_active: darken($color_accent, 10%);
+
 $col_xxs_bp: 543px;
 
-$nav_bgColor: #1779ff;
+$nav_bgColor: $color_base;
 $nav_borderColor: darken($nav_bgColor, 15%);
 $nav_fgColor: #fff;
 $nav_textXsWidth: 80px;
 $nav_textSmWidth: 109px;
+
+$footer_color_bg: #bebebe;
+
+
+$color_bg_inv: #424242;
+$color_font_inv: #fff;
+$link_color_inv: lighten($color_accent, 5%);
+$link_active_inv: lighten($color_accent, 15%);

assets/scss/main.scss

@@ -26,6 +26,12 @@ p {
   margin-top: 0;
   line-height: 1.5em;
 }
+a {
+  color: $link_color;
+  &:active, &:hover {
+    color: $link_active;
+  }
+}
 
 main div.container {
   margin-top: 10px;
@@ -96,7 +102,7 @@ nav {
 
       a.active {
         color: $nav_fgColor;
-        border-bottom: 4px solid #2da301;
+        border-bottom: 4px solid $color_accent;
         padding-bottom: 1px;
       }
     }
@@ -110,7 +116,7 @@ nav {
       color: $nav_bgColor;
       a.active {
         color: $nav_fgColor;
-        border-bottom: 4px solid #2da301;
+        border-bottom: 4px solid $color_accent;
         padding-bottom: 1.5px;
       }
     }
@@ -120,7 +126,7 @@ nav {
         background-color: $nav_bgColor;
       }
       a.active {
-        border-bottom: 4px solid #2da301;
+        border-bottom: 4px solid $color_accent;
         padding-bottom: 1.5px;
       }
     }
@@ -169,8 +175,8 @@ footer {
   padding-top: 20px;
   padding-bottom: 20px;
 
-  background-color: #bebebe;
+  background-color: $footer_color_bg;
-  color: $fontcolor;
+  color: $color_font;
 
   p {
     margin-bottom: 0;
@@ -184,7 +190,7 @@ footer {
   }
 
   i.fa {
-    color: $fontcolor;
+    color: $color_font;
     font-size: $footer_logoHeight;
     padding-right: 0.2em;
   }

assets/scss/templates/photo.scss

@@ -7,19 +7,15 @@
 
 @import "../mainvariables";
 
-
-$inv_bgColor: #424242;
-$inv_fontcolor: #fff;
-
 // change main.scss behavior - inverted color style
 body {
-  background-color: $inv_bgColor;
+  background-color: $color_bg_inv;
-  color: $inv_fontcolor;
+  color: $color_font_inv;
 }
 a {
-  color: lighten($link-color, 10%);
+  color: $link_color_inv;
   &:active, &:hover {
-    color: lighten($link-color, 30%);
+    color: $link_active_inv;
   }
 }
 @include media-breakpoint-up(sm) {
@@ -30,8 +26,8 @@ a {
   }
 }
 footer {
-  background-color: darken($inv_bgColor, 7%);
+  background-color: darken($color_bg_inv, 7%);
-  color: darken($inv_fontcolor, 10%);
+  color: darken($color_font_inv, 10%);
 }
 
 

assets/scss/templates/project.scss

@@ -7,7 +7,7 @@
 
 @import "../mainvariables";
 
-// change main.scss behavior - inverted color style
+// change main.scss behavior
 body {
 
 }

assets/scss/templates/projects.scss

@@ -7,7 +7,7 @@
 
 @import "../mainvariables";
 
-// change main.scss behavior - inverted color style
+// change main.scss behavior
 body {
 
 }