Update the styling of the godoc pages.

(root.html is just temporary. It'll need some better content.)

R=r
CC=go-dev
http://go/go-review/1017019

doc/root.html

@@ -1,27 +1,90 @@
 <!-- The Go Programming Language -->
 
-<h2>Documentation</h2>
+<script>
-<ul>
+  // On the frontpage we hide the header and navigation elements that other
-	<li><a href="/doc/go_spec.html" target="_top">Language specification</a></li>
+  // pages have.
-	<li><a href="/doc/go_mem.html" target="_top">Memory model</a></li>
+  document.getElementById('generatedHeader').style.display = 'none';
-	<li><a href="/doc/go_tutorial.html" target="_top">Tutorial</a></li>
+  document.getElementById('nav').style.display = 'none';
-	<li><a href="/doc/effective_go.html" target="_top">Effective Go</a></li>
+</script>
-	<li><a href="/doc/go_faq.html">Frequently asked questions</a></li>
+
-	<li><a href="/doc/go_lang_faq.html">Frequently asked questions about the design of the language</a></li>
+<div id="gettingStarted">
-	<li><a href="/doc/go_for_cpp_programmers.html">Go For C++ Programmers</a></li>
+  <h1>Getting started</h1>
-	<br />
+
-	<li><a href="/pkg">Package documentation</a>
+  <ol>
-	<br />
+    <li>
-	<li><a href="/doc/install.html">How to install Go</a></li>
+      <span><a href="/doc/install.html">Install Go</a>.</span>
-	<li><a href="/doc/contribute.html">How to contribute to the Go project</a></li>
+    </li>
-</ul>
+
+    <li>
+      <span>Read the <a href="/doc/go_tutorial.html">tutorial</a>.</span>
+    </li>
+
+    <li>
+      <span>Learn the <a href="/pkg">libraries</a>.</span>
+    </li>
+  </ol>
+
+  <h1>Watch and Learn</h1>
+  <p>(No video yet.)</p>
+</div>
+
+<div id="frontpage">
+
+<table style="padding-top: 1em; padding-bottom: 2em;">
+  <tr>
+    <td>
+      <img style="padding-right: 1em;" src="/doc/go-logo-blue.png">
+    </td>
+    <td>
+      <div><span style="font-size: 2em; font-weight: bold;">an experimental programming language.</span><br><span style="font-size: 1.5em;">Imperative, concurrent, garbage-collected.</span></div>
+    </td>
+  </tr>
+</table>
+
+<p style="font-size: 1.5em; font-weight: bold;">Go is &hellip;</p>
+
+<h3>&hellip; simple</h3>
+<pre class="code">
+package main
+
+import "fmt"
+
+func main() {
+  fmt.Printf("Hello, 世界\n");
+}</pre>
+
+<h3>&hellip; fast</h3>
+
+<p>Go generates fast code and, equally importantly, does it fast. It takes too long to build software.  The tools are slow and are getting slower.  Dependencies are uncontrolled.  Machines have stopped getting faster.  Yet software still grows and grows.  If we stay as we are, before long software construction will be unbearably slow.</p>
+
+<h3>&hellip; safe</h3>
+
+<p>Go is type safe and memory safe. Go has pointers, but you can't perform
+arithmetic on them. If you want that, you use slices, which known their
+limits.</p>
+
+<p>Clumsy type systems drive people to dynamically typed languages. Go is
+object orientated without type hierarchies. Casts are checked at runtime and
+types can be reflected upon.</p>
+
+<h3>&hellip; concurrent</h3>
+
+<p>Go provides a way to write systems and servers as concurrent,
+garbage-collected processes (goroutines) with support from the language and
+run-time. Growing stacks and multiplexing of goroutines onto threads is done
+automatically.</p>
+
+</div>
+
+<!--
+
+Commented out for now. We need to organise these resources.
 
 <h2>Other Resources</h2>
 <ul>
 	<li>Mailing list: <a href="http://groups.google.com/group/NAME_TO_BE_DETERMINED">Go Nuts &lt;nuts@XXX&gt;</a>. Please don't mail group members individually.</li>
 	<li><a href="http://code.google.com/p/go/source/browse/">Source code</a>
 	<li><a href="http://code.google.com/p/go/issues/list">Issue Tracker</a>
-	<li><!-- a href="http://www.google.com/codesearch?q=lang:go+package:go.googlecode.com" -->Code Search<!-- /a --></li>
 	</li>
 	<br />
 	<li>The Google Tech Talk from October 30, 2009:
@@ -38,3 +101,4 @@
 		</ul>
 	</li>
 </ul>
+-->

doc/style.css

@@ -43,7 +43,13 @@ body {
   font: 13px Helvetica, Arial, sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1 {
+  margin-top: 0;
+  padding-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+h2, h3, h4, h5, h6 {
   font-family: Helvetica, Arial, sans-serif;
   margin-bottom: 0.25em;
 }
@@ -52,6 +58,7 @@ h2 {
   background-color: #e5ecf9;
   margin-top: 2em;
   border-top:1px solid #36C;
+  padding-left: 0.2em;
 }
 
 pre {
@@ -80,12 +87,16 @@ div#content {
   margin-left: 20%;
   padding: 0 1em 2em 1em;
   margin-top: -2px;
-  border: 2px solid #e5ecf9;
+  border-left: 2px solid #e5ecf9;
 }
 
 #topnav {
+}
+
+#headerDocSetTitle {
   margin: 0px;
-  padding: .1em 0px;
+  padding-left: 0.2em;
+  padding-top: 0.2em;
   width: 100%;
   white-space: nowrap;
   background-color: #e5ecf9;
@@ -214,3 +225,34 @@ a.use {
   color: #FFFFFF;
   background-color: #5858FA;
 }
+
+/* ------------------------------------------------------------------------- */
+/* Styles for the frontpage */
+
+#gettingStarted {
+  margin-top: 1.5em;
+  float: right;
+  background-color: #e5ecf9;
+  width: 25%;
+  padding-left: 1em;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+}
+
+#gettingStarted h1 {
+  padding-top: 0.3em;
+  font-size: 1.5em;
+}
+
+#gettingStarted ol {
+}
+
+#frontpage {
+  width: 70%;
+}
+
+#frontpage h3 {
+  margin-left: 3em;
+  font-size: 1.5em;
+  font-weight: normal;
+}

