qbit/go
1
0
Fork 0
mirror of https://github.com/golang/go synced 2024-11-05 14:56:10 -07:00
Code Releases Activity

tools/godoc: Mobile-friendly site design

Browse Source 
This change makes golang.org responsive, including a top
bar menu and appropriate font sizing. The result is a
website that looks pleasing and is functional both on
mobile and on desktop. Also added a few print styles so
the site looks great on paper or PDF.

Change-Id: I16ee25ef4afde2002f240aec0804414bfb172a24
Reviewed-on: https://go-review.googlesource.com/9062
Reviewed-by: Chris Broadfoot <cbro@golang.org>
This commit is contained in:
Matthew Holt 2015-04-17 17:09:18 -06:00 committed by Chris Broadfoot
parent e841ad2e00
commit f671283c22
6 changed files with 529 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
godoc/godoc.go
View File

@ -98,6 +98,9 @@ func (p *Presentation) initFuncMap() {
// formatting of Notes // formatting of Notes
"noteTitle": noteTitle, "noteTitle": noteTitle,
// Number operation
"multiply": multiply,
} }
if p.URLForSrc != nil { if p.URLForSrc != nil {
p.funcMap["srcLink"] = p.URLForSrc p.funcMap["srcLink"] = p.URLForSrc
@ -110,6 +113,8 @@ func (p *Presentation) initFuncMap() {
} }
} }
func multiply(a, b int) int { return a * b }
func filenameFunc(path string) string { func filenameFunc(path string) string {
_, localname := pathpkg.Split(path) _, localname := pathpkg.Split(path)
return localname return localname

7
godoc/static/godoc.html
View File

@ -2,6 +2,8 @@
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#375EAB">
{{with .Tabtitle}} {{with .Tabtitle}}
<title>{{html .}} - The Go Programming Language</title> <title>{{html .}} - The Go Programming Language</title>
{{else}} {{else}}
@ -21,7 +23,9 @@
</div><!-- #lowframe --> </div><!-- #lowframe -->
<div id="topbar"{{if .Title}} class="wide"{{end}}><div class="container"> <div id="topbar"{{if .Title}} class="wide"{{end}}><div class="container">
<div class="top-heading" id="heading-wide"><a href="/">The Go Programming Language</a></div>
<div class="top-heading" id="heading-narrow"><a href="/">Go</a></div>
<a href="#" id="menu-button"><span id="menu-button-arrow">&#9661;</span></a>
<form method="GET" action="/search"> <form method="GET" action="/search">
<div id="menu"> <div id="menu">
<a href="/doc/">Documents</a> <a href="/doc/">Documents</a>
@ -34,7 +38,6 @@
{{end}} {{end}}
<input type="text" id="search" name="q" class="inactive" value="Search" placeholder="Search"> <input type="text" id="search" name="q" class="inactive" value="Search" placeholder="Search">
</div> </div>
<div id="heading"><a href="/">The Go Programming Language</a></div>
</form> </form>
</div></div> </div></div>

13
godoc/static/godocs.js
View File

@ -14,6 +14,19 @@
(function() { (function() {
'use strict'; 'use strict';
// Mobile-friendly topbar menu
$(function() {
var menu = $('#menu');
var menuButton = $('#menu-button');
var menuButtonArrow = $('#menu-button-arrow');
menuButton.click(function(event) {
menu.toggleClass('menu-visible');
menuButtonArrow.toggleClass('vertical-flip');
event.preventDefault();
return false;
});
});
function bindSearchEvents() { function bindSearchEvents() {
var search = $('#search'); var search = $('#search');

66
godoc/static/package.html
View File

@ -249,35 +249,47 @@
<h2 id="stdlib">Standard library</h2> <h2 id="stdlib">Standard library</h2>
<img class="gopher" src="/doc/gopher/pkg.png"/> <img class="gopher" src="/doc/gopher/pkg.png"/>
{{end}} {{end}}
<table class="dir">
<tr>
<th>Name</th> <div class="pkg-dir">
<th>&nbsp;&nbsp;&nbsp;&nbsp;</th> <table>
<th style="text-align: left; width: auto">Synopsis</th>
</tr>
{{if not (or (eq $.Dirname "/src") (eq $.Dirname "/src/cmd") $.DirFlat)}}
<tr>
<td><a href="..">..</a></td>
</tr>
{{end}}
{{range .List}}
{{if $.DirFlat}}
{{if .HasPkg}}
<tr>
<td class="name"><a href="{{html .Path}}/">{{html .Path}}</a></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td style="width: auto">{{html .Synopsis}}</td>
</tr>
{{end}}
{{else}}
<tr> <tr>
<td class="name">{{repeat `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;` .Depth}}<a href="{{html .Path}}/">{{html .Name}}</a></td> <th class="pkg-name">Name</th>
<td>&nbsp;&nbsp;&nbsp;&nbsp;</td> <th class="pkg-synopsis">Synopsis</th>
<td style="width: auto">{{html .Synopsis}}</td>
</tr> </tr>
{{end}}
{{end}} {{if not (or (eq $.Dirname "/src") (eq $.Dirname "/src/cmd") $.DirFlat)}}
</table> <tr>
<td colspan="2"><a href="..">..</a></td>
</tr>
{{end}}
{{range .List}}
{{if $.DirFlat}}
{{if .HasPkg}}
<tr>
<td class="pkg-name">
<a href="{{html .Path}}/">{{html .Path}}</a>
</td>
<td class="pkg-synopsis">
{{html .Synopsis}}
</td>
</tr>
{{end}}
{{else}}
<tr>
<td class="pkg-name" style="padding-left: {{multiply .Depth 20}}px;">
<a href="{{html .Path}}/">{{html .Name}}</a>
</td>
<td class="pkg-synopsis">
{{html .Synopsis}}
</td>
</tr>
{{end}}
{{end}}
</table>
</div>
{{if eq $.Dirname "/src"}} {{if eq $.Dirname "/src"}}
<h2 id="other">Other packages</h2> <h2 id="other">Other packages</h2>

327
godoc/static/static.go
View File

@ -473,6 +473,8 @@ var Files = map[string]string{
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#375EAB">
{{with .Tabtitle}} {{with .Tabtitle}}
<title>{{html .}} - The Go Programming Language</title> <title>{{html .}} - The Go Programming Language</title>
{{else}} {{else}}
@ -492,7 +494,9 @@ var Files = map[string]string{
</div><!-- #lowframe --> </div><!-- #lowframe -->
<div id="topbar"{{if .Title}} class="wide"{{end}}><div class="container"> <div id="topbar"{{if .Title}} class="wide"{{end}}><div class="container">
<div class="top-heading" id="heading-wide"><a href="/">The Go Programming Language</a></div>
<div class="top-heading" id="heading-narrow"><a href="/">Go</a></div>
<a href="#" id="menu-button"><span id="menu-button-arrow">&#9661;</span></a>
<form method="GET" action="/search"> <form method="GET" action="/search">
<div id="menu"> <div id="menu">
<a href="/doc/">Documents</a> <a href="/doc/">Documents</a>
@ -505,7 +509,6 @@ var Files = map[string]string{
{{end}} {{end}}
<input type="text" id="search" name="q" class="inactive" value="Search" placeholder="Search"> <input type="text" id="search" name="q" class="inactive" value="Search" placeholder="Search">
</div> </div>
<div id="heading"><a href="/">The Go Programming Language</a></div>
</form> </form>
</div></div> </div></div>
@ -589,6 +592,19 @@ and code is licensed under a <a href="/LICENSE">BSD license</a>.<br>
(function() { (function() {
'use strict'; 'use strict';
// Mobile-friendly topbar menu
$(function() {
var menu = $('#menu');
var menuButton = $('#menu-button');
var menuButtonArrow = $('#menu-button-arrow');
menuButton.click(function(event) {
menu.toggleClass('menu-visible');
menuButtonArrow.toggleClass('vertical-flip');
event.preventDefault();
return false;
});
});
function bindSearchEvents() { function bindSearchEvents() {
var search = $('#search'); var search = $('#search');
@ -1762,35 +1778,47 @@ function cgAddChild(tree, ul, cgn) {
<h2 id="stdlib">Standard library</h2> <h2 id="stdlib">Standard library</h2>
<img class="gopher" src="/doc/gopher/pkg.png"/> <img class="gopher" src="/doc/gopher/pkg.png"/>
{{end}} {{end}}
<table class="dir">
<tr>
<th>Name</th> <div class="pkg-dir">
<th>&nbsp;&nbsp;&nbsp;&nbsp;</th> <table>
<th style="text-align: left; width: auto">Synopsis</th>
</tr>
{{if not (or (eq $.Dirname "/src") (eq $.Dirname "/src/cmd") $.DirFlat)}}
<tr>
<td><a href="..">..</a></td>
</tr>
{{end}}
{{range .List}}
{{if $.DirFlat}}
{{if .HasPkg}}
<tr>
<td class="name"><a href="{{html .Path}}/">{{html .Path}}</a></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td style="width: auto">{{html .Synopsis}}</td>
</tr>
{{end}}
{{else}}
<tr> <tr>
<td class="name">{{repeat ` + "`" + `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;` + "`" + ` .Depth}}<a href="{{html .Path}}/">{{html .Name}}</a></td> <th class="pkg-name">Name</th>
<td>&nbsp;&nbsp;&nbsp;&nbsp;</td> <th class="pkg-synopsis">Synopsis</th>
<td style="width: auto">{{html .Synopsis}}</td>
</tr> </tr>
{{end}}
{{end}} {{if not (or (eq $.Dirname "/src") (eq $.Dirname "/src/cmd") $.DirFlat)}}
</table> <tr>
<td colspan="2"><a href="..">..</a></td>
</tr>
{{end}}
{{range .List}}
{{if $.DirFlat}}
{{if .HasPkg}}
<tr>
<td class="pkg-name">
<a href="{{html .Path}}/">{{html .Path}}</a>
</td>
<td class="pkg-synopsis">
{{html .Synopsis}}
</td>
</tr>
{{end}}
{{else}}
<tr>
<td class="pkg-name" style="padding-left: {{multiply .Depth 20}}px;">
<a href="{{html .Path}}/">{{html .Name}}</a>
</td>
<td class="pkg-synopsis">
{{html .Synopsis}}
</td>
</tr>
{{end}}
{{end}}
</table>
</div>
{{if eq $.Dirname "/src"}} {{if eq $.Dirname "/src"}}
<h2 id="other">Other packages</h2> <h2 id="other">Other packages</h2>
@ -2696,9 +2724,10 @@ function PlaygroundOutput(el) {
"style.css": `body { "style.css": `body {
margin: 0; margin: 0;
font-family: Helvetica, Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 16px; font-size: 16px;
background-color: #fff; background-color: #fff;
line-height: 1.3em;
} }
pre, pre,
code { code {
@ -2706,7 +2735,8 @@ code {
font-size: 14px; font-size: 14px;
} }
pre { pre {
line-height: 18px; line-height: 1.4em;
overflow-x: auto;
} }
pre .comment { pre .comment {
color: #006600; color: #006600;
@ -2736,6 +2766,10 @@ a:hover,
.exampleHeading .text:hover { .exampleHeading .text:hover {
text-decoration: underline; text-decoration: underline;
} }
p {
max-width: 800px;
word-wrap: break-word;
}
p, p,
pre, pre,
ul, ul,
@ -2743,7 +2777,7 @@ ol {
margin: 20px; margin: 20px;
} }
pre { pre {
background: #e9e9e9; background: #EFEFEF;
padding: 10px; padding: 10px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
@ -2756,18 +2790,24 @@ h2,
h3, h3,
h4, h4,
.rootHeading { .rootHeading {
margin: 20px 0; margin: 40px 0 20px;
padding: 0; padding: 0;
color: #375EAB; color: #375EAB;
font-weight: bold; font-weight: bold;
} }
h1 { h1 {
font-size: 24px; font-size: 28px;
line-height: 1;
} }
h2 { h2 {
font-size: 20px; font-size: 20px;
background: #E0EBF5; background: #E0EBF5;
padding: 2px 5px; padding: 8px;
line-height: 1.25;
font-weight: normal;
}
h2 a {
font-weight: bold;
} }
h3 { h3 {
font-size: 20px; font-size: 20px;
@ -2788,7 +2828,7 @@ dl {
margin: 20px; margin: 20px;
} }
dd { dd {
margin: 2px 20px; margin: 0;
} }
dl, dl,
dd { dd {
@ -2798,28 +2838,28 @@ div#nav table td {
vertical-align: top; vertical-align: top;
} }
table.dir th {
text-align: left; .pkg-dir {
padding: 0 10px;
} }
table.dir td { .pkg-dir table {
word-wrap: break-word; border-collapse: collapse;
vertical-align: top; border-spacing: 0;
} }
div#page.wide table.dir td.name { .pkg-name {
white-space: nowrap; padding-right: 10px;
} }
.alert { .alert {
color: #AA0000; color: #AA0000;
} }
div#heading { .top-heading {
float: left; float: left;
margin: 0 0 10px 0;
padding: 21px 0; padding: 21px 0;
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
} }
div#heading a { .top-heading a {
color: #222; color: #222;
text-decoration: none; text-decoration: none;
} }
@ -2842,11 +2882,14 @@ div#topbar > .container {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 0 20px; padding: 0 20px;
width: 900px; }
div#topbar > .container,
div#page > .container {
max-width: 950px;
} }
div#page.wide > .container, div#page.wide > .container,
div#topbar.wide > .container { div#topbar.wide > .container {
width: auto; max-width: none;
} }
div#plusone { div#plusone {
float: right; float: right;
@ -2865,7 +2908,8 @@ div#menu > a,
div#menu > input, div#menu > input,
div#learn .buttons a, div#learn .buttons a,
div.play .buttons a, div.play .buttons a,
div#blog .read a { div#blog .read a,
#menu-button {
padding: 10px; padding: 10px;
text-decoration: none; text-decoration: none;
@ -2877,11 +2921,13 @@ div#blog .read a {
} }
div#playground .buttons a, div#playground .buttons a,
div#menu > a, div#menu > a,
div#menu > input { div#menu > input,
#menu-button {
border: 1px solid #375EAB; border: 1px solid #375EAB;
} }
div#playground .buttons a, div#playground .buttons a,
div#menu > a { div#menu > a,
#menu-button {
color: white; color: white;
background: #375EAB; background: #375EAB;
} }
@ -2902,39 +2948,61 @@ div#blog .read a {
} }
div#menu { div#menu {
float: right;
min-width: 590px;
padding: 10px 0;
text-align: right; text-align: right;
padding: 10px;
white-space: nowrap;
max-height: 0;
-moz-transition: max-height .25s linear;
transition: max-height .25s linear;
width: 100%;
} }
div#menu > a { div#menu.menu-visible {
margin-right: 5px; max-height: 500px;
margin-bottom: 10px; }
div#menu > a,
#menu-button {
margin: 10px 2px;
padding: 10px; padding: 10px;
} }
div#menu > input { div#menu > input {
position: relative; position: relative;
top: 1px; top: 1px;
width: 60px; width: 140px;
background: white; background: white;
color: #222; color: #222;
box-sizing: border-box;
} }
div#menu > input.inactive { div#menu > input.inactive {
color: #999; color: #999;
} }
#menu-button {
display: none;
position: absolute;
right: 5px;
top: 0;
margin-right: 5px;
}
#menu-button-arrow {
display: inline-block;
}
.vertical-flip {
transform: rotate(-180deg);
}
div.left { div.left {
float: left; float: left;
clear: left; clear: left;
margin-right: 2.5%;
} }
div.right { div.right {
float: right; float: right;
clear: right; clear: right;
margin-left: 2.5%;
} }
div.left, div.left,
div.right { div.right {
width: 415px; width: 45%;
} }
div#learn, div#learn,
@ -2947,10 +3015,7 @@ div#about {
} }
div#about { div#about {
font-size: 20px; font-size: 20px;
} margin: 0 auto 30px;
div#about {
height: 96px;
} }
div#gopher { div#gopher {
background: url(/doc/gopher/frontpage.png) no-repeat; background: url(/doc/gopher/frontpage.png) no-repeat;
@ -3067,6 +3132,9 @@ div#learn .output .exit {
display: none; display: none;
} }
div#video {
max-width: 100%;
}
div#blog, div#blog,
div#video { div#video {
margin-top: 40px; margin-top: 40px;
@ -3290,5 +3358,134 @@ a.error {
border-top-right-radius: 4px; border-top-right-radius: 4px;
padding: 2px 4px 2px 4px; /* TRBL */ padding: 2px 4px 2px 4px; /* TRBL */
} }
`,
#heading-narrow {
display: none;
}
@media (max-width: 930px) {
#heading-wide {
display: none;
}
#heading-narrow {
display: block;
}
}
@media (max-width: 760px) {
.container .left,
.container .right {
width: auto;
float: none;
}
div#about {
max-width: 500px;
text-align: center;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
div#menu > a {
margin: 5px 0;
font-size: 14px;
}
div#menu > input {
font-size: 14px;
}
}
@media (max-width: 700px) {
body {
font-size: 15px;
}
pre,
code {
font-size: 13px;
}
div#page > .container {
padding: 0 10px;
}
div#topbar {
height: auto;
padding: 10px;
}
div#topbar > .container {
padding: 0;
}
#heading-wide {
display: block;
}
#heading-narrow {
display: none;
}
.top-heading {
float: none;
display: inline-block;
padding: 12px;
}
div#menu {
padding: 0;
min-width: 0;
text-align: left;
float: left;
}
div#menu > a,
div#menu > input {
display: block;
margin-left: 0;
margin-right: 0;
}
div#menu > input {
width: 100%;
}
#menu-button {
display: inline-block;
}
p,
pre,
ul,
ol {
margin: 10px;
}
.pkg-synopsis {
display: none;
}
img.gopher {
display: none;
}
}
@media (max-width: 480px) {
#heading-wide {
display: none;
}
#heading-narrow {
display: block;
}
}
@media print {
pre {
background: #FFF;
border: 1px solid #BBB;
white-space: pre-wrap;
}
}`,
} }

