godoc: change link styles, add 'pop out' button
Remove underlines from all links, show underline on link hover.
Change all non-link headings to h4, a slight visual cue.
R=golang-dev, gri
CC=golang-dev
https://golang.org/cl/5783088
diff --git a/doc/docs.html b/doc/docs.html
index af30dac..7bdaef9 100644
--- a/doc/docs.html
+++ b/doc/docs.html
@@ -89,7 +89,7 @@
<p>The official blog of the Go project, featuring news and in-depth articles by
the Go team and guests.</p>
-<h3>Codewalks</h3>
+<h4>Codewalks</h4>
<p>
Guided tours of Go programs.
</p>
@@ -100,8 +100,7 @@
<li><a href="/doc/articles/wiki/">Writing Web Applications</a> - building a simple web application.</li>
</ul>
-<h3>Language</h3>
-
+<h4>Language</h4>
<ul>
<li><a href="http://blog.golang.org/2010/04/json-rpc-tale-of-interfaces.html">JSON-RPC: a tale of interfaces</a></li>
<li><a href="http://blog.golang.org/2010/07/gos-declaration-syntax.html">Go's Declaration Syntax</a></li>
@@ -112,8 +111,7 @@
<li><a href="/doc/articles/error_handling.html">Error Handling and Go</a></li>
</ul>
-<h3>Packages</h3>
-
+<h4>Packages</h4>
<ul>
<li><a href="http://blog.golang.org/2011/01/json-and-go.html">JSON and Go</a> - using the <a href="/pkg/encoding/json/">json</a> package.</li>
<li><a href="http://blog.golang.org/2011/03/gobs-of-data.html">Gobs of data</a> - the design and use of the <a href="/pkg/encoding/gob/">gob</a> package.</li>
@@ -122,8 +120,7 @@
<li><a href="http://blog.golang.org/2011/09/go-imagedraw-package.html">The Go image/draw package</a> - the fundamentals of the <a href="/pkg/image/draw/">image/draw</a> package.</li>
</ul>
-<h3>Tools</h3>
-
+<h4>Tools</h4>
<ul>
<li><a href="/doc/articles/go_command.html">About the Go command</a> - why we wrote it, what it is, what it's not, and how to use it.</li>
<li><a href="/doc/articles/c_go_cgo.html">C? Go? Cgo!</a> - linking against C code with <a href="/cmd/cgo/">cgo</a>.</li>
@@ -180,7 +177,7 @@
See the <a href="http://wh3rd.net/practical-go/">presentation slides</a>.
</p>
-<h3 id="talks_more">More</h3>
+<h4 id="talks_more">More</h4>
<p>
See the <a href="http://code.google.com/p/go-wiki/wiki/GoTalks">GoTalks
page</a> at the <a href="http://code.google.com/p/go-wiki/wiki">Go Wiki</a> for
diff --git a/doc/reference.html b/doc/reference.html
index 6a8f9db..37c3418 100644
--- a/doc/reference.html
+++ b/doc/reference.html
@@ -58,7 +58,7 @@
Using GDB to debug Go programs.
</p>
-<h3 id="articles">Articles</h2>
+<h4 id="articles">Articles</h4>
<ul>
<li><a href="/doc/articles/c_go_cgo.html">C? Go? Cgo!</a> - linking against C code with <a href="/cmd/cgo/">cgo</a>.</li>
diff --git a/doc/root.html b/doc/root.html
index b2ce06f..cf6d0ff 100644
--- a/doc/root.html
+++ b/doc/root.html
@@ -5,9 +5,10 @@
<div class="left">
<div id="learn">
+<img class="icon share" src="/doc/share.png">
<div class="rootHeading">Try Go</div>
<div class="input">
-<textarea spellcheck="false" id="code">// You can edit this code!
+<textarea spellcheck="false" class="code">// You can edit this code!
// Click here and start typing.
package main
@@ -17,14 +18,14 @@
fmt.Println("Hello, 世界")
}</textarea>
</div>
-<div class="output" id="output">
+<div class="output">
<pre>
Hello, 世界
</pre>
</div>
<div class="buttons">
-<a id="run" href="#">Run</a>
-<a id="share" href="#">Share</a>
+<a class="run" href="#">Run</a>
+<a class="share" href="#">Share</a>
</div>
</div>
@@ -112,10 +113,10 @@
// Set up playground.
playground({
"simple": true,
- "codeEl": "#code",
- "outputEl": "#output",
- "runEl": "#run",
- "shareEl": "#share",
+ "codeEl": "#learn .code",
+ "outputEl": "#learn .output",
+ "runEl": "#learn .run",
+ "shareEl": "#learn .share",
"shareRedirect": "http://play.golang.org/p/"
});
}
diff --git a/doc/share.png b/doc/share.png
new file mode 100644
index 0000000..c04f0c71
--- /dev/null
+++ b/doc/share.png
Binary files differ
diff --git a/doc/style.css b/doc/style.css
index d5b3059..a46b8f8 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -18,11 +18,11 @@
pre .highlight-comment,
pre .selection-highlight,
pre .selection-highlight-comment {
- background: #FFFF00;
+ background: #FFFF00;
}
pre .selection,
pre .selection-comment {
- background: #FF9632;
+ background: #FF9632;
}
pre .ln {
color: #999;
@@ -34,6 +34,9 @@
color: #375EAB;
text-decoration: none;
}
+a:hover {
+ text-decoration: underline;
+}
p,
pre,
ul,
@@ -82,13 +85,6 @@
margin: 0;
}
-h1 a,
-h2 a,
-h3 a,
-h4 a {
- text-decoration: underline;
-}
-
dl {
margin: 20px;
}
@@ -262,6 +258,10 @@
margin-top: 5px;
}
+div#learn .icon {
+ float: right;
+ cursor: pointer;
+}
div#learn pre,
div#learn textarea {
padding: 0;
@@ -351,8 +351,6 @@
}
div#blog .title,
div#video .title {
- color: #222;
- text-decoration: none;
display: block;
font-size: 20px;
}
