fix: responsive layout for mobile and tablet viewports

[vmorps]

Summary

• Mobile navbar: Fixed hamburger menu (backdrop-filter containing block bug), right-slide sidebar, logo left / toggle right, GitHub link moved into menu
• Mobile footer: 2-column grid layout with consistent font sizing
• Responsive spacing: Progressive section padding (4rem → 5rem → 6rem), tightened heading→body gaps on mobile, restored comfortable margins on desktop
• 13 responsive fixes (R-01 through R-13): text overflow, font sizing, CTA alignment, code window scroll, diagram overflow, media query ordering, and more

Preview the changes

Issues closed

Closes #208
Closes #209
Closes #210
Closes #211
Closes #212
Closes #213
Closes #214
Closes #215
Closes #216
Closes #217
Closes #218
Closes #219
Closes #220

Test plan

• Verify mobile layout (≤639px) — navbar, hamburger, footer grid, section spacing
• Verify tablet layout (640–1023px) — 2-column grids, intermediate padding
• Verify desktop layout (≥1024px) — no regressions from mobile changes
• Test light and dark themes at all breakpoints
• Confirm production build passes (npm run build)

🤖 Generated with Claude Code

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on improving the responsiveness of the website for mobile and tablet devices. It addresses several layout issues, spacing inconsistencies, and font sizing problems to provide a better user experience across different screen sizes. The changes include fixes to the navbar, footer, section padding, and various other elements to ensure proper rendering on smaller viewports.

Highlights

• Responsive Design Fixes: This PR implements 13 responsive fixes (R-01 through R-13) to improve the layout and user experience on mobile and tablet viewports.
• Mobile Navbar: The mobile navbar was updated with a fixed hamburger menu, right-slide sidebar, logo alignment, and GitHub link moved into the menu.
• Mobile Footer: The mobile footer was updated to a 2-column grid layout with consistent font sizing.
• Responsive Spacing: Progressive section padding was implemented, heading-to-body gaps were tightened on mobile, and comfortable margins were restored on desktop.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Activity

• The pull request addresses issues [R-01] Remove search field on mobile #208, [R-02] Hero text overflowing viewport on mobile #209, [R-03] CTA buttons not centered on mobile #210, [R-04] Hero heading font size too large for mobile #211, [R-05] Hamburger menu missing navigation items #212, [R-06] CSS media query order bug in Hero #213, [R-07] Hero code window horizontal overflow on mobile #214, [R-08] Excessive section vertical padding on mobile #215, [R-09] Standards TDF diagram overflow on narrow screens #216, [R-10] Footer responsive layout — bottom bar, contrast, sponsor #217, [R-11] Global CTA button centering on mobile #218, [R-12] CTA buttons stacking vertically — must be side-by-side #219, and [R-13] Hero mobile text alignment — center in single-column #220.
• The pull request includes a test plan to verify the mobile, tablet, and desktop layouts, as well as light and dark themes at all breakpoints.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[vmorps]

Here's video of me scrolling through my phone to show the responsive updates in action. Exciting stuff!
https://github.com/user-attachments/assets/7c955946-c08d-43cf-bae0-847a38e291c0

[gemini-code-assist]

Code Review

This pull request introduces a comprehensive set of changes to implement a responsive layout for mobile and tablet viewports. The changes are well-structured, follow a mobile-first approach, and demonstrate a strong understanding of modern CSS for responsive design. Key improvements include a reworked mobile navbar, a responsive footer, and progressive adjustments to spacing and typography across breakpoints to enhance usability on smaller screens. The code is clear and includes helpful comments explaining the rationale behind the fixes. I have one suggestion to improve the code by removing a deprecated, non-standard CSS property.

_{Note: Security Review is unavailable for this PR.}