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: improve scrolling, various CSS tweaks #5198

Closed
wants to merge 4 commits into from

Conversation

silverwind
Copy link
Contributor

  • Made scrolling of the sidebar not affect the main page by using a combination of overflow:hidden and overflow:scroll.
  • Changed the scrollbar of the sidebar to be visible again for accessibilty reasons and removed the indication gradient because it was causing too much issues.
  • In WebKit-based browsers, the scrollbar received custom styling making it appear to be outside of the sidebar.
  • The main content is no longer limited to 702px width, but now uses all available space.
  • Changed the background of the code blocks to a very similar, but neutral color and made inline blocks the same color.
  • Made inline code blocks inside italic sections not italic.
  • Simplified styling of api_stability classes by introducing a common class name for the stability levels.
  • Fixed various issues related to the green hover background on links.
  • Fixed code box overflow outside the main content area.
  • Various minor tweaks to paddings and margins.
  • Cleaned up numbers in the stylesheet, removing unnecessary units, decimals and empty selectors.

ref: nodejs/nodejs.org#513
cc: @nodejs/website @chrisdickinson @dkfiresky

- Made scrolling of the sidebar not affect the main page by using a
  a combination of overflow:hidden and overflow:scroll.
- Changed the scrollbar of the sidebar to be visible again for
  accessibilty reason and removed the indication gradient because it
  was causing too much issues.
- The main content is no longer limited to 702px, but now uses all
  available space.
- In WebKit based browsers, the scrollbar received custom styling
  making it appear to be outside of the sidebar.
- Changed the background of the code blocks to a neutral color and
  made inline blocks the same color.
- Made inline code blocks inside italic sections not italic.
- Simplified styling of api_stability classes by introducing a common
  class name for the stability levels.
- Fixed various issues related to the green hover background on links.
- Various minor tweaks to paddings and margins.
- Cleaned up numbers in CSS, removing unnecessary units an decimals.
@ghost
Copy link

ghost commented Feb 11, 2016

👍

@jasnell
Copy link
Member

jasnell commented Feb 11, 2016

LGTM

@silverwind
Copy link
Contributor Author

Did a few more tweaks to types, removing some redundant styles and the double padding.

I'm thinking about changing the link color to #6ea400 as has been suggested in nodejs/nodejs.org#501.

@silverwind
Copy link
Contributor Author

Okay I'm confident that should be good to land now. I'd say we defer a color change until nodejs/nodejs.org#501 is resolved.

@silverwind
Copy link
Contributor Author

Fixed type font size to be in line with monospace text.

I'll land tomorrow unless there are objections.

silverwind added a commit that referenced this pull request Feb 14, 2016
- Made scrolling of the sidebar not affect the main page by using a combination
  of overflow:hidden and overflow:scroll.
- Changed the scrollbar of the sidebar to be visible again for accessibilty
  reasons and removed the indication gradient because it was causing too much
  issues.
- In WebKit-based browsers, the scrollbar received custom styling making it
  appear to be outside of the sidebar.
- The main content is no longer limited to 702px width, but now uses all
  available space.
- Changed the background of the code blocks to a very similar, but neutral
  color and made inline blocks the same color.
- Made inline code blocks inside italic sections not italic.
- Simplified styling of api_stability classes by introducing a common class
  name for the stability levels.
- Fixed various issues related to the green hover background on links.
- Fixed code box overflow outside the main content area.
- Various minor tweaks to paddings and margins.
- Cleaned up numbers in the stylesheet, removing unnecessary units, decimals
  and empty selectors.

PR-URL: #5198
Reviewed-By: James M Snell <jasnell@gmail.com>
@silverwind
Copy link
Contributor Author

Landed in 3add7a7.

@nodejs/lts hopefully this can be backported soon so, so we don't end up in situations where the docs have different styling, like it happened with 5.6.0 / 4.3.0.

@silverwind silverwind closed this Feb 14, 2016
@rvagg
Copy link
Member

rvagg commented Feb 15, 2016

+1 for fast-tracking this to v4.x

rvagg pushed a commit that referenced this pull request Feb 15, 2016
- Made scrolling of the sidebar not affect the main page by using a combination
  of overflow:hidden and overflow:scroll.
- Changed the scrollbar of the sidebar to be visible again for accessibilty
  reasons and removed the indication gradient because it was causing too much
  issues.
- In WebKit-based browsers, the scrollbar received custom styling making it
  appear to be outside of the sidebar.
- The main content is no longer limited to 702px width, but now uses all
  available space.
- Changed the background of the code blocks to a very similar, but neutral
  color and made inline blocks the same color.
- Made inline code blocks inside italic sections not italic.
- Simplified styling of api_stability classes by introducing a common class
  name for the stability levels.
