[docs] Move styles to own file. Fix table-of-contents positioning when viewed on <767px screens.

The fixed positioning of the ToC needs to be overridden with static, so that the ToC falls back into the flow of content and is sized correctly. Also, this prevents the actual page content from riding up behind the ToC and being obscured.
This commit is contained in:
Alec Perkins 2012-09-07 13:05:44 -04:00
parent 17654a8b54
commit 6d7d70c1c0
2 changed files with 62 additions and 55 deletions

46
docs/static/css/drf-styles.css vendored Normal file
View File

@ -0,0 +1,46 @@
body {
padding-top: 60px;
padding-bottom: 40px;
}
/* Set the table of contents to static so it flows back into the content when
viewed on tablets and smaller. */
@media (max-width: 767px) {
#table-of-contents {
position: static;
}
}
.nav-list li.main {
font-weight: bold;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left: none;
}
blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -10px;
top: -20px;
color: #7a7a7a;
}
blockquote p:last-child {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

View File

@ -8,47 +8,8 @@
<!-- Le styles -->
<link href="{{ base_url }}/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.nav-list li.main {
font-weight: bold;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left: none;
}
blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -10px;
top: -20px;
color: #7a7a7a;
}
blockquote p:last-child {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
</style>
<link href="{{ base_url }}/css/bootstrap-responsive.css" rel="stylesheet">
<link href="{{ base_url }}/css/drf-styles.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
@ -108,14 +69,14 @@ margin-top: 5px;
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Version: 2.0.0 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Trunk</a></li>
<li><a href="#">2.0.0</a></li>
</ul>
</li>
</ul>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Version: 2.0.0 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Trunk</a></li>
<li><a href="#">2.0.0</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
@ -123,16 +84,16 @@ margin-top: 5px;
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well affix span3">
<ul class="nav nav-list side-nav">
{{ toc }}
</ul>
</div>
<div class="span3">
<div id="table-of-contents" class="well affix span3">
<ul class="nav nav-list side-nav">
{{ toc }}
</ul>
</div>
</div>
<div class="span9">
{{ content }}
{{ content }}
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->