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
commit
6d9654b13d
No known key found for this signature in database GPG Key ID: 2E62B41C93869443
  1. 214
      doc/api_assets/style.css
  2. 1
      doc/template.html

214
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;

1
doc/template.html

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<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="assets/style.css">

Loading…
Cancel
Save