This is an automated email from the ASF dual-hosted git repository.
imbajin pushed a commit to branch cx-oink-1-migration
in repository https://gitbox.apache.org/repos/asf/hugegraph-doc.git
The following commit(s) were added to refs/heads/cx-oink-1-migration by this
push:
new 11d25664b fix(ui): restore legacy navigation styling
11d25664b is described below
commit 11d25664b40d26f7f6c4aff6f35c27821307f886
Author: imbajin <[email protected]>
AuthorDate: Tue Sep 1 22:41:07 2026 +0800
fix(ui): restore legacy navigation styling
- align Homepage and Community navigation to viewport edges
- restore Homepage system typography, link colors, and yellow Download CTA
- keep the Homepage header sticky with a readable purple scroll state
- apply the familiar purple banner to Docs across themes
---
assets/scss/_styles_project.scss | 119 ++++++++++++++++++++++++++++++++++++++-
hugo.yaml | 2 +
layouts/_partials/navbar.html | 12 +++-
3 files changed, 127 insertions(+), 6 deletions(-)
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index f41a01b2a..83d1ee138 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -1,23 +1,57 @@
// HugeGraph homepage: preserve the original product copy and isometric brand
// artwork while using OINK's accessible navigation and landing primitives.
+$hg-navbar-purple: #532fc9;
+
+.td-home {
+ // Keep OINK's display face for headings, but restore the original site's
+ // native system stack for body copy, links, buttons, and navigation.
+ --td-ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", sans-serif,
+ "Apple Color Emoji", "Segoe UI Emoji";
+ --td-body-font-family: var(--td-ui-font-family);
+ --td-heading-font-family: "Inter", var(--td-ui-font-family);
+}
+
+.td-site-header--wide > .td-site-container {
+ max-width: none;
+ padding-inline: clamp(16px, 1.5vw, 28px);
+}
+
.td-home > .td-site-header {
- position: absolute;
+ position: fixed;
inset-block-start: 0;
inset-inline: 0;
+ z-index: 100;
width: 100%;
border-block-end: 0;
background: transparent;
color: #fff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
+ transition:
+ background-color 180ms ease,
+ box-shadow 180ms ease,
+ -webkit-backdrop-filter 180ms ease,
+ backdrop-filter 180ms ease;
&::after {
display: none;
}
+ &.td-scrolled {
+ background: rgba($hg-navbar-purple, 0.96);
+ box-shadow: 0 6px 22px rgba(20, 17, 73, 0.24);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ }
+
.td-nav-title {
background: none;
color: #fff;
+ font-family: var(--td-ui-font-family);
+ font-size: 1.08rem;
+ font-weight: 700;
+ letter-spacing: 0;
-webkit-text-fill-color: #fff;
}
@@ -177,15 +211,94 @@
.td-landing-button--ghost {
border-color: transparent;
- background: #a94f00;
+ background: #ffa630;
color: #fff;
&:hover {
border-color: transparent;
- background: #873f00;
+ background: #e38100;
+ color: #fff;
+ }
+ }
+}
+
+.td-home .td-landing-landing :where(p, li) a:not(.td-landing-button) {
+ color: #3176d9;
+
+ &:hover,
+ &:focus-visible {
+ color: #1e53a0;
+ }
+}
+
+[data-bs-theme="dark"]
+ .td-home
+ .td-landing-landing
+ :where(p, li)
+ a:not(.td-landing-button) {
+ color: #78b7ff;
+
+ &:hover,
+ &:focus-visible {
+ color: #a8d0ff;
+ }
+}
+
+// Restore the solid purple Docs banner from the previous site while keeping
+// OINK's sticky header, search, version, language, theme, and help controls.
+.td-shell-chrome .td-site-header {
+ border-block-end-color: rgba(255, 255, 255, 0.22);
+ background: $hg-navbar-purple;
+ color: #fff;
+ -webkit-backdrop-filter: none;
+ backdrop-filter: none;
+
+ .td-nav-title {
+ color: #fff;
+ -webkit-text-fill-color: #fff;
+ }
+
+ .td-nav-brand,
+ .td-nav-menu-zone > .nav-link,
+ .td-nav-menu-zone .td-nav-menu > .nav-link,
+ .td-nav-version-menu > .td-nav-util,
+ .td-site-nav__language > .td-language-selector__trigger,
+ .td-nav-theme-menu > .td-nav-util,
+ .td-shell-keyboard__trigger,
+ .td-nav-github,
+ .td-site-drawer-toggle {
+ color: #fff;
+ }
+
+ .td-nav-search-box {
+ border-color: rgba(255, 255, 255, 0.4);
+ background: rgba(20, 17, 73, 0.18);
+ color: #fff;
+
+ kbd {
+ border-color: rgba(255, 255, 255, 0.32);
+ background: rgba(255, 255, 255, 0.1);
color: #fff;
}
}
+
+ .td-nav-brand:hover,
+ .td-nav-brand:focus-visible,
+ .td-nav-menu-zone > .nav-link:hover,
+ .td-nav-menu-zone > .nav-link:focus-visible,
+ .td-nav-menu-zone .td-nav-menu > .nav-link:hover,
+ .td-nav-menu-zone .td-nav-menu > .nav-link:focus-visible,
+ .td-nav-search-box:hover,
+ .td-nav-search-box:focus-visible,
+ .td-nav-util:hover,
+ .td-nav-util:focus-visible,
+ .td-nav-github:hover,
+ .td-nav-github:focus-visible,
+ .td-site-drawer-toggle:hover,
+ .td-site-drawer-toggle:focus-visible {
+ background: rgba(20, 17, 73, 0.24);
+ color: #fff;
+ }
}
.td-home .hg-home-introduction {
diff --git a/hugo.yaml b/hugo.yaml
index b79b859df..125b34ea9 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -90,6 +90,7 @@ params:
github_project_repo: https://github.com/apache/hugegraph
github_branch: master
logo: img/logo.svg
+ home_brand_name: HugeGraph
version: latest
# Historical entries are enabled only after the aggregate artifact exists.
version_menu_pagelinks: false
@@ -115,6 +116,7 @@ params:
sidebar_menu_compact: true
sidebar_menu_foldable: true
sidebar_expand_levels: 2
+ wide_nav_sections: [community]
sidebar_icon_policy: groups
sidebar_item_overflow: wrap
page_context_menu:
diff --git a/layouts/_partials/navbar.html b/layouts/_partials/navbar.html
index d34269b1d..ef88fd4dd 100644
--- a/layouts/_partials/navbar.html
+++ b/layouts/_partials/navbar.html
@@ -18,14 +18,20 @@
{{- $altSite := false -}}
{{- if le (len $targets) 1 }}{{ $altSite = partial "landing/alt-site.html" .
}}{{ end -}}
{{- $autohide := partial "shell/navbar-autohide.html" . -}}
+{{- $brandName := $config.brandName -}}
+{{- if .IsHome -}}
+ {{- $brandName = .Site.Params.home_brand_name | default $brandName -}}
+{{- end -}}
+{{- $wideHeaderSections := .Site.Params.ui.wide_nav_sections | default (slice)
-}}
+{{- $wideHeader := or .IsHome (in $wideHeaderSections .Section) -}}
{{- if $autohide }}
<div class="td-navbar-autohide" data-td-navbar-autohide>
{{- end }}
-<header class="td-site-header d-print-none" data-td-header>
+<header class="td-site-header d-print-none{{ if $wideHeader }}
td-site-header--wide{{ end }}" data-td-header>
<div class="td-site-container">
<nav class="td-site-nav" aria-label="{{ T "ui_main_nav" }}">
<a href="{{ .Site.Home.RelPermalink }}" class="td-nav-brand"
data-td-navbar-route
- aria-label="{{ $config.brandName }} — {{ T "ui_home" }}"{{ if .IsHome
}} aria-current="page"{{ end }}>
+ aria-label="{{ $brandName }} — {{ T "ui_home" }}"{{ if .IsHome }}
aria-current="page"{{ end }}>
<img src="{{ $config.logoURL }}" alt="" class="td-nav-logo" width="22"
height="22">
{{- /* The mark above is the constant half of the lockup. The text half
is the site's wordmark when it has one, else its title, and it is
@@ -33,7 +39,7 @@
{{- if $config.wordmarkURL }}
<img src="{{ $config.wordmarkURL }}" alt="" class="td-nav-wordmark"
width="100" height="40">
{{- else }}
- <span class="td-nav-title">{{ $config.brandName }}</span>
+ <span class="td-nav-title">{{ $brandName }}</span>
{{- end }}
</a>
