diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d425637465..e8527cd35a 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -337,7 +337,7 @@ p { margin-bottom: 20px; font-size: 21px; font-weight: 200; - line-height: 30px; + line-height: 1.25; } small { @@ -440,26 +440,32 @@ h6 { h1 { font-size: 38.5px; + font-size: 4rem; } h2 { font-size: 31.5px; + font-size: 3rem; } h3 { font-size: 24.5px; + font-size: 2.5rem; } h4 { font-size: 17.5px; + font-size: 2rem; } h5 { font-size: 14px; + font-size: 1.6rem; } h6 { font-size: 11.9px; + font-size: 1.2rem; } h1 small { @@ -729,7 +735,7 @@ pre code { padding: 6px 12px; margin-bottom: 0; font-size: 14px; - font-weight: bold; + font-weight: 500; line-height: 20px; text-align: center; vertical-align: middle; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 3652cbf334..002735b6a6 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -1,18 +1,49 @@ +/* + * 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; @@ -21,35 +52,117 @@ body > .container, 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); +} + +/* Subhead (other pages) +------------------------- */ +.subhead { + text-align: left; +} +.subhead h1 { + font-size: 60px; +} +.subhead p { + margin-bottom: 20px; +} +.subhead .navbar { + display: none; } +/* Marketing section of Overview +-------------------------------------------------- */ -.bs-docs-example { - border: 1px solid #ddd; - padding: 14px; - margin-bottom: -1px; +.marketing { + text-align: center; + color: #5a5a5a; } -.bs-docs-example p:last-child, -.bs-docs-example ul:last-child, -.bs-docs-example ol:last-child { - margin-bottom: 0; +.marketing h1 { + margin: 60px 0 10px; + line-height: 1; } -.bs-docs-example + .prettyprint { - margin-top: 0; +.marketing h2 { + margin-bottom: 5px; } -.prettyprint .linenums { - margin-left: 0; +.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; @@ -61,6 +174,46 @@ body > .container, +/* 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 -------------------------------------------------- */ diff --git a/docs/index.html b/docs/index.html index 4f108a89aa..f7e4be02f9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -69,7 +69,7 @@

Bootstrap

-

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

+

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Download Bootstrap

@@ -110,8 +110,6 @@
-
-

Built with Bootstrap.

For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.

diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 714ffc5b0b..6de847cc31 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -1,7 +1,7 @@

Bootstrap

-

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

+

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Download Bootstrap

@@ -42,8 +42,6 @@
-
-

Built with Bootstrap.

For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.

diff --git a/less/buttons.less b/less/buttons.less index 4295d2dcf8..6c1541a287 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -12,7 +12,7 @@ padding: 6px 12px; margin-bottom: 0; // For input.btn font-size: @font-size-base; - font-weight: bold; + font-weight: 500; line-height: @line-height-base; text-align: center; vertical-align: middle; diff --git a/less/type.less b/less/type.less index 7404a6c78c..d5d1d8866f 100644 --- a/less/type.less +++ b/less/type.less @@ -13,7 +13,7 @@ p { 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; } @@ -74,12 +74,12 @@ h6 { 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