From 436f712843360f98b2bd63256bf0c4f77013b54c Mon Sep 17 00:00:00 2001
From: Tanuj Kanti <86398394+Tanujkanti4441@users.noreply.github.com>
Date: Thu, 17 Nov 2022 15:47:26 +0530
Subject: [PATCH] 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
---
docs/src/_includes/layouts/base.html | 2 +-
docs/src/assets/scss/components/hero.scss | 5 +++++
docs/src/assets/scss/docs-header.scss | 4 ++++
docs/src/assets/scss/docs.scss | 9 ++++-----
docs/src/assets/scss/foundations.scss | 5 +++++
5 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
index 300ba745719..0834c0b52dc 100644
--- a/docs/src/_includes/layouts/base.html
+++ b/docs/src/_includes/layouts/base.html
@@ -138,7 +138,7 @@
-
+
Skip to main content
{{ content | safe }}
diff --git a/docs/src/assets/scss/components/hero.scss b/docs/src/assets/scss/components/hero.scss
index b4c8cd4d52a..44a7390e027 100644
--- 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
index e2a2fecdb48..15f21cf47ee 100644
--- 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
index 934fbb04bfb..3174035e022 100644
--- 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
index 25b0e1df429..c370aaeabb7 100644
--- 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 {