Fix fragment scroll margin (#8702)

* fix fragment scroll margin

* fix header issues; simplify some; fix mobile notification height

---------

Co-authored-by: Carrie Warner (Mattermost) <74422101+cwarnermm@users.noreply.github.com>
Co-authored-by: Eric Sethna <14333569+esethna@users.noreply.github.com>

Author: 3 people

source/_static/css/homepage-v1.css

@@ -10,18 +10,21 @@
     --marigold: #FFBC1F;
     --black-04: #5A6072;
     --black-05: #363A45;
-}
 
-section[id] {
-    scroll-margin-top: 100px;
+    /* Header component heights */
+    --notification-bar-height: 45px;
+    --nav-bar-height: 73px;
 }
 
-@media (min-width: 767.98px) {
-    section[id] {
-        scroll-margin-top: 150px;
-    }
+body:not(.with-notification) {
+    --notification-bar-height: 0px;
 }
 
+/* Scroll margin for fragment navigation - positions target just below header.
+   Must be less than Furo's Gumshoe offset (header + 2.5rem + 1) for TOC highlighting. */
+section[id] {
+    scroll-margin-top: calc(var(--notification-bar-height) + var(--nav-bar-height) + 1px);
+}
 
 .pointer-events-none {
     pointer-events: none;
@@ -143,42 +146,37 @@ details.mm-sbom > ul > li {
 /* Notification Banner */
 
 .notification-bar {
+    position: relative;
     color: #1B1D22;
     text-align: center;
     display: none;
     width: 100%;
     align-items: center;
     justify-content: center;
-    height: 45px;
+    height: var(--notification-bar-height);
     background-color: #FFBC1F;
-    position: fixed;
-    z-index: 9999;
 }
 
 .notification-bar a {
     text-decoration: none;
 }
 
-@media (max-width: 770px) {
-    .notification-bar {
-        text-align: left;
-        /* TEMP FOR LONG COPY */
-        height: 70px;
-    }
-}
 
 
 .notification-bar.closed {
     display: none;
 }
 
 .notification-bar__content {
-    padding: 0.5rem 3rem 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
     font-family: "trade-gothic-next", "Lato", "Helvetica Neue", "Arial", sans-serif;
     font-weight: 700;
     font-size: 15px;
     line-height: 1.2;
     width: 100%;
+    height: 100%;
 }
 
 .notification-bar__content>div {
@@ -192,6 +190,8 @@ details.mm-sbom > ul > li {
 .notification-bar__wrapper {
     display: flex;
     align-items: center;
+    justify-content: center;
+    flex: 1;
 }
 
 .notification-bar__wrapper a {
@@ -218,22 +218,17 @@ details.mm-sbom > ul > li {
 .notification-bar__close {
     font-size: 36px;
     font-weight: 300;
-    position: absolute;
     cursor: pointer;
-    right: -5px;
     opacity: .3;
-    top: 0;
-    width: 64px;
-    line-height: 35px;
+    order: 1;
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 2px 10px;
 }
 
-@media (max-width: 770px) {
-    .notification-bar__close {
-        /* TEMP FOR LONG COPY */
-        right: -25px;
-        top: 10px;
-    }
-}
+
 
 .notification-bar-hide:hover {
     opacity: .5;
@@ -243,11 +238,6 @@ details.mm-sbom > ul > li {
     display: flex;
 }
 
-
-.with-notification .wy-grid-for-nav {
-    padding-top: 114px;
-}
-
 kbd {
     display: inline-block;
     border: 1px solid #ccc;
@@ -1311,6 +1301,7 @@ body:not([data-custom-theme="light"]) .site-header__col--menu .site-nav__hassubn
 }
 
 .nav-container {
+    position: relative;
     width: 100%;
     max-width: 1312px;
     margin-right: auto;
@@ -2014,4 +2005,4 @@ table img[height="14"], table img[height="16"],
     border: none !important;
 }
 
-/* Mermaid dark theme configured in conf.py - no custom overrides needed */
+/* Mermaid dark theme configured in conf.py - no custom overrides needed */

source/_static/css/mattermost-global.css

@@ -25,17 +25,13 @@ body {
 
         .sidebar-sticky {
             @media (max-width: 770px) {
-                padding-top: 110px;
+                padding-top: 120px;
             }
         }
 
         .mobile-header {
             top: -15px;
         }
-
-        header {
-            top: 45px;
-        }
     }
 }
 

source/_static/scss/homepage-v1.scss

@@ -35,11 +35,6 @@ body:not([data-custom-theme="light"]) {
 
 @media (max-width: 770px) {
     .notification-bar {
-        height: 48px;
         align-items: center;
     }
-
-    .notification-bar__close {
-        top: 0;
-    }
 }

source/_static/scss/partials/_header.scss

@@ -1,18 +1,18 @@
-<div data-swiftype-index=false class="notification-bar sticky-top">
-    <div class="notification-bar__content">
-        <a class="notification-bar__close" data-ol-has-click-handler="">
-            <span aria-hidden="true">×</span>
-        </a>
-	    <div class="notification-bar__wrapper">
-		<a href="https://mattermost.com/blog/mattermost-v11-powering-more-mission-critical-collaboration/" target="_blank" class="notification-bar__link"><img src="{{ pathto('_static/images/notification-bar/icon-megaphone.svg', 1) }}" alt="">Mattermost v11.0 is now available! Learn what's new »</a>
-		</div>
-    </div>
-</div>
 {%- if pagename == 'index' %}
 <header class="site-header" itemscope="" itemtype="https://schema.org/WebSite">
 {%- else %}
 <header class="site-header site-header--not-home" itemscope="" itemtype="https://schema.org/WebSite">
 {% endif %}
+	<div data-swiftype-index=false class="notification-bar">
+		<div class="notification-bar__content">
+			<a class="notification-bar__close" data-ol-has-click-handler="">
+				<span aria-hidden="true">×</span>
+			</a>
+			<div class="notification-bar__wrapper">
+				<a href="https://mattermost.com/blog/mattermost-v11-powering-more-mission-critical-collaboration/" target="_blank" class="notification-bar__link"><img src="{{ pathto('_static/images/notification-bar/icon-megaphone.svg', 1) }}" alt="">Mattermost v11.0 is now available! Learn what's new »</a>
+			</div>
+		</div>
+	</div>
 	<div class="nav-container site-header__container">
 		<div class="site-header__row">
 			<div class="site-header__col--logo">