Docs: Font additions, style updates, and icon implementation #758
Conversation
- Adds a custom stylesheet & brand colours - Adds Recursive as the code font - Adds repo info to the nav bar - Adds auto tracking ID links for deep linking to sections as users scroll the page - Index pages are now a part of their section as determined by their H1 - Removes mkdocs info from future footer
- Renames "Dev" to "Develop" for improved navigation labels - Deployment docs are now located under a larger "Development" section (fewer nav bar choices & realistically I think anyone who wants to do one is going to be referring to the other) - Adds links to tools the first time they're mentioned - Rewords part of the homepage - Hides section navigation on the homepage (now we don't have a blank section nav bar! - Adds some syntax highlighting - Removes some manual word wrapping — this was done very rarely / inconsistently
- Better title for sidebar
- Adds links to tools - Adds future docs style guide section - Updates name and makes it an H1
- Replaces hyphens on the homepage with em dashes
- Updates license section in readme clarifying docs licensing
- Sets Recursive as the main typeface for code and text! - Adjusts variable axes and sets stylistic alternates accordingly. - Self hosts the font
|
Keeping Ilya's reasonable request to not double the repo's size with a bunch of icons — most of which aren't used at this point and probably never will be — in mind... it seems the best way may be to only copy over the icons we want to use to the If there's a clever way to do this, I'd love to know! |
- Updates writing docs page regarding adding icons
|
@tw4l WCAG2's contrast algorithm notably STINKS! It is wholly unrepresentative of how humans interpret colours, not accounting for hue & other perceptual phenomena when calculating a contrast score. For more information, check out this article with nice examples! The nav is a great example of this where sRGB white text on sRGB #008873 bg fails WCAG2 but passes APCA for body text — and rightfully so? Looks plenty legible to me. That said, your point is still valid and through APCA it only gets a "fluent text okay" which isn't ideal considering the weight used here (about 200 off from what the calculator considers accessible). I'm glad you brought this up because when I generated this palette I didn't fully validate it, looks like I need to generate a few middle ground colour values between the light and dark swatches, will probably also lighten the background some to bump the score up, ideally past Lc 70. As for the nav link opacity reduction, I'll see what I can do... This is kind of a Material for MKDocs accessibility issue and a good example of why I prefer to not use opacity for hover effects! |
This is great to know, thank you!
Makes sense! Everything else looks good so going to go ahead and approve so you can make the changes as you see fit and merge when ready. |
- Nav bar text is now 20% higher opacity, hover state also differentiated with weight - In-body links are now underlined - Lightened BG colour and darkened link colour — now achieves an APCA score of 84!
With this PR the docs styling is largely where I'd like it to be for now Neat!
Screenshots
Footer links!
New Page Styling
Goal for this was to improve the hierarchy of titles — I generally dislike thin fonts, hard to scan through documents quickly — and code blocks, as well as implementing the colour scheme I've been working on to differentiate our docs / tool branding with different hues for each of our different tools as mkdocs eventually gets extended and standardized to the other pieces of software we have.
Kind of like this! 👀 .... But that's for another repo! :)
Changes