Docusaurus CSS is terrible oh god please help

[sdboyer]

The CSS behind the new docs site is terrible:

• i did some unholy flex things to make the footer stick to the bottom, but it borked up the flex relationships in the inner docs and nav components (they no longer have a fixed position, but move horizontally depending on the width of the inner docs content).
• The header (h2-5) appearance is abominable and unusable.
• The text rules are pretty terrible for a technical docs site. Font size and spacing makes it quite difficult to read.
• Probably a thousand other things

i am not good at this. A contributor who IS good at this kind of work would be incredibly, super-duper welcome 😄 🎉 🦄 ❤️

[nijaru]

I'm not a frontend guru, but if no one else picks this up, I can work on it. It may take me some time, but I could use the practice 😝

[nijaru]

Looking over the directory, it's a jekyll site with some react? Also checking out docusaurus now.

[sdboyer]

yay!

It's just docusaurus (no jekyll), which is a facebook thing - so yeah, react.

Unfortunately, i haven't automated redeployments on update yet, so you can't see how it gets published. For now, i'm just running yarn run publish-gh-pages (which is docusaurus-publish under the hood) from the website/ dir manually when changes have been made to master. For local dev, though - which thus far seems to line up with the generated static site - run yarn run start, and it should set up a hot-reloading local instance on port 3000.

[nijaru]

Sounds good, I'll look over everything in the next couple of days and hopefully get some of this done next week.

So for clarification, what part of the site contains the unholy flex things? The elements inside of the mainContainer div? Also, what are you looking for as far as the headers and fonts go?

[sdboyer]

My unholy flex hacks are all in website/static/css/custom.css.

You can see the problem if you compare the positioning of nav and main body elements of e.g. these two:
https://golang.github.io/dep/docs/failure-modes.html
https://golang.github.io/dep/docs/introduction.html

i think that's probably less pressing than the mess that is the text and h2-5 appearance, though.

[cafrias]

I'll lend you a hand @nijaru with this if you need. Anything React related is my expertise. Tell me what to do and I'll help.

[cafrias]

@sdboyer I'm checking the issues. I also found a couple of things besides what you've pointed out, mostly regarding mobile breakpoint:

• Some pages break when seen from mobile phone.
• Navbar with little contrast between background and font.

I'm working on this issue. This Saturday or Sunday I'm gonna make a pull request with the changes ... I'll also upload a new version to S3 bucket so you can check the changes before merging, in case something needs to be changed.

[cafrias]

@sdboyer I found some time to work on this issue today! Done ... check the live demo.

Anything you need regarding the website, don't hesitate to tell me! I'll be reading dep source code to try to help on other issues as well.