From 2a2cf3bb897c09e555f79f1011a4fd715a88ec7a Mon Sep 17 00:00:00 2001
From: Jannik Beyerstedt <code@jannikbeyerstedt.de>
Date: Sun, 10 Apr 2016 22:42:23 +0200
Subject: [PATCH] [SITE CSS] set colors as variables + base on 2 colors

---
 assets/css/main.css                 |   5 +++++
 assets/css/main.css.map             | Bin 7503 -> 7680 bytes
 assets/css/templates/photo.css      |   4 ++--
 assets/css/templates/photo.css.map  | Bin 7320 -> 7319 bytes
 assets/scss/_mainvariables.scss     |  19 +++++++++++++++++--
 assets/scss/main.scss               |  18 ++++++++++++------
 assets/scss/templates/photo.scss    |  16 ++++++----------
 assets/scss/templates/project.scss  |   2 +-
 assets/scss/templates/projects.scss |   2 +-
 9 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 06cf068..bb78221 100644
--- a/assets/css/main.css
+++ b/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) {
diff --git a/assets/css/main.css.map b/assets/css/main.css.map
index ff174ba8e384eda3a85954d59bc49030625da134..b8a78d61114aab52f516f0a148feff3d167f1228 100644
GIT binary patch
delta 806
zcmaKq&2G~`5XTh~1R-%~KH5S#gbN6%h8A3slm&@dYrWpJohX8)X(XgJP02^oR4OPf
zxwPT|xXigHt{gyl0!|#c!KshH6TpFuorFpVEZLH0XMZ#Q`Onu!CyzgdqsPM5O#svX
z5C$gb4uGRGai5m;5<p4k@(t}#b;j0$R8UWF!~od2m<QmEek(+P*`gEDfI6dePmvC(
zNr>Xtbpaq$E^1LDyw;+)IeR1QR_b^$njOB4Rxd=3Xm=D{2s5{UKVxT^*USlsT(((5
zl_)nUCSzIL*RCMf9;jEwA2QQN6Hn&wRC^ZhSUjl3WfOmCb}nyK{pLwo7Oa}S0kEO_
zIye9i#P}01#er3y^u33J#D`VG8pF$S#j5CA09*gM$~$yY<rQxXovYPQqGK~ZrsmMJ
zZTvJ-S{?8yahd;@*t7o-_w5GWN*3cwe5$R0$4QYg>_D5UuxwX}2OLilH}OUCGA_+r
z!rionbEy>hOKJWbykIx<ZGi1SnHq)i4XlQ;%{gGTi6g^qsvnAZA`mGo7k{LUr#)p+
z0Jrv7IdIG0u62NQB62h@`{sCV23;)r8>aYHpVf%)j&L(`FWZ(yeFtDCXh7|WVtO6<
zQgu)~ly!vb3-~4T<hJNI!5R`Kcb)!p-MX$faeT#jj(29y5-ru}XyJ&EZLdB|&%F<Y
g4aXXZi7>b6;`jN}aNjA8)h*(;`Mbl<*WN{b1E&VxuK)l5

delta 549
zcmZ{gyH6WI5QlX(60$hX;0Mnj0s^IA6=EZ7#L~>2_s)CkJ9I=c_N4-w@UVG<kyE8i
z6)Bn)s<bI0T^A`*iu6cy6#NM(QqZ&ZC5VP<HLIC#e)D}?xnBMrjYWjO4>8)at?%eK
zI5ZwD$+sPQ8QjMz5v7T)I;mXXfqIu}F+l`?AeP-=b;`lp*6~aKJN(gat9fP+4#25n
zFX4dpR&APA_d|B?;-OYdo|$E`3b0B&``p|lRe&n~Obn}MvXK9dY&^t2+PB$7^B>By
zb8=<_V1qCKMs{_8hE6>&_Ke^rUQv=6%jz=aY}>M_1FVcwiAg+&&&_76M@-gw4uii2
zU3I7U7<CTE5?nhfhEXMUzv$y}V(rz_-J}Lk3nNJ%GB}uZN<qvQeDu^8%0)1qY$<(J
z9^T8%3SOobrt<}<4!|OYnJajqN&~<k>j3MN=kyl-O%3<vnNPXX#CZDkM3%c`3t%f;
zCjCl+v%ufWZEgeobakfVMcVTy10$n{P{tR9_%Hudtl@3?PRo?SBPqADB|rE*^i_$T
b2(uG7@<!mNk*nyQaJyx@Q<C6h^mESx5{sNq

diff --git a/assets/css/templates/photo.css b/assets/css/templates/photo.css
index 977269d..4e9d7f0 100644
--- a/assets/css/templates/photo.css
+++ b/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 {
diff --git a/assets/css/templates/photo.css.map b/assets/css/templates/photo.css.map
index d60cf23b2c7c21482a15d786f4228248d610195c..26133af813d0cd56ed7457c607f132bd282c3ce2 100644
GIT binary patch
delta 166
zcmbPXIo)!@G>)`D4;@cOM^7DRM@MICS4U?LopdKh$8;whS5KgnzoVnSwX0V^fs>B6
zqoX%SFchNR-7753+8U_S53Cig-w~$JHx#T}$K5NS$Z7I#4l5x~?_ijapBGTCzu9DW
ePI<<%$?2Tt+!5|Db3-Su=Imq4+HA!YCj<aO$}U_0

delta 167
zcmbPkIm2?pG>+6r4;@cOM^7DRM@MICS4U?LopdKh$8;whS4ST&9e+nhf1s#uo|BHZ
zqoX%SFc_lV-O)Y8+8U_S53Cig-w~$J(G{#)$KBB-Y4RTqD<MZD5qF?g|H{c8obrr$
dlQTHYc}tw!q2_uOI!#{1*~eJ4*^(<x2mnbeE@A)x

diff --git a/assets/scss/_mainvariables.scss b/assets/scss/_mainvariables.scss
index ca659b2..bcc55e8 100644
--- a/assets/scss/_mainvariables.scss
+++ b/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%);
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 763137d..bf4264e 100644
--- a/assets/scss/main.scss
+++ b/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;
-  color: $fontcolor;
+  background-color: $footer_color_bg;
+  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;
   }
diff --git a/assets/scss/templates/photo.scss b/assets/scss/templates/photo.scss
index 37b5ded..edd5717 100644
--- a/assets/scss/templates/photo.scss
+++ b/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;
-  color: $inv_fontcolor;
+  background-color: $color_bg_inv;
+  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%);
-  color: darken($inv_fontcolor, 10%);
+  background-color: darken($color_bg_inv, 7%);
+  color: darken($color_font_inv, 10%);
 }
 
 
diff --git a/assets/scss/templates/project.scss b/assets/scss/templates/project.scss
index 38bec15..e0e23fb 100644
--- a/assets/scss/templates/project.scss
+++ b/assets/scss/templates/project.scss
@@ -7,7 +7,7 @@
 
 @import "../mainvariables";
 
-// change main.scss behavior - inverted color style
+// change main.scss behavior
 body {
 
 }
diff --git a/assets/scss/templates/projects.scss b/assets/scss/templates/projects.scss
index 41dc76a..0ce14dd 100644
--- a/assets/scss/templates/projects.scss
+++ b/assets/scss/templates/projects.scss
@@ -7,7 +7,7 @@
 
 @import "../mainvariables";
 
-// change main.scss behavior - inverted color style
+// change main.scss behavior
 body {
 
 }