Miscellaneous design improvements #82
Conversation
This improves structure of the page
This commit makes some improvements to the overall theme, color scheme, and spacing and sizing of different elements
Improved web page responsiveness slightly, by automatically reducing the size of the header on smaller screens, adding padding to the sides of the page content, and making long hashes break into new lines when they do not fit on a single line
|
Very nice. Is the orange on white legible enough? Also, might take a little white to review the diff due to the nature of this project |
This commit darkens the orange links on light mode to improve contrast and legibility. The new color has been checked to have a 4.5:1 contrast ratio on white backgrounds, which is the minimum recommended by WCAG 2.1 AA for visual presentation of text (https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) The color contrast was calculated using https://color.adobe.com/create/color-contrast-analyzer
That's a good point, I went and checked with a color contrast tool, and that orange indeed did not have enough contrast against the white background. I added a new commit that changes the text color to a darker tone of orange which follows the minimum recommended contrast ratio (according to this standard). Here is a preview of this new version: https://663d01ca125be011afa176e6--sage-parfait-0b691d.netlify.app
Makes sense! I tried to organize the PR into logical commits to hopefully make reviewing easier, but please let me know if there is something I can do to make this process easier. |
This pull request implements several miscellaneous design changes in an attempt to improve the overall feel of the website.
Changes include:
The changes were taken in a way to improve design while maintaining the project's vibe, code style, framework of choice, and structure and familiarity, to avoid disruptions with other maintainers as much as possible.
Light mode preview
Before
After
Dark mode preview
Before
After
I also published a preview of the new version here — to make it easy to preview what it looks like after the changes:
Older previewLatest preview(Note: I did not upload the whole repo, links may not work in that preview)
Please let me know if you like this, or if you'd like any changes.
Thanks!