Top bar navigation

[liaprins-czi]

• [x] Verify final top bar nav item content
• [x] Verify if when on home page, will you be "inside" any of these high-level nav items, or not? (If not, then make it possible to have a state wherein none are selected)
• [x] Design visual treatment for nav items in top bar, considering:
• Type size
• Type weight
• Distance of each item from each other
• Left-align versus center, etc
• Should not have underline
• Should be black, not grey or navy
• Treatment for selected / current nav item
• Hover treatment for non-current nav item
• Hover treatment for current nav item?
• Consider internal versus external (hub) links

Here's what we got for free from PyData theme:

[liaprins-czi]

Here's a link to the design of the top bar nav items, in Figma: https://www.figma.com/file/ahjEJjeaFL6oTjeQaueGDQ/napari-Sphinx-Theme?node-id=20%3A124

[codemonkey800]

@liaprins-czi do you have designs for mobile, or does this look fine to you?

Maybe we can just show the active link as bold and remove the underline?

[liaprins-czi]

Thanks for sharing this! Yes, I think:

• no underline for mobile, it doesn't really communicate the same thing in this view
• but keeping the current selected section Bold is good
• and if the main napari link at top (currently "napari Sphinx Theme") could be the same size as the rest, since users should be able to click it to go back to home page then that would help to indicate it is a selectable link, too
• it looks like that "napari Sphinx Theme" link is not left-aligned with the others, if it could bump over to the right a little bit to be aligned with them, that would be great

I can also mock this up if it is helpful. Let me know what you think!

On Wed, Feb 23, 2022 at 2:10 PM Jeremy Asuncion @.***> wrote:

@liaprins-czi https://github.com/liaprins-czi do you have designs for mobile, or does this look fine to you?

[image: image] https://user-images.githubusercontent.com/2176050/155417436-5ec2945d-0c8c-4169-96c5-08f00d807e4a.png

Maybe we can just show the active link as bold and remove the underline?

— Reply to this email directly, view it on GitHub https://github.com/napari/napari-sphinx-theme/issues/45#issuecomment-1049263379, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMWPDSHZRM52JE3FYSDIOZTU4VLOBANCNFSM5OFXVD7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

--

Lia Prins

Senior Data Visualization Designer

(650) 422-1750

chanzuckerberg.com

[codemonkey800]

All of that sounds good to me, thank you!

I can also mock this up if it is helpful

@liaprins-czi yes pls, I think having a mockup would helpful and also good for future reference

[liaprins-czi]

Okay cool, I will work on that next!

On Thu, Feb 24, 2022 at 8:46 AM Jeremy Asuncion @.***> wrote:

All of that sounds good to me, thank you!

I can also mock this up if it is helpful

@liaprins-czi https://github.com/liaprins-czi yes pls, I think having a mockup would helpful and also good for future reference

— Reply to this email directly, view it on GitHub https://github.com/napari/napari-sphinx-theme/issues/45#issuecomment-1050050081, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMWPDSESUWY7K2BYBZQEER3U4ZOFZANCNFSM5OFXVD7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

--

Lia Prins

Senior Data Visualization Designer

(650) 422-1750

chanzuckerberg.com

[liaprins-czi]

Here;s a link to designs for the hidden menu in Figma (scroll right to see it open and also with the version switcher open, for now following same pattern as PyData haas, but updating the visuals to match our look and feel): https://www.figma.com/file/ahjEJjeaFL6oTjeQaueGDQ/napari-Sphinx-Theme?node-id=61%3A316

It'd be nice if we could get the content to shift down when the hamburger menu opens. But if not and it has to instead cover the content (like is the PyData default), that is totally fine, especially for this first implementation.

[liaprins-czi]

The top nav is looking nice, there are just a couple of updates it should have:

• [x] Font weight should be Barlow Medium (500), right now it is Regular (400)
• [x] Ther should be 35px or horizontal spacing between each nave item, right now there is ~16px Thanks!

