website: Update font size of navbar

[cdrage]

Update font size of navbar website

What does this PR do?

This updates the navbar up at the top to a smaller font as it's not
visually appealing on smaller screens / looks odd.

Screenshot/screencast of this PR

Before:

After:

What issues does this PR fix or reference?

N/A

How to test this PR?

View the site :)

Signed-off-by: Charlie Drage charlie@charliedrage.com

[benoitf]

adding @mairin as reviewer

[mairin]

Hi @cdrage! Could you potentially add a @media query to have this font size kick in when the "podman desktop" starts getting ellipsized? This is a good fix for that issue, but for 4k monitors i think the bigger text is preferable for readability. (What do you think?)

[cdrage]

Hi @cdrage! Could you potentially add a @media query to have this font size kick in when the "podman desktop" starts getting ellipsized? This is a good fix for that issue, but for 4k monitors i think the bigger text is preferable for readability. (What do you think?)

I was under the impression that em scales with resolution. I'm unsure how to implement using @media with tailwindcss.

What were you thinking, maybe if a screen is detected higher than 1920x width than use the original em?

[benoitf]

something like

.navbar__title {
  font-size: 1.2em;
  font-weight: 500;
  padding-right: 0.5em;
}


.navbar__logo img {
  padding-right: 7px;
}

.navbar__logo {
  min-height: 56px;
}


@media (min-width: 1200px) {
  .navbar__title {
    font-size: 2em;
    padding-right: 1em;
  }

  .navbar__item {
    font-size: 1.2em;
  }
   
}

[cdrage]

Updated!

[cdrage]

Had to re-sign the commit, so I've updated the PR :)