Add a new coloured theme

Author: jbampton

_includes/footer.html

@@ -61,7 +61,7 @@ <h2>Categories</h2>
         <p>{{ site.last_update }}{{ site.time }}</p>
         <p>
           <a href="http://info.flagcounter.com/bG4O" target="_blank" rel="noopener">
-            <img src="http://s09.flagcounter.com/countxl/bG4O/bg_FFFFFF/txt_000000/border_CCCCCC/columns_3/maxflags_100/viewers_0/labels_0/pageviews_1/flags_0/percent_0/"
+            <img src="http://s09.flagcounter.com/countxl/bG4O/bg_fffa00/txt_000000/border_000000/columns_3/maxflags_100/viewers_0/labels_0/pageviews_1/flags_0/percent_0/"
                  alt="Flag Counter">
           </a>
         </p>

_layouts/default.html

@@ -30,7 +30,8 @@
                          is3D: true,
                          'width': 400,
                          'height': 330,
-                         'titleTextStyle': { 'color': 'black' } };
+                         'titleTextStyle': { 'color': 'black', bold: true },
+                         'backgroundColor': '#fffa00' };
           // Instantiate and draw our chart, passing in some options.
           var chart = new google.visualization.PieChart(document.getElementById('chart_div_developer_name'));
           chart.draw(data, options);
@@ -46,7 +47,8 @@
                          is3D: true,
                          'width': 400,
                          'height': 330,
-                         'titleTextStyle': { 'color': 'black' } };
+                         'titleTextStyle': { 'color': 'black', bold: true },
+                         'backgroundColor': '#fffa00'};
           // Instantiate and draw our chart, passing in some options.
           var chart = new google.visualization.PieChart(document.getElementById('chart_div_all'));
           chart.draw(data, options);

_sass/_layout.scss

@@ -3,12 +3,13 @@
  */
 .site-header {
     border-top: 5px solid $grey-color-dark;
-    border-bottom: 1px solid $grey-color-light;
+    border-bottom: 5px solid $grey-color-dark;
     min-height: 56px;
-    background-color: $peach;
+    background-color: #FF00FF;
     // Positioning context for the mobile navigation icon
     position: relative;
     font-weight: bold;
+    padding-bottom: 7px;
 }
 
 .site-title {
@@ -48,9 +49,9 @@
         position: absolute;
         top: 9px;
         right: $spacing-unit / 2;
-        background-color: $background-color;
-        border: 1px solid $grey-color-light;
-        border-radius: 5px;
+        background-color: #66ff00;
+        border: 5px solid $grey-color-dark;
+        border-radius: 20px;
         text-align: right;
 
         .menu-icon {
@@ -100,8 +101,9 @@
  * Site footer
  */
 .site-footer {
-    border-top: 1px solid $grey-color-light;
+    border-top: 5px solid $grey-color-dark;
     padding: $spacing-unit 0;
+    background-color: $background-color;
 }
 
 .footer-heading {
@@ -124,8 +126,6 @@
 
 }
 
-body { background-color: white;}
-
 .footer-col {
     float: left;
     margin-bottom: $spacing-unit / 2;
@@ -181,6 +181,7 @@ pre, .footer-col p {
  */
 .page-content {
     padding: $spacing-unit 0;
+    background-color: white;
 
 }
 

css/main.scss

@@ -15,7 +15,7 @@ $base-line-height: 1.5;
 $spacing-unit:     30px;
 
 $text-color:       #111;
-$background-color: #fdfdfd;
+$background-color: #fffa00;
 $brand-color:      #2a7ae2;
 
 $grey-color:       #828282;