The Wayback Machine - https://web.archive.org/web/20200716005623/https://github.com/freeCodeCamp/freeCodeCamp/issues/38589
Skip to content
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

Update the styles on the contributing documentation #38589

Open
raisedadead opened this issue Apr 20, 2020 · 13 comments
Open

Update the styles on the contributing documentation #38589

raisedadead opened this issue Apr 20, 2020 · 13 comments

Comments

@raisedadead
Copy link
Member

@raisedadead raisedadead commented Apr 20, 2020

We want to update the styles and theme on the contributing documentation site. Here is a guide on how to work on the theme and styles.

We would want to:

  1. Remove the extraneous CSS
    • I had shamelessly copied the code from Netflix's awesome pollyjs project here while setting up the site.
    • The CSS above depends on the vue.css that ships with docsify.
  2. Write our own theme with docsify-themeable.
  3. Have the Universal Nav (already done).
  4. Fonts and colors should follow our design style guide.
  5. Use larger font size similar to our main sites
@raisedadead raisedadead changed the title Update the styles on the contribuing documentation Update the styles on the contributing documentation Apr 20, 2020
@raisedadead
Copy link
Member Author

@raisedadead raisedadead commented Apr 21, 2020

I did some more monkey patching to make the site look nicer. We would still want to write our own theme. Standardise the fonts and colors a little bit.

@KBB99
Copy link

@KBB99 KBB99 commented Apr 21, 2020

Can I work on this?

@raisedadead
Copy link
Member Author

@raisedadead raisedadead commented Apr 21, 2020

Yes.

You should give the guidelines a read 😅 . Check this, you do not need permission to work on help wanted issues.

@KBB99
Copy link

@KBB99 KBB99 commented Apr 23, 2020

Got it, I'll try to have it finished by Monday

@sujithnath
Copy link

@sujithnath sujithnath commented Apr 24, 2020

@KBB99 Let's do it together if @raisedadead is okay with it? I will read the contribution guide too :D

@KBB99
Copy link

@KBB99 KBB99 commented Apr 27, 2020

Sounds good @sujithnath . I'll change the fonts to match the Free Code Camp font.

@KBB99 KBB99 mentioned this issue Apr 30, 2020
4 of 4 tasks complete
@Twaha-Rahman
Copy link
Contributor

@Twaha-Rahman Twaha-Rahman commented May 2, 2020

@KBB99 Are you still working on the PR to change the font? If you are busy, I can take it from here.....

@Twaha-Rahman
Copy link
Contributor

@Twaha-Rahman Twaha-Rahman commented May 2, 2020

@raisedadead Would you like to create a new CSS file for the docsify theme or add the CSS to the already existing custom.css?

@raisedadead
Copy link
Member Author

@raisedadead raisedadead commented May 3, 2020

We would prefer updating the theme.css currently in the /docs/components. You are welcome to purge and tweak as per your best judgement.

Criteria:

  • We want the fonts to be legible and readable using the typography from the design guide.
  • Modular if posible, to be able to use dark/light mode would be nice touch.
@ojeytonwilliams
Copy link
Contributor

@ojeytonwilliams ojeytonwilliams commented May 4, 2020

@raisedadead any thoughts on hosting the FontAwesome fonts rather than using the kit? The kit creates a flash of unstyled content and sometimes takes a while to load.

@raisedadead
Copy link
Member Author

@raisedadead raisedadead commented May 4, 2020

I think I used our pro license. We sure can host it too, but I am not sure it can be bundled any better because all of this is client side.

@ojeytonwilliams
Copy link
Contributor

@ojeytonwilliams ojeytonwilliams commented May 5, 2020

Unless there's a licensing issue with putting pro fonts on GitHub, I think it should be okay. Rather than going render -> get kit -> re-render it would be get fonts from GitHub -> render. Everything style related should be ready before the first render.

I guess the ideal solution would be to inline the svgs, but that's both a pain and possibly not okay as far as FontAwesome are concerned.

@raisedadead
Copy link
Member Author

@raisedadead raisedadead commented May 5, 2020

I will check about hosting, but we are a public repo, so I think it would not be possible to host the licensed icons. We could always swap these for the free (open-source) ones and host that instead, which I am fine with.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.