cmd/present: adjust article presentation

* Give the article title a larger, heavier font than any heading.
  It was strange that the title was 20px regular while the
  h1 section headings were 24px.

* Move the author attribution to the top of the page.
  Author at the bottom, like a signature, may make sense for blog posts,
  but I think it makes less sense for articles.

* Fix the spacing around author lines. Each author line is a <p>
  and the intent seemed to be to cut the vertical space between them
  but that wasn't working.

* Give the table of contents a title, to make clearer what it is.
  Do not show table of contents in printouts.

Change-Id: Iee940ca7697015281fc057750f5db56f70393836
Reviewed-on: https://go-review.googlesource.com/33578
Run-TryBot: Russ Cox <rsc@golang.org>
Reviewed-by: Rob Pike <r@golang.org>

cmd/present/static/article.css

@@ -31,15 +31,14 @@ h1, h2, h3, h4 {
 	font-weight: bold;
 }
 h1 {
-	font-size: 24px;
+	font-size: 18px;
-}
-h2 {
-	font-size: 20px;
-	background: #E0EBF5;
 	padding: 2px 5px;
 }
+h2 {
+	font-size: 16px;
+}
 h3 {
-	font-size: 20px;
+	font-size: 16px;
 }
 h3, h4 {
 	margin: 20px 5px;
@@ -49,17 +48,19 @@ h4 {
 }
 
 div#heading {
-	float: left;
 	margin: 0 0 10px 0;
 	padding: 21px 0;
 	font-size: 20px;
+	font-weight: bold;
+}
+
+div#heading .author {
+	padding-top: 10px;
+	font-size: 14px;
 	font-weight: normal;
 }
 
 div#topbar {
-	background: #E0EBF5;
-	height: 64px;
-	overflow: hidden;
 }
 
 body {
@@ -89,19 +90,23 @@ div#footer {
 }
 
 .author p {
-	margin: 20, 0, 0, 0px;
+	margin: 0;
+	padding: 0 20px;
 }
 
 div.code,
 div.output {
-	margin: 20px;
+	margin: 20px 20px 20px 40px;
-	padding: 10px;
 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
 	border-radius: 5px;
 }
 
-div.code { background: #e9e9e9; }
+div.output {
+	padding: 10px;
+}
+
+div.code { background: white; }
 div.output { background: black; }
 div.output .stdout { color: #e6e6e6; }
 div.output .stderr { color: rgb(244, 74, 63); }
@@ -120,7 +125,9 @@ div.output .buttons {
 	margin: 0px 10px;
 	padding: 10px;
 	border: 1px solid #e5ecf9; 
-	background-color: white;
+	background-color: #eee;
+	box-shadow: 3px 3px 2px #888888;
+
 	max-width: 33%;
 
 	-webkit-border-radius: 5px;
@@ -128,9 +135,27 @@ div.output .buttons {
 	border-radius: 5px;
 }
 
+#tochead {
+	font-weight: bold;
+	font-variant: small-caps;
+	font-size: 100%;
+	text-align: center;
+	padding-bottom: 5px;
+}
+
 #toc ul, #toc a {
 	list-style-type: none;
-	padding-left: 10px;
+	padding-left: 0px;
 	color: black;
 	margin: 0px;
 }
+
+ul.toc-inner a {
+	padding-left: 10px !important;
+}
+
+@media print {
+	.no-print, .no-print * {
+		display: none !important;
+	}
+}

cmd/present/templates/article.tmpl

@@ -31,13 +31,21 @@
       <div class="container">
         <div id="heading">{{.Title}}
           {{with .Subtitle}}{{.}}{{end}}
+        {{if .Authors}}
+          {{range .Authors}}
+            <div class="author">
+              {{range .Elem}}{{elem $.Template .}}{{end}}
+            </div>
+          {{end}}
+        {{end}}
         </div>
       </div>
     </div>
     <div id="page" class="wide">
       <div class="container">
         {{with .Sections}}
-          <div id="toc">
+          <div id="toc" class="no-print">
+            <div id="tochead">Contents</div>
             {{template "TOC" .}}
           </div>
         {{end}}
@@ -46,14 +54,6 @@
           {{elem $.Template .}}
         {{end}}{{/* of Section block */}}
 
-        {{if .Authors}}
-          <h2>Authors</h2>
-          {{range .Authors}}
-            <div class="author">
-              {{range .Elem}}{{elem $.Template .}}{{end}}
-            </div>
-          {{end}}
-        {{end}}
       </div>
     </div>
 
@@ -76,10 +76,19 @@
 {{end}}
 
 {{define "TOC"}}
-  <ul>
+  <ul class="toc-outer">
   {{range .}}
     <li><a href="#TOC_{{.FormattedNumber}}">{{.Title}}</a></li>
-    {{with .Sections}}{{template "TOC" .}}{{end}}
+    {{with .Sections}}{{template "TOC-Inner" .}}{{end}}
+  {{end}}
+  </ul>
+{{end}}
+
+{{define "TOC-Inner"}}
+  <ul class="toc-inner">
+  {{range .}}
+    <li><a href="#TOC_{{.FormattedNumber}}">{{.Title}}</a></li>
+    {{with .Sections}}{{template "TOC-Inner" .}}{{end}}
   {{end}}
   </ul>
 {{end}}