From b60f2d0c9fa1d31c817ed39f87cf7619ff742dd3 Mon Sep 17 00:00:00 2001
From: Andrew Kelley <andrew@ziglang.org>
Date: Wed, 3 Apr 2019 17:39:07 -0400
Subject: [PATCH] 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.
---
 doc/docgen.zig      |  20 +++++--
 doc/langref.html.in | 133 +++++++++++++++++++++++++++-----------------
 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#}