fix: Accessible font sizing and default colours

[BenjaminWalsh]

Summary

I've been through and changed the font sizing to use REM units over fixed pixel sizing. This allows user to modify the font size through the browsers settings, and is essential for accessibility.

During testing it was clear that the nav menu was sized using rem and blew out considerably in some smaller viewports. To remedy this I've applied a fixed width size of 300px so the text size can increase but the menu won't get too big.

Perhaps controversially, I've also use axe to identify issues with colour contrast and updated the default colours to pass AA WCAG accessibility standards. As I understand things, the main aim of this product is to help people document, so it makes sense that function over form should take precedence here.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfils these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

More than happy to discuss my changes with anyone wanting to. Love VuePress and just trying to make it better for everyone right out of the box. 😄

[flozero]

I definitely agree about using rem instead of px. Are you sure it's base on the body who has a px base ?

I added a comment on the emoji stuff

[kefranabg]

Hi @BenjaminWalsh ,

Thank you for your PR. Accessibility is something that we really want to improve in VuePress.
However I don't think that we can change these color so easily as they are official Vue.js style colors.

As a workaround you can override default theme colors

Could you provide a screenshot example of what's going wrong with the menu on different viewport?

[BenjaminWalsh]

@f3ltron

I definitely agree about using rem instead of px. Are you sure it's base on the body who has a px base ?

I added a comment on the emoji stuff

I'm not 100% sure what you're asking here.

Forgive me if you already know this, but, most browsers set the base body size to 16px, so 1rem is 16px, but users can change their local settings to larger or smaller sizes, and REM/EM sizing adapts appropriately.

[BenjaminWalsh]

a screenshot example of what's going wrong with th

I totally understand on the default Vue colours, I believe you should seriously consider reviewing these defaults. Or perhaps providing advice on alternative colours in the docs.

With regards to the header menu, when you increase the font-size the area the "Guide" "Config" and "Plugin" links sit in, crop the overflow, so we can access some of these links. The solution I offer is to allow scrolling of this area so all links and the search bar can be accessed.

[vue-bot]

Hello!
This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️

[BenjaminWalsh]

Hello!
This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️

If you guys still want this fix, for your display bugs as demonstrated just let me know. I'll revert the default colours as mentioned. 👍 @kefranabg @f3ltron