+/*
+ * Bootstrap Documentation
+ * Special styles for presenting Bootstrap's documentation and code examples.
+ */
-/* Docs =================================================== */
+/* Key scaffolding
+-------------------------------------------------- */
+
+body {
+ position: relative; /* For scrollyspy */
+}
+
+/* */
body > .container,
.footer .container {
padding-left: 15px;
padding-right: 15px;
}
+
+
+/* Sections
+-------------------------------------------------- */
+
+/* Padding for in-page bookmarks */
+section {
+ padding-top: 30px;
+}
+
+/* Few stylistic typography tweaks */
+section > .page-header,
+section > .lead {
+ color: #5a5a5a;
+}
+section > ul li {
+ margin-bottom: 5px;
+}
+
+
+
/* Jumbotrons
-------------------------------------------------- */
-/* Base class
-------------------------- */
+/* Base class */
.bs-docs-jumbotron {
position: relative;
margin-bottom: 20px;
background-color: #b94a48;
}
.bs-docs-jumbotron h1 {
- margin: 0;
+ font-size: 50px;
}
-.bs-docs-jumbotron p {
- margin-bottom: 0;
+
+/* Link styles (used on .masthead-links as well) */
+.bs-docs-jumbotron a {
+ color: #fff;
+ color: rgba(255,255,255,.5);
+ -webkit-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ transition: all .2s ease-in-out;
+}
+.bs-docs-jumbotron a:hover {
+ color: #fff;
}
+/* Download button */
+.bs-docs-jumbotron .btn {
+ padding: 18px 24px;
+ font-size: 21px;
+ color: #b94a48; /* redeclare to override the `.jumbotron a` */
+ background-color: #fff;
+}
+.bs-docs-jumbotron .btn,
+.bs-docs-jumbotron .btn:hover,
+.bs-docs-jumbotron .btn:active {
+ color: #b94a48; /* redeclare to override the `.jumbotron a` */
+ background-color: #fff;
+ border-color: #fff;
+}
+/* Masthead (docs home)
+------------------------- */
+.masthead {
+ /*padding: 70px 0 80px;*/
+ color: #fff;
+ text-align: center;
+}
+.masthead h1 {
+ /*font-size: 120px;*/
+ /*line-height: 1;*/
+ /*letter-spacing: -2px;*/
+}
+.masthead p {
+ /*font-size: 40px;
+ font-weight: 200;
+ line-height: 1.25;*/
+}
+/* Textual links in masthead */
+.masthead-links {
+ margin: 20px 0;
+ list-style: none;
+}
+.masthead-links li {
+ display: inline;
+ padding: 0 10px;
+ color: rgba(255,255,255,.25);
+}
-.bs-docs-example {
- border: 1px solid #ddd;
- padding: 14px;
- margin-bottom: -1px;
+/* Subhead (other pages)
+------------------------- */
+.subhead {
+ text-align: left;
}
-.bs-docs-example p:last-child,
-.bs-docs-example ul:last-child,
-.bs-docs-example ol:last-child {
- margin-bottom: 0;
+.subhead h1 {
+ font-size: 60px;
}
-.bs-docs-example + .prettyprint {
- margin-top: 0;
+.subhead p {
+ margin-bottom: 20px;
}
-.prettyprint .linenums {
- margin-left: 0;
+.subhead .navbar {
+ display: none;
}
+/* Marketing section of Overview
+-------------------------------------------------- */
+
+.marketing {
+ text-align: center;
+ color: #5a5a5a;
+}
+.marketing h1 {
+ margin: 60px 0 10px;
+ line-height: 1;
+}
+.marketing h2 {
+ margin-bottom: 5px;
+}
+.marketing p {
+ font-size: 16px;
+ line-height: 1.4;
+}
+.marketing .marketing-byline {
+ margin-bottom: 40px;
+ font-size: 21px;
+ font-weight: 300;
+ line-height: 1.25;
+ color: #999;
+}
+.marketing-img {
+ display: block;
+ margin: 30px auto 10px;
+ max-height: 145px;
+}
+
+
+/* Special grid styles
+-------------------------------------------------- */
.show-grid [class^="span"] {
padding-top: 10px;
+/* Bootstrap code examples
+-------------------------------------------------- */
+
+/* Base class */
+.bs-docs-example {
+ position: relative;
+ padding: 14px;
+ margin-bottom: -1px;
+ border: 1px solid #ddd;
+}
+/* Echo out a label for the example */
+.bs-docs-example:after {
+ content: "Example";
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ padding: 3px 7px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #9da0a4;
+ background-color: #f5f5f5;
+ border: 1px solid #ddd;
+}
+
+/* Tweak display of the examples */
+.bs-docs-example + .prettyprint {
+ margin-top: 0;
+}
+.prettyprint .linenums {
+ margin-left: 0;
+}
+
+/* Tweak content of examples for optimum awesome */
+.bs-docs-example p:last-child,
+.bs-docs-example ul:last-child,
+.bs-docs-example ol:last-child {
+ margin-bottom: 0;
+}
+
+
/* Footer
-------------------------------------------------- */
<div class="bs-docs-jumbotron masthead">
<div class="container">
<h1>Bootstrap</h1>
- <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
+ <p class="lead">Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<p>
<a href="assets/bootstrap.zip" class="btn btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0']);"{{/production}}>Download Bootstrap</a>
</p>
</div>
</div>
- <hr class="soften">
-
<h1>Built with Bootstrap.</h1>
<p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./getting-started.html#examples">browse the examples</a>.</p>
<div class="row example-sites">
margin-bottom: @line-height-base;
font-size: @font-size-base * 1.5;
font-weight: 200;
- line-height: @line-height-base * 1.5;
+ line-height: 1.25;
}
margin-bottom: @line-height-base / 2;
}
-h1 { font-size: @font-size-base * 2.75; } // ~38px
-h2 { font-size: @font-size-base * 2.25; } // ~32px
-h3 { font-size: @font-size-base * 1.75; } // ~24px
-h4 { font-size: @font-size-base * 1.25; } // ~18px
-h5 { font-size: @font-size-base; }
-h6 { font-size: @font-size-base * 0.85; } // ~12px
+h1 { font-size: @font-size-base * 2.75; font-size: 4rem; } // ~38px
+h2 { font-size: @font-size-base * 2.25; font-size: 3rem; } // ~32px
+h3 { font-size: @font-size-base * 1.75; font-size: 2.5rem; } // ~24px
+h4 { font-size: @font-size-base * 1.25; font-size: 2rem; } // ~18px
+h5 { font-size: @font-size-base; font-size: 1.6rem; }
+h6 { font-size: @font-size-base * 0.85; font-size: 1.2rem; } // ~12px
h1 small { font-size: @font-size-base * 1.75; } // ~24px
h2 small { font-size: @font-size-base * 1.25; } // ~18px