recolor header background

Author: bishabosha

_sass/layout/header.scss

@@ -7,7 +7,7 @@
     background: $gray-darker;
 
     .new-on-the-blog {
-      background: rgba($gray-darker, 0.8);
+      background: rgba($banner-notice-bg, 0.8);
       text-align: center;
       padding: 8px 0;
       color: #fff;
@@ -44,7 +44,7 @@
     &.header-home {
         background: none;
         .header-background {
-            background: linear-gradient($brand-secondary, 40%, $gray-darker);
+            background: $header-bg;
             position: relative;
             padding-bottom: 120px;
         }

_sass/layout/nutshell.scss

@@ -3,12 +3,12 @@
 //------------------------------------------------
 
 .nutshell {
-    background: $gray;
+    background: $gray-nutshell;
 
     .heading-line {
         h2 {
             span {
-                background: $gray;
+                background: $gray-nutshell;
             }
         }
         .call-to-action.action-medium {

_sass/layout/scala-main-resources.scss

@@ -4,7 +4,7 @@
 
 .scala-main-resources {
     height: 105px;
-    background: $gray-darker;
+    background: $banner-bg;
     position: relative;
 
     .resources {
@@ -82,9 +82,11 @@
                     margin-right: 7px;
                     font-weight: $font-bold;
 
+                    color: rgba(#fff, 0.90);
+
                     a {
-                        color: rgba(#fff, 0.90);
                         font-size: $font-size-medium;
+                        color: rgba(#fff, 0.90);
 
                         &:active,
                         &:focus,
@@ -122,7 +124,7 @@
             @include justify-content(center);
 
             .circle-solid {
-                background: $gray-darker;
+                background: $gray-darkest;
                 width: 185px;
                 height: 185px;
                 border-radius: 100%;

_sass/utils/_variables.scss

@@ -10,16 +10,23 @@ $brand-tertiary: #5CC6E4;
 $brand-tertiary-dotty: #E45C77;
 
 //-------------------------------------------------
+$gray-darkest: #002B36;
 $gray-darker: #002B36;
 $gray-dark: #073642;
 $gray: #15414C;
+$gray-nutshell: $gray;
 $gray-li: #244E58;
 $gray-light: #E5EAEA;
 $gray-lighter: #F0F3F3;
 $apple-blue: #6dccf5;
 $std-link: #23aad1;
 $gray-heading: rgb(134, 161, 166);
 
+// $header-bg: #266270;
+$header-bg: #0c4d5d;
+$banner-notice-bg: $gray-darkest;
+$banner-bg: #0c3540;
+
 //-------------------------------------------------
 $code-bg-color-dark: #22272e; // taken from github-dark-dimmed hljs theme
 $code-bg-color-dark-highlight: #464e5b;