langref: rework the theming and layout

 * Instead of the only color scheme being dark, the language reference
   now has a light theme by default, and respects the user's light/dark
   preference via prefers-color-scheme media query. Most browsers don't
   support this yet, so we just have to wait patiently for the future to
   arrive. closes #2172.

 * Instead of a side bar index, the index is inline with the rest of the
   content. This is simpler and more friendly to all user agents, and means
   we don't need the media query for mobile devices. It also makes
   back-references work, so now headers link to the table of contents
   and the table of contents links to headers.

2 files changed, 97 insertions, 56 deletions

diff --git a/doc/docgen.zig b/doc/docgen.zig
index 63f46ccb6d..02a1458dc1 100644
--- a/doc/docgen.zig
+++ b/doc/docgen.zig
@@ -385,7 +385,7 @@ fn genToc(allocator: *mem.Allocator, tokenizer: *Tokenizer) !Toc {
                         last_action = Action.Open;
                     }
                     try toc.writeByteNTimes(' ', 4 + header_stack_size * 4);
-                    try toc.print("<li><a href=\"#{}\">{}</a>", urlized, content);
+                    try toc.print("<li><a id=\"toc-{}\" href=\"#{}\">{}</a>", urlized, urlized, content);
                 } else if (mem.eql(u8, tag_name, "header_close")) {
                     if (header_stack_size == 0) {
                         return parseError(tokenizer, tag_token, "unbalanced close header");
@@ -706,10 +706,10 @@ fn termColor(allocator: *mem.Allocator, input: []const u8) ![]u8 {
 }
 
 const builtin_types = [][]const u8{
-    "f16", "f32", "f64", "f128", "c_longdouble", "c_short",
-    "c_ushort", "c_int", "c_uint", "c_long", "c_ulong", "c_longlong",
-    "c_ulonglong", "c_char", "c_void", "void", "bool", "isize",
-    "usize", "noreturn", "type", "anyerror", "comptime_int", "comptime_float",
+    "f16",         "f32",      "f64",    "f128",     "c_longdouble", "c_short",
+    "c_ushort",    "c_int",    "c_uint", "c_long",   "c_ulong",      "c_longlong",
+    "c_ulonglong", "c_char",   "c_void", "void",     "bool",         "isize",
+    "usize",       "noreturn", "type",   "anyerror", "comptime_int", "comptime_float",
 };
 
 fn isType(name: []const u8) bool {
@@ -965,7 +965,15 @@ fn genHtml(allocator: *mem.Allocator, tokenizer: *Tokenizer, toc: *Toc, out: var
                 try out.write("</pre>");
             },
             Node.HeaderOpen => |info| {
-                try out.print("<h{} id=\"{}\"><a href=\"#{}\">{}</a></h{}>\n", info.n, info.url, info.url, info.name, info.n);
+                try out.print(
+                    "<h{} id=\"{}\"><a href=\"#toc-{}\">{}</a><a class=\"hdr\" href=\"#{}\">¶</a></h{}>\n",
+                    info.n,
+                    info.url,
+                    info.url,
+                    info.name,
+                    info.url,
+                    info.n,
+                );
             },
             Node.SeeAlso => |items| {
                 try out.write("<p>See also:</p><ul>\n");
diff --git a/doc/langref.html.in b/doc/langref.html.in
index 23d63f2db2..4dd058c37c 100644
--- a/doc/langref.html.in
+++ b/doc/langref.html.in
@@ -6,12 +6,9 @@
     <title>Documentation - The Zig Programming Language</title>
     <style type="text/css">
       body{
-        background-color:#111;
-        color: #bbb;
         font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
       }
       a {
-        color: #88f;
         text-decoration: none;
       }
       table, th, td {
@@ -39,17 +36,15 @@
       .file {
         text-decoration: underline;
       }
-      code {
+      pre,code {
         font-size: 12pt;
       }
       pre > code {
         display: block;
         overflow: auto;
-
-        overflow-x: auto;
         padding: 0.5em;
-        color: #ccc;
-        background: #222;
+        color: #333;
+        background: #f8f8f8;
       }
       .table-wrapper {
         width: 100%;
@@ -57,76 +52,109 @@
       }
 
       .tok-kw {
-          color: #eee;
+          color: #333;
           font-weight: bold;
       }
       .tok-str {
-          color: #2e5;
+          color: #d14;
       }
       .tok-builtin {
-          color: #ff894c;
+          color: #0086b3;
       }
       .tok-comment {
-          color: #aa7;
+          color: #777;
           font-style: italic;
       }
       .tok-fn {
-          color: #e33;
+          color: #900;
           font-weight: bold;
       }
       .tok-null {
-          color: #ff8080;
+          color: #008080;
       }
       .tok-number {
-          color: #ff8080;
+          color: #008080;
       }
       .tok-type {
-          color: #68f;
+          color: #458;
           font-weight: bold;
       }
 
-      /* Desktop */
-      @media screen and (min-width: 56.25em) {
-        #nav {
-          width: 20em;
-          height: 100%;
-          position: fixed;
-          overflow-y: scroll;
-          left: 0;
-          top: 0;
-          padding-left: 1em;
-        }
-        #contents {
-          max-width: 60em;
-          padding-left: 22em;
-          padding: 1em;
-          padding-left: 24em;
-        }
-      }
-      /* Mobile */
-      @media screen and (max-width: 56.25em) {
-        body, code {
-          font-size: small;
-        }
-        #nav {
-          border-bottom: 1px solid grey;
-        }
+      #contents {
+        max-width: 60em;
+        margin: auto;
       }
+
       h1 a, h2 a, h3 a, h4 a, h5 a {
         text-decoration: none;
-        color: #aaa;
+        color: #333;
       }
-      #nav a {
-        color: #aaa;
-        text-decoration: none;
+
+      a.hdr {
+        visibility: hidden;
+      }
+      h1:hover > a.hdr, h2:hover > a.hdr, h3:hover > a.hdr, h4:hover > a.hdr, h5:hover > a.hdr {
+        visibility: visible;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        body{
+            background-color:#111;
+            color: #bbb;
+        }
+        a {
+            color: #88f;
+        }
+        table, th, td {
+            border-color: grey;
+        }
+        .t2_0 {
+            color: grey;
+        }
+        .t31_1 {
+            color: red;
+        }
+        .t32_1 {
+            color: green;
+        }
+        .t36_1 {
+            color: #0086b3;
+        }
+        pre > code {
+            color: #ccc;
+            background: #222;
+        }
+        .tok-kw {
+            color: #eee;
+        }
+        .tok-str {
+            color: #2e5;
+        }
+        .tok-builtin {
+            color: #ff894c;
+        }
+        .tok-comment {
+            color: #aa7;
+        }
+        .tok-fn {
+            color: #e33;
+        }
+        .tok-null {
+            color: #ff8080;
+        }
+        .tok-number {
+            color: #ff8080;
+        }
+        .tok-type {
+            color: #68f;
+        }
+        h1 a, h2 a, h3 a, h4 a, h5 a {
+            color: #aaa;
+        }
       }
     </style>
   </head>
   <body>
-    <div id="nav">
-      <h3>Index</h3>
-      {#nav#}
-    </div>
     <div id="contents">
       {#header_open|Introduction#}
       <p>
@@ -152,6 +180,11 @@
       This HTML document depends on no external files, so you can use it offline.
       </p>
       {#header_close#}
+
+      {#header_open|Index#}
+      {#nav#}
+      {#header_close#}
+
       {#header_open|Hello World#}
 
       {#code_begin|exe|hello#}