navbar: add more contrast for the secondary active

demo.html

@@ -72,7 +72,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="container">
                 <ul>
                     <li><a href="#">Desktop e portatili</a></li>
-                    <li><a href="#">Server e cloud</a></li>
+                    <li><a href="#" class="active">Server e cloud</a></li>
                     <li><a href="#">Derivate</a></li>
                 </ul>
             </div>

scss/_navbar.scss

@@ -14,7 +14,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@mixin navbar-style($background, $color, $hover_color, $font_size) {
+@mixin navbar-style($background, $active_background, $color, $hover_color, $font_size) {
     background: $background;
 
     ul li {
@@ -29,7 +29,7 @@
 
             &:hover, &.active {
                 color: $hover_color;
-                background: mix(#fff, $background, 10%);
+                background: $active_background;
             }
         }
 
@@ -100,24 +100,22 @@ nav {
 
     @include navbar-style(
         mix(#fff, $color_warm_gray, 90%),
+        mix(#fff, $color_warm_gray, 97%),
         mix(#000, $color_warm_gray, 40%),
-        mix(#000, $color_warm_gray, 60%),
+        mix(#000, $color_warm_gray, 70%),
         1rem,
     );
 
     &.main-navbar {
         font-weight: 400;
-        @include navbar-style($color_orange, #fff, #fff, 1rem);
+        @include navbar-style($color_orange, mix(#fff, $color_orange, 10%), #fff, #fff, 1rem);
     }
 
     &.sites-list {
-        @include navbar-style($color_cool_gray, $color_warm_gray, #fff, 0.8rem);
+        @include navbar-style($color_cool_gray, $color_cool_gray, $color_warm_gray, #fff, 0.8rem);
 
         ul li a {
             padding: 0.5em 0.7em;
-            &:hover, &.active {
-                background: $color_cool_gray;
-            }
         }
     }