fix: improve navbar responsiveness and layout across all devices (closes #512)

[singhanurag0317-bit]

Summary

Closes #512

Implements standard responsive layouts, micro-animations, and clean controls for the main website header:

• Unified Layout Flow: Restructured the navbar markup in templates/base.html to place both the theme toggle button and the hamburger menu inside a unified .nav-right container. This relocates the theme toggle inside the normal header flow, avoiding previous fixed-position overlaps.
• Prevents Link Overflow: Shifted the mobile navigation collapse media query breakpoint in static/styles.css from 768px to 992px (standard tablet width). This prevents the horizontal links list from wrapping onto multiple rows and overflowing the navbar border on intermediate/medium viewports.
• Premium Micro-Animations: Programmed active transitions for the hamburger toggle lines to morph smoothly into an 'X' icon when the navigation menu is open.
• Mobile Adaptations: Removed width: 100% from the brand name element (.nav-brand) on mobile viewports to prevent it from squeezing adjacent elements, and configured max-height and vertical scrolling on the mobile menu list to support short screens or landscape viewports.
• Database Test Suite Fix: Configured the Flask application config to store DB_PATH, resolving a KeyError that was failing database test assertions.

---

Files Changed

File	Change
templates/base.html	Restructure navbar tags, add unified .nav-right wrapper, update active event listener logic
static/styles.css	Move mobile styles to 992px, add hamburger X-morph transitions, adjust brand/right layout
app.py	Configure DB_PATH in application config to support database test suite

[vercel]

Someone is attempting to deploy a commit to the 007's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

[entelligence-ai-pr-reviews]

File: templates/base.html

Lenis scroll offset hardcoded to -140 but mobile navbar is now 80px

styles.css sets the mobile navbar height to 80px at the ≤992px breakpoint (and even sets scroll-margin-top: 80px at line 954), but base.html's lenis.scrollTo call still passes offset: -140. On mobile, JS-driven anchor-link scrolls will land 60px too low, leaving content partially obscured behind the navbar.

[entelligence-ai-pr-reviews]

---

Confidence Score: 3/5 - Review Recommended

Not safe to merge without review — while this PR successfully improves navbar responsiveness across breakpoints, it introduces a correctness bug where the Lenis smooth-scroll offset in templates/base.html remains hardcoded to -140 despite the mobile navbar height now being 80px at the ≤992px breakpoint defined in styles.css. This mismatch means anchor-link scroll targets will be obscured by the navbar on mobile devices, which is a functional regression in a UI-focused PR that should have caught this as part of the responsive layout work. The fix itself is straightforward but must be addressed before merging.

Key Findings:

• The Lenis scroll offset is hardcoded to -140 in templates/base.html, but styles.css now sets the mobile navbar height to 80px at ≤992px — this means smooth-scroll anchor navigation will land ~60px too high on mobile, visually hiding content behind the navbar.
• The PR correctly addresses the responsive layout issue (Improve navbar responsiveness across all devices #512) by updating CSS breakpoint behavior for the navbar, showing solid intent and scope management.
• No mechanism exists to dynamically compute the scroll offset from the actual rendered navbar height, meaning any future navbar height change will silently reintroduce this same offset desync.

Files requiring special attention

• templates/base.html
• styles.css