docs: fix Header UI inconsistency (#16464)

* fix: Header UI inconsistency * fix: unexpected empty line * fix: additional class * fix: design break on mobile size * fix: UI of other pages on docs
eslint · Nov 17, 2022 · 436f712 · 436f712
1 parent f743816
commit 436f712
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
@@ -138,7 +138,7 @@
     <script src="https://unpkg.com/anchor-js@4.3.1/anchor.min.js"></script>
 </head>
 
-<body class="{{ hook }} docs">
+<body class="{{ hook }}">
     <a href="#main" class="c-btn c-btn--primary" id="skip-link">Skip to main content</a>
 
     {{ content | safe }}

diff --git a/docs/src/assets/scss/components/hero.scss b/docs/src/assets/scss/components/hero.scss
@@ -36,6 +36,11 @@
         padding: 0 calc(1rem + 1vw);
         padding-bottom: 0;
         align-items: center;
+        max-width: 1700px;
+
+        @media all and (min-width: 1700px) {
+            margin: auto;
+        }
     }
 }
 

diff --git a/docs/src/assets/scss/docs-header.scss b/docs/src/assets/scss/docs-header.scss
@@ -12,10 +12,14 @@
         padding-bottom: 0;
         padding-block-start: 0;
         padding-block-end: 0;
+        max-width: 1700px;
 
         @media all and (min-width: 1024px) {
             justify-content: space-between;
         }
+        @media all and (min-width: 1700px) {
+            margin: auto;
+        }
     }
 }
 

diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
@@ -4,11 +4,6 @@ html {
     scroll-behavior: smooth;
 }
 
-.docs {
-    max-width: 1700px;
-    margin: 0 auto;
-}
-
 .docs-aside__content {
     flex: 1;
 }
@@ -18,12 +13,16 @@ html {
     flex: 1;
     display: flex;
     flex-direction: column;
+    max-width: 1700px;
 
     @media all and (min-width: 1024px) {
         display: grid;
         grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
         align-items: stretch;
     }
+    @media all and (min-width: 1700px) {
+        margin: auto;
+    }
 }
 
 .docs-nav {

diff --git a/docs/src/assets/scss/foundations.scss b/docs/src/assets/scss/foundations.scss
@@ -121,6 +121,11 @@ hr {
     width: 100%;
     margin: 0 auto;
     padding: var(--space-xl-3xl) calc(1rem + 1vw);
+    max-width: 1700px;
+
+    @media all and (min-width: 1700px) {
+        margin: auto;
+    }
 }
 
 .section-head {