Skip to content

Commit 774e11c

Browse files
Mehul BatraMehul Batra
Mehul Batra
authored and
Mehul Batra
committed
address jark comments
1 parent 499cf6a commit 774e11c

File tree

2 files changed

+27
-63
lines changed

2 files changed

+27
-63
lines changed

‎website/src/css/custom.css‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,6 @@
4949

5050
.navbar__brand {
5151
font-family: monaco;
52-
}
53-
54-
body:not(.homepage) .navbar__brand {
5552
color: inherit;
5653
}
5754

@@ -259,40 +256,3 @@ body:not(.homepage) .navbar__brand {
259256
.hidden {
260257
display: none !important;
261258
}
262-
263-
/* Homepage-specific navbar styling - only when body has homepage class */
264-
body.homepage .navbar {
265-
background-color: transparent !important;
266-
backdrop-filter: none !important;
267-
box-shadow: none !important;
268-
}
269-
270-
body.homepage .navbar__link,
271-
body.homepage .navbar__brand,
272-
body.homepage .navbar__title {
273-
color: white !important;
274-
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
275-
}
276-
277-
body.homepage .navbar__link:hover,
278-
body.homepage .navbar__link--active {
279-
color: rgba(255, 255, 255, 0.8) !important;
280-
}
281-
282-
body.homepage .navbar__toggle {
283-
color: white !important;
284-
}
285-
286-
body.homepage .navbar__toggle svg {
287-
color: white !important;
288-
fill: white !important;
289-
}
290-
291-
body.homepage .navbar__search-input {
292-
color: white !important;
293-
}
294-
295-
/* White GitHub icon on homepage only */
296-
body.homepage .header-github-link::before {
297-
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;
298-
}

‎website/src/pages/index.tsx‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@ import Layout from '@theme/Layout';
2222
import HomepageFeatures from '@site/src/components/HomepageFeatures';
2323
import HomepageIntroduce from '@site/src/components/HomepageIntroduce';
2424
import Heading from '@theme/Heading';
25-
import {useEffect, useLayoutEffect} from 'react';
26-
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
25+
import {useEffect, useState} from 'react';
2726

2827
import styles from './index.module.css';
2928

@@ -72,41 +71,43 @@ function HomepageHeader() {
7271

7372
export default function Home(): JSX.Element {
7473
const {siteConfig} = useDocusaurusContext();
74+
const [isScrolled, setIsScrolled] = useState(false);
7575

76-
// Add class to body for homepage-specific navbar styling using useLayoutEffect for immediate execution
77-
useLayoutEffect(() => {
78-
if (ExecutionEnvironment.canUseDOM) {
79-
document.body.classList.add('homepage');
80-
}
81-
return () => {
82-
if (ExecutionEnvironment.canUseDOM) {
83-
document.body.classList.remove('homepage');
84-
}
76+
useEffect(() => {
77+
const handleScroll = () => {
78+
// Change navbar style when scrolled past 500 (past most of the hero section)
79+
setIsScrolled(window.scrollY > 500);
8580
};
81+
82+
window.addEventListener('scroll', handleScroll);
83+
return () => window.removeEventListener('scroll', handleScroll);
8684
}, []);
8785

8886
return (
8987
<>
90-
{/* Inline styles for homepage navbar - ensures it loads immediately */}
88+
{/* Inline styles for homepage navbar with scroll-based transitions */}
9189
<style dangerouslySetInnerHTML={{__html: `
9290
.navbar {
93-
background-color: transparent !important;
94-
backdrop-filter: none !important;
95-
box-shadow: none !important;
91+
background-color: ${isScrolled ? 'var(--ifm-navbar-background-color)' : 'transparent'} !important;
92+
backdrop-filter: ${isScrolled ? 'blur(8px)' : 'none'} !important;
93+
box-shadow: ${isScrolled ? 'var(--ifm-navbar-shadow)' : 'none'} !important;
94+
transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease !important;
9695
}
9796
.navbar__link,
9897
.navbar__brand,
9998
.navbar__brand b,
10099
.navbar__brand strong,
101100
.navbar__title {
102-
color: white !important;
103-
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
101+
color: ${isScrolled ? 'var(--ifm-navbar-link-color)' : 'white'} !important;
102+
text-shadow: ${isScrolled ? 'none' : '0 1px 3px rgba(0, 0, 0, 0.3)'};
103+
transition: color 0.3s ease, text-shadow 0.3s ease !important;
104104
}
105105
.navbar__brand * {
106-
color: white !important;
106+
color: ${isScrolled ? 'var(--ifm-navbar-link-color)' : 'white'} !important;
107107
}
108108
.navbar__logo {
109-
content: url('/img/logo/svg/white_color_logo.svg') !important;
109+
content: url('${isScrolled ? '/img/logo/svg/colored_logo.svg' : '/img/logo/svg/white_color_logo.svg'}') !important;
110+
transition: content 0.3s ease !important;
110111
}
111112
.navbar__search-input {
112113
background-color: rgba(255, 255, 255, 0.9) !important;
@@ -126,14 +127,17 @@ export default function Home(): JSX.Element {
126127
color: #666 !important;
127128
}
128129
.navbar__toggle {
129-
color: white !important;
130+
color: ${isScrolled ? 'var(--ifm-navbar-link-color)' : 'white'} !important;
131+
transition: color 0.3s ease !important;
130132
}
131133
.navbar__toggle svg {
132-
color: white !important;
133-
fill: white !important;
134+
color: ${isScrolled ? 'var(--ifm-navbar-link-color)' : 'white'} !important;
135+
fill: ${isScrolled ? 'var(--ifm-navbar-link-color)' : 'white'} !important;
136+
transition: color 0.3s ease, fill 0.3s ease !important;
134137
}
135138
.header-github-link::before {
136-
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;
139+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='${isScrolled ? 'black' : '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;
140+
transition: background 0.3s ease !important;
137141
}
138142
`}} />
139143
<Layout

0 commit comments

Comments
 (0)