From 6d9654b13de9f4f36317d4e3dd4096733712fc65 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 28 Sep 2017 22:27:29 +0200
Subject: [PATCH] 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>
---
 doc/api_assets/style.css | 214 +++++++++++++++------------------------
 doc/template.html        |   1 +
 2 files changed, 85 insertions(+), 130 deletions(-)

diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index bb2e0290aa8fbd..7f15eb1bdd98cb 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;
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 @@
 <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">