This is an automated email from the ASF dual-hosted git repository.
djwang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/cloudberry-site.git
The following commit(s) were added to refs/heads/main by this push:
new 1eb9238a1a Update navbar for the side
1eb9238a1a is described below
commit 1eb9238a1a54f3d31a45979b2b0c4cbf685777d7
Author: Dianjin Wang <[email protected]>
AuthorDate: Mon Sep 1 11:15:27 2025 +0800
Update navbar for the side
Main changes are included:
- Fix the overlap issue between the navbar and the logo files
- Update the gap for the `Meet the Community` module in index page
- Update the branch label for Docs
---
docusaurus.config.ts | 20 +++++--
.../home/MeetTheCommunity/index.module.scss | 64 +++++++++++++++++++--
.../SlackWechatTwitterYoutube/index.module.scss | 30 +++++++++-
src/css/design-style.scss | 66 +++++++++++++++++++++-
src/theme/Navbar/Content/styles.module.css | 31 ++++++++++
5 files changed, 198 insertions(+), 13 deletions(-)
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index d0e8d6cfdd..fee2a298d7 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -91,14 +91,22 @@ const config: Config = {
},
items: [
{
- type: 'docsVersionDropdown',
- versions: ['current', '2.x', '1.x'],
- },
- {
- type: "docSidebar",
- sidebarId: "docsbars",
position: "right",
label: "Docs",
+ items : [
+ {
+ label: "Next",
+ to: "docs/next",
+ },
+ {
+ label: "2.x (Current)",
+ to: "docs/",
+ },
+ {
+ label: "1.x",
+ to: "docs/1.x",
+ },
+ ],
},
{
label: "Community",
diff --git a/src/components/home/MeetTheCommunity/index.module.scss
b/src/components/home/MeetTheCommunity/index.module.scss
index aafb57e4a2..f56db7ff97 100644
--- a/src/components/home/MeetTheCommunity/index.module.scss
+++ b/src/components/home/MeetTheCommunity/index.module.scss
@@ -23,21 +23,55 @@
-webkit-text-fill-color: transparent;
}
+ /* Progressive responsive adjustments for better spacing */
+ @media screen and (max-width: 1600px) {
+ height: 280px;
+ padding-top: 60px;
+ .highTitle {
+ top: 130px;
+ font-size: 60px;
+ }
+ }
+
@media screen and (max-width: 1440px) {
padding-inline: var(--mobile-padding-width);
- height: 910px;
+ height: 350px;
+ padding-top: 50px;
+ margin-bottom: -40px;
+ .highTitle {
+ top: 140px;
+ font-size: 56px;
+ }
.contributorList {
gap: 15px;
width: auto;
}
.bgImg {
- height: 900px;
+ height: 350px;
}
}
+
+ @media screen and (max-width: 1200px) {
+ height: 320px;
+ padding-top: 40px;
+ margin-bottom: -30px;
+ .highTitle {
+ top: 120px;
+ font-size: 52px;
+ }
+ }
+
@media screen and (max-width: 1024px) {
- height: auto;
+ height: 280px;
+ padding-top: 30px;
+ margin-bottom: -20px;
+ .highTitle {
+ top: 100px;
+ font-size: 48px;
+ line-height: 52px;
+ }
.bgImg {
- height: 1000px;
+ height: 280px;
width: 100%;
background-size: contain;
}
@@ -47,4 +81,26 @@
gap: 15px;
}
}
+
+ @media screen and (max-width: 768px) {
+ height: 240px;
+ padding-top: 20px;
+ margin-bottom: -10px;
+ .highTitle {
+ top: 80px;
+ font-size: 40px;
+ line-height: 44px;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ height: 200px;
+ padding-top: 15px;
+ margin-bottom: 0;
+ .highTitle {
+ top: 60px;
+ font-size: 32px;
+ line-height: 36px;
+ }
+ }
}
diff --git a/src/components/home/SlackWechatTwitterYoutube/index.module.scss
b/src/components/home/SlackWechatTwitterYoutube/index.module.scss
index 2b4af37ec7..37e2216ca4 100644
--- a/src/components/home/SlackWechatTwitterYoutube/index.module.scss
+++ b/src/components/home/SlackWechatTwitterYoutube/index.module.scss
@@ -2,7 +2,35 @@
font-size: 28px;
width: 895px;
text-align: center;
- margin: 120px auto 136px;
+ margin: 80px auto 100px;
+
+ /* Progressive responsive margin adjustments */
+ @media screen and (max-width: 1440px) {
+ margin: 60px auto 80px;
+ width: auto;
+ max-width: 895px;
+ padding: 0 var(--mobile-padding-width);
+ }
+
+ @media screen and (max-width: 1200px) {
+ margin: 50px auto 70px;
+ font-size: 26px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ margin: 40px auto 60px;
+ font-size: 24px;
+ }
+
+ @media screen and (max-width: 768px) {
+ margin: 30px auto 50px;
+ font-size: 22px;
+ }
+
+ @media screen and (max-width: 480px) {
+ margin: 25px auto 40px;
+ font-size: 20px;
+ }
}
.content {
position: relative;
diff --git a/src/css/design-style.scss b/src/css/design-style.scss
index 8db0f7665b..628ff3eaf0 100644
--- a/src/css/design-style.scss
+++ b/src/css/design-style.scss
@@ -14,12 +14,28 @@ a {
.navbar__inner {
box-sizing: border-box;
padding: 0 70px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
// mobile hide right menu
.navbar__item {
display: inline-block;
}
}
+ .navbar__items {
+ display: flex;
+ align-items: center;
+
+ &:not(.navbar__items--right) {
+ flex: 0 0 auto;
+ }
+
+ &.navbar__items--right {
+ margin-left: auto;
+ flex-shrink: 0;
+ }
+ }
.navbar__items--right {
a {
font-weight: 700;
@@ -707,10 +723,56 @@ html[data-theme="light"] {
.nav-left-logo {
display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ margin-right: 20px;
+}
+
+/* Progressive responsive adjustments for navbar spacing */
+@media (max-width: 1200px) {
+ .navbar {
+ .navbar__inner {
+ padding: 0 40px;
+ }
+ }
+ .nav-left-logo {
+ margin-right: 15px;
+ }
}
-@media (min-width: 1024px) and (max-width: 1160px) {
+@media (max-width: 1100px) {
+ .navbar {
+ .navbar__inner {
+ padding: 0 30px;
+ }
+ }
+ .nav-left-logo {
+ margin-right: 10px;
+ }
+ .navbar__logo {
+ max-width: 140px;
+ height: auto;
+ }
+}
+
+@media (max-width: 1050px) {
+ .navbar__items {
+ gap: 10px;
+ }
+ .nav-left-logo {
+ margin-right: 8px;
+ }
+ .navbar__logo {
+ max-width: 120px;
+ }
+}
+
+@media (max-width: 997px) {
+ /* Docusaurus mobile breakpoint */
+ .navbar__items {
+ gap: 5px;
+ }
.nav-left-logo {
- display: none;
+ margin-right: 5px;
}
}
diff --git a/src/theme/Navbar/Content/styles.module.css
b/src/theme/Navbar/Content/styles.module.css
index 4c9471e109..925793999a 100644
--- a/src/theme/Navbar/Content/styles.module.css
+++ b/src/theme/Navbar/Content/styles.module.css
@@ -6,3 +6,34 @@ Hide color mode toggle in small viewports
display: none;
}
}
+
+/* Additional responsive styles for navbar spacing */
+@media (max-width: 1200px) {
+ :global(.navbar__items) {
+ gap: 15px;
+ }
+}
+
+@media (max-width: 1100px) {
+ :global(.navbar__items) {
+ gap: 10px;
+ }
+ :global(.navbar__item) {
+ margin: 0 5px;
+ }
+}
+
+@media (max-width: 1050px) {
+ :global(.navbar__items) {
+ gap: 8px;
+ }
+ :global(.navbar__item) {
+ margin: 0 3px;
+ }
+}
+
+@media (max-width: 997px) {
+ :global(.navbar__items) {
+ gap: 5px;
+ }
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
