This is an automated email from the ASF dual-hosted git repository. visoar pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/bifromq-sites.git
commit e50f97dda298c24209967db076a2d24fc0b7f03a Author: Visoar <[email protected]> AuthorDate: Tue Jan 13 11:43:53 2026 +0800 Updated dark mode styles, optimized background and border effects, and improved visual experience.To introduce visual effects for the Bifrost-rainbow name, the .bifrost-rainbow class and its styles were added to enhance the visual presentation in the documentation. --- docs/get_started/intro.md | 2 +- docs/user_guide/api/openapi.md | 4 +- src/css/custom.css | 95 ++++++++++++++++++++++++++++++++++-------- src/pages/index.module.css | 8 ++-- src/pages/index.tsx | 2 +- 5 files changed, 86 insertions(+), 25 deletions(-) diff --git a/docs/get_started/intro.md b/docs/get_started/intro.md index 048d054b..11472919 100644 --- a/docs/get_started/intro.md +++ b/docs/get_started/intro.md @@ -9,7 +9,7 @@ systems. ## Origin of the Name -`BifroMQ` derives its name from the Norse mythological `Bifröst`, a rainbow bridge that connects Midgard (the realm of humans) and Asgard (the domain of gods). Like Bifröst, BifroMQ serves as a flexible and sturdy bridge, linking different +`BifroMQ` derives its name from the Norse mythological <span class="bifrost-rainbow">Bifröst</span>, a rainbow bridge that connects Midgard (the realm of humans) and Asgard (the domain of gods). Like Bifröst, BifroMQ serves as a flexible and sturdy bridge, linking different systems or applications to enable communication through message exchange. This aligns with the core function of MQTT middleware, which is to manage and accelerate message delivery in distributed systems. The robustness of Bifröst symbolizes BifroMQ's stability and reliability, while its flexibility signifies BifroMQ's scalability and adaptability. In a nutshell, "BifroMQ" epitomizes resilient, adaptable MQTT middleware that interconnects diff --git a/docs/user_guide/api/openapi.md b/docs/user_guide/api/openapi.md index 51b73d00..c08db5c5 100644 --- a/docs/user_guide/api/openapi.md +++ b/docs/user_guide/api/openapi.md @@ -5,6 +5,8 @@ title: "OpenAPI Reference" import ApiDocMdx from '@theme/ApiDocMdx'; -The full OpenAPI definition is generated from the codebase (see [Swagger generation](./intro.md#swagger-generation)). The live reference below renders `BifroMQ-API.yaml` directly. +The full OpenAPI definition is generated from the codebase (see [Swagger generation](./intro.md#swagger-generation)). + +The live reference below renders `BifroMQ-API.yaml` directly. <ApiDocMdx id="bifromq" /> diff --git a/src/css/custom.css b/src/css/custom.css index 78a5e43a..8da31119 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -27,8 +27,8 @@ --color-text-primary: #111111; --color-text-secondary: #666666; --color-text-tertiary: #999999; - --color-accent: var(--bifrost-blue); --color-accent-rgb: 0, 122, 255; + --color-accent: rgb(var(--color-accent-rgb)); --color-signal: var(--bifrost-orange); /* Typography */ @@ -67,21 +67,21 @@ --ifm-navbar-item-padding-horizontal: 0.75rem; } -/* Dark Mode - Sophisticated Slate Obsidian */ +/* Dark Mode - Sophisticated Graphite Aurora */ html[data-theme='dark'] { - --color-bg: #0C0D0F; - /* Deep Obsidian Slate */ - --color-wash: #14161A; - /* Slightly lighter for depth */ - --color-surface: #1A1D23; - /* Surface for cards/modals */ - --color-border: #242830; - /* Subtle slate border */ - --color-border-strong: #3D4452; - --color-text-primary: #F0F2F5; - --color-text-secondary: #94A3B8; - --color-text-tertiary: #64748B; - --color-accent: var(--bifrost-blue); + --color-bg: #11141A; + /* Graphite base with soft depth */ + --color-wash: #171B23; + /* Subtle lift for panels */ + --color-surface: #1F2531; + /* Elevated surfaces */ + --color-border: #2C3442; + /* Cool slate divider */ + --color-border-strong: #3E495D; + --color-text-primary: #F4F7FB; + --color-text-secondary: #B3BDCC; + --color-text-tertiary: #8894A8; + --color-accent-rgb: 106, 163, 255; --ifm-background-color: var(--color-bg); --ifm-background-surface-color: var(--color-surface); @@ -155,10 +155,28 @@ body { height: var(--ifm-navbar-height); padding: 0 40px !important; /* Fixed padding for both sides */ - position: relative; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; margin-bottom: 0 !important; } +.navbar { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: saturate(180%) blur(16px); + -webkit-backdrop-filter: saturate(180%) blur(16px); +} + +html[data-theme='dark'] .navbar { + background: rgba(17, 20, 26, 0.88); +} + +.main-wrapper { + padding-top: var(--ifm-navbar-height); +} + /* The Bifrost Line - A nod to the name origins */ .navbar::before { content: ''; @@ -313,6 +331,13 @@ html[data-theme='dark'] .header-github-link::before { line-height: 1.2; } +html[data-theme='dark'] .markdown h1, +html[data-theme='dark'] .markdown h2, +html[data-theme='dark'] .markdown h3, +html[data-theme='dark'] .markdown h4 { + color: #E6EDF6; +} + .markdown h1 { font-size: clamp(1.85rem, 3.1vw, 2.6rem); margin-top: 0; @@ -355,6 +380,40 @@ html[data-theme='dark'] .header-github-link::before { color: var(--color-accent); } +.bifrost-rainbow { + color: inherit; + font-family: var(--font-mono); + font-weight: 500; + position: relative; + display: inline-block; +} + +.bifrost-rainbow::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 0.2rem; + border-radius: 20px; + opacity: 0.6; + background: linear-gradient(90deg, + var(--bifrost-red) 12.5%, + var(--bifrost-orange) 12.5%, + var(--bifrost-orange) 25%, + var(--bifrost-yellow) 25%, + var(--bifrost-yellow) 37.5%, + var(--bifrost-green) 37.5%, + var(--bifrost-green) 50%, + var(--bifrost-teal) 50%, + var(--bifrost-teal) 62.5%, + var(--color-accent) 62.5%, + var(--color-accent) 75%, + var(--bifrost-indigo) 75%, + var(--bifrost-indigo) 87.5%, + var(--bifrost-violet) 87.5%); +} + .markdown pre code { background: transparent; border: none; @@ -496,8 +555,8 @@ button, html[data-theme='dark'] .footer__logo img, html[data-theme='dark'] .footer__incubator-logo { - filter: invert(1) brightness(2) opacity(0.6); - /* Bright white in dark mode */ + filter: none; + /* Keep original colors in dark mode */ } .footer__logo:hover img, diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 496de1a5..e44c07a7 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -414,9 +414,9 @@ } html[data-theme='dark'] .bifrostCard { - background: rgba(26, 29, 35, 0.4); - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.05); + background: rgba(31, 37, 49, 0.55); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.06); } .bifrostCard:hover { @@ -426,7 +426,7 @@ html[data-theme='dark'] .bifrostCard { } html[data-theme='dark'] .bifrostCard:hover { - background: rgba(26, 29, 35, 0.6); + background: rgba(31, 37, 49, 0.78); border-color: var(--color-accent); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3b23e847..245f1e65 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -38,7 +38,7 @@ export default function Home(): ReactNode { <div className={styles.heroVisual}> <div className={styles.bifrostRing}> <div style={{ fontSize: '200px', fontWeight: 900, letterSpacing: '-0.1em', opacity: 0.1 }}> - BIFRO<span style={{ color: 'var(--bifrost-blue)' }}>MQ</span> + BIFRO<span style={{ color: 'var(--color-accent)' }}>MQ</span> </div> </div> </div>
