Adapt theme from new website design #53
Conversation
dennisreimann
added
ready for review
There was a problem hiding this comment.
Oh wow - this looks amazing!!
Love the color in the top bar, and especially that font. Thank you very much @dennisreimann!!! ❤️
I noticed that the images are broken, but I'm not sure if this is because of the mocup repo, and if it will be fixed upon merge...
And a general request: can we please do a dark mode? #54 My eyes are bleeding from seeing this much white on a screen... I think this is fitting because the Wasabi GUI is dark as well - and because this documentation is mostly text, which is 💯 times better to read in dark mode.
|
Rock 'n roll! Great work @dennisreimann 👏👏 I like the approach of overwriting the styles with the main website's colors and typography as from whatever I researched, creating a custom Bootstrap layout for vuepress would have been a lot of pain, plus no future updates from vuepress in terms of layout and features. However, the main website uses a lot of bootstrap classes such as Other than that, everything looks great. Agree with Max that a dark mode would be much easier on the eyes as the docs are pretty text-heavy, so you can try inverting the colors. Some small suggestions that you can consider to achieve a more cohesive theme:
Changing the "Wasabi Documentation" font to Playfair Display, and the blue button to the green with uppercase text, and I think we should also change the text to "Read the docs" instead of "reclaim your privacy".
The website uses lowercase for all the headings, so we can do the same in the docs as well for all the headings in Playfair font
Uppercase Inconsolata would look great for sub-headings like this one "Manual public key import", with a tad bit of increased letter spacings. |
Closes #4. Signed-off-by: Dennis Reimann <mail@dennisreimann.de>
Signed-off-by: Dennis Reimann <mail@dennisreimann.de>
This uses the CSS media query prefers-color-scheme to adapt to the users system settings. Closes #54. See these for details: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://twitter.com/DennisReimann/status/1157714320324747265 Signed-off-by: Dennis Reimann <mail@dennisreimann.de>
Done with 712cf97. @mayankchhabra I also incorporated your suggestions and feedback in the finetuning commit. You can take a look at the current website, I deployed it with the recent changes including dark mode… https://docs.wasabiwallet.io/ Speaking of dark mode: According to the quantitative research done by @MaxHillebrand our users prefer the dark side, so we made it the default. But as we don't want to put off the users that would rather use light mode, we cater to theirneeds with the CSS prefers-color-scheme media query. |
Increase font size in nav and fix code blocks Signed-off-by: Dennis Reimann <mail@dennisreimann.de>
|
As written in #57, we should increase the font size of the top nav bar. Maybe even with the general font as well? |
|
Thanks for the kind words, Max! I hope this will be one of many little contributions that will make the whole more than the sum of all parts. The efforts of the community help grow this project to become a valuable resource about Wasabi and privacy in Bitcoin in general. A much needed and invaluable resource for the generations of HODLers to come 😀 |
Proposal on how the design of the upcoming webiste could be adapted for the docs.
I deployed the changes so that everyone can take a look here:
https://docs.wasabiwallet.io/
@mayankchhabra @MaxHillebrand @thunderbiscuit Looking forward to your feedback!
If merged, this would close #4.