- Fixed various issues related to the green hover background on links.
- Fixed code box overflow outside the main content area.
- Various minor tweaks to paddings and margins.
- Cleaned up numbers in the stylesheet, removing unnecessary units, decimals
  and empty selectors.

PR-URL: #5198
Reviewed-By: James M Snell <jasnell@gmail.com>
@MylesBorins
Copy link
Contributor

Blocked by #4741 for landing in v4.x

MylesBorins pushed a commit that referenced this pull request Feb 22, 2016
- Made scrolling of the sidebar not affect the main page by using a combination
  of overflow:hidden and overflow:scroll.
- Changed the scrollbar of the sidebar to be visible again for accessibilty
  reasons and removed the indication gradient because it was causing too much
  issues.
- In WebKit-based browsers, the scrollbar received custom styling making it
  appear to be outside of the sidebar.
- The main content is no longer limited to 702px width, but now uses all
  available space.
- Changed the background of the code blocks to a very similar, but neutral
  color and made inline blocks the same color.
- Made inline code blocks inside italic sections not italic.
- Simplified styling of api_stability classes by introducing a common class
  name for the stability levels.
- Fixed various issues related to the green hover background on links.
- Fixed code box overflow outside the main content area.
- Various minor tweaks to paddings and margins.
- Cleaned up numbers in the stylesheet, removing unnecessary units, decimals
  and empty selectors.

PR-URL: #5198
Reviewed-By: James M Snell <jasnell@gmail.com>
@MylesBorins
Copy link
Contributor

@rvagg will be in next 4.4 rc

MylesBorins pushed a commit that referenced this pull request Feb 22, 2016
- Made scrolling of the sidebar not affect the main page by using a combination
  of overflow:hidden and overflow:scroll.
- Changed the scrollbar of the sidebar to be visible again for accessibilty
  reasons and removed the indication gradient because it was causing too much
  issues.
- In WebKit-based browsers, the scrollbar received custom styling making it
  appear to be outside of the sidebar.
- The main content is no longer limited to 702px width, but now uses all
  available space.
- Changed the background of the code blocks to a very similar, but neutral
  color and made inline blocks the same color.
- Made inline code blocks inside italic sections not italic.
- Simplified styling of api_stability classes by introducing a common class
  name for the stability levels.
- Fixed various issues related to the green hover background on links.
- Fixed code box overflow outside the main content area.
- Various minor tweaks to paddings and margins.
- Cleaned up numbers in the stylesheet, removing unnecessary units, decimals
  and empty selectors.

PR-URL: #5198
Reviewed-By: James M Snell <jasnell@gmail.com>
stefanmb pushed a commit to stefanmb/node that referenced this pull request Feb 23, 2016
- Made scrolling of the sidebar not affect the main page by using a combination
  of overflow:hidden and overflow:scroll.
- Changed the scrollbar of the sidebar to be visible again for accessibilty
  reasons and removed the indication gradient because it was causing too much
  issues.
- In WebKit-based browsers, the scrollbar received custom styling making it
  appear to be outside of the sidebar.
- The main content is no longer limited to 702px width, but now uses all
  available space.
- Changed the background of the code blocks to a very similar, but neutral
  color and made inline blocks the same color.
- Made inline code blocks inside italic sections not italic.
- Simplified styling of api_stability classes by introducing a common class
  name for the stability levels.
- Fixed various issues related to the green hover background on links.
- Fixed code box overflow outside the main content area.
- Various minor tweaks to paddings and margins.
- Cleaned up numbers in the stylesheet, removing unnecessary units, decimals
  and empty selectors.

PR-URL: nodejs#5198
Reviewed-By: James M Snell <jasnell@gmail.com>
MylesBorins pushed a commit that referenced this pull request Mar 2, 2016
- Made scrolling of the sidebar not affect the main page by using a combination
  of overflow:hidden and overflow:scroll.
- Changed the scrollbar of the sidebar to be visible again for accessibilty
  reasons and removed the indication gradient because it was causing too much
  issues.
- In WebKit-based browsers, the scrollbar received custom styling making it
  appear to be outside of the sidebar.
- The main content is no longer limited to 702px width, but now uses all
  available space.
- Changed the background of the code blocks to a very similar, but neutral
  color and made inline blocks the same color.
- Made inline code blocks inside italic sections not italic.
- Simplified styling of api_stability classes by introducing a common class
  name for the stability levels.
- Fixed various issues related to the green hover background on links.
- Fixed code box overflow outside the main content area.
- Various minor tweaks to paddings and margins.
- Cleaned up numbers in the stylesheet, removing unnecessary units, decimals
  and empty selectors.

PR-URL: #5198
Reviewed-By: James M Snell <jasnell@gmail.com>
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.

4 participants