Miscellaneous design improvements

[danieldaquino]

This pull request implements several miscellaneous design changes in an attempt to improve the overall feel of the website.

Changes include:

• Several tweaks to the theme and the colours used on both light and dark mode
• Improvements to the responsiveness of the design (i.e. how well it handles screen size changes)
• Other misc tweaks (e.g. Added spaces after factory hash where it was inconsistent)
• Improved visual hierarchy through the use of spacing, font sizing, and colors.

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 preview Latest 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!

[nvk]

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

[danieldaquino]

Very nice. Is the orange on white legible enough?

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

Also, might take a little white to review the diff due to the nature of this project

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.