@palisadoes Assigned this to me Please

My Proposed Solution::

Adjust font sizes, weights, and spacing for each heading level to make them visually distinct.

• H1: Large and bold (e.g., 2.5rem, bold).
• H2: Slightly smaller but still prominent (e.g., 2rem, bold).
• Gradually decrease size and weight for H3-H6.

Visual Enhancements:

• For light mode, use darker shades (e.g., black, navy).
• For dark mode, use lighter colors (e.g., white, light gray) with accessible contrast ratios.

Implementation:

• I’ll ensure the styles are responsive and test them across different devices and screen sizes.
• Use CSS variables to simplify light/dark mode toggling and ensure maintainability.

I’d love to contribute by implementing these changes. Please assign this issue to me if you think this approach works!
@palisadoes

Please use a color palette generator like this:

• https://www.canva.com/colors/color-palettes/

Update your proposal accordingly

ISSUE:

The problem arises in H1 heading only, every other heading is well structured.

MY PROPOSAL:

• Removing the assigned size to h1 and giving it the appropriate size.

IMPROVEMENTS: (Changing background colors)

for dark mode

• Side Navbar and Navbar (#121212 (Very Dark Gray))
• for Body (#212121 (Dark Charcoal))

for light mode

• Side Navbar and Navbar (#f3f4f6 )
• for Body (#F8F8F8)

OUTPUT

@palisadoes if you want any further changes please comment and assign this issue to me.

Issue:

There is issue in different heading sizes mainly H1.

Proposal:

1. Improve Heading sizes
2. Improve colours for headings
3. Change navy blue colour to grey in dark mode for coded text

4. Addition of vertical lines like this:
   

For reference: I have taken same color palette from developer docs. Please let me know if any further changes are needed.

I'm assigning this to @hars-21. The suggested font in the image is much better.

Consider using underlines, and slightly different colors like GitHub

GitHub H1 example

GitHub H2 example

GitHub H3 example

GitHub H4 example

GitHub H5 example

GitHub H6 example

Hello Sir! As I was working on this issue, I noticed some bugs or areas of improvements in talawa docs.

1. There is issue when i hover on one card, all other are also disturbed. And it creates a minor shake.
2. There is lot of gap between sections. And it can lead to bad user experience.

3. In my opinion, we can make this heading inside the box below.

So, sir I would like to ask that should I solve these minor issues with this only and create a single PR for the whole. Or should I open a new issue and deal with it separately.

1. All in one PR.
2. Right justify all text except in the three cards in the second row
3. The left drawer in the /docs needs fixing. The spacing and the indentations could be smaller. The v3 and v2 documentation sites here were the original basis of the design.

• https://hasura.io/docs/3.0/index/

Ok sir, I will make the changes.