wuchong commented on code in PR #2002:
URL: https://github.com/apache/fluss/pull/2002#discussion_r2548692670
##########
website/src/pages/index.tsx:
##########
@@ -70,16 +72,81 @@ function HomepageHeader() {
export default function Home(): JSX.Element {
const {siteConfig} = useDocusaurusContext();
+
+ // Add class to body for homepage-specific navbar styling using
useLayoutEffect for immediate execution
+ useLayoutEffect(() => {
+ if (ExecutionEnvironment.canUseDOM) {
+ document.body.classList.add('homepage');
+ }
+ return () => {
+ if (ExecutionEnvironment.canUseDOM) {
+ document.body.classList.remove('homepage');
+ }
+ };
Review Comment:
Is this still necessary? It seems the `homepage` class is not inserted io
the body html.
##########
website/src/css/custom.css:
##########
@@ -249,4 +258,41 @@
.hidden {
display: none !important;
-}
\ No newline at end of file
+}
+
+/* Homepage-specific navbar styling - only when body has homepage class */
+body.homepage .navbar {
+ background-color: transparent !important;
+ backdrop-filter: none !important;
+ box-shadow: none !important;
+}
+
+body.homepage .navbar__link,
+body.homepage .navbar__brand,
+body.homepage .navbar__title {
+ color: white !important;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+body.homepage .navbar__link:hover,
+body.homepage .navbar__link--active {
+ color: rgba(255, 255, 255, 0.8) !important;
+}
+
+body.homepage .navbar__toggle {
+ color: white !important;
+}
+
+body.homepage .navbar__toggle svg {
+ color: white !important;
+ fill: white !important;
+}
+
+body.homepage .navbar__search-input {
+ color: white !important;
+}
+
+/* White GitHub icon on homepage only */
+body.homepage .header-github-link::before {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63
0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577
0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633
17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236
1.07 1.835 2.809 1.305
3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93
0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3
1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23
3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805
5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0
.315.21.69.825.57C20.565 22.092 24 17.592 24
12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat !important;
+}
Review Comment:
It seems this is duplicated with the css in `index.tsx`?
##########
website/src/css/custom.css:
##########
@@ -48,8 +51,14 @@
font-family: monaco;
}
+body:not(.homepage) .navbar__brand {
+ color: inherit;
+}
+
.hero__title {
- font-family: monaco;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
Review Comment:
not sure about this, but I’d prefer not to rely solely on external fonts
just for a title.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