[liaprins-czi]

These fixes looks really great! One things I noticed when my browser is open to the site and I have Figma open right next to it: the blue colors of the header look a little different. The one in the browser looks a little duller, the one in Figma looks warmer and slightly more saturated. I think it is the conversion from HEX to RGB: there are more possible defineable HEX colors than there are RGB colors, due to the inherent granularity of the base systems they use.

This means there are multiple HEX colors that translate to the same RGB conversion. And this means that the RGB is inherently less specific: likely an average / middle ground of all the HEX codes that map to it.

Point being: you correctly translated the blue hex code from Figma (#80d1ff) to RGB (255, 209, 128) in the code. However, this color is not quite the same as the HEX color in Figma. Is it possible to instead specify the blue color using HEX code? Or is there a limitation with Sphinx theme and / or other libraries etc being used that prevents this or auto-translates it to RGB before it hits the browser, etc?

This is not that big of a deal, so don't worry if it's not possible. Also, thanks for putting up with my color nerdiness! 🤓🌈 ( I literally spend 8 hours this weekend reading about color spaces and choosing a color palette for a side project I'm working on, so of course I will notice the tiniest difference in colors, lol!)

[codemonkey800]

lolol @liaprins-czi i appreciate your keen eye for color, I definitely don't have that unfortunately 😆 We can definitely use hex colors for CSS. I'll change it to use hex and hopefully it'll look more accurate haha

---

Unrelated, but I read up on some new CSS properties for more vibrant colors. Maybe it's something we could incorporate into the napari hub / napari.org one day, unlocking a more vibrant color palette for us to use 🤩

https://css-tricks.com/new-css-color-features-preview/

[liaprins-czi]

Awesome! Thanks for sharing! I had heard of the display color thing, but this explained it really well. Color spaces are so interesting!!!

On Wed, Mar 9, 2022 at 10:34 AM Jeremy Asuncion @.***> wrote:

lolol @liaprins-czi https://github.com/liaprins-czi i appreciate your keen eye for color, I definitely don't have that unfortunately 😆 We can definitely use hex colors for CSS. I'll change it to use hex and hopefully it'll look more accurate haha

Unrelated, but I read up on some new CSS properties for more vibrant colors. Maybe it's something we could incorporate into the napari hub / napari.org one day, unlocking a more vibrant color palette for us to use 🤩

https://css-tricks.com/new-css-color-features-preview/

— Reply to this email directly, view it on GitHub https://github.com/napari/napari-sphinx-theme/issues/45#issuecomment-1063234490, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMWPDSAXFTNF674HLT6ZPEDU7DVJLANCNFSM5OFXVD7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

--

Lia Prins

Senior Data Visualization Designer

(650) 422-1750

chanzuckerberg.com

[codemonkey800]

@liaprins-czi I just checked this out and it looks like this is standard behavior. Browsers will take hex values and convert it into rgb: https://stackoverflow.com/a/39211005

[liaprins-czi]

Okay I see, no worries! Maybe we will be able to start using the cool new CSS color specification methods sometime in the future, anyhow!

On Wed, Mar 9, 2022 at 4:15 PM Jeremy Asuncion @.***> wrote:

@liaprins-czi https://github.com/liaprins-czi I just checked this out and it looks like this is standard behavior. Browsers will take hex values and convert it into rgb: https://stackoverflow.com/a/39211005

— Reply to this email directly, view it on GitHub https://github.com/napari/napari-sphinx-theme/issues/45#issuecomment-1063512871, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMWPDSAAJVSU7B4G2X4MSKLU7E5KRANCNFSM5OFXVD7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

--

Lia Prins

Senior Data Visualization Designer

(650) 422-1750

chanzuckerberg.com

[codemonkey800]

@liaprins-czi I created a separate issue for the color accuracy on this: https://github.com/napari/napari-sphinx-theme/issues/84

would it be fine if we close this?

[liaprins-czi]

Oh yes, good point, closing it now!