lib/godoc/godoc.html

@@ -13,16 +13,65 @@
 
 <body>
 
+  <script>
+    // Catch 'enter' key down events and trigger the search form submission.
+    function codesearchKeyDown(event) {.meta-left}
+      if (event.which == 13) {.meta-left}
+        var form = document.getElementById('codesearch');
+        var query = document.getElementById('codesearchQuery');
+        form.q.value = "lang:go package:go.googlecode.com " + query.value;
+        document.getElementById('codesearch').submit();
+      {.meta-right}
+      return true;
+    {.meta-right}
+
+    // Capture the submission event and construct the query parameter.
+    function codeSearchSubmit() {.meta-left}
+      var query = document.getElementById('codesearchQuery');
+      var form = document.getElementById('codesearch');
+      form.q.value = "lang:go package:go.googlecode.com " + query.value;
+      return true;
+    {.meta-right}
+  </script>
+
 <div id="topnav">
-<table summary=""><tr>
+  <table summary="">
-<td id="headerImage">
+    <tr>
-<a href="./"><img src="/doc/logo-153x55.png" height="55" width="153" alt="Go Home Page" style="border:0" /></a>
+      <td id="headerImage">
-</td>
+        <a href="/"><img src="/doc/logo-153x55.png" height="55" width="153" alt="Go Home Page" style="border:0" /></a>
-<td id="headerDocSetTitle">The Go Programming Language</td>
+      </td>
-</tr>
+      <td>
-</table>
+        <!-- <table>
+          <tr>
+            <td>
+              <!-- The input box is outside of the form because we want to add
+              a couple of restricts to the query before submitting. If we just
+              add the restricts to the text box before submitting, then they
+              appear in the box when the user presses 'back'. Thus we use a
+              hidden field in the form. However, there's no way to stop the
+              non-hidden text box from also submitting a value unless we move
+              it outside of the form
+              <input type="search" id="codesearchQuery" value="" size="30" onkeydown="return codesearchKeyDown(event);"/>
+              <form method="GET" action="http://www.google.com/codesearch" id="codesearch" class="search" onsubmit="return codeSearchSubmit();" style="display:inline;">
+                <input type="hidden" name="q" value=""/>
+                <input type="submit" value="Code search" />
+                <span style="color: red">(TODO: remove for now?)</span>
+              </form>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <span style="color: gray;">(e.g. &ldquo;pem&rdquo; or &ldquo;xml&rdquo;)</span>
+            </td>
+          </tr>
+        </table> -->
+      </td>
+    </tr>
+  </table>
 </div>
 
+<div id="headerDocSetTitle">The Go Programming Language</div>
+
 <div id="linkList">
   <ul>
     <li class="navhead"><a href="/" class="noline">Home</a></li>
@@ -60,7 +109,7 @@
 </div>
 
 <div id="content">
-  <h1>{Title|html}</h1>
+  <h1 id="generatedHeader">{Title|html}</h1>
 
   <!-- The Table of Contents is automatically inserted in this <div>.
        Do not delete this <div>. -->