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
diff --git a/doc/all.css b/doc/all.css
index dc632ef..a0af424 100644
--- a/doc/all.css
+++ b/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: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 {
- width: 50%;
- margin: 0;
- padding: 0;
- height: 55px;
- background: url(/doc/logo.png) no-repeat;
-}
-#branding-logo a {
+a#logo-box {
display: block;
- width: 100%;
height: 55px;
}
-#branding-logo span {
+h1#title {
display: none;
}
#nav-main {
- position: relative;
- top: -60px;
- width: 50%;
- margin-left: 50%;
+ float: right;
+ width: 500px;
+ margin-top: -5px;
text-align: center;
}
#nav-main ul {
@@ -85,7 +89,9 @@
-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 @@
color: #444;
}
-#content {
- padding: 0;
- position: relative;
- margin-top: 1.5em;
- margin-bottom: 1.5em;
- border-top: solid 1px #aaa;
- border-bottom: solid 1px #aaa;
-}
+/* Footer */
#site-info {
position: relative;
text-align: center;
@@ -110,42 +109,65 @@
#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;
- padding: 0;
+ margin-bottom: -0em;
+ padding: 0;
}
#content h2 {
- border-top: 1px solid #ddd;
- background: #E2E7F0;
- padding: 2px 5px 5px;
- margin: 1.5em 0 0;
+ border-top: 1px solid #ddd;
+ background: #E2E7F0;
+ padding: 5px;
+ 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; }
-pre { background: #F0F0F0; padding: 0.5em 1em; }
-pre.ebnf, pre.grammar { background: #FFFFE0; }
-
+/* Content and Code Highlighting */
+pre.ebnf, pre.grammar {
+ 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; }
diff --git a/doc/frontpage.css b/doc/frontpage.css
index bc29f48..debc9aa 100644
--- a/doc/frontpage.css
+++ b/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 @@
#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; }
diff --git a/doc/root.html b/doc/root.html
index abfdc1d..c4e43b7 100644
--- a/doc/root.html
+++ b/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.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 @@
</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>
