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

doc: update stylesheet to match the frontpage #4621

Closed
wants to merge 2 commits into from

Conversation

silverwind
Copy link
Contributor

  • Changed colors to match frontpage as close as possible.
  • Links are slightly more horizontally padded as compared before to accomodate for the hover effect.
  • Slightly reduced the scroll indication height (the fade-out) on the TOC.
  • The main content is now offset using margin instead of the previous border hack.
  • Remove a:visited style, I couldn't find a satisfying color as the link style is already pretty bright.

screenshot

Note: This doesn't cover syntax-highlighted code boxes. The main page uses dark boxes and another highlighting system. Not sure yet what to do here. Open for suggestions.

cc: @nodejs/documentation @nodejs/website @chrisdickinson

- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
  accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
  border hack.
@silverwind silverwind added the doc Issues and PRs related to the documentations. label Jan 11, 2016
@silverwind silverwind changed the title doc: update stylesheet to match frontpage doc: update stylesheet to match the frontpage Jan 11, 2016
@Fishrock123
Copy link
Contributor

rubber-stamp lgtm

@Fishrock123
Copy link
Contributor

@silverwind if you've adjusted any sizes, please try it on mobile. :)

@ghost
Copy link

ghost commented Jan 11, 2016

this looks awesome, LGTM

@silverwind
Copy link
Contributor Author

@Fishrock123 mobile looks fine here. There's nothing in this change that could really affect layout, except the tiny padding that was added on the links.

This empty footer was rendering a dark bar on the bottom of each page
without any content.
@silverwind
Copy link
Contributor Author

Also removed the empty footer on the pages.

@mscdex
Copy link
Contributor

mscdex commented Jan 11, 2016

Now we're almost back to the style of the original docs from the node v0.2 days!

LGTM

@jasnell
Copy link
Member

jasnell commented Jan 11, 2016

LGTM

jasnell pushed a commit that referenced this pull request Jan 11, 2016
- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
  accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
  border hack.
- remove empty footer that was rendering a dark bar on the bottom of
  each page without any content.

PR-URL: #4621
Reviewed-By: Jeremiah Senkpiel <[email protected]>
Reviewed-By: James M Snell <[email protected]>
Reviewed-By: Brian White <[email protected]>
@jasnell
Copy link
Member

jasnell commented Jan 11, 2016

Landed in d157976

@chrisdickinson
Copy link
Contributor

Great work! We might want to do a follow up PR to ensure that the contrast on body links is legible enough. We should be able to use this online test.

@silverwind
Copy link
Contributor Author

@chrisdickinson Thanks! Your site does indeed complain about #80bd01 being too low contrast on nodejs.org, which uses #fff (I just noticed docs uses #fcfefa, but I don't think it'd matter for contrast).

I'm not sure we should change that green, it's Node's signature color after all.

MylesBorins pushed a commit that referenced this pull request Jan 11, 2016
- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
  accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
  border hack.
- remove empty footer that was rendering a dark bar on the bottom of
  each page without any content.

PR-URL: #4621
Reviewed-By: Jeremiah Senkpiel <[email protected]>
Reviewed-By: James M Snell <[email protected]>
Reviewed-By: Brian White <[email protected]>
@MylesBorins MylesBorins mentioned this pull request Jan 11, 2016
MylesBorins pushed a commit that referenced this pull request Jan 12, 2016
- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
  accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
  border hack.
- remove empty footer that was rendering a dark bar on the bottom of
  each page without any content.

PR-URL: #4621
Reviewed-By: Jeremiah Senkpiel <[email protected]>
Reviewed-By: James M Snell <[email protected]>
Reviewed-By: Brian White <[email protected]>
MylesBorins pushed a commit that referenced this pull request Jan 13, 2016
- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
  accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
  border hack.
- remove empty footer that was rendering a dark bar on the bottom of
  each page without any content.

PR-URL: #4621
Reviewed-By: Jeremiah Senkpiel <[email protected]>
Reviewed-By: James M Snell <[email protected]>
Reviewed-By: Brian White <[email protected]>
MylesBorins pushed a commit that referenced this pull request Jan 14, 2016
- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
  accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
  border hack.
- remove empty footer that was rendering a dark bar on the bottom of
  each page without any content.

PR-URL: #4621
Reviewed-By: Jeremiah Senkpiel <[email protected]>
Reviewed-By: James M Snell <[email protected]>
Reviewed-By: Brian White <[email protected]>
MylesBorins pushed a commit that referenced this pull request Jan 14, 2016
- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
  accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
  border hack.
- remove empty footer that was rendering a dark bar on the bottom of
  each page without any content.

PR-URL: #4621
Reviewed-By: Jeremiah Senkpiel <[email protected]>
Reviewed-By: James M Snell <[email protected]>
Reviewed-By: Brian White <[email protected]>
MylesBorins pushed a commit that referenced this pull request Jan 19, 2016
- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
  accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
  border hack.
- remove empty footer that was rendering a dark bar on the bottom of
  each page without any content.

PR-URL: #4621
Reviewed-By: Jeremiah Senkpiel <[email protected]>
Reviewed-By: James M Snell <[email protected]>
Reviewed-By: Brian White <[email protected]>
@MylesBorins MylesBorins mentioned this pull request Jan 19, 2016
scovetta pushed a commit to scovetta/node that referenced this pull request Apr 2, 2016
- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
  accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
  border hack.
- remove empty footer that was rendering a dark bar on the bottom of
  each page without any content.

PR-URL: nodejs#4621
Reviewed-By: Jeremiah Senkpiel <[email protected]>
Reviewed-By: James M Snell <[email protected]>
Reviewed-By: Brian White <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
doc Issues and PRs related to the documentations.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants