Reduce colours somewhat

* colour bar for header now only has number of colours equal to
  columns underneath it
* h1 and h2 now have grey underlines instead of blue

bug: T182388
bug: T132000
Change-Id: I883bcfa872d6306c04418230c3f7034e5ec9f188

resources/screen-common.less

@@ -352,13 +352,13 @@ pre,
 
 	h1,
 	h2 {
-		border-bottom: solid 2px @blue;
+		border-bottom: solid 2px @grey;
 		overflow: hidden;
 	}
 
 	h1.firstHeading {
 		margin: 0.25em 0 0.5em;
-		border-bottom: solid 4px @red;
+		border-bottom: solid 4px @blue;
 	}
 
 	h1 {

resources/screen-desktop-mid.less

@@ -18,3 +18,7 @@
 #catlinks {
 	display: none;
 }
+
+.color-right {
+	background: @blue-dark;
+}

resources/screen-desktop-small.less

@@ -27,6 +27,11 @@
 	display: none !important;
 }
 
+.color-right,
+.color-middle {
+	background: @red-dark;
+}
+
 // Have these cover the fixed header color-bar using the mw-header-nav-hack (with its own color-bar at the bottom)
 #mw-site-navigation,
 #mw-related-navigation {

resources/screen-mobile.less

@@ -35,6 +35,12 @@
 	box-shadow: 0 3px 3px 2px rgba( 0, 0, 0, 0.075 ), 0 0 2px rgba( 0, 0, 0, 0.2 );
 }
 
+.color-right,
+.color-middle,
+.color-left {
+	background: @red-dark;
+}
+
 /* Dropdowns */
 .sidebar-inner,
 .dropdown {