solidjs/solid-site

A feeling of very little vertical space, navbar too high, prefer sidebar TOC style navbar

Opened this issue · 2 comments

Vertical space on the site is fairly limited with the constantly visible navbar, that is also unnecessarily high. There is also a feeling of too much content everywhere and a need to scroll for everything.

For a cleaner site layout to draw inspiration from I would point to Mantine.

There are also some non-uniform, missing or giant margins and paddings which make the website feel "zoomed" and really full of content, overwhelming and missing negative space. For example when opening the "Guides" submenu, it can spawn a scrollable, ultra-high list of links which takes almost all the space on my screen. a site could benefit from a bit smaller font size (0.95rem) and a little bit lower line-height (1.5).

image

There is also no qood indication to what section you are currently in, because the guide title hides when scrolled.

image

Compare it to the mentioned mantine navbar:
image

They have a navbar on the left that is a nice, collapsible list covering all the content, a TOC of the current page on the right with the active state tracking and a nicely spaced main content in the center that has much room to breathe. Their main content is also close to the optimal width of ~800px, while solid is slightly above the maximum width of ~1000px.

Compare the current (75% above 1024px) to the fixed 820px with adjusted body width and background colors:
image

image

milomg commented

Would you be open to implementing these changes?

It seems like someone experienced in webdev and design should take a look at that, possibly propose some mockups etc. I, unfortunately, don't feel competent enough to do that. I don't have the experience nor the time to tinker with it by myself for now.