commit b60f2d0c9fa1d31c817ed39f87cf7619ff742dd3 (tree)
parent 692086f898522ecde96742391140bca1212bf4fe
Author: Andrew Kelley <andrew@ziglang.org>
Date: Wed, 3 Apr 2019 17:39:07 -0400
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.
Diffstat:
2 files changed, 97 insertions(+), 56 deletions(-)
diff --git 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
@@ -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#}
