1
0
mirror of https://github.com/golang/go synced 2024-11-19 06:54:39 -07:00
go/godoc/static/style.css
Ben Haines a567bbf739 godoc: avoid skipping heading level in package docs
The heading of the #pkg-index section of package documentation pages
uses an h2 heading but its 'Examples' and 'Package files' subsections
use h4 headings, skipping the h3 level.

This change switches the h4s to h3s and adds styling to preserve the
current font-size with the new heading level.

For golang/go#22171

Change-Id: Ifd2cacab22c1e82fd6f061b9322523fa5859a80f
Reviewed-on: https://go-review.googlesource.com/69171
Reviewed-by: jimmy frasche <soapboxcicero@gmail.com>
Reviewed-by: Andrew Bonventre <andybons@golang.org>
2017-10-09 17:51:41 +00:00

806 lines
12 KiB
CSS

body {
margin: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #fff;
line-height: 1.3em;
}
pre,
code {
font-family: Menlo, monospace;
font-size: 14px;
}
pre {
line-height: 1.4em;
overflow-x: auto;
}
pre .comment {
color: #006600;
}
pre .highlight,
pre .highlight-comment,
pre .selection-highlight,
pre .selection-highlight-comment {
background: #FFFF00;
}
pre .selection,
pre .selection-comment {
background: #FF9632;
}
pre .ln {
color: #999;
background: #efefef;
}
.ln {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ln::before {
/* Inserting the line numbers as a ::before pseudo-element avoids making
* them selectable; it's the trick Github uses as well. */
content: attr(data-content);
}
body {
color: #222;
}
a,
.exampleHeading .text {
color: #375EAB;
text-decoration: none;
}
a:hover,
.exampleHeading .text:hover {
text-decoration: underline;
}
.article a {
text-decoration: underline;
}
.article .title a {
text-decoration: none;
}
.permalink {
display: none;
}
:hover > .permalink {
display: inline;
}
p, li {
max-width: 800px;
word-wrap: break-word;
}
p,
pre,
ul,
ol {
margin: 20px;
}
pre {
background: #EFEFEF;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h1,
h2,
h3,
h4,
.rootHeading {
margin: 20px 0 20px;
padding: 0;
color: #375EAB;
font-weight: bold;
}
h1 {
font-size: 28px;
line-height: 1;
}
h1 .text-muted {
color:#777;
}
h2 {
font-size: 20px;
background: #E0EBF5;
padding: 8px;
line-height: 1.25;
font-weight: normal;
}
h2 a {
font-weight: bold;
}
h3 {
font-size: 20px;
}
h3,
h4 {
margin: 20px 5px;
}
h4 {
font-size: 16px;
}
.rootHeading {
font-size: 20px;
margin: 0;
}
dl {
margin: 20px;
}
dd {
margin: 0 0 0 20px;
}
dl,
dd {
font-size: 14px;
}
div#nav table td {
vertical-align: top;
}
#pkg-index h3 {
font-size: 16px;
}
.pkg-dir {
padding: 0 10px;
}
.pkg-dir table {
border-collapse: collapse;
border-spacing: 0;
}
.pkg-name {
padding-right: 10px;
}
.alert {
color: #AA0000;
}
.top-heading {
float: left;
padding: 21px 0;
font-size: 20px;
font-weight: normal;
}
.top-heading a {
color: #222;
text-decoration: none;
}
div#topbar {
background: #E0EBF5;
height: 64px;
overflow: hidden;
}
body {
text-align: center;
}
div#page {
width: 100%;
}
div#page > .container,
div#topbar > .container {
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
}
div#topbar > .container,
div#page > .container {
max-width: 950px;
}
div#page.wide > .container,
div#topbar.wide > .container {
max-width: none;
}
div#plusone {
float: right;
clear: right;
margin-top: 5px;
}
div#footer {
text-align: center;
color: #666;
font-size: 14px;
margin: 40px 0;
}
div#menu > a,
div#menu > input,
div#learn .buttons a,
div.play .buttons a,
div#blog .read a,
#menu-button {
padding: 10px;
text-decoration: none;
font-size: 16px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div#playground .buttons a,
div#menu > a,
div#menu > input,
#menu-button {
border: 1px solid #375EAB;
}
div#playground .buttons a,
div#menu > a,
#menu-button {
color: white;
background: #375EAB;
}
#playgroundButton.active {
background: white;
color: #375EAB;
}
a#start,
div#learn .buttons a,
div.play .buttons a,
div#blog .read a {
color: #222;
border: 1px solid #375EAB;
background: #E0EBF5;
}
.download {
width: 150px;
}
div#menu {
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.menu-visible {
max-height: 500px;
}
div#menu > a,
#menu-button {
margin: 10px 2px;
padding: 10px;
}
div#menu > input {
position: relative;
top: 1px;
width: 140px;
background: white;
color: #222;
box-sizing: border-box;
}
div#menu > input.inactive {
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 {
float: left;
clear: left;
margin-right: 2.5%;
}
div.right {
float: right;
clear: right;
margin-left: 2.5%;
}
div.left,
div.right {
width: 45%;
}
div#learn,
div#about {
padding-top: 20px;
}
div#learn h2,
div#about {
margin: 0;
}
div#about {
font-size: 20px;
margin: 0 auto 30px;
}
div#gopher {
background: url(/doc/gopher/frontpage.png) no-repeat;
background-position: center top;
height: 155px;
}
a#start {
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
a#start .big {
display: block;
font-weight: bold;
font-size: 20px;
}
a#start .desc {
display: block;
font-size: 14px;
font-weight: normal;
margin-top: 5px;
}
div#learn .popout {
float: right;
display: block;
cursor: pointer;
font-size: 12px;
background: url(/doc/share.png) no-repeat;
background-position: right top;
padding: 5px 27px;
}
div#learn pre,
div#learn textarea {
padding: 0;
margin: 0;
font-family: Menlo, monospace;
font-size: 14px;
}
div#learn .input {
padding: 10px;
margin-top: 10px;
height: 150px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
div#learn .input textarea {
width: 100%;
height: 100%;
border: none;
outline: none;
resize: none;
}
div#learn .output {
border-top: none !important;
padding: 10px;
height: 59px;
overflow: auto;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
div#learn .output pre {
padding: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
div#learn .input,
div#learn .input textarea,
div#learn .output,
div#learn .output pre {
background: #FFFFD8;
}
div#learn .input,
div#learn .output {
border: 1px solid #375EAB;
}
div#learn .buttons {
float: right;
padding: 20px 0 10px 0;
text-align: right;
}
div#learn .buttons a {
height: 16px;
margin-left: 5px;
padding: 10px;
}
div#learn .toys {
margin-top: 8px;
}
div#learn .toys select {
border: 1px solid #375EAB;
margin: 0;
}
div#learn .output .exit {
display: none;
}
div#video {
max-width: 100%;
}
div#blog,
div#video {
margin-top: 40px;
}
div#blog > a,
div#blog > div,
div#blog > h2,
div#video > a,
div#video > div,
div#video > h2 {
margin-bottom: 10px;
}
div#blog .title,
div#video .title {
display: block;
font-size: 20px;
}
div#blog .when {
color: #666;
font-size: 14px;
}
div#blog .read {
text-align: right;
}
.toggleButton { cursor: pointer; }
.toggle > .collapsed { display: block; }
.toggle > .expanded { display: none; }
.toggleVisible > .collapsed { display: none; }
.toggleVisible > .expanded { display: block; }
table.codetable { margin-left: auto; margin-right: auto; border-style: none; }
table.codetable td { padding-right: 10px; }
hr { border-style: none; border-top: 1px solid black; }
img.gopher {
float: right;
margin-left: 10px;
margin-bottom: 10px;
z-index: -1;
}
h2 { clear: right; }
/* example and drop-down playground */
div.play {
padding: 0 20px 40px 20px;
}
div.play pre,
div.play textarea,
div.play .lines {
padding: 0;
margin: 0;
font-family: Menlo, monospace;
font-size: 14px;
}
div.play .input {
padding: 10px;
margin-top: 10px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
overflow: hidden;
}
div.play .input textarea {
width: 100%;
height: 100%;
border: none;
outline: none;
resize: none;
overflow: hidden;
}
div#playground .input textarea {
overflow: auto;
resize: auto;
}
div.play .output {
border-top: none !important;
padding: 10px;
max-height: 200px;
overflow: auto;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
div.play .output pre {
padding: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
div.play .input,
div.play .input textarea,
div.play .output,
div.play .output pre {
background: #FFFFD8;
}
div.play .input,
div.play .output {
border: 1px solid #375EAB;
}
div.play .buttons {
float: right;
padding: 20px 0 10px 0;
text-align: right;
}
div.play .buttons a {
height: 16px;
margin-left: 5px;
padding: 10px;
cursor: pointer;
}
.output .stderr {
color: #933;
}
.output .system {
color: #999;
}
/* drop-down playground */
#playgroundButton,
div#playground {
/* start hidden; revealed by javascript */
display: none;
}
div#playground {
position: absolute;
top: 63px;
right: 20px;
padding: 0 10px 10px 10px;
z-index: 1;
text-align: left;
background: #E0EBF5;
border: 1px solid #B0BBC5;
border-top: none;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
div#playground .code {
width: 520px;
height: 200px;
}
div#playground .output {
height: 100px;
}
/* Inline runnable snippets (play.js/initPlayground) */
#content .code pre, #content .playground pre, #content .output pre {
margin: 0;
padding: 0;
background: none;
border: none;
outline: 0px solid transparent;
overflow: auto;
}
#content .playground .number, #content .code .number {
color: #999;
}
#content .code, #content .playground, #content .output {
width: auto;
margin: 20px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#content .code, #content .playground {
background: #e9e9e9;
}
#content .output {
background: #202020;
}
#content .output .stdout, #content .output pre {
color: #e6e6e6;
}
#content .output .stderr, #content .output .error {
color: rgb(244, 74, 63);
}
#content .output .system, #content .output .exit {
color: rgb(255, 209, 77)
}
#content .buttons {
position: relative;
float: right;
top: -50px;
right: 30px;
}
#content .output .buttons {
top: -60px;
right: 0;
height: 0;
}
#content .buttons .kill {
display: none;
visibility: hidden;
}
a.error {
font-weight: bold;
color: white;
background-color: darkred;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 2px 4px 2px 4px; /* TRBL */
}
#heading-narrow {
display: none;
}
.downloading {
background: #F9F9BE;
padding: 10px;
text-align: center;
border-radius: 5px;
}
@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;
}
}