Skip to content

Fix: Sticky Navbar, AOSSIE Logo Visibility & Image Aspect Ratio Warnings #598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
reach2saksham wants to merge 2 commits into from
Closed

Fix: Sticky Navbar, AOSSIE Logo Visibility & Image Aspect Ratio Warnings #598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d172ee
fix: make navbar sticky, restore AOSSIE logo home button, and fix ima…
reach2saksham Feb 26, 2026
869558f
Fix Tailwind gradient class typo in active nav underline
reach2saksham Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 45 additions & 145 deletions src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,12 @@ function MobileNavigation(props) {
<Popover.Button aria-label="Close menu" className="-m-1 p-1">
<CloseIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
</Popover.Button>
<h2 className="text-sm font-mono font-black text-zinc-600 dark:text-zinc-400">
<h2 className="font-mono text-sm font-black text-zinc-600 dark:text-zinc-400">
Navigation
</h2>
</div>
<nav className="mt-6">
<ul className="-my-2 font-mono font-black divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
<ul className="-my-2 divide-y divide-zinc-100 font-mono text-base font-black text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
<MobileNavItem href="/about">About</MobileNavItem>
<MobileNavItem href="/projects">Projects</MobileNavItem>
<MobileNavItem href="/ideas">Ideas</MobileNavItem>
Expand Down Expand Up @@ -149,7 +149,7 @@ function NavItem({ href, children }) {
>
{children}
{isActive && (
<span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-[#00843D]/0 via-[#00843D]/40 to-aus-[#00843D]/0 dark:from-yellow-400/0 dark:via-yellow-400/40 dark:to-yellow-400/0" />
<span className="to-[`#00843D`]/0 absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-[`#00843D`]/0 via-[`#00843D`]/40 dark:from-yellow-400/0 dark:via-yellow-400/40 dark:to-yellow-400/0" />
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

Tailwind CSS arbitrary color syntax backticks v3 to-[] from-[] via-[]

💡 Result:

In Tailwind CSS v3+, gradient stop utilities support arbitrary colors/values using square brackets — no backticks are part of Tailwind’s syntax:

<div class="bg-gradient-to-r from-[`#0ea5e9`] via-[rgb(34,197,94)] to-[hsl(330_81%_60%)]"></div>

If you’re using a CSS variable and Tailwind can’t infer the “type”, add a type hint (works for any arbitrary value, including gradient stops):

<div class="bg-gradient-to-r from-[color:var(--start)] via-[color:var(--mid)] to-[color:var(--end)]"></div>

Tailwind generates CSS by scanning your source as plain text, so avoid building these class names dynamically at runtime (that’s when you might see people wrap class strings in JS backticks only because they’re using template literals, not because Tailwind requires them). If you must generate them dynamically, you’ll need a safelist/other approach so the classes still exist at build time. [1] [2] [3]

Sources: Tailwind gradient color stops + “custom value” examples [1], Tailwind arbitrary value type-hint syntax ([color:...]) [2], Tailwind class detection behavior [3].

🏁 Script executed:

# First, let's locate and read the Header.jsx file
find . -name "Header.jsx" -type f

Repository: AOSSIE-Org/website

Length of output: 89

🏁 Script executed:

# Read Header.jsx to see line 152 and surrounding context
head -n 160 ./src/components/Header.jsx | tail -n 20

Repository: AOSSIE-Org/website

Length of output: 657

Remove backticks from Tailwind arbitrary color tokens on Line 152.

The to-[#00843D]/0, from-[#00843D]/0, and via-[#00843D]/40 syntax is invalid. Tailwind CSS arbitrary values use square brackets without backticks: to-[#00843D]/0, from-[#00843D]/0, via-[#00843D]/40.

🎯 Proposed fix 
-          <span className="to-[`#00843D`]/0 absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-[`#00843D`]/0 via-[`#00843D`]/40 dark:from-yellow-400/0 dark:via-yellow-400/40 dark:to-yellow-400/0" />
+          <span className="to-[`#00843D`]/0 absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-[`#00843D`]/0 via-[`#00843D`]/40 dark:from-yellow-400/0 dark:via-yellow-400/40 dark:to-yellow-400/0" />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span className="to-[`#00843D`]/0 absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-[`#00843D`]/0 via-[`#00843D`]/40 dark:from-yellow-400/0 dark:via-yellow-400/40 dark:to-yellow-400/0" />
<span className="to-[`#00843D`]/0 absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-[`#00843D`]/0 via-[`#00843D`]/40 dark:from-yellow-400/0 dark:via-yellow-400/40 dark:to-yellow-400/0" />
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/Header.jsx` at line 152, The Tailwind arbitrary color tokens
in the className on the span (the string containing to-[`#00843D`]/0,
from-[`#00843D`]/0, via-[`#00843D`]/40) use backticks which are invalid; update
the className in the span element to remove the backticks so the tokens become
to-[`#00843D`]/0, from-[`#00843D`]/0, via-[`#00843D`]/40 (leave the dark: tokens
unchanged), ensuring the className string still contains the same gradient
classes and spacing utilities used by that span.

)}
</Link>
</li>
Expand All @@ -159,7 +159,7 @@ function NavItem({ href, children }) {
function DesktopNavigation(props) {
return (
<nav {...props}>
<ul className="flex font-mono rounded-full bg-white/90 px-3 text-md font-semibold text-zinc-800 shadow-2xl shadow-black/4 dark:shadow-xl dark:shadow-white/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
<ul className="text-md shadow-black/4 flex rounded-full bg-white/90 px-3 font-mono font-semibold text-zinc-800 shadow-2xl ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:shadow-xl dark:shadow-white/5 dark:ring-white/10">
<NavItem href="/about">About</NavItem>
<NavItem href="/projects">Projects</NavItem>
<NavItem href="/ideas">Ideas</NavItem>
Expand Down Expand Up @@ -195,7 +195,7 @@ function ModeToggle() {
<button
type="button"
aria-label="Toggle dark mode"
className="group rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-black/10 hover:ring-black/20 backdrop-blur transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
className="group rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-black/10 backdrop-blur transition hover:ring-black/20 dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
onClick={toggleMode}
>
<SunIcon className="h-6 w-6 fill-zinc-100 stroke-zinc-500 transition group-hover:fill-zinc-200 group-hover:stroke-zinc-700 dark:hidden [@media(prefers-color-scheme:dark)]:fill-teal-50 [@media(prefers-color-scheme:dark)]:stroke-yellow-400 [@media(prefers-color-scheme:dark)]:group-hover:fill-teal-50 [@media(prefers-color-scheme:dark)]:group-hover:stroke-yellow-500" />
Expand All @@ -215,7 +215,7 @@ function HomeContainer({ className, ...props }) {
<div
className={clsx(
className,
'w-12 rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-black/10 hover:ring-black/20 backdrop-blur transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20 flex justify-center items-center'
'flex w-12 items-center justify-center rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-black/10 backdrop-blur transition hover:ring-black/20 dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20'
)}
{...props}
/>
Expand All @@ -230,158 +230,58 @@ function Home({ large = false, className, ...props }) {
className={clsx(className, 'pointer-events-auto')}
{...props}
>
<Image src='/logo1.png' width={100} height={100} className='scale-125' alt='Aossie Logo' />
<Image
src="/logo1.png"
width={100}
height={100}
className="hover:scale-125 w-auto h-auto transition-transform duration-300 ease-in-out"
alt="Aossie Logo"
/>
</Link>
)
}

export function Header() {
// We still need this check if you want to conditionally style things based on the page,
// but we removed the logic that hides the logo.
let isHomePage = useRouter().pathname === '/'

let headerRef = useRef()
let avatarRef = useRef()
let isInitial = useRef(true)

useEffect(() => {
let downDelay = avatarRef.current?.offsetTop ?? 0
let upDelay = 64

function setProperty(property, value) {
document.documentElement.style.setProperty(property, value)
}

function removeProperty(property) {
document.documentElement.style.removeProperty(property)
}

function updateHeaderStyles() {
let { top, height } = headerRef.current.getBoundingClientRect()
let scrollY = clamp(
window.scrollY,
0,
document.body.scrollHeight - window.innerHeight
)

if (isInitial.current) {
setProperty('--header-position', 'sticky')
}

setProperty('--content-offset', `${downDelay}px`)

if (isInitial.current || scrollY < downDelay) {
setProperty('--header-height', `${downDelay + height}px`)
setProperty('--header-mb', `${-downDelay}px`)
} else if (top + height < -upDelay) {
let offset = Math.max(height, scrollY - upDelay)
setProperty('--header-height', `${offset}px`)
setProperty('--header-mb', `${height - offset}px`)
} else if (top === 0) {
setProperty('--header-height', `${scrollY + height}px`)
setProperty('--header-mb', `${-scrollY}px`)
}

if (top === 0 && scrollY > 0 && scrollY >= downDelay) {
setProperty('--header-inner-position', 'fixed')
removeProperty('--header-top')
removeProperty('--avatar-top')
} else {
removeProperty('--header-inner-position')
setProperty('--header-top', '0px')
setProperty('--avatar-top', '0px')
}
}

function updateAvatarStyles() {
if (!isHomePage) {
return
}

let fromScale = 1
let toScale = 36 / 64
let fromX = 0
let toX = 2 / 16

let scrollY = downDelay - window.scrollY

let scale = (scrollY * (fromScale - toScale)) / downDelay + toScale
scale = clamp(scale, fromScale, toScale)

let x = (scrollY * (fromX - toX)) / downDelay + toX
x = clamp(x, fromX, toX)

setProperty(
'--avatar-image-transform',
`translate3d(${x}rem, 0, 0) scale(${scale})`
)

let borderScale = 1 / (toScale / scale)
let borderX = (-toX + x) * borderScale
let borderTransform = `translate3d(${borderX}rem, 0, 0) scale(${borderScale})`

setProperty('--avatar-border-transform', borderTransform)
setProperty('--avatar-border-opacity', scale === toScale ? 1 : 0)
}

function updateStyles() {
updateHeaderStyles()
updateAvatarStyles()
isInitial.current = false
}

updateStyles()
window.addEventListener('scroll', updateStyles, { passive: true })
window.addEventListener('resize', updateStyles)

return () => {
window.removeEventListener('scroll', updateStyles, { passive: true })
window.removeEventListener('resize', updateStyles)
}
}, [isHomePage])

return (
<>
<header
className="pointer-events-none relative z-50 flex flex-col"
style={{
height: 'var(--header-height)',
marginBottom: 'var(--header-mb)',
}}
className="fixed top-0 left-0 right-0 z-50 pt-6"
>
<div
ref={avatarRef}
className="order-last mt-[calc(theme(spacing.5)-theme(spacing.8))]"
/>
<div
ref={headerRef}
className="top-0 z-10 h-16 pt-6"
style={{ position: 'var(--header-position)' }}
>
<Container
className="top-[var(--header-top,theme(spacing.6))] w-full"
style={{ position: 'var(--header-inner-position)' }}
>
<div className="relative flex gap-4">
<div className="flex flex-1">
{!isHomePage && (
<HomeContainer>
<Home />
</HomeContainer>
)}
</div>
<div className="flex flex-1 justify-end md:justify-center">
<MobileNavigation className="pointer-events-auto md:hidden" />
<DesktopNavigation className="pointer-events-auto hidden md:block" />
</div>
<div className="flex justify-end md:flex-1">
<div className="pointer-events-auto">
<ModeToggle />
</div>
<Container className="w-full">
<div className="relative flex gap-4">
{/* Logo Section - Now visible on ALL pages */}
<div className="flex flex-1">
<HomeContainer>
<Home />
</HomeContainer>
</div>

{/* Navigation Section */}
<div className="flex flex-1 justify-end md:justify-center">
<MobileNavigation className="pointer-events-auto md:hidden" />
<DesktopNavigation className="pointer-events-auto hidden md:block" />
</div>

{/* Dark Mode Toggle Section */}
<div className="flex justify-end md:flex-1">
<div className="pointer-events-auto">
<ModeToggle />
</div>
</div>
</Container>
</div>
</div>
</Container>
</header>
{isHomePage && <div style={{ height: 'var(--content-offset)' }} />}

{/*
Spacer: Because the header is now "fixed", it floats over the content.
This empty div pushes your page content down so it isn't hidden behind the header.
Adjust 'h-24' if you need more or less space.
*/}
<div className="h-24" />
</>
)
}
}
10 changes: 5 additions & 5 deletions src/pages/apply.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,27 +80,27 @@ export default function About() {
<div className='relative flex space-x-10 justify-end mt-4 md:mt-8 md:p-8'>
<div className='line-right'></div>
<div className='relative'>
<Image src="/ele1.svg" alt="Join us on Discord" width={170} height={170} /> {/* Adjust width and height */}
<Image src="/ele1.svg" className='w-auto h-auto' alt="Join us on Discord" width={170} height={170} /> {/* Adjust width and height */}
<p className='font-bold p-3 m-auto dark:text-white'>Join us on Discord</p>
</div>
<div className='relative'>
<Image src="/ele2.svg" alt="Start Contributing" width={170} height={170} /> {/* Adjust width and height */}
<Image src="/ele2.svg" className='w-auto h-auto' alt="Start Contributing" width={170} height={170} /> {/* Adjust width and height */}
<p className='font-bold p-3 m-auto dark:text-white'>Start Contributing</p>
</div>
<div className='relative'>
<Image src="/ele3.svg" alt="Choose an idea" width={170} height={170} /> {/* Adjust width and height */}
<Image src="/ele3.svg" className='w-auto h-auto' alt="Choose an idea" width={170} height={170} /> {/* Adjust width and height */}
<p className='font-bold p-3 m-auto dark:text-white'>Choose an idea</p>
</div>
</div>

<div className='relative flex space-x-10 justify-start mt-4 md:mt-8 md:p-8'>
<div className='line-left'></div>
<div className='relative'>
<Image src="/ele4.svg" alt="Discuss with mentor" width={170} height={170} /> {/* Adjust width and height */}
<Image src="/ele4.svg" className='w-auto h-auto' alt="Discuss with mentor" width={170} height={170} /> {/* Adjust width and height */}
<p className='font-bold p-3 m-auto dark:text-white'>Discuss with mentor</p>
</div>
<div className='relative'>
<Image src="/ele5.svg" alt="Submit final application" width={170} height={170} /> {/* Adjust width and height */}
<Image src="/ele5.svg" className='w-auto h-auto' alt="Submit final application" width={170} height={170} /> {/* Adjust width and height */}
<p className='font-bold p-3 m-auto dark:text-white'>Submit final application</p>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export default function Home() {
<Image
src="./logo1.png"
width={320}
height={300}
className="mx-auto scale-110 m-4"
height={320}
className="mx-auto m-4 w-80 h-80"
alt="AOSSIE Logo"
/>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/pages/projects.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const Cards = () => {
alt={`${project.title} image`}
width={80}
height={80}
className='w-20 h-20'
style={{ margin: '0 auto 16px', objectFit: 'contain' }}
/>
<Typography
Expand Down