style(navigation): change navigation BG colours

Align nav bar BG colours with main content
and update the whitespace around
the main content

3 files changed, 13 insertions, 14 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index db53d3e2..1c021026 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -31,7 +31,7 @@ $page-header-height: 40px;
 $banner-height: 31px;
 
 // Width
-$sidebar-width: 220px;
+$sidebar-width: 16.666667%;
 $toc-width: 320px;
 $page-content-width: 980px;
 
@@ -93,7 +93,7 @@ $gds-indigo-800: #393982;
 
 // Base colors
 $body-color: $gds-gray-950; //font color
-$body-background-color: rgba($gds-gray-50, .3); //body background
+$body-background-color: $gds-white; //body background
 $main-background-color: $gds-white; // content background
 $header-background-color: $gds-purple-900;
 $header-font-color: $gds-indigo-100;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 1c0b641a..045a11e2 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 89
+version: 90
 ---
 
 @import "variables";
@@ -10,7 +10,6 @@ version: 89
 }
 
 body {
-  background: $body-background-color;
   margin: 0;
   padding: 0;
   line-height: 24px;
@@ -20,7 +19,6 @@ body {
 
   >.wrapper {
     min-height: 100vh;
-    background-color: $gds-gray-50;
 
     @media(max-width: $md-width) {
       flex-direction: column-reverse;
@@ -301,8 +299,7 @@ h6 {
 }
 
 .main {
-  padding: $page-header-height 40px 0;
-  border-right: 1px solid $main-box-shadow;
+  padding: $page-header-height 5%;
   background: $main-background-color;
   z-index: 1;
 
@@ -481,6 +478,7 @@ h6 {
 }
 
 .nav-wrapper {
+  background-color: $gds-white;
   display: flex;
   flex-direction: column;
   position: sticky;
@@ -488,7 +486,6 @@ h6 {
   width: 50px;
   height: 100vh;
   transition: all .3s;
-  background: $gds-gray-50;
   border-right: 1px solid $gds-gray-200;
   z-index: 2;
   top: 0;
@@ -947,6 +944,10 @@ a.global-nav-link {
     margin-left: 10px;
     margin-right: 10px;
   }
+
+  @media (max-width: $md-width) {
+    margin-top: 60px;
+  }
 }
 // End of banner alert box
 
@@ -1240,10 +1241,8 @@ a.global-nav-link {
   .sidebar-left {
     @include sidebar-fixed;
     border-right: 1px solid $help-gray-100;
-    background-color: $gds-gray-50;
     .list-group-item {
       line-height: 24px;
-      background-color: $gds-gray-50;
       color: $landing-sidebar-gray;
       padding-top: $sidebar-padding;
       padding-bottom: $sidebar-padding;
diff --git a/content/index.erb b/content/index.erb
index da24567a..2308e45f 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -22,7 +22,7 @@ title: GitLab Documentation
     </div>
   </nav>
   <main class="content">
-    <div class="row px-4 pt-4">
+    <div class="row px-5 ml-0 ml-md-5 pt-4">
       <div class="col-12">
         <%= render '/banner.*' %>
         <h1 class="landing-header-title border-bottom-0 font-weight-bold">Welcome to GitLab Docs</h1>
@@ -32,7 +32,7 @@ title: GitLab Documentation
         <h2 class="landing-header-subtitle border-bottom-0 font-weight-bold">Select a product area</h2>
       </div>
     </div>
-    <div class="row px-4" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
+    <div class="row px-5 ml-0 ml-md-5" itemscope itemtype="http://www.schema.org/SiteNavigationElement">
       <% if production? %>
         <% @config[:products].each do |name, product| %>
           <% if product[:expose] == true %>
@@ -91,7 +91,7 @@ title: GitLab Documentation
         <% end %>
       <% end %>
     </div>
-      <div class="row px-4 mb-3">
+      <div class="row px-5 ml-0 ml-md-5 mb-3">
         <div class="col-12 pb-3">
           <h2 class="landing-header-subtitle border-bottom-0 font-weight-bold">Popular topics</h2>
         </div>
@@ -113,7 +113,7 @@ title: GitLab Documentation
           <% end %>
         <% end %>
       </div>
-      <div class="row px-4">
+      <div class="row px-5 ml-0 ml-md-5">
         <div class="col">
           <%= render '/feedback.*' %>
         </div>