Merge branch 'sticky-header-positioning' into 'main'fneill-update-left-nav

Refactor spacing styles around the header

See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/4118

Merged-by: David O'Regan <doregan@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>

13 files changed, 51 insertions, 73 deletions

diff --git a/content/assets/stylesheets/_landing.scss b/content/assets/stylesheets/_landing.scss
index 5cad4685..916de307 100644
--- a/content/assets/stylesheets/_landing.scss
+++ b/content/assets/stylesheets/_landing.scss
@@ -16,6 +16,11 @@
     }
   }
 
+  // banner
+  .admonition-wrapper {
+    margin-top: -1.5rem;
+  }
+
   // cards
   .card {
     box-shadow: 0 0.5rem 1.5rem -0.75rem $landing-gl-blue-1000;
@@ -55,7 +60,7 @@
     background-image: url('/assets/images/hero-bg.svg');
     background-repeat: no-repeat;
     background-attachment: inherit;
-    background-position: 50% 4%;
+    background-position: 50% 0.85rem;
 
     @media (max-width: $bp-sm) {
       background-image: url('/assets/images/hero-bg-mobile.svg');
@@ -125,17 +130,19 @@
     }
 
     .oval {
-      border-radius: 50%;
-      position: absolute;
-      left: 0;
-      right: 0;
-      margin: auto;
-      width: 43.188rem;
-      height: 29rem;
-      background: $landing-gl-purple-50;
-      mix-blend-mode: multiply;
-      opacity: 0.24;
-      filter: blur(10.25rem);
+      @media (min-width: $bp-md) {
+        border-radius: 50%;
+        position: absolute;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 43.188rem;
+        height: 29rem;
+        background: $landing-gl-purple-50;
+        mix-blend-mode: multiply;
+        opacity: 0.24;
+        filter: blur(10.25rem);
+      }
     }
 
     .topic {
diff --git a/content/assets/stylesheets/_sidebar.scss b/content/assets/stylesheets/_sidebar.scss
index 7a081549..ad05e8f5 100644
--- a/content/assets/stylesheets/_sidebar.scss
+++ b/content/assets/stylesheets/_sidebar.scss
@@ -3,8 +3,6 @@
 .global-nav {
   width: 100%;
   height: 100%;
-  top: 0;
-  left: 0;
   overflow: auto;
   visibility: hidden;
   .global-nav-cat.active {
@@ -13,7 +11,7 @@
     }
   }
   .global-nav-content {
-    margin-top: 60px;
+    margin-top: 1rem;
     margin-bottom: 70px;
   }
   a {
@@ -193,8 +191,10 @@
 }
 
 @media (min-width: $bp-xl) {
+  .mobile-toggle-wrapper,
   .mobile-nav-toggle {
     display: none;
     border-bottom: 0;
+    margin: 0;
   }
 }
diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index fb47a238..7a7fc7c4 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -418,10 +418,6 @@
     font-size: 2rem;
     line-height: 1;
     margin-bottom: 1.5rem;
-    margin-top: -3.3rem;
-    padding-top: 6.6rem;
-    z-index: 0;
-    position: relative;
   }
   @media screen and (min-width: $bp-sm) {
     h1 {
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index c8453090..751c5b18 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -10,7 +10,7 @@
 @import 'typography';
 
 body {
-  overflow-x: hidden;
+  overscroll-behavior: none;
   > .wrapper {
     min-height: 100vh;
     @media (max-width: $bp-md) {
@@ -20,6 +20,10 @@ body {
   }
 }
 
+:target {
+  scroll-margin-top: $header-height + 1rem;
+}
+
 main {
   min-height: 52vh;
 }
@@ -79,7 +83,7 @@ ol {
   flex-direction: column;
   position: fixed;
   width: 50px;
-  top: 0;
+  top: $header-height;
   height: 100%;
   transition: all 0.3s;
   border-right: 1px solid $gds-gray-200;
@@ -110,6 +114,8 @@ ol {
     border-radius: 0;
     box-shadow: none;
     justify-content: left;
+    position: relative;
+    top: calc($header-height * -1);
     .label {
       display: none;
     }
@@ -237,11 +243,11 @@ ol {
 
 // Main header CSS
 .navbar {
-  min-height: $header-height;
   background-color: $header-background-color;
 
   .navbar-brand {
     font-size: 1rem;
+    min-height: $header-height;
   }
 
   .navbar-nav {
@@ -502,20 +508,6 @@ p.result-snippet {
   background-color: $header-free-trial-button-color !important;
 }
 
-h2[id]::before,
-h3[id]::before,
-h4[id]::before,
-h5[id]::before,
-h6[id]::before {
-  display: block;
-  content: ' ';
-  margin-top: -4.688rem;
-  height: 4.688rem;
-  visibility: hidden;
-  position: relative;
-  z-index: 0;
-}
-
 // Embedded video
 .video-container {
   width: 35rem;
diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss
index e221476b..8cab2f06 100644
--- a/content/assets/stylesheets/toc.scss
+++ b/content/assets/stylesheets/toc.scss
@@ -55,7 +55,7 @@ $nav-link-font-size: 0.875rem;
 // ToC before JavaScript loads
 #markdown-toc {
   position: absolute;
-  top: 0;
+  top: $header-height;
   right: 0;
   padding-top: calc(4.75rem + 1.375rem * 1.125);
   padding-left: 3rem;
@@ -88,7 +88,7 @@ $nav-link-font-size: 0.875rem;
 }
 
 .markdown-toc {
-  top: 0;
+  top: $header-height;
 
   @media(min-width: $bp-xl) {
     padding-left: 1rem;
@@ -98,7 +98,7 @@ $nav-link-font-size: 0.875rem;
   }
 
   @media(max-width: calc($bp-xl - 1px)) {
-    margin-top: 7rem;
+    margin-top: 6rem;
   }
 }
 
diff --git a/content/frontend/default/components/table_of_contents.vue b/content/frontend/default/components/table_of_contents.vue
index 7ffbc570..4eaaa3b8 100644
--- a/content/frontend/default/components/table_of_contents.vue
+++ b/content/frontend/default/components/table_of_contents.vue
@@ -42,9 +42,9 @@ export default {
 };
 </script>
 <template>
-  <div class="markdown-toc table-of-contents-container position-sticky">
+  <div class="markdown-toc table-of-contents-container gl-lg-sticky">
     <div class="table-of-contents">
-      <h4 class="border-0 toc-sm d-xl-none">
+      <h4 class="gl-my-0! border-0 toc-sm d-xl-none">
         <a
           class="text-decoration-none border-bottom-0"
           href="#"
diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js
index 987f062b..9b4b6053 100644
--- a/content/frontend/default/default.js
+++ b/content/frontend/default/default.js
@@ -6,23 +6,8 @@ import { setupTableOfContents } from './setup_table_of_contents';
 import VersionsMenu from './components/versions_menu.vue';
 import TabsSection from './components/tabs_section.vue';
 
-function fixScrollPosition() {
-  if (!window.location.hash || !document.querySelector(window.location.hash)) return;
-  const contentBody = document.querySelector('.gl-docs main');
-
-  const scrollPositionMutationObserver = new ResizeObserver(() => {
-    if (window.location.hash) {
-      document.scrollingElement.scrollTop =
-        document.querySelector(window.location.hash).getBoundingClientRect().top + window.scrollY;
-    }
-  });
-
-  scrollPositionMutationObserver.observe(contentBody);
-}
-
 /* eslint-disable no-new */
 document.addEventListener('DOMContentLoaded', () => {
-  fixScrollPosition();
   setupTableOfContents();
 
   /**
diff --git a/content/index.erb b/content/index.erb
index f94ad4e4..39e5d75c 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -4,15 +4,13 @@ title: GitLab Documentation
 <!-- Render the front page only if CI_PROJECT_NAME is gitlab-docs or is not set -->
 <% if ENV['CI_PROJECT_NAME'] == 'gitlab-docs' or ENV['CI_PROJECT_NAME'].nil? %>
   <!-- Hero-->
-  <section class="hero text-center pt-4 mt-4">
+  <section class="hero text-center">
     <!-- Feedback Banner-->
-    <div class="gl-mt-n3">
-      <%= render '/banner.*' %>
-    </div>
-    <div class="container py-6 mb-3">
+    <%= render '/banner.*' %>
+    <div class="container gl-mt-11">
       <div class="row">
         <div class="col d-flex justify-content-center">
-          <div class="card search gl-mt-6 gl-py-2">
+          <div class="card search gl-py-2">
             <div class="card-body">
               <h5 class="card-title gl-pb-4">Search the docs</h5>
               <% if @item[:searchbar].nil? %>
diff --git a/layouts/banner.html b/layouts/banner.html
index 8e873734..05aa2edf 100644
--- a/layouts/banner.html
+++ b/layouts/banner.html
@@ -4,7 +4,7 @@ banner_raw = @items["/_data/banner.yaml"][:description]
 <% if show_banner? and !stable_version?(current_branch) %>
 <div class="gl-lg-display-block">
   <div class="admonition-wrapper note gl-display-none" id="banner-close">
-    <div class="admonition alert alert-banner alert-dismissible fade show text-center gl-mt-3 gl-z-index-1" role="alert">
+    <div class="admonition alert alert-banner alert-dismissible fade show gl-text-center gl-mt-6 gl-mb-0 gl-z-index-1" role="alert">
       <div class="gl-display-flex gl-justify-content-center gl-align-items-center">
         <%= icon('tanuki', 12, 'gl-mx-3') %>
         <%= markdown(banner_raw) %>
diff --git a/layouts/default.html b/layouts/default.html
index abc1ee99..f87e945f 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -7,7 +7,7 @@
   </head>
   <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
     <%= render '/header.*' %>
-    <section class="gl-docs container-fluid gl-mt-9">
+    <section class="gl-docs container-fluid">
       <div class="row">
         <div class="col-0 col-xl-2 pl-0">
           <div class="nav-wrapper active gl-display-none!">
@@ -33,8 +33,8 @@
           </div>
           <div class="row">
             <div class="col">
-              <div class="my-3 my-xl-0">
-                <a class="gl-absolute text-muted gl-mt-4 gl-pt-4 gl-text-decoration-none gl-border-bottom-0! mobile-nav-toggle" href="#"><%= icon('hamburger', 18, 'gl-ml-0!') %></a>
+              <div class="mobile-toggle-wrapper gl-mt-7">
+                <a class="gl-absolute text-muted gl-text-decoration-none gl-border-bottom-0! mobile-nav-toggle" href="#"><%= icon('hamburger', 18, 'gl-ml-0!') %></a>
               </div>
             </div>
           </div>
@@ -63,7 +63,7 @@
             </div>
           </div>
         </div>
-        <div class="col-3 py-3 d-none d-xl-flex">
+        <div class="col-3 d-none d-xl-flex">
           <div id="doc-nav" class="doc-nav w-100"></div>
         </div>
       </div>
diff --git a/layouts/header.html b/layouts/header.html
index 7ae47923..cc951de1 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-md navbar-dark py-lg-0 px-3 fixed-top">
+<nav class="navbar navbar-expand-md navbar-dark gl-py-0 gl-px-5 gl-sticky gl-top-0 gl-z-index-9999">
   <a class="navbar-brand d-flex align-items-center justify-content-center mr-3" href="/">
     <img src="<%= @items['/assets/images/gitlab-logo-header.svg'].path %>" alt="GitLab documentation home" class="logo" />
     <span class="border-left border-light ml-2 pl-2">Docs</strong>
@@ -32,7 +32,7 @@
     </ul>
     <div class="js-versions-menu"></div>
     <ul class="navbar-nav gl-mb-3 gl-md-mb-0 gl-md-pr-3">
-      <li class="nav-item">
+      <li class="nav-item gl-mb-4! gl-md-mb-0!">
         <% if @item.identifier.to_s.split('/')[1] == 'omnibus' %>
           <%= render '/cta_omnibus.*' %>
         <% else %>
diff --git a/layouts/search.html b/layouts/search.html
index 49b8d486..ff3ea8da 100644
--- a/layouts/search.html
+++ b/layouts/search.html
@@ -6,9 +6,9 @@
   </head>
   <body>
     <%= render '/header.*' %>
-    <section class="gl-docs container pt-5">
+    <section class="gl-docs container">
       <div class="row">
-        <div class="col-12 mt-5">
+        <div class="col-12">
           <div class="main class pl-lg-4">
             <% if @config[:search_backend] == "google" %>
             <div class="js-google-search"></div>
diff --git a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
index 3880d071..8129af96 100644
--- a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
+++ b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
@@ -2,13 +2,13 @@
 
 exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
 <div
-  class="markdown-toc table-of-contents-container position-sticky"
+  class="markdown-toc table-of-contents-container gl-lg-sticky"
 >
   <div
     class="table-of-contents"
   >
     <h4
-      class="border-0 toc-sm d-xl-none"
+      class="gl-my-0! border-0 toc-sm d-xl-none"
     >
       <a
         aria-controls="markdown-toc"