Fixes #166

README.md

@@ -19,6 +19,7 @@ You can watch it in action [here](https://panossakkos.github.io/personal-jekyll-
   * White on black text, making the reading experience tireless
   * Google analytics  
 * Customization and full control of your website and blog through the site config
+* Customization of the website's coloring
 * Blogging functionality
   * Preview of the latest post in the home page
   * Archive page

_posts/2015-06-25-initial-setup.md

@@ -29,6 +29,22 @@ baseurl: /personal-jekyll-theme
 
 The url and baseurl variables are essential, because they are used *everywhere* where an anchor is defined!
 
+### Coloring
+
+You can define the colors that you want in your { Personal } website by setting
+the following variable sin the /_sass/_variables.scss file:
+
+<pre><code data-trim class="scss">
+// Main color
+$primary-color: #000;
+
+// Anchor color
+$secondary-color: #00cdff;
+
+// Font color
+$font-color: #fff;
+</code></pre>
+
 ### HTTPS
 
 By default { Personal } will enforce https by javascript redirection.

_sass/_variables.scss

@@ -1,16 +1,21 @@
 // Variables
 
-$primary: #00cdff;
+// Main color
-$dark: #000;
+$primary-color: #000;
-$light: #fff;
+
+// Anchor color
+$secondary-color: #00cdff;
+
+// Font color
+$font-color: #fff;
 
 $navbar-text-shadow: true;
 $header-text-shadow: true;
-$header-background-color: $dark;
+$header-background-color: $primary-color;
-$intro-text-color: $light;
+$intro-text-color: $font-color;
-$navbar-color: $light;
+$navbar-color: $font-color;
 $navbar-lg-collapse-background-color: $header-background-color;
 $navbar-lg-background: transparent;
 $navbar-sm-background-color: $navbar-lg-collapse-background-color;
 
-$social-buttons-color: $primary;
+$social-buttons-color: $secondary-color;

css/grayscale.scss

@@ -14,8 +14,8 @@ body {
     width: 100%;
     height: 100%;
     font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif;
-    color: $light;
+    color: $font-color;
-    background-color: $dark;
+    background-color: $primary-color;
 }
 
 html {
@@ -67,20 +67,20 @@ div {
 }
 
 a {
-    color: $primary;
+    color: $secondary-color;
     -webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     &:hover,
     &:focus {
         text-decoration: none;
-        color: darken($primary,20%);
+        color: darken($secondary-color,20%);
     }
 }
 
 .navbar-custom {
     margin-bottom: 0;
-    border-bottom: 1px solid rgba($light, 0.3);
+    border-bottom: 1px solid rgba($font-color, 0.3);
     text-transform: uppercase;
     font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
     background-color: $navbar-sm-background-color;
@@ -118,20 +118,20 @@ a {
                 -moz-transition: background .3s ease-in-out;
                 transition: background .3s ease-in-out;
                 &:hover {
-                    /* color: rgba($light, 0.8); */
+                    /* color: rgba($font-color, 0.8); */
                     outline: none;
-                    background-color: rgba($light, 0.3);
+                    background-color: rgba($font-color, 0.3);
                 }
                 &:focus,
                 &:active {
                     outline: none;
-                    background-color: rgba($light, 0.3);
+                      background-color: rgba($font-color, 0.3);
                 }
             }
             &.active {
                 outline: none;
                 a {
-                    background-color: rgba($light, 0.3);
+                    background-color: rgba($font-color, 0.3);
                     &:hover {
                         color: $navbar-color;
                     }
@@ -150,7 +150,7 @@ a {
         &.top-nav-collapse {
             padding: 0;
             background: $navbar-lg-collapse-background-color;
-            border-bottom: 1px solid rgba($light, 0.3);
+            border-bottom: 1px solid rgba($font-color, 0.3);
         }
     }
 }
@@ -244,7 +244,7 @@ a {
         max-width: 100%;
         height: auto;
         margin: 0 auto;
-        border: 1px solid $light;
+        border: 1px solid $font-color;
     }
     /* Added in { Personal } */
     ul,
@@ -265,7 +265,7 @@ a {
       /* Override any img styles to ensure Emojis are displayed inline */
       margin: 0px !important;
       display: inline !important;
-      border: 1px solid $dark !important;
+      border: 1px solid $primary-color !important;
     }
 
     /* Added in { Personal } */
@@ -288,17 +288,17 @@ a {
 }
 
 .btn-default {
-    border: 1px solid $primary;
+    border: 1px solid $secondary-color;
-    color: $primary;
+    color: $secondary-color;
     background-color: transparent;
 }
 
 .btn-default:hover,
 .btn-default:focus {
-    border: 1px solid $primary;
+    border: 1px solid $secondary-color;
     outline: 0;
     color: #000;
-    background-color: $primary;
+    background-color: $secondary-color;
 }
 
 /* Added in { Personal } */
@@ -336,13 +336,13 @@ footer {
 ::-moz-selection {
     text-shadow: none;
     background: #fcfcfc;
-    background: rgba($light, 0.2);
+    background: rgba($font-color, 0.2);
 }
 
 ::selection {
     text-shadow: none;
     background: #fcfcfc;
-    background: rgba($light, 0.2);
+    background: rgba($font-color, 0.2);
 }
 
 img::selection {
@@ -354,7 +354,7 @@ img::-moz-selection {
 }
 
 body {
-    -webkit-tap-highlight-color: rgba($light, 0.2);
+    -webkit-tap-highlight-color: rgba($font-color, 0.2);
 }
 
 /* Added in { Personal } for Typed Cursor in Header */
@@ -436,12 +436,12 @@ body {
  }
 
 .ok-btn {
-  background-color: $dark;
+  background-color: $primary-color;
-  color: $primary;
+  color: $secondary-color;
 }
 
  /* END Style for swipe instruction section */
 
 .fourofour {
-  border: 1px solid $dark !important;
+  border: 1px solid $primary-color !important;
 }