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

doc/docs.html

@@ -89,7 +89,7 @@ Go 1 matures.
 <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 @@ Guided tours of Go programs.
 <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 @@ Guided tours of Go programs.
 <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 @@ Guided tours of Go programs.
 <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 @@ the simple example of an URL shortening service.
 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

doc/reference.html

@@ -58,7 +58,7 @@ same variable in a different goroutine.
 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>

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 @@ func main() {
 	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 class="run" href="#">Run</a>
-<a id="share" href="#">Share</a>
+<a class="share" href="#">Share</a>
 </div>
 </div>
 
@@ -112,10 +113,10 @@ function init() {
 	// Set up playground.
 	playground({
 		"simple":        true,
-		"codeEl":        "#code",
+		"codeEl":        "#learn .code",
-		"outputEl":      "#output",
+		"outputEl":      "#learn .output",
-		"runEl":         "#run",
+		"runEl":         "#learn .run",
-		"shareEl":       "#share",
+		"shareEl":       "#learn .share",
 		"shareRedirect": "http://play.golang.org/p/"
 	});
 }

doc/style.css

@@ -34,6 +34,9 @@ a {
 	color: #375EAB;
 	text-decoration: none;
 }
+a:hover {
+	text-decoration: underline;
+}
 p,
 pre,
 ul,
@@ -82,13 +85,6 @@ h4 {
 	margin: 0;
 }
 
-h1 a,
-h2 a,
-h3 a,
-h4 a {
-	text-decoration: underline;
-}
-
 dl {
 	margin: 20px;
 }
@@ -262,6 +258,10 @@ a#start .desc {
 	margin-top: 5px;
 }
 
+div#learn .icon {
+	float: right;
+	cursor: pointer;
+}
 div#learn pre,
 div#learn textarea {
 	padding: 0;
@@ -351,8 +351,6 @@ div#video > h2 {
 }
 div#blog .title,
 div#video .title {
-	color: #222;
-	text-decoration: none;
 	display: block;
 	font-size: 20px;
 }