make rustdoc more responsive

* move some sidebar contents to a title bar when small
* inline description toggle when small
* make out-of-band and in-band content share space, rather than float and clash
* compress wording of out-of-band content to avoid line-wrap as much as possible
This commit is contained in:
Alexis Beingessner 2014-08-02 20:58:41 -04:00
parent e5df5f5606
commit dd437ee6ed
2 changed files with 79 additions and 28 deletions

View file

@ -247,8 +247,19 @@ nav.sub {
.docblock h3, .docblock h4, .docblock h5 { font-size: 1em; }
.content .out-of-band {
float: right;
font-size: 23px;
width: 40%;
margin: 0px;
padding: 0px;
text-align: right;
display: inline-block;
}
.content .in-band {
width: 60%;
margin: 0px;
padding: 0px;
display: inline-block;
}
.content table {
@ -277,8 +288,8 @@ nav.sub {
}
.content .multi-column li { width: 100%; display: inline-block; }
.content .method {
font-size: 1em;
.content .method {
font-size: 1em;
position: relative;
}
.content .methods .docblock { margin-left: 40px; }
@ -450,8 +461,8 @@ pre.rust { position: relative; }
top: 0;
right: 10px;
font-size: 150%;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.methods .section-header {
@ -465,22 +476,6 @@ pre.rust { position: relative; }
content: '\2002\00a7\2002';
}
/* Media Queries */
@media (max-width: 700px) {
.sidebar {
display: none;
}
.content {
margin-left: 0px;
}
nav.sub {
margin: 0 auto;
}
}
.collapse-toggle {
font-weight: 100;
position: absolute;
@ -513,3 +508,59 @@ pre.rust { position: relative; }
color: #999;
font-style: italic;
}
/* Media Queries */
@media (max-width: 700px) {
body {
padding-top: 0px;
}
.sidebar {
height: 40px;
min-height: 40px;
width: 100%;
margin: 0px;
padding: 0px;
position: static;
}
.sidebar .location {
float: left;
margin: 0px;
padding: 5px;
width: 60%;
background: inherit;
text-align: left;
font-size: 24px;
}
.sidebar img {
width: 35px;
margin-top: 5px;
margin-bottom: 0px;
float: left;
}
nav.sub {
margin: 0 auto;
}
.sidebar .block {
display: none;
}
.content {
margin-left: 0px;
}
.toggle-wrapper > .collapse-toggle {
left: 0px;
}
.toggle-wrapper {
height: 1.5em;
}
}