From 2c1d637f598fc6c89e11d068a0f609e6748eed33 Mon Sep 17 00:00:00 2001 From: Panos Sakkos Date: Thu, 24 Mar 2016 23:08:14 +0100 Subject: [PATCH] Fixes #166 --- README.md | 1 + _posts/2015-06-25-initial-setup.md | 16 +++++++++++ _sass/_variables.scss | 19 ++++++++----- css/grayscale.scss | 44 +++++++++++++++--------------- 4 files changed, 51 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index c5d69a7..347a777 100755 --- a/README.md +++ b/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 diff --git a/_posts/2015-06-25-initial-setup.md b/_posts/2015-06-25-initial-setup.md index 9cf4e91..9d15136 100644 --- a/_posts/2015-06-25-initial-setup.md +++ b/_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: + +

+// Main color
+$primary-color: #000;
+
+// Anchor color
+$secondary-color: #00cdff;
+
+// Font color
+$font-color: #fff;
+
+ ### HTTPS By default { Personal } will enforce https by javascript redirection. diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 1615f33..c19be69 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -1,16 +1,21 @@ // Variables -$primary: #00cdff; -$dark: #000; -$light: #fff; +// Main color +$primary-color: #000; + +// Anchor color +$secondary-color: #00cdff; + +// Font color +$font-color: #fff; $navbar-text-shadow: true; $header-text-shadow: true; -$header-background-color: $dark; -$intro-text-color: $light; -$navbar-color: $light; +$header-background-color: $primary-color; +$intro-text-color: $font-color; +$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; diff --git a/css/grayscale.scss b/css/grayscale.scss index fe5be78..bd50e39 100644 --- a/css/grayscale.scss +++ b/css/grayscale.scss @@ -14,8 +14,8 @@ body { width: 100%; height: 100%; font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif; - color: $light; - background-color: $dark; + color: $font-color; + 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; - color: $primary; + border: 1px solid $secondary-color; + 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; - color: $primary; + background-color: $primary-color; + color: $secondary-color; } /* END Style for swipe instruction section */ .fourofour { - border: 1px solid $dark !important; + border: 1px solid $primary-color !important; }