Colors can now be set in config file.

Had to move the css files containing the colors to the /_includes
directory to put variables in them.

_config.yml

@@ -3,6 +3,11 @@ title: Your awesome title
 email: your-email@domain.com
 description: "Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description."
 
+# Color settings
+primary: 80B3FF #18bc9c
+secondary: A2122F #233140
+secondary-light: FD6E8A #2c3e50
+
 # Social media usernames
 twitter: jekyllrb
 facebook: 

_includes/footer.html

@@ -23,6 +23,11 @@
                     <div class="footer-col col-md-4">
                         <h3>Around the Web</h3>
                         <ul class="list-inline">
+                            {% if site.twitter %}
+                            <li>
+                                <a href="{{ site.twitter }}" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
+                            </li>
+                            {% endif %}
                             {% if site.facebook %}
                             <li>
                                 <a href="{{ site.facebook }}" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
@@ -33,11 +38,7 @@
                                 <a href="{{ site.google-plus }}" class="btn-social btn-outline"><i class="fa fa-fw fa-google-plus"></i></a>
                             </li>
                             {% endif %}
-                            {% if site.twitter %}
+
-                            <li>
-                                <a href="{{ site.twitter }}" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
-                            </li>
-                            {% endif %}
                             {% if site.linkedin %}
                             <li>
                                 <a href="{{ site.linkedin }}" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>

_includes/head.html

@@ -7,11 +7,8 @@
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
 
 
-    <!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
+    <!-- Custom CSS & Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
-    <link rel="stylesheet" href="{{ "/css/bootstrap.min.css" | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ "/style.css" | prepend: site.baseurl }}">
-
-    <!-- Custom CSS -->
-    <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
 
     <!-- Custom Fonts -->
     <link rel="stylesheet" href="{{ "/css/font-awesome/css/font-awesome.min.css" | prepend: site.baseurl }}">

_includes/main.css

@@ -22,7 +22,7 @@ a:focus,
 a:active,
 a.active {
     outline: 0;
-    color: #18bc9c;
+    color: #{{ site.primary }};
 }
 
 h1,
@@ -63,15 +63,15 @@ hr.star-light {
 
 hr.star-light:after {
     color: #fff;
-    background-color: #18bc9c;
+    background-color: #{{ site.primary }};
 }
 
 hr.star-primary {
-    border-color: #2c3e50;
+    border-color: #{{ site.secondary-light }};
 }
 
 hr.star-primary:after {
-    color: #2c3e50;
+    color: #{{ site.secondary-light }};
     background-color: #fff;
 }
 
@@ -82,7 +82,7 @@ hr.star-primary:after {
 header {
     text-align: center;
     color: #fff;
-    background: #18bc9c;
+    background: #{{ site.primary }};
 }
 
 header .container {
@@ -181,7 +181,7 @@ section h2 {
 
 section.success {
     color: #fff;
-    background: #18bc9c;
+    background: #{{ site.primary }};
 }
 
 @media(max-width:767px) {
@@ -265,7 +265,7 @@ section.success {
 .btn-outline:active,
 .btn-outline.active {
     border: solid 2px #fff;
-    color: #18bc9c;
+    color: #{{ site.primary }};
     background: #fff;
 }
 
@@ -318,7 +318,7 @@ section.success {
 }
 
 .floating-label-form-group-with-focus label {
-    color: #18bc9c;
+    color: #{{ site.primary }};
 }
 
 form .row:first-child .floating-label-form-group {
@@ -335,7 +335,7 @@ footer h3 {
 
 footer .footer-above {
     padding-top: 50px;
-    background-color: #2c3e50;
+    background-color: #{{ site.secondary-light }};
 }
 
 footer .footer-col {
@@ -344,7 +344,7 @@ footer .footer-col {
 
 footer .footer-below {
     padding: 25px 0;
-    background-color: #233140;
+    background-color: #{{ site.secondary }};
 }
 
 .btn-social {
@@ -428,7 +428,7 @@ footer .footer-below {
     width: 1px;
     height: 75px;
     margin-left: 35px;
-    background-color: #2c3e50;
+    background-color: #{{ site.secondary-light }};
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
@@ -438,7 +438,7 @@ footer .footer-below {
     z-index: 1052;
     width: 1px;
     height: 75px;
-    background-color: #2c3e50;
+    background-color: #{{ site.secondary-light }};
     -webkit-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     transform: rotate(90deg);

_layouts/default.html

@@ -3,6 +3,8 @@
 
   {% include head.html %}
 
+    <style>{% include main.css %}</style>
+    <style>{% include bootstrap.min.css %}</style>
     <body id="page-top" class="index">
 
     {% include header.html %}

_layouts/style.css

@@ -0,0 +1,2 @@
+{% include bootstrap.min.css %}
+{% include main.css %}

style.css

@@ -0,0 +1,4 @@
+---
+layout: style
+---
+