Tweak CSS of navbar

[etiennebacher]

Just a suggestion (cf https://github.com/grantmcdermott/tinyplot/issues/399#issuecomment-2888569259). The color is a bit lighter so I add the bottom bar to emphasize that the tab is selected / hovered.

Before:

After:

[zeileis]

Thanks, Etienne, this is not unsimilar to one of the options I have been playing with. As mentioned in the original PR discussion https://github.com/grantmcdermott/tinyplot/pull/395#issuecomment-2888157593 I'm still trying out different options in the navbar-theme branch which I haven't pushed to GitHub yet.

[grantmcdermott]

Thanks @etiennebacher. I'm writing quickly on my phone, so can't check locally, but does this only affect the navbar? What about the other links, e.g. on the rhs scrolling menu?

@zeileis sorry I probably merged #395 too quickly. You'd need to issue a separate/new PR for any additional changes. But perhaps we can consolidate whatever you have with Etienne's PR here. (Can you upload a local screenshot so we can compare?)

[zeileis]

I now did a couple of things in the navbar-theme branch also incorporating the ideas from #399.

• Similar to Etienne, I used a bottom border but in white (not pink) and with a hover effect.
• Re-arranged the left navbar with dropdowns for articles and about.
• Added social media icons to the right navbar.

Preview at: https://www.zeileis.org/tinyplot

[grantmcdermott]

I now did a couple of things in the navbar-theme branch also incorporating the ideas from #399.

• Similar to Etienne, I used a bottom border but in white (not pink) and with a hover effect.
• Re-arranged the left navbar with dropdowns for articles and about.
• Added social media icons to the right navbar.

Preview at: https://www.zeileis.org/tinyplot

LGTM. (I might drop the BlueSky and Mastodon links, since my social media activity is way down lately... but fine to leave if others prefer to have something there.)

@vincentarelbundock @etiennebacher ?

[zeileis]

Still (much) better than nothing, I think. 😇

[etiennebacher]

Looks great to me! No opinions regarding the social media icons. I don't know if I should close this or not so I let you decide.

[vincentarelbundock]

🚀

[grantmcdermott]

Looks great to me! No opinions regarding the social media icons. I don't know if I should close this or not so I let you decide.

Thanks @etiennebacher let's close this PR in favour of @zeileis' additional changes. Achim, feel free to submit that PR when you're ready.

(Please keep 'em coming, though. I really appreciate you taking the time to submit PRs here.)

[zeileis]

I want to play around with a couple more alternatives for highlighting the links in the navbar, hopefully tomorrow or the day after that.

Regarding the logo in higher resolution: In #148 you posted a version with 518 x 600 pixels which is already a lot better than the current 240 x 278. I would replace this in tinyplot/man/figures/logo.png because it isn't expensive in terms of file size (76K vs 36K), ok? And then at some point it would be desirable to have a clean SVG version of it.

Is the font you used for the tinyplot text a standard font?

[vincentarelbundock]

@zeileis I'm going to get someone to convert the logo to SVG. Will post back when it's done.

[grantmcdermott]

Thanks both. I'd have to look through my email for the original image (but I think this as a PNG anyway). Let's wait for Vincent to get the SVG conversion.

[zeileis]

Fantastic, thanks, Vincent!

I think that the SVG should only use six colors. The current PNG actually uses more, which is not only due to aliasing (which would be fine).

When working on the CSS I have used the following six colors:

col = c(
  primary = "#5195A3", ## teal
  foreground = "#000022", ## almost black
  background = "#FFFAF0", ## almost white
  green = "#15A793",
  blue = "#04546B",
  pink = "#F51459"
)

These are easy to change, though, if you end up using slightly different colors.