240
godoc/static/style.css
View File

@ -1,8 +1,9 @@
body { body {
margin: 0; margin: 0;
font-family: Helvetica, Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 16px; font-size: 16px;
background-color: #fff; background-color: #fff;
line-height: 1.3em;
} }
pre, pre,
code { code {
@ -10,7 +11,8 @@ code {
font-size: 14px; font-size: 14px;
} }
pre { pre {
line-height: 18px; line-height: 1.4em;
overflow-x: auto;
} }
pre .comment { pre .comment {
color: #006600; color: #006600;
@ -40,6 +42,10 @@ a:hover,
.exampleHeading .text:hover { .exampleHeading .text:hover {
text-decoration: underline; text-decoration: underline;
} }
p {
max-width: 800px;
word-wrap: break-word;
}
p, p,
pre, pre,
ul, ul,
@ -47,7 +53,7 @@ ol {
margin: 20px; margin: 20px;
} }
pre { pre {
background: #e9e9e9; background: #EFEFEF;
padding: 10px; padding: 10px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
@ -60,18 +66,24 @@ h2,
h3, h3,
h4, h4,
.rootHeading { .rootHeading {
margin: 20px 0; margin: 40px 0 20px;
padding: 0; padding: 0;
color: #375EAB; color: #375EAB;
font-weight: bold; font-weight: bold;
} }
h1 { h1 {
font-size: 24px; font-size: 28px;
line-height: 1;
} }
h2 { h2 {
font-size: 20px; font-size: 20px;
background: #E0EBF5; background: #E0EBF5;
padding: 2px 5px; padding: 8px;
line-height: 1.25;
font-weight: normal;
}
h2 a {
font-weight: bold;
} }
h3 { h3 {
font-size: 20px; font-size: 20px;
@ -92,7 +104,7 @@ dl {
margin: 20px; margin: 20px;
} }
dd { dd {
margin: 2px 20px; margin: 0;
} }
dl, dl,
dd { dd {
@ -102,28 +114,28 @@ div#nav table td {
vertical-align: top; vertical-align: top;
} }
table.dir th {
text-align: left; .pkg-dir {
padding: 0 10px;
} }
table.dir td { .pkg-dir table {
word-wrap: break-word; border-collapse: collapse;
vertical-align: top; border-spacing: 0;
} }
div#page.wide table.dir td.name { .pkg-name {
white-space: nowrap; padding-right: 10px;
} }
.alert { .alert {
color: #AA0000; color: #AA0000;
} }
div#heading { .top-heading {
float: left; float: left;
margin: 0 0 10px 0;
padding: 21px 0; padding: 21px 0;
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
} }
div#heading a { .top-heading a {
color: #222; color: #222;
text-decoration: none; text-decoration: none;
} }
@ -146,11 +158,14 @@ div#topbar > .container {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 0 20px; padding: 0 20px;
width: 900px; }
div#topbar > .container,
div#page > .container {
max-width: 950px;
} }
div#page.wide > .container, div#page.wide > .container,
div#topbar.wide > .container { div#topbar.wide > .container {
width: auto; max-width: none;
} }
div#plusone { div#plusone {
float: right; float: right;
@ -169,7 +184,8 @@ div#menu > a,
div#menu > input, div#menu > input,
div#learn .buttons a, div#learn .buttons a,
div.play .buttons a, div.play .buttons a,
div#blog .read a { div#blog .read a,
#menu-button {
padding: 10px; padding: 10px;
text-decoration: none; text-decoration: none;
@ -181,11 +197,13 @@ div#blog .read a {
} }
div#playground .buttons a, div#playground .buttons a,
div#menu > a, div#menu > a,
div#menu > input { div#menu > input,
#menu-button {
border: 1px solid #375EAB; border: 1px solid #375EAB;
} }
div#playground .buttons a, div#playground .buttons a,
div#menu > a { div#menu > a,
#menu-button {
color: white; color: white;
background: #375EAB; background: #375EAB;
} }
@ -206,39 +224,61 @@ div#blog .read a {
} }
div#menu { div#menu {
float: right;
min-width: 590px;
padding: 10px 0;
text-align: right; text-align: right;
padding: 10px;
white-space: nowrap;
max-height: 0;
-moz-transition: max-height .25s linear;
transition: max-height .25s linear;
width: 100%;
} }
div#menu > a { div#menu.menu-visible {
margin-right: 5px; max-height: 500px;
margin-bottom: 10px; }
div#menu > a,
#menu-button {
margin: 10px 2px;
padding: 10px; padding: 10px;
} }
div#menu > input { div#menu > input {
position: relative; position: relative;
top: 1px; top: 1px;
width: 60px; width: 140px;
background: white; background: white;
color: #222; color: #222;
box-sizing: border-box;
} }
div#menu > input.inactive { div#menu > input.inactive {
color: #999; color: #999;
} }
#menu-button {
display: none;
position: absolute;
right: 5px;
top: 0;
margin-right: 5px;
}
#menu-button-arrow {
display: inline-block;
}
.vertical-flip {
transform: rotate(-180deg);
}
div.left { div.left {
float: left; float: left;
clear: left; clear: left;
margin-right: 2.5%;
} }
div.right { div.right {
float: right; float: right;
clear: right; clear: right;
margin-left: 2.5%;
} }
div.left, div.left,
div.right { div.right {
width: 415px; width: 45%;
} }
div#learn, div#learn,
@ -251,10 +291,7 @@ div#about {
} }
div#about { div#about {
font-size: 20px; font-size: 20px;
} margin: 0 auto 30px;
div#about {
height: 96px;
} }
div#gopher { div#gopher {
background: url(/doc/gopher/frontpage.png) no-repeat; background: url(/doc/gopher/frontpage.png) no-repeat;
@ -371,6 +408,9 @@ div#learn .output .exit {
display: none; display: none;
} }
div#video {
max-width: 100%;
}
div#blog, div#blog,
div#video { div#video {
margin-top: 40px; margin-top: 40px;
@ -594,3 +634,133 @@ a.error {
border-top-right-radius: 4px; border-top-right-radius: 4px;
padding: 2px 4px 2px 4px; /* TRBL */ padding: 2px 4px 2px 4px; /* TRBL */
} }
#heading-narrow {
display: none;
}
@media (max-width: 930px) {
#heading-wide {
display: none;
}
#heading-narrow {
display: block;
}
}
@media (max-width: 760px) {
.container .left,
.container .right {
width: auto;
float: none;
}
div#about {
max-width: 500px;
text-align: center;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
div#menu > a {
margin: 5px 0;
font-size: 14px;
}
div#menu > input {
font-size: 14px;
}
}
@media (max-width: 700px) {
body {
font-size: 15px;
}
pre,
code {
font-size: 13px;
}
div#page > .container {
padding: 0 10px;
}
div#topbar {
height: auto;
padding: 10px;
}
div#topbar > .container {
padding: 0;
}
#heading-wide {
display: block;
}
#heading-narrow {
display: none;
}
.top-heading {
float: none;
display: inline-block;
padding: 12px;
}
div#menu {
padding: 0;
min-width: 0;
text-align: left;
float: left;
}
div#menu > a,
div#menu > input {
display: block;
margin-left: 0;
margin-right: 0;
}
div#menu > input {
width: 100%;
}
#menu-button {
display: inline-block;
}
p,
pre,
ul,
ol {
margin: 10px;
}
.pkg-synopsis {
display: none;
}
img.gopher {
display: none;
}
}
@media (max-width: 480px) {
#heading-wide {
display: none;
}
#heading-narrow {
display: block;
}
}
@media print {
pre {
background: #FFF;
border: 1px solid #BBB;
white-space: pre-wrap;
}
}