Merge branch 'breadcrumbs-cta-overlay' into 'master'

fix(breadcrumbs): adjust padding and spacing

See merge request gitlab-org/gitlab-docs!1472

2 files changed, 21 insertions, 10 deletions

diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 72cdf160..615c8e19 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 94
+version: 95
 ---
 
 @import "variables";
@@ -712,10 +712,16 @@ a.global-nav-link {
 
 .gl-breadcrumbs {
   border-width: 0;
-  padding-top: 1rem;
+  padding-top: 2rem;
   padding-bottom: 1rem;
 }
 
+@media (max-width: $md-width) {
+  .gl-breadcrumbs {
+    padding-top: 1rem;
+  }
+}
+
 .gl-breadcrumb-list {
   margin-top: .1rem;
   background-color: transparent;
@@ -731,6 +737,10 @@ a.global-nav-link {
   }
 }
 
+.gl-breadcrumb-separator {
+  margin-top: -.2rem;
+}
+
 .gl-breadcrumb-separator>svg {
   margin: auto .5rem;
   width: .5rem;
@@ -741,6 +751,7 @@ a.global-nav-link {
 .gl-breadcrumb-avatar-tile {
   margin-right: .25rem;
   margin-top: .1rem;
+  margin-bottom: .2rem;
   border: 1px solid $help-gray-200;
   border-radius: 50%;
 }
@@ -941,11 +952,11 @@ a.global-nav-link {
   white-space: nowrap;
   .logo-container {
     margin-right: 32px;
-    @media (max-width: $md-width) {
+    @media (max-width: $lg-width) {
       margin-right: 16px;
     }
   }
-  @media all and (max-width: $md-width) {
+  @media all and (max-width: $lg-width) {
     height: auto;
   }
   img {
@@ -959,14 +970,14 @@ a.global-nav-link {
     margin: 0 0 0 4px;
   }
   .header-company-name {
-    @media (max-width: $md-width) {
+    @media (max-width: $lg-width) {
       display: none;
     }
   }
   ul {
     text-align: right;
     list-style-type: none;
-    @media all and (max-width: $md-width) {
+    @media all and (max-width: $lg-width) {
       display: none;
     }
   }
@@ -987,7 +998,7 @@ a.global-nav-link {
       background-color: $button-cta-background-hover;
     }
   }
-  @media all and (max-width: $md-width) {
+  @media all and (max-width: $lg-width) {
     &.active {
       display: block;
       .nav {
@@ -1094,7 +1105,7 @@ a.global-nav-link {
   }
   .nav-toggle {
     display: none;
-    @media all and (max-width: $md-width) {
+    @media all and (max-width: $lg-width) {
       display: flex;
       height: $page-header-height;
       align-items: center;
diff --git a/layouts/breadcrumbs.html b/layouts/breadcrumbs.html
index ae98117a..a96f200a 100644
--- a/layouts/breadcrumbs.html
+++ b/layouts/breadcrumbs.html
@@ -5,8 +5,8 @@
       <img src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15" class="gl-breadcrumb-avatar-tile" width="15" height="15">
       <ol class="breadcrumb gl-breadcrumb-list ml-1">
         <% ancestor_array.reverse_each do |item| %>
-        <li class="gl-breadcrumb-item"><%= link_to item.key?(:title) ? "#{item[:title]}" : "Breadcrumb", item %></li>
-        <span data-testid="separator" class="gl-breadcrumb-separator"><svg viewBox="0 0 16 16"><path d="M9.9 8.064L5.656 3.821A1 1 0 0 1 7.07 2.407l4.95 4.95a1 1 0 0 1 0 1.414l-4.95 4.95a1 1 0 0 1-1.414-1.414l4.242-4.243z" fill-rule="evenodd"></path></svg></span>
+          <li class="gl-breadcrumb-item"><%= link_to item.key?(:title) ? "#{item[:title]}" : "Breadcrumb", item %></li>
+          <span data-testid="separator" class="gl-breadcrumb-separator"><svg viewBox="0 0 16 16"><path d="M9.9 8.064L5.656 3.821A1 1 0 0 1 7.07 2.407l4.95 4.95a1 1 0 0 1 0 1.414l-4.95 4.95a1 1 0 0 1-1.414-1.414l4.242-4.243z" fill-rule="evenodd"></path></svg></span>
         <% end %>
         <li class="gl-breadcrumb-item"><%= @item.key?(:title) ? "#{@item[:title]}" : "Current page" %></li>
       </ol>