New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docusaurus CSS is terrible oh god please help #1558

Closed
sdboyer opened this Issue Jan 24, 2018 · 8 comments

Comments

Projects
None yet
3 participants
@sdboyer
Copy link
Member

sdboyer commented Jan 24, 2018

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

This comment has been minimized.

Copy link

nijaru commented Jan 26, 2018

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

This comment has been minimized.

Copy link

nijaru commented Jan 26, 2018

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

@sdboyer

This comment has been minimized.

Copy link
Member

sdboyer commented Jan 26, 2018

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

This comment has been minimized.

Copy link

nijaru commented Jan 26, 2018

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

This comment has been minimized.

Copy link
Member

sdboyer commented Jan 26, 2018

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

This comment has been minimized.

Copy link
Contributor

cafrias commented Jan 30, 2018

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

This comment has been minimized.

Copy link
Contributor

cafrias commented Jan 31, 2018

@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 cafrias referenced this issue Jan 31, 2018

Merged

Website styles #1607

@cafrias

This comment has been minimized.

Copy link
Contributor

cafrias commented Jan 31, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment