1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00

updates to type scale

This commit is contained in:
Mark Otto 2012-07-05 15:11:54 -07:00
parent c6ee96c025
commit 3c07eaa251
19 changed files with 201 additions and 265 deletions

View file

@ -830,7 +830,7 @@
} }
.page-header h1 small { .page-header h1 small {
display: block; display: block;
line-height: 18px; line-height: 20px;
} }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
@ -882,10 +882,10 @@
position: static; position: static;
} }
.navbar-fixed-top { .navbar-fixed-top {
margin-bottom: 18px; margin-bottom: 20px;
} }
.navbar-fixed-bottom { .navbar-fixed-bottom {
margin-top: 18px; margin-top: 20px;
} }
.navbar-fixed-top .navbar-inner, .navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner { .navbar-fixed-bottom .navbar-inner {
@ -905,7 +905,7 @@
} }
.nav-collapse .nav { .nav-collapse .nav {
float: none; float: none;
margin: 0 0 9px; margin: 0 0 10px;
} }
.nav-collapse .nav > li { .nav-collapse .nav > li {
float: none; float: none;
@ -975,8 +975,8 @@
.nav-collapse .navbar-form, .nav-collapse .navbar-form,
.nav-collapse .navbar-search { .nav-collapse .navbar-search {
float: none; float: none;
padding: 9px 15px; padding: 10px 15px;
margin: 9px 0; margin: 10px 0;
border-top: 1px solid #111111; border-top: 1px solid #111111;
border-bottom: 1px solid #111111; border-bottom: 1px solid #111111;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);

View file

@ -158,8 +158,8 @@ textarea {
body { body {
margin: 0; margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px; font-size: 14px;
line-height: 18px; line-height: 20px;
color: #333333; color: #333333;
background-color: #ffffff; background-color: #ffffff;
} }
@ -544,19 +544,19 @@ a:hover {
} }
p { p {
margin: 0 0 9px; margin: 0 0 10px;
} }
p small { p small {
font-size: 11px; font-size: 12px;
color: #999999; color: #999999;
} }
.lead { .lead {
margin-bottom: 18px; margin-bottom: 20px;
font-size: 20px; font-size: 20px;
font-weight: 200; font-weight: 200;
line-height: 27px; line-height: 30px;
} }
h1, h1,
@ -565,9 +565,10 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 0; margin: 10px 0;
font-family: inherit; font-family: inherit;
font-weight: bold; font-weight: bold;
line-height: 1;
color: inherit; color: inherit;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
} }
@ -583,70 +584,60 @@ h6 small {
} }
h1 { h1 {
font-size: 30px; font-size: 36px;
line-height: 36px; line-height: 40px;
}
h1 small {
font-size: 18px;
} }
h2 { h2 {
font-size: 30px;
line-height: 40px;
}
h3 {
font-size: 24px;
line-height: 40px;
}
h4 {
font-size: 18px;
line-height: 20px;
}
h5 {
font-size: 14px;
line-height: 20px;
}
h6 {
font-size: 12px;
line-height: 20px;
}
h1 small {
font-size: 24px; font-size: 24px;
line-height: 36px;
} }
h2 small { h2 small {
font-size: 18px; font-size: 18px;
} }
h3 {
font-size: 18px;
line-height: 27px;
}
h3 small { h3 small {
font-size: 14px; font-size: 14px;
} }
h4, h4 small {
h5,
h6 {
line-height: 18px;
}
h4 {
font-size: 14px; font-size: 14px;
} }
h4 small {
font-size: 12px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 11px;
color: #999999;
text-transform: uppercase;
}
.page-header { .page-header {
padding-bottom: 17px; margin: 20px 0 19px;
margin: 18px 0;
border-bottom: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
} }
.page-header h1 {
line-height: 1;
}
ul, ul,
ol { ol {
padding: 0; padding: 0;
margin: 0 0 9px 25px; margin: 0 0 10px 25px;
} }
ul ul, ul ul,
@ -665,7 +656,7 @@ ol {
} }
li { li {
line-height: 18px; line-height: 20px;
} }
ul.unstyled, ul.unstyled,
@ -675,12 +666,12 @@ ol.unstyled {
} }
dl { dl {
margin-bottom: 18px; margin-bottom: 20px;
} }
dt, dt,
dd { dd {
line-height: 18px; line-height: 20px;
} }
dt { dt {
@ -688,7 +679,7 @@ dt {
} }
dd { dd {
margin-left: 9px; margin-left: 10px;
} }
.dl-horizontal dt { .dl-horizontal dt {
@ -706,7 +697,7 @@ dd {
} }
hr { hr {
margin: 18px 0; margin: 20px 0;
border: 0; border: 0;
border-top: 1px solid #eeeeee; border-top: 1px solid #eeeeee;
border-bottom: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
@ -736,7 +727,7 @@ abbr.initialism {
blockquote { blockquote {
padding: 0 0 0 15px; padding: 0 0 0 15px;
margin: 0 0 18px; margin: 0 0 20px;
border-left: 5px solid #eeeeee; border-left: 5px solid #eeeeee;
} }
@ -744,12 +735,12 @@ blockquote p {
margin-bottom: 0; margin-bottom: 0;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
line-height: 22.5px; line-height: 25px;
} }
blockquote small { blockquote small {
display: block; display: block;
line-height: 18px; line-height: 20px;
color: #999999; color: #999999;
} }
@ -779,9 +770,9 @@ blockquote:after {
address { address {
display: block; display: block;
margin-bottom: 18px; margin-bottom: 20px;
font-style: normal; font-style: normal;
line-height: 18px; line-height: 20px;
} }
small { small {
@ -796,7 +787,7 @@ code,
pre { pre {
padding: 0 3px 2px; padding: 0 3px 2px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 12px; font-size: 13px;
color: #333333; color: #333333;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@ -812,10 +803,10 @@ code {
pre { pre {
display: block; display: block;
padding: 8.5px; padding: 9.5px;
margin: 0 0 9px; margin: 0 0 10px;
font-size: 12.025px; font-size: 12.950000000000001px;
line-height: 18px; line-height: 20px;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
white-space: pre; white-space: pre;
@ -829,7 +820,7 @@ pre {
} }
pre.prettyprint { pre.prettyprint {
margin-bottom: 18px; margin-bottom: 20px;
} }
pre code { pre code {
@ -845,7 +836,7 @@ pre code {
} }
form { form {
margin: 0 0 18px; margin: 0 0 20px;
} }
fieldset { fieldset {
@ -858,16 +849,16 @@ legend {
display: block; display: block;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: 27px; margin-bottom: 30px;
font-size: 19.5px; font-size: 21px;
line-height: 36px; line-height: 40px;
color: #333333; color: #333333;
border: 0; border: 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
legend small { legend small {
font-size: 13.5px; font-size: 15px;
color: #999999; color: #999999;
} }
@ -876,9 +867,9 @@ input,
button, button,
select, select,
textarea { textarea {
font-size: 13px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 20px;
} }
input, input,
@ -911,11 +902,11 @@ input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
display: inline-block; display: inline-block;
height: 18px; height: 20px;
padding: 4px; padding: 4px;
margin-bottom: 9px; margin-bottom: 9px;
font-size: 13px; font-size: 14px;
line-height: 18px; line-height: 20px;
color: #555555; color: #555555;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@ -1325,9 +1316,9 @@ select:focus:required:invalid:focus {
} }
.form-actions { .form-actions {
padding: 17px 20px 18px; padding: 19px 20px 20px;
margin-top: 18px; margin-top: 20px;
margin-bottom: 18px; margin-bottom: 20px;
background-color: #f5f5f5; background-color: #f5f5f5;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
*zoom: 1; *zoom: 1;
@ -1377,7 +1368,7 @@ textarea::-webkit-input-placeholder {
.help-block { .help-block {
display: block; display: block;
margin-bottom: 9px; margin-bottom: 10px;
} }
.help-inline { .help-inline {
@ -1403,7 +1394,7 @@ textarea::-webkit-input-placeholder {
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
*margin-left: 0; *margin-left: 0;
font-size: 13px; font-size: 14px;
vertical-align: middle; vertical-align: middle;
-webkit-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0;
@ -1428,12 +1419,12 @@ textarea::-webkit-input-placeholder {
.input-append .add-on { .input-append .add-on {
display: inline-block; display: inline-block;
width: auto; width: auto;
height: 18px; height: 20px;
min-width: 16px; min-width: 16px;
padding: 4px 5px; padding: 4px 5px;
font-size: 13px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 20px;
text-align: center; text-align: center;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
vertical-align: middle; vertical-align: middle;
@ -1590,16 +1581,16 @@ input.search-query {
} }
.control-group { .control-group {
margin-bottom: 9px; margin-bottom: 10px;
} }
legend + .control-group { legend + .control-group {
margin-top: 18px; margin-top: 20px;
-webkit-margin-top-collapse: separate; -webkit-margin-top-collapse: separate;
} }
.form-horizontal .control-group { .form-horizontal .control-group {
margin-bottom: 18px; margin-bottom: 20px;
*zoom: 1; *zoom: 1;
} }
@ -1633,7 +1624,7 @@ legend + .control-group {
} }
.form-horizontal .help-block { .form-horizontal .help-block {
margin-top: 9px; margin-top: 10px;
margin-bottom: 0; margin-bottom: 0;
} }
@ -1650,13 +1641,13 @@ table {
.table { .table {
width: 100%; width: 100%;
margin-bottom: 18px; margin-bottom: 20px;
} }
.table th, .table th,
.table td { .table td {
padding: 8px; padding: 8px;
line-height: 18px; line-height: 20px;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
border-top: 1px solid #dddddd; border-top: 1px solid #dddddd;
@ -2569,7 +2560,7 @@ table .span24 {
.dropdown-menu .divider { .dropdown-menu .divider {
*width: 100%; *width: 100%;
height: 1px; height: 1px;
margin: 8px 1px; margin: 9px 1px;
*margin: -5px 0 5px; *margin: -5px 0 5px;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: #e5e5e5;
@ -2581,7 +2572,7 @@ table .span24 {
padding: 3px 15px; padding: 3px 15px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 20px;
color: #333333; color: #333333;
white-space: nowrap; white-space: nowrap;
} }
@ -2709,7 +2700,7 @@ table .span24 {
float: right; float: right;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 18px; line-height: 20px;
color: #000000; color: #000000;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff;
opacity: 0.2; opacity: 0.2;
@ -2738,8 +2729,8 @@ button.close {
padding: 4px 10px 4px; padding: 4px 10px 4px;
margin-bottom: 0; margin-bottom: 0;
*margin-left: .3em; *margin-left: .3em;
font-size: 13px; font-size: 14px;
line-height: 18px; line-height: 20px;
*line-height: 20px; *line-height: 20px;
color: #333333; color: #333333;
text-align: center; text-align: center;
@ -2833,7 +2824,7 @@ button.close {
.btn-large { .btn-large {
padding: 9px 14px; padding: 9px 14px;
font-size: 15px; font-size: 16px;
line-height: normal; line-height: normal;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
@ -2846,8 +2837,8 @@ button.close {
.btn-small { .btn-small {
padding: 5px 9px; padding: 5px 9px;
font-size: 11px; font-size: 12px;
line-height: 16px; line-height: 18px;
} }
.btn-small [class^="icon-"] { .btn-small [class^="icon-"] {
@ -2856,8 +2847,8 @@ button.close {
.btn-mini { .btn-mini {
padding: 2px 6px; padding: 2px 6px;
font-size: 11px; font-size: 12px;
line-height: 14px; line-height: 16px;
} }
.btn-primary, .btn-primary,
@ -3110,8 +3101,8 @@ input[type="submit"].btn.btn-mini {
} }
.btn-toolbar { .btn-toolbar {
margin-top: 9px; margin-top: 10px;
margin-bottom: 9px; margin-bottom: 10px;
} }
.btn-toolbar .btn-group { .btn-toolbar .btn-group {
@ -3132,16 +3123,16 @@ input[type="submit"].btn.btn-mini {
.btn-group > .btn, .btn-group > .btn,
.btn-group > .dropdown-menu { .btn-group > .dropdown-menu {
font-size: 13px; font-size: 14px;
} }
.btn-group > .btn-mini, .btn-group > .btn-mini,
.btn-group > .btn-small { .btn-group > .btn-small {
font-size: 11px; font-size: 12px;
} }
.btn-group > .btn-large { .btn-group > .btn-large {
font-size: 15px; font-size: 16px;
} }
.btn-group > .btn:first-child { .btn-group > .btn:first-child {
@ -3343,7 +3334,7 @@ input[type="submit"].btn.btn-mini {
.alert { .alert {
padding: 8px 35px 8px 14px; padding: 8px 35px 8px 14px;
margin-bottom: 18px; margin-bottom: 20px;
color: #c09853; color: #c09853;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3; background-color: #fcf8e3;
@ -3357,7 +3348,7 @@ input[type="submit"].btn.btn-mini {
position: relative; position: relative;
top: -2px; top: -2px;
right: -21px; right: -21px;
line-height: 18px; line-height: 20px;
} }
.alert-success { .alert-success {
@ -3394,7 +3385,7 @@ input[type="submit"].btn.btn-mini {
} }
.nav { .nav {
margin-bottom: 18px; margin-bottom: 20px;
margin-left: 0; margin-left: 0;
list-style: none; list-style: none;
} }
@ -3417,7 +3408,7 @@ input[type="submit"].btn.btn-mini {
padding: 3px 15px; padding: 3px 15px;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
line-height: 18px; line-height: 20px;
color: #999999; color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase; text-transform: uppercase;
@ -3458,7 +3449,7 @@ input[type="submit"].btn.btn-mini {
.nav-list .divider { .nav-list .divider {
*width: 100%; *width: 100%;
height: 1px; height: 1px;
margin: 8px 1px; margin: 9px 1px;
*margin: -5px 0 5px; *margin: -5px 0 5px;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: #e5e5e5;
@ -3508,7 +3499,7 @@ input[type="submit"].btn.btn-mini {
.nav-tabs > li > a { .nav-tabs > li > a {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
line-height: 18px; line-height: 20px;
border: 1px solid transparent; border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0;
@ -3773,7 +3764,7 @@ input[type="submit"].btn.btn-mini {
.navbar { .navbar {
*position: relative; *position: relative;
*z-index: 2; *z-index: 2;
margin-bottom: 18px; margin-bottom: 20px;
overflow: visible; overflow: visible;
} }
@ -3997,7 +3988,7 @@ input[type="submit"].btn.btn-mini {
.navbar .nav > li > a { .navbar .nav > li > a {
float: none; float: none;
padding: 10px 12px 11px; padding: 10px 15px 11px;
line-height: 19px; line-height: 19px;
color: #999999; color: #999999;
text-decoration: none; text-decoration: none;
@ -4012,7 +4003,7 @@ input[type="submit"].btn.btn-mini {
display: inline-block; display: inline-block;
padding: 4px 10px 4px; padding: 4px 10px 4px;
margin: 5px 5px 6px; margin: 5px 5px 6px;
line-height: 18px; line-height: 20px;
} }
.navbar .btn-group { .navbar .btn-group {
@ -4285,7 +4276,7 @@ input[type="submit"].btn.btn-mini {
.breadcrumb { .breadcrumb {
padding: 7px 14px; padding: 7px 14px;
margin: 0 0 18px; margin: 0 0 20px;
list-style: none; list-style: none;
background-color: #fbfbfb; background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
@ -4321,8 +4312,8 @@ input[type="submit"].btn.btn-mini {
} }
.pagination { .pagination {
height: 36px; height: 40px;
margin: 18px 0; margin: 20px 0;
} }
.pagination ul { .pagination ul {
@ -4347,7 +4338,7 @@ input[type="submit"].btn.btn-mini {
.pagination span { .pagination span {
float: left; float: left;
padding: 0 14px; padding: 0 14px;
line-height: 34px; line-height: 38px;
text-decoration: none; text-decoration: none;
border: 1px solid #ddd; border: 1px solid #ddd;
border-left-width: 0; border-left-width: 0;
@ -4397,7 +4388,7 @@ input[type="submit"].btn.btn-mini {
} }
.pager { .pager {
margin-bottom: 18px; margin-bottom: 20px;
margin-left: 0; margin-left: 0;
text-align: center; text-align: center;
list-style: none; list-style: none;
@ -4864,7 +4855,7 @@ input[type="submit"].btn.btn-mini {
.thumbnails > li { .thumbnails > li {
float: left; float: left;
margin-bottom: 18px; margin-bottom: 20px;
margin-left: 20px; margin-left: 20px;
} }
@ -4902,7 +4893,7 @@ a.thumbnail:hover {
.label, .label,
.badge { .badge {
font-size: 10.998px; font-size: 11.844px;
font-weight: bold; font-weight: bold;
line-height: 14px; line-height: 14px;
color: #ffffff; color: #ffffff;
@ -5177,7 +5168,7 @@ a.badge:hover {
} }
.accordion { .accordion {
margin-bottom: 18px; margin-bottom: 20px;
} }
.accordion-group { .accordion-group {
@ -5208,7 +5199,7 @@ a.badge:hover {
.carousel { .carousel {
position: relative; position: relative;
margin-bottom: 18px; margin-bottom: 20px;
line-height: 1; line-height: 1;
} }
@ -5338,7 +5329,7 @@ a.badge:hover {
.hero-unit p { .hero-unit p {
font-size: 18px; font-size: 18px;
font-weight: 200; font-weight: 200;
line-height: 27px; line-height: 30px;
color: inherit; color: inherit;
} }

View file

@ -26,17 +26,6 @@ body {
margin: 0 auto; margin: 0 auto;
} }
/* Increase docs base type size and line-heights */
body {
line-height: 20px;
}
p {
margin-bottom: 15px;
}
/*li {
line-height: 25px;
}
*/
/* Code in headings */ /* Code in headings */
h3 code { h3 code {
font-size: 14px; font-size: 14px;
@ -49,7 +38,6 @@ h3 code {
-------------------------------------------------- */ -------------------------------------------------- */
.navbar { .navbar {
font-size: 13px;
} }
/* Change the docs' brand */ /* Change the docs' brand */
@ -197,8 +185,7 @@ hr.soften {
} }
.marketing h2 { .marketing h2 {
font-weight: 400; font-weight: 400;
letter-spacing: -1px; `}
}
.marketing p { .marketing p {
color: #555; color: #555;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 B

View file

@ -57,13 +57,6 @@
<li class=""> <li class="">
<a href="./javascript.html">Javascript</a> <a href="./javascript.html">Javascript</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class=""> <li class="">
<a href="./extend.html">Extend</a> <a href="./extend.html">Extend</a>
</li> </li>

View file

@ -57,13 +57,6 @@
<li class=""> <li class="">
<a href="./javascript.html">Javascript</a> <a href="./javascript.html">Javascript</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class=""> <li class="">
<a href="./extend.html">Extend</a> <a href="./extend.html">Extend</a>
</li> </li>

View file

@ -57,13 +57,6 @@
<li class=""> <li class="">
<a href="./javascript.html">Javascript</a> <a href="./javascript.html">Javascript</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="active">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class=""> <li class="">
<a href="./extend.html">Extend</a> <a href="./extend.html">Extend</a>
</li> </li>

View file

@ -57,13 +57,6 @@
<li class=""> <li class="">
<a href="./javascript.html">Javascript</a> <a href="./javascript.html">Javascript</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="active">
<a href="./examples.html">Examples</a>
</li>
<li class=""> <li class="">
<a href="./extend.html">Extend</a> <a href="./extend.html">Extend</a>
</li> </li>

View file

@ -57,13 +57,6 @@
<li class=""> <li class="">
<a href="./javascript.html">Javascript</a> <a href="./javascript.html">Javascript</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class=""> <li class="">
<a href="./extend.html">Extend</a> <a href="./extend.html">Extend</a>
</li> </li>

View file

@ -57,13 +57,6 @@
<li class=""> <li class="">
<a href="./javascript.html">Javascript</a> <a href="./javascript.html">Javascript</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class=""> <li class="">
<a href="./extend.html">Extend</a> <a href="./extend.html">Extend</a>
</li> </li>

View file

@ -57,13 +57,6 @@
<li class="active"> <li class="active">
<a href="./javascript.html">Javascript</a> <a href="./javascript.html">Javascript</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class=""> <li class="">
<a href="./extend.html">Extend</a> <a href="./extend.html">Extend</a>
</li> </li>

View file

@ -57,13 +57,6 @@
<li class=""> <li class="">
<a href="./javascript.html">Javascript</a> <a href="./javascript.html">Javascript</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class=""> <li class="">
<a href="./extend.html">Extend</a> <a href="./extend.html">Extend</a>
</li> </li>

View file

@ -69,13 +69,6 @@
<li class="{{javascript}}"> <li class="{{javascript}}">
<a href="./javascript.html">{{_i}}Javascript{{/i}}</a> <a href="./javascript.html">{{_i}}Javascript{{/i}}</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="{{download}}">
<a href="./download.html">{{_i}}Customize{{/i}}</a>
</li>
<li class="{{examples}}">
<a href="./examples.html">{{_i}}Examples{{/i}}</a>
</li>
<li class="{{less}}"> <li class="{{less}}">
<a href="./extend.html">{{_i}}Extend{{/i}}</a> <a href="./extend.html">{{_i}}Extend{{/i}}</a>
</li> </li>

View file

@ -57,13 +57,6 @@
<li class=""> <li class="">
<a href="./javascript.html">Javascript</a> <a href="./javascript.html">Javascript</a>
</li> </li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
<li class=""> <li class="">
<a href="./extend.html">Extend</a> <a href="./extend.html">Extend</a>
</li> </li>

View file

@ -206,7 +206,7 @@
float: none; float: none;
// Vertically center the text given @navbarHeight // Vertically center the text given @navbarHeight
@elementHeight: 20px; @elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1); padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
line-height: 19px; line-height: 19px;
color: @navbarLinkColor; color: @navbarLinkColor;
text-decoration: none; text-decoration: none;

View file

@ -12,9 +12,24 @@ body {
.subhead { .subhead {
margin-bottom: 36px; margin-bottom: 36px;
} }
h4 { /*h4 {
margin-bottom: 5px; margin-bottom: 5px;
} }
*/
.type-test {
margin-bottom: 20px;
padding: 0 20px 20px;
background: url(../../docs/assets/img/grid-baseline-20px.png);
}
.type-test h1,
.type-test h2,
.type-test h3,
.type-test h4,
.type-test h5,
.type-test h6 {
xbackground-color: rgba(255,0,0,.2);
}
/* colgroup tests */ /* colgroup tests */

View file

@ -55,6 +55,45 @@
<!-- Typography
================================================== -->
<div class="page-header">
<h1>Typography</h1>
</div>
<div class="row">
<div class="span6">
<div class="type-test">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="span6">
<div class="type-test">
<h1>h1. Heading 1</h1>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h2>h2. Heading 2</h2>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3>h3. Heading 3</h3>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h4>h4. Heading 4</h4>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h5>h5. Heading 5</h5>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h6>h6. Heading 6</h6>
<p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<!-- Fluid grid <!-- Fluid grid
================================================== --> ================================================== -->

View file

@ -3,8 +3,8 @@
// -------------------------------------------------- // --------------------------------------------------
// BODY TEXT // Body text
// --------- // -------------------------
p { p {
margin: 0 0 @baseLineHeight / 2; margin: 0 0 @baseLineHeight / 2;
@ -20,13 +20,15 @@ p {
line-height: @baseLineHeight * 1.5; line-height: @baseLineHeight * 1.5;
} }
// HEADINGS
// -------- // Headings
// -------------------------
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: 0; margin: (@baseLineHeight / 2) 0;
font-family: @headingsFontFamily; font-family: @headingsFontFamily;
font-weight: @headingsFontWeight; font-weight: @headingsFontWeight;
line-height: 1;
color: @headingsColor; color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings text-rendering: optimizelegibility; // Fix the character spacing for headings
small { small {
@ -34,59 +36,31 @@ h1, h2, h3, h4, h5, h6 {
color: @grayLight; color: @grayLight;
} }
} }
h1 { h1 { font-size: 36px; line-height: 40px; }
font-size: 30px; h2 { font-size: 30px; line-height: 40px; }
line-height: @baseLineHeight * 2; h3 { font-size: 24px; line-height: 40px; }
small { h4 { font-size: 18px; line-height: 20px; }
font-size: 18px; h5 { font-size: 14px; line-height: 20px; }
} h6 { font-size: 12px; line-height: 20px; }
}
h2 { h1 small { font-size: 24px; }
font-size: 24px; h2 small { font-size: 18px; }
line-height: @baseLineHeight * 2; h3 small { font-size: 14px; }
small { h4 small { font-size: 14px; }
font-size: 18px;
}
}
h3 {
font-size: 18px;
line-height: @baseLineHeight * 1.5;
small {
font-size: 14px;
}
}
h4, h5, h6 {
line-height: @baseLineHeight;
}
h4 {
font-size: 14px;
small {
font-size: 12px;
}
}
h5 {
font-size: 12px;
}
h6 {
font-size: 11px;
color: @grayLight;
text-transform: uppercase;
}
// Page header // Page header
// -------------------------
.page-header { .page-header {
padding-bottom: @baseLineHeight - 1; margin: @baseLineHeight 0 (@baseLineHeight - 1);
margin: @baseLineHeight 0;
border-bottom: 1px solid @grayLighter; border-bottom: 1px solid @grayLighter;
} }
.page-header h1 {
line-height: 1;
}
// LISTS // Lists
// ----- // --------------------------------------------------
// Unordered and Ordered lists // Unordered and Ordered lists
ul, ol { ul, ol {

View file

@ -48,9 +48,9 @@
@serifFontFamily: Georgia, "Times New Roman", Times, serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 13px; @baseFontSize: 14px;
@baseFontFamily: @sansFontFamily; @baseFontFamily: @sansFontFamily;
@baseLineHeight: 18px; @baseLineHeight: 20px;
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily