Set common colours using jekyll config and add more colour customizat…

…ion (daattali#299)
anubhavsrivastava · Nov 7, 2018 · 7ead041 · 7ead041
1 parent 942fdc5
commit 7ead041
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,11 @@
-# CHANGELOG
+ # CHANGELOG
 
 This file lists all non-trivial changes to Beautiful Jekyll.
 
 I often make small changes to documentation, to the demo site, or to the general look-and-feel. These changes will not be listed here. Any other minor changes will also not be listed here.
 
+**2018-01-06** More color personalization options (#297 and #298) (thanks @jennydaman)
+
 **2018-01-05** Abstract the social networks logic (thanks @OCram85)
 
 **2018-01-03** Avatar image no longer causes a ghost click (thanks @alefi87)
@@ -28,7 +30,7 @@ I often make small changes to documentation, to the demo site, or to the general
 
 **2016-12-25** Allow dynamic images on each blog post (#143) (thanks @bbritten)
 
-**2016-12-15** Support `title-img` config param to have image in the navbar instead of text 
+**2016-12-15** Support `title-img` config param to have image in the navbar instead of text
 
 **2016-12-08** Add support for phone numbers in footer; fix #136
 
@@ -50,7 +52,7 @@ I often make small changes to documentation, to the demo site, or to the general
 
 **2016-02-07** Avatar is now conditional (thanks @hristoyankov)
 
-**2016-02-02** Migrate (forced to...) to jekyll 3 
+**2016-02-02** Migrate (forced to...) to jekyll 3
 
 **2016-01-22** Make sure not to include JQuery twice, fixes #29
 

diff --git a/_config.yml b/_config.yml
@@ -48,9 +48,7 @@ avatar: "/img/avatars/avatar-icon.png"
 # navbar-col: "#0085a1"
 # navbar-txt-col: "white"
 # navbar-img: "/img/bgimage.png"
-# footer-col: "blue"
 # footer-img: "/img/bgimage.png"
-# page-col: "#FF0000"
 # page-img: "/img/bgimage.png"
 
 # --- Footer options --- #

diff --git a/css/main.css b/css/main.css
@@ -11,10 +11,7 @@ body {
   font-size: 18px;
   color: #404040;
   position: relative;
-  background: #FFF;
-  {% if site.page-col %}
-  background: {{ site.page-col }};
-  {% endif %}
+  background-color: {{ site.page-col }};
   {% if site.page-img %}
   background-image: url({{ site.page-img }});
   background-attachment: fixed;
@@ -24,20 +21,16 @@ p {
   line-height: 1.5;
   margin: 30px 0;
 }
-p a {
-  /* text-decoration: underline */
-  color: #008AFF;
-}
 h1,h2,h3,h4,h5,h6 {
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 800;
 }
 a {
-  color: #008AFF;
+  color: {{ site.link-col }};
 }
 a:hover,
 a:focus {
-  color: #0085a1;
+  color: {{ site.hover-col }};
 }
 blockquote {
   color: #808080;
@@ -75,12 +68,12 @@ hr.small {
 ::-moz-selection {
   color: white;
   text-shadow: none;
-  background: #0085a1;
+  background-color: {{ site.hover-col }};
 }
 ::selection {
   color: white;
   text-shadow: none;
-  background: #0085a1;
+  background-color: {{ site.hover-col }};
 }
 img::selection {
   color: white;
@@ -108,12 +101,9 @@ img {
 /* --- Navbar --- */
 
 .navbar-custom {
-  background: #F5F5F5;
+  background-color: {{ site.navbar-col }};
   border-bottom: 1px solid #EAEAEA;
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  {% if site.navbar-col %}
-  background: {{ site.navbar-col }};
-  {% endif %}
   {% if site.navbar-img %}
   background-image: url({{ site.navbar-img }});
   background-attachment: fixed;
@@ -139,7 +129,7 @@ img {
 .navbar-custom .navbar-brand:focus ,
 .navbar-custom .nav li a:hover,
 .navbar-custom .nav li a:focus {
-  color: #0085a1;
+  color: {{ site.hover-col }};
 }
 
 .navbar-custom .navbar-brand-logo {
@@ -233,14 +223,14 @@ img {
   display: block;
   padding: 10px;
   padding-left: 30px;
-  background: #f5f5f5;
+  background-color: {{ site.navbar-children-col }};
   text-decoration: none !important;
   border-width: 0 1px 1px 1px;
   font-weight: normal;
 }
 @media only screen and (max-width: 767px) {
   .navbar-custom .nav .navlinks-container.show-children {
-    background: #eee;
+    background-color: #eee;
   }
   .navbar-custom .nav .navlinks-container.show-children .navlinks-children {
     display: block;
@@ -251,7 +241,7 @@ img {
     text-align: center;
   }
   .navbar-custom .nav .navlinks-container:hover {
-    background: #eee;
+    background: rgba(0, 0, 0, 0.1);
   }
   .navbar-custom .nav .navlinks-container:hover .navlinks-children {
     display: block;
@@ -270,21 +260,22 @@ img {
 
 footer {
   padding: 30px 0;
-  background: #F5F5F5;
   border-top: 1px #EAEAEA solid;
   margin-top: 50px;
   font-size: 14px;
-  {% if site.footer-col %}
-  background: {{ site.footer-col }};
-  {% endif %}
+  background-color: {{ site.footer-col }};
   {% if site.footer-img %}
   background-image: url({{ site.footer-img }});
   background-attachment: fixed;
   {% endif %}
 }
 
+footer p.text-muted {
+  color: {{ site.footer-text-col }};
+}
+
 footer a {
-  color: #404040;
+  color: {{site.footer-link-col}};
 }
 
 footer .list-inline {
@@ -338,7 +329,7 @@ footer .theme-by {
 .post-preview a:focus,
 .post-preview a:hover {
   text-decoration: none;
-  color: #0085a1;
+  color: {{ site.hover-col }};
 }
 
 .post-preview .post-title {
@@ -402,14 +393,14 @@ footer .theme-by {
 }
 
 .blog-tags a {
-  color: #008AFF;
+  color: {{ site.link-col }};
   text-decoration: none;
   padding: 0px 5px;
 }
 
 .blog-tags a:hover {
   border-radius: 2px;
-  color: #008AFF;
+  color: {{ site.hover-col }};
   background-color: #CCC;
 }
 
@@ -542,7 +533,7 @@ footer .theme-by {
 
 .header-section.has-img .no-img {
   margin-top: 0;
-  background: #FCFCFC;
+  background-color: #FCFCFC;
   margin: 0 0 40px;
   padding: 20px 0;
   box-shadow: 0 0 5px #AAA;
@@ -603,7 +594,7 @@ footer .theme-by {
   font-weight: 800;
   letter-spacing: 1px;
   padding: 10px 5px;
-  background: #FFF;
+  background-color: #FFF;
   border-radius: 0;
   color: #404040;
 }
@@ -615,8 +606,8 @@ footer .theme-by {
 .pager li a:hover,
 .pager li a:focus {
   color: #FFF;
-  background: #0085a1;
-  border: 1px solid #0085a1;
+  border: 1px solid {{ site.hover-col }};
+  background-color: {{ site.hover-col }};
 }
 
 .pager {
@@ -679,7 +670,7 @@ pre code {
   white-space: pre;
 }
 pre.highlight, .highlight > pre, td.code pre {
-  background: #FAFAFA;
+  background-color: #FAFAFA;
   background-image: linear-gradient(#F9F9F9 50%, #FDFDFD 50%);
   background-repeat: repeat;
   background-size: 3em 3em;
@@ -753,5 +744,5 @@ td.gutter {
 }
 
 .navbar-default button.navbar-toggle[aria-expanded="true"] {
-  background-color: #ddd;
+  background-color: rgba(0, 0, 0, .2);
 }