-
Notifications
You must be signed in to change notification settings - Fork 29.6k
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 header styling for API docs #8811
Conversation
I actually prefer the old version, but I'm fine with this as well. |
Note: currently some of the header sizes are smaller than the surrounding text. I could reduce the scaling if necessary but I'm not sure how this could possibly be a step backwards. |
h3 headers are of the same size of the paragraphs which I agree is bad but everything looks so HUGE on the screenshots especially on mobile. Maybe the screenshots are misleading or is just me, don't worry. |
The mobile screenshots scale up because of how GitHub displays them. My phone is an iPhone 6s with a screen size of something like 4.5 inches. Your best bet would be to try it locally. |
(Actually, currently |
Tested on iPhone 5, looks good. |
maybe @nodejs/website would prefer to review? |
tested on oneplus 3 and mbp retina 2014, looks good |
@nodejs/collaborators anyone with some CSS knowledge, could you please review? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Few CSS comments, didn't test the changes yet.
@@ -15,6 +15,31 @@ body { | |||
background: #fff; | |||
} | |||
|
|||
h1, h2, h3, h4, h5, h6 { | |||
margin: 0.8em 0 0.5em; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unnecessary leading zeroes. Can you fix them here and everywhere in this file?
|
||
h5, h6 { | ||
margin: 1em 0 0.8em; | ||
line-height: 1.2; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this rule seems superfluous (see rule above).
@@ -338,7 +338,7 @@ hr { | |||
margin-bottom: 0; | |||
} | |||
|
|||
p tt, p code, li code { | |||
p tt, p code, li code, h2 code, h3 code, h4 code, h5 code { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Care to investigate if we can reduce this selector to tt, code
? It's a bit hackish having to specify all the different ancestors.
9d98a62
to
9779210
Compare
Updated, ptal @silverwind The one ruleset is now for all |
ping again @silverwind |
LGTM, but one more suggestion: Can you increase the font size of the TOC by a notch? The difference between TOC entries and body/headings seems a bit too much. Or reduce the sizes of those slightly. Your call. |
@silverwind which TOC do you mean? The sidebar? The "index" page, or what comes at the top of every page? If you mean the one on every page, did you just mean the "table of Contents" Header, or the actual entries? |
I've put this up at https://fishrock123.github.io/api/ so others can view what it's like to scroll etc with it |
Now I can cruise through examples I like the increased font sizes and the clarity of the difference between header sizes makes a lot of difference too. lgtm @nodejs/website last chance to pop in and give an opinion here |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
LGTM |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
c133999
to
83c7a88
Compare
Sizes were mostly decided by using http://type-scale.com/ with the 1.250 "Major Third" scaling. PR-URL: nodejs#8811 Reviewed-By: Roman Reiss <[email protected]> Reviewed-By: Luigi Pinca <[email protected]> Reviewed-By: Prince John Wesley <[email protected]> Reviewed-By: Rod Vagg <[email protected]> Reviewed-By: Phillip Johnsen <[email protected]>
9779210
to
f1a3755
Compare
Thanks, landed in f1a3755 |
Sizes were mostly decided by using http://type-scale.com/ with the 1.250 "Major Third" scaling. PR-URL: #8811 Reviewed-By: Roman Reiss <[email protected]> Reviewed-By: Luigi Pinca <[email protected]> Reviewed-By: Prince John Wesley <[email protected]> Reviewed-By: Rod Vagg <[email protected]> Reviewed-By: Phillip Johnsen <[email protected]>
Sizes were mostly decided by using http://type-scale.com/ with the 1.250 "Major Third" scaling. PR-URL: #8811 Reviewed-By: Roman Reiss <[email protected]> Reviewed-By: Luigi Pinca <[email protected]> Reviewed-By: Prince John Wesley <[email protected]> Reviewed-By: Rod Vagg <[email protected]> Reviewed-By: Phillip Johnsen <[email protected]>
Sizes were mostly decided by using http://type-scale.com/ with the 1.250 "Major Third" scaling. PR-URL: #8811 Reviewed-By: Roman Reiss <[email protected]> Reviewed-By: Luigi Pinca <[email protected]> Reviewed-By: Prince John Wesley <[email protected]> Reviewed-By: Rod Vagg <[email protected]> Reviewed-By: Phillip Johnsen <[email protected]>
Checklist
Affected core subsystem(s)
doc
Description of change
Improved the header sizing.
Previously I found it consistently hard to find which API I was looking at.
Sizes were mostly decided by using http://type-scale.com/
with the 1.250 "Major Third" scaling.
Live preview at https://fishrock123.github.io/api/
Screenshots available at: https://gist.github.com/Fishrock123/e2a4676535abed7c8ecb72b1ae081f60