From 675777eb360a913224964897facf111258b07df7 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 28 Sep 2017 22:27:29 +0200 Subject: [PATCH 1/7] doc: rewrite font sizes, add viewport meta --- doc/api_assets/style.css | 204 ++++++++++++++++----------------------- doc/template.html | 1 + 2 files changed, 84 insertions(+), 121 deletions(-) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index bb2e0290aa8fbd..a0f56e2ebbeb94 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -1,14 +1,23 @@ /*--------------------- Layout and Typography ----------------------------*/ html { + font-size: 1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; } +* { + box-sizing: border-box; +} + +/* increase font size slightly on mobile */ +@media (max-width: 500px) { + html { font-size: 1.125rem } +} + 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; @@ -16,36 +25,21 @@ body { } h1, h2, h3, h4 { - margin: .8em 0 .5em; + margin: .8rem 0 .5rem; line-height: 1.2; } h5, h6 { - margin: 1em 0 .8em; + margin: 1rem 0 .8rem; line-height: 1.2; } -h1 { - margin-top: 0; - font-size: 2.441em; -} - -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 +47,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 +73,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 +100,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 +135,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 +145,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 +191,11 @@ ol.version-picker li:last-child a { } .api_metadata { - font-size: .75em; - margin-bottom: 1em; + margin-bottom: 1rem; } .api_metadata span { - margin-right: 1em; + margin-right: 1rem; } .api_metadata span:last-child { @@ -217,20 +211,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 +234,7 @@ th { } ol, ul, dl { - margin: 0 0 .6em 0; + margin: 0 0 .6rem 0; padding: 0; } @@ -251,51 +243,52 @@ 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 { text-rendering: optimizeLegibility; font-weight: 700; position: relative; + word-wrap: break-word; } header h1 { - font-size: 2em; - line-height: 2em; + font-size: 2rem; + line-height: 3rem; 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 +308,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 +343,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 +356,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 +370,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 +385,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 +399,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 +416,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 +438,30 @@ 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 1rem; } #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.4rem; + margin-bottom: .5rem; + padding-bottom: .5rem; } #column2 .line { - margin: 0 .5em; + margin: 0 .5rem; background-color: #707070; } @@ -516,7 +489,6 @@ a code { } span > .mark, span > .mark:visited { - font-size: 1em; color: #707070; position: absolute; top: 0px; @@ -529,7 +501,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 +526,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 +540,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; diff --git a/doc/template.html b/doc/template.html index 165e47022c8124..bb3e2bf8b4f2f0 100644 --- a/doc/template.html +++ b/doc/template.html @@ -2,6 +2,7 @@ + __SECTION__ | Node.js __VERSION__ Documentation From c78b5029e922b8333aac97a75b3cbbdaecbf708c Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 29 Sep 2017 23:45:57 +0200 Subject: [PATCH 2/7] add overflow-wrap to prevent layout issues on mobile --- doc/api_assets/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index a0f56e2ebbeb94..46a5f19ff0ac5b 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -1,6 +1,7 @@ /*--------------------- 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; @@ -264,7 +265,6 @@ h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; font-weight: 700; position: relative; - word-wrap: break-word; } header h1 { From f4a737a057e433512834b77b175a253227189c12 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 29 Sep 2017 23:47:30 +0200 Subject: [PATCH 3/7] don't increase mobile font size, 16 is actually fine --- doc/api_assets/style.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index 46a5f19ff0ac5b..286407f3cfd836 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -12,11 +12,6 @@ html { box-sizing: border-box; } -/* increase font size slightly on mobile */ -@media (max-width: 500px) { - html { font-size: 1.125rem } -} - body { font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; margin: 0; From 724f3455479cb14a5dcd2d802fb0d7ed437001bf Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2017 23:36:31 +0200 Subject: [PATCH 4/7] adjust heading sizes --- doc/api_assets/style.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index 286407f3cfd836..5d8961ea1b70f2 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -20,6 +20,13 @@ body { background: #fff; } +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, h2, h3, h4 { margin: .8rem 0 .5rem; line-height: 1.2; @@ -262,12 +269,6 @@ h1, h2, h3, h4, h5, h6 { position: relative; } -header h1 { - font-size: 2rem; - line-height: 3rem; - margin: 0; -} - #apicontent { padding-top: 1rem; } From 6a3c2165c65c095aa156a0eb95e9bd9def5b3b5c Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Oct 2017 19:02:19 +0200 Subject: [PATCH 5/7] fix font size and margin on title in sidebar --- doc/api_assets/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index 5d8961ea1b70f2..fe82a2d6b31880 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -439,7 +439,8 @@ a code { } #column2 > :first-child { - margin: 1.25rem 1rem; + margin: 1.25rem; + font-size: 1.5rem; } #column2 > ul:nth-child(2) { @@ -451,7 +452,7 @@ a code { } #column2 ul li { - padding-left: 1.4rem; + padding-left: 1.25rem; margin-bottom: .5rem; padding-bottom: .5rem; } From 64254ae9a656c8213bb7026f15f325445aa593e0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 6 Oct 2017 15:11:11 +0200 Subject: [PATCH 6/7] restore metadata font size --- doc/api_assets/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index fe82a2d6b31880..503fd445dcd80c 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -194,6 +194,7 @@ ol.version-picker li:last-child a { } .api_metadata { + font-size: .75rem; margin-bottom: 1rem; } From 23b55040c189a20a1a808aac57e66c618588b005 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 9 Oct 2017 20:40:00 +0200 Subject: [PATCH 7/7] increase heading margins, increase metadata font size --- doc/api_assets/style.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css index 503fd445dcd80c..7f15eb1bdd98cb 100644 --- a/doc/api_assets/style.css +++ b/doc/api_assets/style.css @@ -27,14 +27,8 @@ h4 { font-size: 1.5rem } h5 { font-size: 1.25rem } h6 { font-size: 1rem } -h1, h2, h3, h4 { - margin: .8rem 0 .5rem; - line-height: 1.2; -} - -h5, h6 { - margin: 1rem 0 .8rem; - line-height: 1.2; +h1, h2, h3, h4, h5, h6 { + margin: 1.5rem 0 1rem; } pre, tt, code, .pre, span.type, a.type { @@ -194,7 +188,7 @@ ol.version-picker li:last-child a { } .api_metadata { - font-size: .75rem; + font-size: .85rem; margin-bottom: 1rem; }