[Handbook] CSS is messed up

[winkletinkle]

Description

Too many media queries, too many opposing margins and paddings.

Expected Behavior

Style code needs removed and cleaned up.

Screenshots

Example, so much wasted whitespace before page heading:

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[Priyadharshini0101]

Hi, Can i work on this issue?

[vishalvivekm]

@Priyadharshini0101 will you please confirm if you have the site running successfully and your approach of solving this issue?

[ayush14189]

I’d like to work on this issue.

✅ I’ve read through the CONTRIBUTING.md.
✅ My development environment is set up, and I’m able to successfully build and run the project locally.

🛠️ Proposed Approach:

I’ll identify and refactor redundant or conflicting media queries, margins, and paddings across the stylesheets or components. The goal is to streamline the styling logic for better maintainability and eliminate unnecessary white space (like the gap above page headings shown in the screenshot). I’ll ensure the layout remains responsive and visually consistent across devices post-cleanup.

Please assign this issue to me so I can begin working on it. Thanks!

[ayush14189]

Thanks for assigning. I'll create the PR ASAP.

[HIMU-2001]

Hi @winkletinkle @vishalvivekm ,

Could I work on this.

[ayush14189]

@HIMU-2001 I'm working on this issue. I'll create PR by tomorrow.