Skip to content

style: update docs UI styles for improved contrast and clarity #994

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 30 commits into from
Sep 14, 2025
Merged

style: update docs UI styles for improved contrast and clarity #994

merged 30 commits into from
Sep 14, 2025

Conversation

julioest
Copy link
Contributor

@julioest julioest commented Sep 5, 2025 •
edited
Loading

Summary

Updates various UI components and fixes visual bugs to improve visual contrast and readability across the docs.

Changes

  • Documentation styles: Add color overrides for better readability (pages like /config-file)
  • Nav CTA: Update download button styling for improved visibility
  • Mobile navigation: Enhance mobile display for navigation and page versions panels
  • Tab components: Improve contrast in tab styling
  • Icons: Update octicons to white for better visibility
  • Anchor (frament) Jumping: Fix offset calculation where toolbar is possibly null

Home Page Preview

https://style-ui-contrast-improvements--mrdocs.netlify.app/

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

2 similar comments
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@2LoS
Copy link
Contributor

2LoS commented Sep 5, 2025

It's a very good improvement.

I've noted that links in documentation pages have the same color of the surrounding text and, unless hovered, are indistinguishable from the rest. Could you also change the color to links?

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

3 similar comments
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest julioest force-pushed the style/ui-contrast-improvements branch from 6109117 to 4c2b574 Compare September 6, 2025 18:19
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest julioest force-pushed the style/ui-contrast-improvements branch from 48bf3a7 to 912bd91 Compare September 7, 2025 07:00
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

2 similar comments
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest julioest force-pushed the style/ui-contrast-improvements branch from 65e5b1b to 0e7be47 Compare September 9, 2025 02:22
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest julioest force-pushed the style/ui-contrast-improvements branch from b96b5f3 to 4ba78fa Compare September 9, 2025 18:37
@sdarwin
Copy link
Contributor

sdarwin commented Sep 10, 2025

Github actions are failing. While not directly the reason, it is indirectly explaining, why doc previews are not building on the PR.

@julioest julioest force-pushed the style/ui-contrast-improvements branch from 9ba6cb2 to 9b701eb Compare September 10, 2025 15:33
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest
Copy link
Contributor Author

Fixed the css lint error. Doc previews are back!

@julioest julioest force-pushed the style/ui-contrast-improvements branch from 9b701eb to 5907ed4 Compare September 12, 2025 17:23
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

2 similar comments
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest julioest force-pushed the style/ui-contrast-improvements branch from fe3f358 to bbb0da4 Compare September 12, 2025 21:25
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest
style: update UI styles for improved contrast and clarity
bdff9ef 
- Add color overrides for better readability in doc.css
- Update docs download button for better visibility in header.css
- Update docs nav(s) for mobile display in nav.css, page-versions.css
- Update tabs.css for better contrast in tabs.css
- Update octicons to white in img/octicons-16.svg
@julioest julioest force-pushed the style/ui-contrast-improvements branch from cd03629 to 2101a7d Compare September 13, 2025 02:52
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

1 similar comment
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest julioest force-pushed the style/ui-contrast-improvements branch from 7a0b34b to f7ab910 Compare September 14, 2025 21:08
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest julioest force-pushed the style/ui-contrast-improvements branch from f7ab910 to 9968ad1 Compare September 14, 2025 21:14
@cppalliance-bot
Copy link

An automated preview of the documentation is available at https://994.mrdocs.prtest2.cppalliance.org/index.html

@julioest julioest merged commit 4a24503 into cppalliance:develop Sep 14, 2025
20 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alandefreitas alandefreitas Awaiting requested review from alandefreitas

@rbbeeston rbbeeston Awaiting requested review from rbbeeston

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@julioest @cppalliance-bot @2LoS @sdarwin