lukechilds
/
node
mirror of https://github.com/lukechilds/node.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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>
v9.x-staging
silverwind 7 years ago
parent
92146e00fd
commit
6d9654b13d
No known key found for this signature in database GPG Key ID: 2E62B41C93869443
2 changed files with 85 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 214
      doc/api_assets/style.css
  2. 1
      doc/template.html

214
doc/api_assets/style.css
View File

@ -1,51 +1,42 @@
/*--------------------- Layout and Typography ----------------------------*/ /*--------------------- Layout and Typography ----------------------------*/
html { html {
font-size: 1rem;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-variant-ligatures: none; -webkit-font-variant-ligatures: none;
font-variant-ligatures: none; font-variant-ligatures: none;
} }
* {
box-sizing: border-box;
}
body { body {
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
font-size: 62.5%;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #333; color: #333;
background: #fff; background: #fff;
} }
h1, h2, h3, h4 { h1 { font-size: 2.5rem }
margin: .8em 0 .5em; h2 { font-size: 2rem }
line-height: 1.2; h3 { font-size: 1.75rem }
} h4 { font-size: 1.5rem }
h5 { font-size: 1.25rem }
h5, h6 { h6 { font-size: 1rem }
margin: 1em 0 .8em;
line-height: 1.2;
}
h1 { h1, h2, h3, h4, h5, h6 {
margin-top: 0; margin: 1.5rem 0 1rem;
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 { pre, tt, code, .pre, span.type, a.type {
font-family: Monaco, Consolas, "Lucida Console", monospace; font-family: Monaco, Consolas, "Lucida Console", monospace;
font-size: .9em;
} }
#content { #content {
font-size: 1.8em;
position: relative; position: relative;
} }
@ -53,8 +44,7 @@ a, a:link, a:active {
color: #43853d; color: #43853d;
text-decoration: none; text-decoration: none;
border-radius: 2px; border-radius: 2px;
padding: .1em .2em; padding: 1px 3px;
margin: -.1em;
} }
a:hover, a:focus { a:hover, a:focus {
@ -80,23 +70,24 @@ em code {
} }
#gtoc { #gtoc {
font-size: .8em; margin-top: .5rem;
margin-bottom: 1em; margin-bottom: 1rem;
} }
#gtoc ul { #gtoc ul {
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
line-height: 1.5rem;
} }
#gtoc li { #gtoc > ul > li {
display: inline; display: inline;
border-right: 1px #000 solid; border-right: 1px #000 solid;
margin-right: 0.4em; margin-right: 0.4rem;
padding-right: 0.4em; padding-right: 0.4rem;
} }
#gtoc li:last-child { #gtoc > ul > li:last-child {
border-right: none; border-right: none;
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
@ -106,23 +97,29 @@ li.version-picker {
position: relative; position: relative;
} }
li.version-picker:hover > a {
border-radius: 2px 2px 0 0;
}
li.version-picker:hover > ol { li.version-picker:hover > ol {
display: block; display: block;
z-index: 1;
} }
li.version-picker a span { li.version-picker a span {
font-size: .7em; font-size: .7rem;
} }
ol.version-picker { ol.version-picker {
background: #fff; background: #fff;
border: 1px #43853d solid; border: 1px #43853d solid;
border-radius: 2px; border-radius: 0 0 2px 2px;
display: none; display: none;
list-style: none; list-style: none;
position: absolute; position: absolute;
right: -2px; right: 0;
width: 101%; top: 1.25rem;
width: 100%;
} }
#gtoc ol.version-picker li { #gtoc ol.version-picker li {
@ -135,13 +132,8 @@ ol.version-picker li a {
border-radius: 0; border-radius: 0;
display: block; display: block;
margin: 0; margin: 0;
padding: .1em; padding: .1rem;
padding-left: 1em; padding-left: 1rem;
}
ol.version-picker li:first-child a {
border-top-right-radius: 1px;
border-top-left-radius: 1px;
} }
ol.version-picker li:last-child a { ol.version-picker li:last-child a {
@ -150,16 +142,16 @@ ol.version-picker li:last-child a {
} }
.line { .line {
width: calc(100% - 1em); width: calc(100% - 1rem);
display: block; display: block;
padding-bottom: 1px; padding-bottom: 1px;
} }
.api_stability { .api_stability {
color: white !important; 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; font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
padding: 1em; padding: 1rem;
line-height: 1.5; line-height: 1.5;
} }
@ -196,12 +188,12 @@ ol.version-picker li:last-child a {
} }
.api_metadata { .api_metadata {
font-size: .75em; font-size: .85rem;
margin-bottom: 1em; margin-bottom: 1rem;
} }
.api_metadata span { .api_metadata span {
margin-right: 1em; margin-right: 1rem;
} }
.api_metadata span:last-child { .api_metadata span:last-child {
@ -217,20 +209,18 @@ abbr {
} }
p { p {
position: relative;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
margin: 0 0 1.125em 0; margin: 0 0 1.125rem 0;
line-height: 1.5em;
} }
#apicontent > *:last-child { #apicontent > *:last-child {
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 2em; padding-bottom: 2rem;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
margin: 0 0 1.5em 0; margin: 0 0 1.5rem 0;
} }
th, td { th, td {
@ -242,7 +232,7 @@ th {
} }
ol, ul, dl { ol, ul, dl {
margin: 0 0 .6em 0; margin: 0 0 .6rem 0;
padding: 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 { ul, ol {
margin-left: 2em; margin-left: 2rem;
} }
dl dt { dl dt {
position: relative; position: relative;
margin: 1.5em 0 0; margin: 1.5rem 0 0;
} }
dl dd { dl dd {
position: relative; position: relative;
margin: 0 1em 0; margin: 0 1rem 0;
} }
dd + dt.pre { dd + dt.pre {
margin-top: 1.6em; margin-top: 1.6rem;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -274,28 +264,22 @@ h1, h2, h3, h4, h5, h6 {
position: relative; position: relative;
} }
header h1 {
font-size: 2em;
line-height: 2em;
margin: 0;
}
#apicontent { #apicontent {
padding-top: 1em; padding-top: 1rem;
} }
#apicontent .line { #apicontent .line {
width: calc(50% - 1em); width: calc(50% - 1rem);
margin: 1em 1em .95em; margin: 1rem 1rem .95rem;
background-color: #ccc; background-color: #ccc;
} }
h2 + h2 { h2 + h2 {
margin: 0 0 .5em; margin: 0 0 .5rem;
} }
h3 + h3 { h3 + h3 {
margin: 0 0 .5em; margin: 0 0 .5rem;
} }
h2, h3, h4, h5 { 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 { h1 span a, h2 span a, h3 span a, h4 span a {
font-size: .8em;
color: #000; color: #000;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
pre, tt, code { pre, tt, code {
line-height: 1.5em; line-height: 1.5rem;
margin: 0; padding: 0; margin: 0; padding: 0;
} }
.pre { .pre {
line-height: 1.5em; line-height: 1.5rem;
font-size: 1.2em;
} }
pre { pre {
padding: 1em; padding: 1rem;
vertical-align: top; vertical-align: top;
background: #f2f2f2; background: #f2f2f2;
margin: 1em; margin: 1rem;
overflow-x: auto; overflow-x: auto;
} }
pre > code { pre > code {
font-size: .8em;
padding: 0; padding: 0;
} }
pre + h3 { pre + h3 {
margin-top: 2.225em; margin-top: 2.225rem;
} }
code.pre { code.pre {
@ -353,13 +334,12 @@ code.pre {
} }
#intro { #intro {
margin-top: 1.25em; margin-top: 1.25rem;
margin-left: 1em; margin-left: 1rem;
} }
#intro a { #intro a {
color: #ddd; color: #ddd;
font-size: 1.25em;
font-weight: bold; font-weight: bold;
} }
@ -367,22 +347,13 @@ hr {
background: none; background: none;
border: medium none; border: medium none;
border-bottom: 1px solid #7a7a7a; border-bottom: 1px solid #7a7a7a;
margin: 0 0 1em 0; margin: 0 0 1rem 0;
} }
#toc h2 { #toc h2 {
margin-top: 0; margin-top: 0;
font-size: 1em;
line-height: 0; line-height: 0;
margin: 1.5em 0; margin: 1.5rem 0;
}
#toc ul {
font-size: .8125em;
}
#toc ul ul {
font-size: 1em;
} }
#toc ul a { #toc ul a {
@ -390,12 +361,12 @@ hr {
} }
#toc ul li { #toc ul li {
margin-bottom: .666em; margin-bottom: .666rem;
list-style: square outside; list-style: square outside;
} }
#toc li > ul { #toc li > ul {
margin-top: .666em; margin-top: .666rem;
} }
#toc .stability_0::after { #toc .stability_0::after {
@ -405,16 +376,13 @@ hr {
#toc .stability_0::after { #toc .stability_0::after {
content: "deprecated"; content: "deprecated";
font-size: .8em; margin-left: .25rem;
position: relative; padding: 1px 3px;
top: -.18em;
left: .5em;
padding: 0 .3em .2em;
border-radius: 3px; border-radius: 3px;
} }
#apicontent li { #apicontent li {
margin-bottom: .5em; margin-bottom: .5rem;
} }
#apicontent li:last-child { #apicontent li:last-child {
@ -422,16 +390,14 @@ hr {
} }
tt, code { tt, code {
font-size: .9em;
color: #040404; color: #040404;
background-color: #f2f2f2; background-color: #f2f2f2;
border-radius: 2px; border-radius: 2px;
padding: .1em .3em; padding: 1px 3px;
} }
.api_stability code { .api_stability code {
background: rgba(0, 0, 0, .1); background: rgba(0, 0, 0, .1);
padding: .1em .3em;
} }
a code { a code {
@ -441,14 +407,13 @@ a code {
} }
.type { .type {
font-size: .9em; line-height: 1.5rem;
line-height: 1.5em;
} }
#column1.interior { #column1.interior {
margin-left: 234px; margin-left: 234px;
padding: 0 2em; padding: 0 2rem;
-webkit-padding-start: 1.5em; -webkit-padding-start: 1.5rem;
} }
#column2.interior { #column2.interior {
@ -464,31 +429,31 @@ a code {
#column2 ul { #column2 ul {
list-style: none; list-style: none;
margin: .9em 0 .5em; margin: .9rem 0 .5rem;
background: #333; background: #333;
} }
#column2 > :first-child { #column2 > :first-child {
margin: 1.25em 1em; margin: 1.25rem;
font-size: 1.5rem;
} }
#column2 > ul:nth-child(2) { #column2 > ul:nth-child(2) {
margin: 1.25em 0 .5em; margin: 1.25rem 0 .5rem;
} }
#column2 > ul:last-child { #column2 > ul:last-child {
margin: .9em 0 1.25em; margin: .9rem 0 1.25rem;
} }
#column2 ul li { #column2 ul li {
padding-left: 1.4em; padding-left: 1.25rem;
margin-bottom: .5em; margin-bottom: .5rem;
padding-bottom: .5em; padding-bottom: .5rem;
font-size: .8em;
} }
#column2 .line { #column2 .line {
margin: 0 .5em; margin: 0 .5rem;
background-color: #707070; background-color: #707070;
} }
@ -516,7 +481,6 @@ a code {
} }
span > .mark, span > .mark:visited { span > .mark, span > .mark:visited {
font-size: 1em;
color: #707070; color: #707070;
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -529,7 +493,7 @@ span > .mark:hover, span > .mark:focus, span > .mark:active {
} }
th, td { th, td {
padding: .75em 1em .75em 1em; padding: .75rem 1rem .75rem 1rem;
vertical-align: top; vertical-align: top;
} }
@ -554,13 +518,12 @@ th > *:last-child, td > *:last-child {
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
#content { #content {
font-size: 1.6em;
overflow: visible; overflow: visible;
} }
#column1.interior { #column1.interior {
margin-left: 0; margin-left: 0;
padding-left: .5em; padding-left: .5rem;
padding-right: .5em; padding-right: .5rem;
width: auto; width: auto;
overflow-y: visible; 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 { @media print {
html { html {
height: auto; height: auto;

1
doc/template.html
View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>__SECTION__ | Node.js __VERSION__ Documentation</title> <title>__SECTION__ | Node.js __VERSION__ Documentation</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic">
<link rel="stylesheet" href="assets/style.css"> <link rel="stylesheet" href="assets/style.css">

Write Preview
Loading…
Cancel
Save