Improve mobile behavior of HTML site

marijnh · marijnh · commit 6f574aa558ab · 2016-10-31T10:11:09.000+01:00
diff --git a/asciidoc_html.conf b/asciidoc_html.conf
@@ -70,6 +70,7 @@ template::[source-filter-style]
 <!doctype html>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{doctitle} :: Eloquent JavaScript</title>
   <link rel=stylesheet href="js/node_modules/codemirror/lib/codemirror.css">
   <script src="js/acorn_codemirror.js"></script>
diff --git a/code/index.html b/code/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
   <base href="..">
   <title>Eloquent JavaScript :: Code Sandbox</title>
 
diff --git a/html/backers.html b/html/backers.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
   <title>Eloquent JavaScript :: Backers</title>
   <link rel=stylesheet href="css/ejs.css">
 
diff --git a/html/errata.html b/html/errata.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
   <title>Eloquent JavaScript :: Errata</title>
   <link rel=stylesheet href="css/ejs.css">
 
diff --git a/html/index.html b/html/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Eloquent JavaScript</title>
   <link rel=stylesheet href="css/ejs.css">
 </head>
@@ -47,6 +48,7 @@ <h2>Contents</h2>
   <style>
     li.contents-intro:before { display: none; }
     .toc h3 { position: absolute; margin: 0; top: -2px; right: 0; font-family: inherit; font-weight: normal; font-size: 90%; }
+    @media screen and (max-width: 500px) { .toc h3 { display: none } }
     ul.links { list-style-type: circle; }
     img.logo { vertical-align: text-top; padding: 0px 4px; border: 0; }
   </style>
