diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/docs.css | 99 | ||||
| -rw-r--r-- | docs/index.html | 57 |
2 files changed, 104 insertions, 52 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index fb7482edc..01b6f3cd7 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -9,7 +9,7 @@ -------------------------------------------------- */ body { position: relative; - padding-top: 40px; + padding-top: 100px; background-color: #fff; } section { @@ -19,65 +19,88 @@ section > .row { margin-bottom: 10px; } +/* Tweak topbar brand link to be super sleek +-------------------------------------------------- */ +.navbar .brand { + float: right; + font-weight: bold; + color: #000; + text-shadow: 0 1px 0 rgba(255,255,255,.1); +} +.navbar .brand:hover { + text-decoration: none; +} /* Jumbotrons -------------------------------------------------- */ -.jumbotron, -.jumbotron .inner { - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; -} .jumbotron { - margin-bottom: 40px; - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); - -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); - box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); -} -.jumbotron .inner { - background: transparent url(../img/grid-18px.png) top center; - padding: 36px 60px; - -webkit-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); - -moz-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); - box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); + position: relative; + padding-bottom: 58px; + margin-bottom: 50px; + border-bottom: 2px solid #eee; } .jumbotron h1, .jumbotron p { - margin-bottom: 9px; - color: #fff; - text-shadow: 0 1px 1px rgba(0,0,0,.3); + margin-bottom: 10px; + text-shadow: 0 1px 0 #fff; } .jumbotron h1 { - font-size: 54px; + font-size: 90px; line-height: 1; - text-shadow: 0 1px 2px rgba(0,0,0,.5); + margin-right: 40%; + letter-spacing: -1px; } .jumbotron p { font-weight: 300; - margin-right: 25%; + margin-right: 32%; } .jumbotron .lead { - font-size: 20px; - line-height: 27px; + margin-bottom: 20px; + font-size: 25px; + line-height: 35px; } .jumbotron p a { - color: #fff; font-weight: bold; } +.jumbotron .btn { + font-size: 20px; + padding: 12px 24px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} +.benefits { + width: 250px; + position: absolute; + right: 0; + bottom: 60px; +} +.benefits ul { + list-style: none; + margin: 0; +} +.benefits li { + font-size: 16px; + font-weight: 300; + line-height: 40px; + color: #555; +} +.benefits li + li { + border-top: 1px solid #f5f5f5; +} +.benefits h4 { + color: #555; +} +.benefits span { + position: relative; + top: -2px; + padding-right: 5px; + color: #999; +} + /* Specific jumbotrons ------------------------- */ -/* main docs page */ -.masthead { - background-color: #004d9f; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); - background-image: -webkit-linear-gradient(#048ccd, #004d9f); - background-image: -moz-linear-gradient(#048ccd, #004d9f); - background-image: -o-linear-gradient(top, #048ccd, #004d9f); - background-image: -khtml-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#048ccd', endColorstr='#004d9f', GradientType=0); /* IE8 and down */ -} /* supporting docs pages */ .subhead { background-color: #767d80; diff --git a/docs/index.html b/docs/index.html index b9004e6bf..f7818d7f5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,16 +16,6 @@ <link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> - <!-- Le javascript --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="assets/js/application.js"></script> - <!-- Le fav and touch icons --> <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico"> <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> @@ -49,6 +39,7 @@ <ul class="dropdown-menu"> <li><a href="#grid-system">Grid</a></li> <li><a href="#layouts">Layouts</a></li> + <li><a href="#responsive">Resposive</a></li> </ul> </li> <li class="dropdown"> @@ -62,14 +53,17 @@ <li class="dropdown"> <a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a> <ul class="dropdown-menu"> - <li><a href="#media">Media</a></li> <li><a href="#navigation">Navigation</a></li> + <li><a href="#media">Media</a></li> <li><a href="#alerts">Alerts</a></li> <li><a href="#popovers">Popovers</a></li> + <li><a href="#autocomplete">Autocomplete</a></li> + <li><a href="#accordion">Accordion</a></li> + <li><a href="#datepicker">Datepicker</a></li> </ul> </li> <li><a href="#javascript">Javascript</a></li> - <li><a href="#less">Less</a></li> + <li><a href="#less">Using Less</a></li> </ul> </div> </div> @@ -82,10 +76,21 @@ ================================================== --> <header class="jumbotron masthead"> <div class="inner"> + <div class="benefits pull-right"> + <h4>Feature highlights</h4> + <ul> + <li><span>×</span> Built on LESS</li> + <li><span>×</span> Complete styleguide</li> + <li><span>×</span> Fully responsive design</li> + <li><span>×</span> Small footprint (7kb gzipped)</li> + <li><span>×</span> Support for IE7 and up</li> + <li><span>×</span> Custom jQuery plugins</li> + <li><span>×</span> Dozens of components</li> + </ul> + </div> <h1>Bootstrap, from Twitter</h1> - <a href="#" class="btn btn-large pull-right">Download on GitHub</a> <p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> - <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed with modern browsers in mind.</p> + <a href="#" class="btn primary btn-large">Download on GitHub</a> </div> </header> @@ -164,6 +169,19 @@ </li> </ul> +<!-- + Quick links: + GitHub + Twitter + Roadmap + Changelog + + Authors: + @mdo + @fat + + --> + </div><!-- /#overview --> @@ -1964,5 +1982,16 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </div><!-- /container --> + + <!-- Le javascript --> + <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="assets/js/application.js"></script> + </body> </html> |