Make that nav bar look 💯

[Deleted user]

The nav bar is functional, but it ain't a looker yet.

Action items

• Replace the underline for the currently selected page with a text color change (see mockup). You can apply the style selectively using the "segment" variable. Logic is already in place for this, but it should be refactored
  • Instead of a ternary based on the value (class={segment === 'page' ? 'selected' : ''}), you can use a fancy directive instead. A cleaner format would be: class:selected={segment === 'page'}
  • The above basically means if segment === 'page', the selected class should be applied to the element.
• Change the text color <a> tags to the base text color, which exists as a CSS variable. Check the :root section of global.css to see where these variables are declared. To use it, just say color: var(--text-color)
• Remove the .selected::after to get rid of the underline.
• Change the ul to use a flexbox layout instead of floats. Use align-items: center
• Fix the spacing so "Contact Us" is aligned to the right, and all others to the left. This is best accomplished with a margin-left: auto on that specific link.
• Increase the margins between each nav link as shown in the mockup. There should be a padding of 12rem on the nav itself, and a margin of maybe 5rem between each link. Adjust as necessary and set a flex-basis on each link so they are all considered the same width.
• Add a background to the nav bar. This should be the same as the top of the gradient for the body: #FBF6F1

Futre action items

• Switch to a hamburger menu for mobile layouts!
• Add drop shadow on scroll

[Deleted user]

Drop shadow now in scope for this issue 👍

[Deleted user]

Mobile nav also in scope 👍 👍