This is an automated email from the ASF dual-hosted git repository.
wuchong pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fluss.git
The following commit(s) were added to refs/heads/main by this push:
new 5dc14b918 [website] Update CSS for improved dark mode support and
adjust hero section padding
5dc14b918 is described below
commit 5dc14b9181234613240c302e4ab21631c2556904
Author: Jark Wu <[email protected]>
AuthorDate: Thu May 21 10:07:49 2026 +0800
[website] Update CSS for improved dark mode support and adjust hero section
padding
---
website/docusaurus.config.ts | 2 +-
website/src/css/custom.css | 43 +++++++++++++++++++++++---------------
website/src/pages/index.module.css | 30 +++++++++++++-------------
website/static/manifest.json | 2 +-
4 files changed, 43 insertions(+), 34 deletions(-)
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index e8802d349..1f6225a75 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -182,7 +182,7 @@ const config: Config = {
'queryString',
],
pwaHead: [
- { tagName: 'link', rel: 'icon', href:
'/img/logo/svg/colored_logo.svg' },
+ { tagName: 'link', rel: 'icon', href:
'/img/logo/fluss_favicon.svg' },
{ tagName: 'link', rel: 'manifest', href: '/manifest.json' },
{ tagName: 'meta', name: 'theme-color', content: '#102856' },
],
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 1067d18e5..83b35dc30 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -179,31 +179,28 @@ body {
}
/* Page scrollbar — keep the thumb bright in dark mode so it stays
- * visible against the deep-blue canvas instead of fading to grey
- * via the browser's auto-dark heuristic.
- * `scrollbar-color` — Firefox / future-spec
- * `::-webkit-scrollbar-*` — Chromium / Safari
- * Thumb / track in BOTH modes get an explicit treatment so the page
- * scrollbar reads consistently. */
+ * visible against the deep-blue canvas. We use only the standard
+ * `scrollbar-color` property (no `::-webkit-scrollbar-*` width rules),
+ * because defining a width on `::-webkit-scrollbar` forces Chrome out
+ * of macOS overlay-scrollbar mode and into a 12px space-taking
+ * scrollbar — which would only apply in dark mode and cause the page
+ * (and the navbar's right-aligned items) to shift 12px on every theme
+ * toggle. */
[data-theme='dark'] html {
scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.06);
}
-[data-theme='dark'] body::-webkit-scrollbar {
- width: 12px;
- height: 12px;
-}
[data-theme='dark'] body::-webkit-scrollbar-track {
- background: rgba(255, 255, 255, 0.04);
+ background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] body::-webkit-scrollbar-thumb {
- background: rgba(255, 255, 255, 0.32);
- border-radius: 8px;
- border: 3px solid transparent;
- background-clip: padding-box;
+ background: rgba(255, 255, 255, 0.32);
+ border-radius: 8px;
+ border: 3px solid transparent;
+ background-clip: padding-box;
}
[data-theme='dark'] body::-webkit-scrollbar-thumb:hover {
- background: rgba(255, 255, 255, 0.55);
- background-clip: padding-box;
+ background: rgba(255, 255, 255, 0.55);
+ background-clip: padding-box;
}
/* Subtle dot-grid texture on the homepage canvas in light mode.
@@ -2274,6 +2271,18 @@ main[class*='blogListPage'] article {
border-radius: var(--fluss-radius-sm);
}
+/* Code blocks (pre > code) should never inherit inline-code box styling
+ even when nested inside list/paragraph/table elements. */
+.markdown pre code,
+.theme-doc-markdown pre code {
+ background: transparent;
+ border: 0;
+ padding: 0;
+ font-size: inherit;
+ color: inherit;
+ border-radius: 0;
+}
+
/* -------------------------------------------------------------------------
Tag cloud / blog tags page
------------------------------------------------------------------------- */
diff --git a/website/src/pages/index.module.css
b/website/src/pages/index.module.css
index ef86d4984..0e8d272aa 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -69,34 +69,34 @@
pointer-events: none;
}
-/* Hero gets a wider container with much tighter side padding than the rest
- of the homepage, so the side-by-side text + diagram can use almost the
- full viewport. Other sections keep the standard 1240 / 24px container.
+/* Hero gets a wider container with tighter side padding than the rest
+ of the homepage, so the side-by-side text + diagram can use most of the
+ viewport. Other sections keep the standard 1240 / 24px container.
The side padding ramps up at smaller viewports so the hero content does
- not run flush to the screen edge on typical laptop sizes:
- ≥ 1500px : 0 (max diagram space, container is centred with margin)
- ≤ 1500px : 12px
- ≤ 1280px : 20px
+ not run flush to the screen edge:
+ ≥ 1500px : 48px (breathing room on large monitors)
+ ≤ 1500px : 32px
+ ≤ 1280px : 24px
≤ 996px : 24px (matches the standard container padding under the
existing mobile stack media query) */
.heroBanner .container {
max-width: 1560px;
- padding-left: 0;
- padding-right: 0;
+ padding-left: var(--fluss-space-12);
+ padding-right: var(--fluss-space-12);
}
@media (max-width: 1500px) {
.heroBanner .container {
- padding-left: var(--fluss-space-3);
- padding-right: var(--fluss-space-3);
+ padding-left: var(--fluss-space-8);
+ padding-right: var(--fluss-space-8);
}
}
@media (max-width: 1280px) {
.heroBanner .container {
- padding-left: var(--fluss-space-5);
- padding-right: var(--fluss-space-5);
+ padding-left: var(--fluss-space-6);
+ padding-right: var(--fluss-space-6);
}
}
@@ -118,7 +118,7 @@
border-radius: var(--fluss-radius-pill);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
- color: var(--fluss-blue-100);
+ color: var(--ifm-color-primary-lightest);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.04em;
@@ -912,7 +912,7 @@
border-radius: var(--fluss-radius-lg);
background:
radial-gradient(600px 300px at 100% 0%, rgba(38, 109, 149, 0.12),
transparent 60%),
- linear-gradient(180deg, var(--fluss-blue-700) 0%,
var(--fluss-blue-800) 100%);
+ linear-gradient(180deg, var(--ifm-color-primary-darkest) 0%,
var(--ifm-color-primary-darker) 100%);
color: #FFFFFF;
box-shadow: var(--fluss-shadow-glow);
border: 1px solid rgba(255, 255, 255, 0.1);
diff --git a/website/static/manifest.json b/website/static/manifest.json
index 12d3e0dd3..a0be40c35 100644
--- a/website/static/manifest.json
+++ b/website/static/manifest.json
@@ -9,7 +9,7 @@
"theme_color": "#000000",
"icons": [
{
- "src": "img/logo/svg/colored_logo.svg",
+ "src": "img/logo/fluss_favicon.svg",
"sizes": "512x512"
}
]
