[Merged by Bors] - Improve header navigation

[doup]

UX changes:

• Improved responsive header, call-to-actions are visible on all breakpoints
• Header is fixed, it always stays on top
• Improved mobile menu, it joins both the main menu & page menu (book, assets & examples). When there isn't a page level menu it shows just the main menu.
  • ⚠️ Please note that I haven't changed the style of the page menus on mobile, they're too small and should be improved. But that's for another PR.
• Page level sidebar menus now are sticky, user has access to the page menu always

Code changes:

• Self contained CSS "components" following BEM naming convention
• New "page-with-menu" layout added

Fixes #135, Fixes #307

bevy-improved-header.mp4

[CooCooCaCha]

I'm encountering a strange issue when I use Chrome DevTools or Firefox Devtools. When the screen is narrow the page appears to extend past the width of the screen. I think it might be due to an issue with position: fixed.

[IceSentry]

Alright, there's still the book menu that gets hidden by the nav bar when you scroll all the way down, but it's not a super big deal. Other than that I haven't noticed anything wrong visually. I'll do a final pass on the code before approving.

[IceSentry]

LGTM

[doup]

I think that there isn't much to do with the menu, it's how position: sticky behaves. See for example Procreates manual: https://procreate.art/handbook/procreate/interface-gestures/ once you reach the footer it happens the same.

You mentioned position: absolute in another message, I can give it a try, but I've the impression that getting the left position might be tricky/ugly…

Btw, I noticed I forgot to add the "section title" part on the header… I need to add it back. 😓
This 👇

[doup]

OK, fixed:

[IceSentry]

Oh, good catch with the section title, I was so focused on everything else when testing it I didn't even realize it was gone 😅

And yeah, for the menu thing it's not a big issue. I prefer the cleaner, simpler approach that isn't perfect in all cases instead of making something super hacky.

Seeing, your link to procreate.art now reminds me that it would be cool if we had a night/day mode switch. I love my dark themes, but plenty of people prefer light themes.

[cart]

I dig the changes functionally. Just a few changes to address:

1. The text sections now "bleed out" of the bounds of their corresponding images and also feel "off center" now.
2. The text on the donate button feels "too high" now
3. I'd like the "Features" text to be slightly bigger and bolder
4. I think the navigation text should all be a bit bolder.

Left is "before" (current main). Right is "after" (this pr).

[doup]

I've fixed all the issues you pointed out @cart.

For the first one (the feature page layout) I've just made it similar to what's now on production, and I've also improved responsive. It's not very good, but at least it doesn't break on mobile/tablet… The homepage needs some love, but that's for another PR.

[cart]

Love the changes. The potential for "feature image background aspect ratio" changes when scaling the width down is slightly regrettable, but the improved use of space during scaling feels like a worthwhile trade to me.

Great work!

[cart]

bors r+

[bors]

Pull request successfully merged into master.

Build succeeded:

• build