Made element colors more configurable based on type and location

10 files changed, 47 insertions, 30 deletions

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index 127b986..bb0df1d 100644
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -8,10 +8,10 @@
 
 html {
     font-size: 62.5%;
-    background-color: $color-background;
+    background-color: $color-page-background;
 
     @media print {
-        background-color: $color-white;
+        background-color: $color-light;
     }
 }
 
@@ -19,7 +19,7 @@ html {
     // A4 paper
     width: $page-width;
     min-height: paper_height($page-width);
-    background-color: $color-white;
+    background-color: $color-light;
 
     @media screen and (min-width: 60rem) {
         margin: 6rem 0;
@@ -44,6 +44,6 @@ body {
 }
 
 ::selection {
-    color: $color-white;
+    color: $color-light;
     background-color: darken(rgba($color-primary, 0.6), 10%);
 }
diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss
index 6d95037..634c2dc 100644
--- a/assets/scss/_layout.scss
+++ b/assets/scss/_layout.scss
@@ -15,7 +15,7 @@
                 width: 100%;
                 position: absolute;
                 bottom: 0.5rem;
-                color: darken($color-white, 10%);
+                color: darken($color-light, 10%);
             }
         }
     }
@@ -24,7 +24,8 @@
         position: absolute;
         float: right;
         width: $width-right-col;
-        background-color: $color-right-col;
+        background-color: $color-right-col-background;
+        color: $color-right-col-body-text;
         height: 100%;
         padding: 2rem 3rem;
         right: 1rem;
diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss
index 1756e90..ffe344c 100644
--- a/assets/scss/_mixins.scss
+++ b/assets/scss/_mixins.scss
@@ -1,7 +1,7 @@
 @mixin shadow($distance) {
-    -webkit-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3);
-    -moz-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3);
-    box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3);
+    -webkit-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-dark, $distance * 0.3);
+    -moz-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-dark, $distance * 0.3);
+    box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-dark, $distance * 0.3);
 }
 
 @mixin hz-center {
diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss
index 20c6034..38e47d9 100644
--- a/assets/scss/_typography.scss
+++ b/assets/scss/_typography.scss
@@ -3,7 +3,7 @@ body {
     font-weight: 300;
     line-height: 1.7;
     font-size: 1.12rem;
-    color: $color-grey-dark;
+    color: $color-dark;
 }
 
 .mainHeading {
@@ -18,7 +18,7 @@ body {
 
 .section__title {
     font-size: 2.1rem;
-    color: $color-grey-dark;
+    color: $color-dark;
 }
 
 h1,
diff --git a/assets/scss/components/_contact.scss b/assets/scss/components/_contact.scss
index 18d1111..1f0ad91 100644
--- a/assets/scss/components/_contact.scss
+++ b/assets/scss/components/_contact.scss
@@ -6,8 +6,8 @@
         font-size: 1rem;
 
         & > i {
-            background-color: $color-primary;
-            color: $color-primary-text;
+            background-color: $color-right-col-icon-background;
+            color: $color-right-col-icon-primary;
             font-size: 1rem;
             text-align: center;
             border-radius: 50%;
diff --git a/assets/scss/components/_experience.scss b/assets/scss/components/_experience.scss
index 8071cec..5a0458c 100644
--- a/assets/scss/components/_experience.scss
+++ b/assets/scss/components/_experience.scss
@@ -31,13 +31,13 @@
     }
 
     &__company {
-        color: $color-grey-dark;
+        color: $color-dark;
     }
 
     &__position {
         text-transform: uppercase;
         font-size: 1.3rem;
-        color: $color-grey-dark;
+        color: $color-dark;
     }
 
     &__date,
@@ -55,7 +55,7 @@
     &__place {
         &::before {
             font-family: 'Material Icons';
-            color: $color-primary;
+            color: $color-icon-background;
             font-size: 1.4rem;
             content: 'place';
             display: inline-block;
@@ -80,8 +80,8 @@
         font-size: 0.9rem;
         font-weight: 400;
         display: inline-block;
-        background-color: $color-primary;
-        color: $color-primary-text;
+        background-color: $color-icon-background;
+        color: $color-icon-primary;
         border-radius: 1rem;
         padding: 0.1rem 0.6rem;
     }
diff --git a/assets/scss/components/_side_section.scss b/assets/scss/components/_side_section.scss
index 3eae328..d7a9b26 100644
--- a/assets/scss/components/_side_section.scss
+++ b/assets/scss/components/_side_section.scss
@@ -8,6 +8,7 @@
         overflow: hidden;
         text-align: center;
         margin-bottom: 1rem;
+        color: $color-right-col-heading-text;
     }
 
     &__title {
@@ -17,8 +18,8 @@
         &::before {
             content: '';
             position: absolute;
-            border-top: 1px solid $color-secondary;
-            border-bottom: 1px solid $color-secondary;
+            border-top: 1px solid $color-right-col-heading-text;
+            border-bottom: 1px solid $color-right-col-heading-text;
             width: 10rem;
             height: 4px;
             margin-top: 1.1rem;
diff --git a/assets/scss/components/_skills.scss b/assets/scss/components/_skills.scss
index 54b2162..9c117ae 100644
--- a/assets/scss/components/_skills.scss
+++ b/assets/scss/components/_skills.scss
@@ -10,7 +10,7 @@
 
             &:hover ~ li {
                 background-color: $color-primary;
-                color: $color-white;
+                color: $color-light;
             }
 
         }
@@ -28,7 +28,7 @@
 
             &:hover {
                 background-color: $color-primary;
-                color: $color-white;
+                color: $color-light;
             }
         }
     }
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 4897445..4dc0d63 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,10 +1,20 @@
+$color-light: {{ .Site.Params.colorLight | default "#fff"}} !default;
+$color-dark: {{ .Site.Params.colorDark | default "#666"}} !default;
+$color-page-background: {{ .Site.Params.colorPageBackground | default "#ddd" }} !default;
+
 $color-primary: {{ .Site.Params.colorPrimary | default "#e3bfb8"}} !default;
-$color-primary-text: {{ .Site.Params.colorPrimaryText | default "#fff"}} !default;
-$color-background: {{ .Site.Params.colorPageBackground | default "#ddd" }} !default;
-$color-right-col: {{ .Site.Params.colorRightColumnBackground | default "#f5f5f5" }} !default;
-$color-white: {{ .Site.Params.colorLight | default "#fff"}} !default;
+
 $color-secondary: {{ .Site.Params.colorSecondary | default "#aaa"}} !default;
-$color-grey-dark: {{ .Site.Params.colorDark | default "#666"}} !default;
+
+$color-icon-primary: {{ .Site.Params.colorIconPrimary | default "#fff"}} !default;
+$color-icon-background: {{ .Site.Params.colorIconBackground | default "#e3bfb8"}} !default;
+
+$color-right-col-background: {{ .Site.Params.colorRightColumnBackground | default "#f5f5f5" }} !default;
+$color-right-col-heading-text: {{ .Site.Params.colorRightColumnHeadingText | default "#666" }} !default;
+$color-right-col-body-text: {{ .Site.Params.colorRightColumnBodyText | default "#666" }} !default;
+$color-right-col-icon-primary: {{ .Site.Params.colorRightColumnIconPrimary | default "#fff" }} !default;
+$color-right-col-icon-background: {{ .Site.Params.colorRightColumnIconBackground | default "#e3bfb8" }} !default;
+
 $pages: {{ .Site.Params.pages | default 1}} !default;
 
 @import "abstract";
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index b160eb9..777bb61 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -10,11 +10,16 @@ baseURL = "https://example.com/"
 title = "Example - CV"
 
 [params]
-colorDark = "#666"
 colorLight = "#fff"
+colorDark = "#666"
 colorPageBackground = "#ddd"
 colorPrimary = "#e3bfb8"
-colorPrimaryText = "#fff"
-colorRightColumnBackground = "#f5f5f5"
 colorSecondary = "#aaa"
+colorIconPrimary = "#fff"
+colorIconBackground = "#e3bfb8"
+colorRightColumnBackground = "#f5f5f5"
+colorRightColumnHeadingText = "#666"
+colorRightColumnBodyText = "#666"
+colorRightColumnIconPrimary = "#fff"
+colorRightColumnIconBackground = "#e3bfb8"
 pages = 1