doc: variable-width layout

The front page remains fixed-width.
All other pages should look good in windows >=500px wide.

Includes additional styles for search result highlighting,
code comments, and general CSS clean-ups.

Tested with Chrome 6, Firefox 3.6, IE 7, and IE 8.

R=gri, r
CC=golang-dev
https://golang.org/cl/2229041

doc/all.css

@@ -1,9 +1,12 @@
+/* General Styles */
 body {
   font-family: "Bitstream Vera Sans", Verdana, sans-serif;
   font-size: 81.25%;
   line-height: 1.23em;
   padding: 0;
   margin: 1.23em;
+  background: white;
+  color: black;
 }
 a {
   color: #04a;
@@ -19,33 +22,34 @@ a:hover {
 a:active {
   color: #c00;
 }
+code, pre {
+  font-size: 1.2em; 
+}
+pre {
+  background: #F0F0F0;
+  padding: 0.5em 1em;
+}
+
+/* Top bar */
 #container {
-  width: 76em;
+  width: 100%;
   margin: auto;
 }
 #topnav {
   height: 55px;
+  background: url(/doc/logo.png) no-repeat top left;
 }
-#branding-logo {
+a#logo-box {
-  width: 50%;
-  margin: 0;
-  padding: 0;
-  height: 55px;
-  background: url(/doc/logo.png) no-repeat;
-}
-#branding-logo a {
   display: block;
-  width: 100%;
   height: 55px;
 }
-#branding-logo span {
+h1#title {
   display: none;
 }
 #nav-main {
-  position: relative;
+  float: right;
-  top: -60px;
+  width: 500px;
-  width: 50%;
+  margin-top: -5px;
-  margin-left: 50%;
   text-align: center;
 }
 #nav-main ul {
@@ -85,7 +89,9 @@ a:active {
   -moz-border-bottom-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-#nav-main .quickref { color: #444; }
+#nav-main .quickref {
+  color: #444;
+}
 #search {
   width: 100px;
   margin-left: 0.5em;
@@ -95,14 +101,7 @@ a:active {
   color: #444;
 }
 
-#content {
+/* Footer */
-  padding: 0;
-  position: relative;
-  margin-top: 1.5em;
-  margin-bottom: 1.5em;
-  border-top: solid 1px #aaa;
-  border-bottom: solid 1px #aaa;
-}
 #site-info {
   position: relative;
   text-align: center;
@@ -110,42 +109,65 @@ a:active {
 #site-info, #site-info a:link, #site-info a:visited {
   color: #aaa;
 }
-#nav table {
-  width: 100%;
-}
 
+/* Content */
+#content {
+  clear: both;
+  padding: 0;
+  position: relative;
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  border-top: solid 1px #aaa;
+  border-bottom: solid 1px #aaa;
+}
+.left-column {
+  width: 49%;
+  float: left;
+}
+.right-column {
+  width: 49%;
+  float: right;
+}
+.end-columns {
+  clear: both;
+}
 #content h1 {
-	margin-bottom: -0em;
+  margin-bottom: -0em;
-	padding: 0;
+  padding: 0;
 }
 #content h2 {
-	border-top: 1px solid #ddd;
+  border-top: 1px solid #ddd;
-	background: #E2E7F0;
+  background: #E2E7F0;
-	padding: 2px 5px 5px;
+  padding: 5px;
-	margin: 1.5em 0 0;
+  margin: 1.5em 0 0;
+}
+#content .subtitle {
+  margin-top: 1em;
+  display: block;
 }
-#content .subtitle { margin-top: 1em; display: block; }
-
 .navtop a {
   font-weight: normal; font-size: 7pt; 
   float: right; color: #999;
 }
 
-code, pre { font-size: 1.2em; }
+/* Content and Code Highlighting */
-pre { background: #F0F0F0; padding: 0.5em 1em; }
+pre.ebnf, pre.grammar {
-pre.ebnf, pre.grammar { background: #FFFFE0; }
+  background: #FFFFE0;
-
+}
+span.comment {
+  color: #002090;
+}
+span.highlight {
+  background: #FFFF90;
+  font-weight: bold;
+}
+span.alert {
+  color: #D00000;
+}
+#nav table {
+  width: 100%;
+}
 .detail {
   padding: 0.25em 1em;
   background: #F4F4F4;
 }
-
-.left-column {
-	width: 48%;
-	float: left;
-}
-.right-column {
-	width: 48%;
-	float: right;
-}
-.end-columns { clear: both; }

doc/frontpage.css

@@ -1,3 +1,9 @@
+/* Overloads to all.css */
+#container { width: 76em }
+.left-column { width: 48%; }
+.right-column { width: 48%; }
+
+/* Frontpage styles */
 #content-introductory code {
   font-family: "Bitstream Vera Sans Mono", "Andale Mono", monospace;
 }
@@ -117,9 +123,15 @@ span.keyword {
 #content-blog li a:active .title {
   color: #c00;
 }
-
 .navtop {
   display: none !important;
 }
+.how {
+  float: right;
+  font-size: 75%;
+}
+.unsupported {
+  font-weight: bold;
+  color: red;
+}
 
-.unsupported { font-weight: bold; color: red; }

doc/root.html

@@ -1,3 +1,5 @@
+<link rel="stylesheet" type="text/css" href="/doc/frontpage.css">
+
 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript">
 function loadFeed() {
@@ -34,7 +36,6 @@ google.load("feeds", "1");
 google.setOnLoadCallback(loadFeed);
 </script>
 
-  <link rel="stylesheet" type="text/css" href="/doc/frontpage.css">
   <div id="frontpage">
     <div class="left-column">
       <p style="margin-top: 0;">
@@ -50,7 +51,8 @@ google.setOnLoadCallback(loadFeed);
       </p>
       <h2>Check it out!</h2>
       <p>
-      <a href="/doc/install.html">Install Go now</a>, or try it right here in your browser: <small>[<a href="/doc/playground.html">How does it work?</a>]</small></p>
+      <div class="how">[<a href="/doc/playground.html">How does it work?</a>]</div>
+      <a href="/doc/install.html">Install Go now</a>, or try it right here in your browser:</p>
       <div id="playground" class="small"></div>
       <script src="/doc/play/playground.js"></script>
     </div>

lib/godoc/godoc.html

@@ -12,7 +12,7 @@
 <body>
 <div id="container">
   <div id="topnav">
-    <h1 id="branding-logo"><a href="/"><span>The Go Programming Language</span></a></h1>
+    <h1 id="title">The Go Programming Language</h1>
     <div id="nav-main">
       <ul>
       <li><a href="/">Home</a></li><li><a href="/doc/install.html">Getting Started</a></li><li><a href="/doc/docs.html">Documentation</a></li><li><a href="/doc/contrib.html">Contributing</a></li><li><a href="/doc/community.html">Community</a></li>
@@ -33,6 +33,7 @@
         </form>
       </div>
     </div>
+    <a id="logo-box" href="/"></a>
   </div>
   <div id="content">
   <!-- Menu is HTML-escaped elsewhere -->