diff options
author | silverwind <me@silverwind.io> | 2017-09-28 23:27:29 +0300 |
---|---|---|
committer | silverwind <me@silverwind.io> | 2017-10-10 22:28:15 +0300 |
commit | 6d9654b13de9f4f36317d4e3dd4096733712fc65 (patch) | |
tree | 0887fb35bb1c080d23d5afa2600c9eb72e2ee9d9 /doc/api_assets | |
parent | 92146e00fd74890ec0e977c8f9592ddaae0314d4 (diff) |
doc: responsive docs, rewrite font sizes
This makes the docs much more mobile-friendly by adding a viewport meta
tag which makes mobile browers properly scale fonts. Additionally the
font sizes have been cleaned up to use `rem` units where possible. Also
included are some fixes for the version dropdown.
PR-URL: https://github.com/nodejs/node/pull/15660
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Diffstat (limited to 'doc/api_assets')
-rw-r--r-- | doc/api_assets/style.css | 214 |
1 files changed, 84 insertions, 130 deletions
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index bb2e0290aa8..7f15eb1bdd9 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -1,51 +1,42 @@ /*--------------------- Layout and Typography ----------------------------*/ html { + font-size: 1rem; + overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; } +* { + box-sizing: border-box; +} + body { font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; - font-size: 62.5%; margin: 0; padding: 0; color: #333; background: #fff; } -h1, h2, h3, h4 { - margin: .8em 0 .5em; - line-height: 1.2; -} - -h5, h6 { - margin: 1em 0 .8em; - line-height: 1.2; -} +h1 { font-size: 2.5rem } +h2 { font-size: 2rem } +h3 { font-size: 1.75rem } +h4 { font-size: 1.5rem } +h5 { font-size: 1.25rem } +h6 { font-size: 1rem } -h1 { - margin-top: 0; - font-size: 2.441em; +h1, h2, h3, h4, h5, h6 { + margin: 1.5rem 0 1rem; } -h2 {font-size: 1.953em;} - -h3 {font-size: 1.563em;} - -h4 {font-size: 1.25em;} - -h5 {font-size: 1em;} - -h6 {font-size: .8em;} - pre, tt, code, .pre, span.type, a.type { font-family: Monaco, Consolas, "Lucida Console", monospace; + font-size: .9em; } #content { - font-size: 1.8em; position: relative; } @@ -53,8 +44,7 @@ a, a:link, a:active { color: #43853d; text-decoration: none; border-radius: 2px; - padding: .1em .2em; - margin: -.1em; + padding: 1px 3px; } a:hover, a:focus { @@ -80,23 +70,24 @@ em code { } #gtoc { - font-size: .8em; - margin-bottom: 1em; + margin-top: .5rem; + margin-bottom: 1rem; } #gtoc ul { list-style: none; margin-left: 0; + line-height: 1.5rem; } -#gtoc li { +#gtoc > ul > li { display: inline; border-right: 1px #000 solid; - margin-right: 0.4em; - padding-right: 0.4em; + margin-right: 0.4rem; + padding-right: 0.4rem; } -#gtoc li:last-child { +#gtoc > ul > li:last-child { border-right: none; margin-right: 0; padding-right: 0; @@ -106,23 +97,29 @@ li.version-picker { position: relative; } +li.version-picker:hover > a { + border-radius: 2px 2px 0 0; +} + li.version-picker:hover > ol { display: block; + z-index: 1; } li.version-picker a span { - font-size: .7em; + font-size: .7rem; } ol.version-picker { background: #fff; border: 1px #43853d solid; - border-radius: 2px; + border-radius: 0 0 2px 2px; display: none; list-style: none; position: absolute; - right: -2px; - width: 101%; + right: 0; + top: 1.25rem; + width: 100%; } #gtoc ol.version-picker li { @@ -135,13 +132,8 @@ ol.version-picker li a { border-radius: 0; display: block; margin: 0; - padding: .1em; - padding-left: 1em; -} - -ol.version-picker li:first-child a { - border-top-right-radius: 1px; - border-top-left-radius: 1px; + padding: .1rem; + padding-left: 1rem; } ol.version-picker li:last-child a { @@ -150,16 +142,16 @@ ol.version-picker li:last-child a { } .line { - width: calc(100% - 1em); + width: calc(100% - 1rem); display: block; padding-bottom: 1px; } .api_stability { color: white !important; - margin: 0 0 1em 0; + margin: 0 0 1rem 0; font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; - padding: 1em; + padding: 1rem; line-height: 1.5; } @@ -196,12 +188,12 @@ ol.version-picker li:last-child a { } .api_metadata { - font-size: .75em; - margin-bottom: 1em; + font-size: .85rem; + margin-bottom: 1rem; } .api_metadata span { - margin-right: 1em; + margin-right: 1rem; } .api_metadata span:last-child { @@ -217,20 +209,18 @@ abbr { } p { - position: relative; text-rendering: optimizeLegibility; - margin: 0 0 1.125em 0; - line-height: 1.5em; + margin: 0 0 1.125rem 0; } #apicontent > *:last-child { margin-bottom: 0; - padding-bottom: 2em; + padding-bottom: 2rem; } table { border-collapse: collapse; - margin: 0 0 1.5em 0; + margin: 0 0 1.5rem 0; } th, td { @@ -242,7 +232,7 @@ th { } ol, ul, dl { - margin: 0 0 .6em 0; + margin: 0 0 .6rem 0; padding: 0; } @@ -251,21 +241,21 @@ ol ul, ol ol, ol dl, ul ul, ul ol, ul dl, dl ul, dl ol, dl dl { } ul, ol { - margin-left: 2em; + margin-left: 2rem; } dl dt { position: relative; - margin: 1.5em 0 0; + margin: 1.5rem 0 0; } dl dd { position: relative; - margin: 0 1em 0; + margin: 0 1rem 0; } dd + dt.pre { - margin-top: 1.6em; + margin-top: 1.6rem; } h1, h2, h3, h4, h5, h6 { @@ -274,28 +264,22 @@ h1, h2, h3, h4, h5, h6 { position: relative; } -header h1 { - font-size: 2em; - line-height: 2em; - margin: 0; -} - #apicontent { - padding-top: 1em; + padding-top: 1rem; } #apicontent .line { - width: calc(50% - 1em); - margin: 1em 1em .95em; + width: calc(50% - 1rem); + margin: 1rem 1rem .95rem; background-color: #ccc; } h2 + h2 { - margin: 0 0 .5em; + margin: 0 0 .5rem; } h3 + h3 { - margin: 0 0 .5em; + margin: 0 0 .5rem; } h2, h3, h4, h5 { @@ -315,37 +299,34 @@ h1 span:hover, h2 span:hover, h3 span:hover, h4 span:hover { } h1 span a, h2 span a, h3 span a, h4 span a { - font-size: .8em; color: #000; text-decoration: none; font-weight: bold; } pre, tt, code { - line-height: 1.5em; + line-height: 1.5rem; margin: 0; padding: 0; } .pre { - line-height: 1.5em; - font-size: 1.2em; + line-height: 1.5rem; } pre { - padding: 1em; + padding: 1rem; vertical-align: top; background: #f2f2f2; - margin: 1em; + margin: 1rem; overflow-x: auto; } pre > code { - font-size: .8em; padding: 0; } pre + h3 { - margin-top: 2.225em; + margin-top: 2.225rem; } code.pre { @@ -353,13 +334,12 @@ code.pre { } #intro { - margin-top: 1.25em; - margin-left: 1em; + margin-top: 1.25rem; + margin-left: 1rem; } #intro a { color: #ddd; - font-size: 1.25em; font-weight: bold; } @@ -367,22 +347,13 @@ hr { background: none; border: medium none; border-bottom: 1px solid #7a7a7a; - margin: 0 0 1em 0; + margin: 0 0 1rem 0; } #toc h2 { margin-top: 0; - font-size: 1em; line-height: 0; - margin: 1.5em 0; -} - -#toc ul { - font-size: .8125em; -} - -#toc ul ul { - font-size: 1em; + margin: 1.5rem 0; } #toc ul a { @@ -390,12 +361,12 @@ hr { } #toc ul li { - margin-bottom: .666em; + margin-bottom: .666rem; list-style: square outside; } #toc li > ul { - margin-top: .666em; + margin-top: .666rem; } #toc .stability_0::after { @@ -405,16 +376,13 @@ hr { #toc .stability_0::after { content: "deprecated"; - font-size: .8em; - position: relative; - top: -.18em; - left: .5em; - padding: 0 .3em .2em; + margin-left: .25rem; + padding: 1px 3px; border-radius: 3px; } #apicontent li { - margin-bottom: .5em; + margin-bottom: .5rem; } #apicontent li:last-child { @@ -422,16 +390,14 @@ hr { } tt, code { - font-size: .9em; color: #040404; background-color: #f2f2f2; border-radius: 2px; - padding: .1em .3em; + padding: 1px 3px; } .api_stability code { background: rgba(0, 0, 0, .1); - padding: .1em .3em; } a code { @@ -441,14 +407,13 @@ a code { } .type { - font-size: .9em; - line-height: 1.5em; + line-height: 1.5rem; } #column1.interior { margin-left: 234px; - padding: 0 2em; - -webkit-padding-start: 1.5em; + padding: 0 2rem; + -webkit-padding-start: 1.5rem; } #column2.interior { @@ -464,31 +429,31 @@ a code { #column2 ul { list-style: none; - margin: .9em 0 .5em; + margin: .9rem 0 .5rem; background: #333; } #column2 > :first-child { - margin: 1.25em 1em; + margin: 1.25rem; + font-size: 1.5rem; } #column2 > ul:nth-child(2) { - margin: 1.25em 0 .5em; + margin: 1.25rem 0 .5rem; } #column2 > ul:last-child { - margin: .9em 0 1.25em; + margin: .9rem 0 1.25rem; } #column2 ul li { - padding-left: 1.4em; - margin-bottom: .5em; - padding-bottom: .5em; - font-size: .8em; + padding-left: 1.25rem; + margin-bottom: .5rem; + padding-bottom: .5rem; } #column2 .line { - margin: 0 .5em; + margin: 0 .5rem; background-color: #707070; } @@ -516,7 +481,6 @@ a code { } span > .mark, span > .mark:visited { - font-size: 1em; color: #707070; position: absolute; top: 0px; @@ -529,7 +493,7 @@ span > .mark:hover, span > .mark:focus, span > .mark:active { } th, td { - padding: .75em 1em .75em 1em; + padding: .75rem 1rem .75rem 1rem; vertical-align: top; } @@ -554,13 +518,12 @@ th > *:last-child, td > *:last-child { @media only screen and (max-width: 1024px) { #content { - font-size: 1.6em; overflow: visible; } #column1.interior { margin-left: 0; - padding-left: .5em; - padding-right: .5em; + padding-left: .5rem; + padding-right: .5rem; width: auto; overflow-y: visible; } @@ -569,15 +532,6 @@ th > *:last-child, td > *:last-child { } } -@media only screen and (max-width: 1024px) and (orientation: portrait) { - #content { - font-size: 3.5em; - } - #gtoc { - font-size: 0.6em; - } -} - @media print { html { height: auto; |