diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index e91f2553915a3421549e83233e2382e08894fd0a..3925033e6c0498653794586d42048b6e7c7e91b7 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -5,7 +5,7 @@
@media (max-width: 480px) {
.page-header h1 small {
display: block;
- line-height: 18px;
+ line-height: 1.38em;
}
.form-horizontal .control-group > label {
float: none;
@@ -141,7 +141,7 @@
}
.navbar-fixed-top {
position: static;
- margin-bottom: 36px;
+ margin-bottom: 2.76em;
}
.navbar-inner {
padding: 10px;
@@ -159,7 +159,7 @@
}
.navbar .nav {
float: none;
- margin: 9px 0;
+ margin: 0.69em 0;
}
.navbar .nav > li {
float: none;
@@ -208,8 +208,8 @@
}
.navbar-form, .navbar-search {
float: none;
- padding: 9px 15px;
- margin: 9px 0;
+ padding: 0.69em 15px;
+ margin: 0.69em 0;
border-top: 1px solid #222222;
border-bottom: 1px solid #222222;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3e3379c3d55e1b543b95e44abe621f120e7868f4..5b27f3e9a919287b3a37f5dd7ecd7731f8d5e7ac 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -97,8 +97,8 @@ textarea {
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 13px;
- line-height: 18px;
+ font-size: 0.813em;
+ line-height: 1.12194em;
color: #555555;
background-color: #ffffff;
}
@@ -244,20 +244,20 @@ a:hover {
width: 100%;
}
p {
- margin: 0 0 9px;
+ margin: 0 0 0.69em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 13px;
- line-height: 18px;
+ font-size: 1em;
+ line-height: 1.38em;
}
p small {
- font-size: 11px;
+ font-size: 85%;
color: #999999;
}
.lead {
- margin-bottom: 18px;
- font-size: 20px;
+ margin-bottom: 1.38em;
+ font-size: 1.53em;
font-weight: 200;
- line-height: 27px;
+ line-height: 2.07em;
}
h1,
h2,
@@ -280,46 +280,46 @@ h6 small {
color: #999999;
}
h1 {
- font-size: 30px;
- line-height: 36px;
+ font-size: 2.31em;
+ line-height: 2.76em;
}
h1 small {
- font-size: 18px;
+ font-size: 60%;
}
h2 {
- font-size: 24px;
- line-height: 36px;
+ font-size: 1.85em;
+ line-height: 2.76em;
}
h2 small {
- font-size: 18px;
+ font-size: 75%;
}
h3 {
- line-height: 27px;
- font-size: 18px;
+ line-height: 2.07em;
+ font-size: 1.38em;
}
h3 small {
- font-size: 14px;
+ font-size: 78%;
}
h4, h5, h6 {
- line-height: 18px;
+ line-height: 1.38em;
}
h4 {
- font-size: 14px;
+ font-size: 1.08em;
}
h4 small {
- font-size: 12px;
+ font-size: 86%;
}
h5 {
- font-size: 12px;
+ font-size: 0.92em;
}
h6 {
- font-size: 11px;
+ font-size: 0.85em;
color: #999999;
text-transform: uppercase;
}
.page-header {
- padding-bottom: 17px;
- margin: 18px 0;
+ padding-bottom: 0.3799999999999999em;
+ margin: 1.38em 0;
border-bottom: 1px solid #eeeeee;
}
.page-header h1 {
@@ -327,7 +327,7 @@ h6 {
}
ul, ol {
padding: 0;
- margin: 0 0 9px 25px;
+ margin: 0 0 0.69em 25px;
}
ul ul,
ul ol,
@@ -342,26 +342,26 @@ ol {
list-style: decimal;
}
li {
- line-height: 18px;
+ line-height: 1.38em;
}
ul.unstyled {
margin-left: 0;
list-style: none;
}
dl {
- margin-bottom: 18px;
+ margin-bottom: 1.38em;
}
dt, dd {
- line-height: 18px;
+ line-height: 1.38em;
}
dt {
font-weight: bold;
}
dd {
- margin-left: 9px;
+ margin-left: 0.69em;
}
hr {
- margin: 18px 0;
+ margin: 1.38em 0;
border: 0;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #ffffff;
@@ -383,18 +383,18 @@ abbr {
}
blockquote {
padding: 0 0 0 15px;
- margin: 0 0 18px;
+ margin: 0 0 1.38em;
border-left: 5px solid #eeeeee;
}
blockquote p {
margin-bottom: 0;
font-size: 16px;
font-weight: 300;
- line-height: 22.5px;
+ line-height: 1.7249999999999999em;
}
blockquote small {
display: block;
- line-height: 18px;
+ line-height: 1.38em;
color: #999999;
}
blockquote small:before {
@@ -418,8 +418,8 @@ blockquote:after {
}
address {
display: block;
- margin-bottom: 18px;
- line-height: 18px;
+ margin-bottom: 1.38em;
+ line-height: 1.38em;
font-style: normal;
}
small {
@@ -431,7 +431,7 @@ cite {
code, pre {
padding: 0 3px 2px;
font-family: Menlo, Monaco, "Courier New", monospace;
- font-size: 12px;
+ font-size: 0.92em;
color: #333333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
@@ -445,10 +445,10 @@ code {
}
pre {
display: block;
- padding: 8.5px;
- margin: 0 0 9px;
- font-size: 12px;
- line-height: 18px;
+ padding: 0.7340425531914894em;
+ margin: 0 0 0.69em;
+ font-size: 0.92em;
+ line-height: 1.38em;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
@@ -460,14 +460,14 @@ pre {
word-break: break-all;
}
pre.prettyprint {
- margin-bottom: 18px;
+ margin-bottom: 1.38em;
}
pre code {
padding: 0;
background-color: transparent;
}
form {
- margin: 0 0 18px;
+ margin: 0 0 1.38em;
}
fieldset {
padding: 0;
@@ -478,9 +478,9 @@ legend {
display: block;
width: 100%;
padding: 0;
- margin-bottom: 27px;
- font-size: 19.5px;
- line-height: 36px;
+ margin-bottom: 2.07em;
+ font-size: 1.5em;
+ line-height: 2.76em;
color: #333333;
border: 0;
border-bottom: 1px solid #eee;
@@ -491,9 +491,9 @@ button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 13px;
+ font-size: 1em;
font-weight: normal;
- line-height: 18px;
+ line-height: 1.38em;
}
label {
display: block;
@@ -506,11 +506,11 @@ select,
.uneditable-input {
display: inline-block;
width: 210px;
- height: 18px;
+ height: 1.38em;
padding: 4px;
margin-bottom: 9px;
- font-size: 13px;
- line-height: 18px;
+ font-size: 1em;
+ line-height: 1.38em;
color: #555555;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
@@ -797,9 +797,9 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
box-shadow: 0 0 6px #f8b9b7;
}
.form-actions {
- padding: 17px 20px 18px;
- margin-top: 18px;
- margin-bottom: 18px;
+ padding: 0.3799999999999999em 20px 1.38em;
+ margin-top: 1.38em;
+ margin-bottom: 1.38em;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
}
@@ -870,11 +870,11 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
display: block;
width: auto;
min-width: 16px;
- height: 18px;
+ height: 1.38em;
margin-right: -1px;
padding: 4px 4px 4px 5px;
font-weight: normal;
- line-height: 18px;
+ line-height: 1.38em;
color: #999999;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
@@ -945,14 +945,14 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
display: inline-block;
}
.control-group {
- margin-bottom: 9px;
+ margin-bottom: 0.69em;
}
.form-horizontal legend + .control-group {
- margin-top: 18px;
+ margin-top: 1.38em;
-webkit-margin-top-collapse: separate;
}
.form-horizontal .control-group {
- margin-bottom: 18px;
+ margin-bottom: 1.38em;
*zoom: 1;
}
.form-horizontal .control-group:before, .form-horizontal .control-group:after {
@@ -981,11 +981,11 @@ table {
}
.table {
width: 100%;
- margin-bottom: 18px;
+ margin-bottom: 1.38em;
}
.table th, .table td {
padding: 8px;
- line-height: 18px;
+ line-height: 1.38em;
text-align: left;
border-top: 1px solid #ddd;
}
@@ -1561,7 +1561,7 @@ table .span12 {
padding: 3px 15px;
clear: both;
font-weight: normal;
- line-height: 18px;
+ line-height: 1.38em;
color: #555555;
white-space: nowrap;
}
@@ -1631,9 +1631,9 @@ table .span12 {
}
.close {
float: right;
- font-size: 20px;
+ font-size: 11px;
font-weight: bold;
- line-height: 18px;
+ line-height: 1.38em;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
@@ -1648,7 +1648,7 @@ table .span12 {
}
.nav {
margin-left: 0;
- margin-bottom: 18px;
+ margin-bottom: 1.38em;
list-style: none;
}
.nav > li > a {
@@ -1671,9 +1671,9 @@ table .span12 {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav.list .nav-header {
- font-size: 11px;
+ font-size: 0.85em;
font-weight: bold;
- line-height: 18px;
+ line-height: 1.38em;
color: #999999;
text-transform: uppercase;
}
@@ -1933,7 +1933,7 @@ table .span12 {
}
.navbar .navbar-text {
margin-bottom: 0;
- line-height: 40px;
+ line-height: 3.0636em;
color: #999999;
}
.navbar .navbar-text a:hover {
@@ -1963,7 +1963,7 @@ table .span12 {
.navbar-search .search-query {
padding: 4px 9px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 13px;
+ font-size: 1em;
font-weight: normal;
line-height: 1;
color: #ffffff;
@@ -1983,7 +1983,7 @@ table .span12 {
.navbar-search .search-query :-moz-placeholder {
color: #eeeeee;
}
-.navbar-search .search-query ::-webkit-input-placeholder {
+.navbar-search .search-query::-webkit-input-placeholder {
color: #eeeeee;
}
.navbar-search .search-query:hover {
@@ -2003,7 +2003,7 @@ table .span12 {
outline: 0;
}
.navbar-static {
- margin-bottom: 18px;
+ margin-bottom: 1.38em;
}
.navbar-static .navbar-inner {
padding-left: 20px;
@@ -2118,7 +2118,7 @@ table .span12 {
}
.breadcrumb {
padding: 7px 14px;
- margin: 0 0 18px;
+ margin: 0 0 1.38em;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
@@ -2147,8 +2147,8 @@ table .span12 {
color: #333333;
}
.pagination {
- height: 36px;
- margin: 18px 0;
+ height: 2.76em;
+ margin: 1.38em 0;
}
.pagination ul {
display: inline-block;
@@ -2171,7 +2171,7 @@ table .span12 {
.pagination a {
float: left;
padding: 0 14px;
- line-height: 34px;
+ line-height: 2.6081999999999996em;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
@@ -2206,7 +2206,7 @@ table .span12 {
}
.pager {
margin-left: 0;
- margin-bottom: 18px;
+ margin-bottom: 1.38em;
list-style: none;
text-align: center;
*zoom: 1;
@@ -2328,7 +2328,7 @@ table .span12 {
display: block;
visibility: visible;
padding: 5px;
- font-size: 11px;
+ font-size: 0.85em;
opacity: 0;
filter: alpha(opacity=0);
}
@@ -2596,8 +2596,8 @@ table .span12 {
.btn {
display: inline-block;
padding: 4px 10px 4px;
- font-size: 13px;
- line-height: 18px;
+ font-size: 1em;
+ line-height: 1.38em;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
@@ -2661,7 +2661,7 @@ table .span12 {
}
.btn.large {
padding: 9px 14px;
- font-size: 15px;
+ font-size: 1.53em;
line-height: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
@@ -2672,8 +2672,8 @@ table .span12 {
}
.btn.small {
padding: 5px 9px;
- font-size: 11px;
- line-height: 16px;
+ font-size: 0.85em;
+ line-height: 1.2282em;
}
.btn.small .icon {
margin-top: -1px;
@@ -2713,8 +2713,8 @@ button.btn.small, input[type="submit"].btn.small {
margin-left: 5px;
}
.btn-toolbar {
- margin-top: 9px;
- margin-bottom: 9px;
+ margin-top: 0.69em;
+ margin-bottom: 0.69em;
}
.btn-toolbar .btn-group {
display: inline-block;
@@ -2820,7 +2820,7 @@ button.btn.small, input[type="submit"].btn.small {
}
.alert {
padding: 8px 35px 8px 14px;
- margin-bottom: 18px;
+ margin-bottom: 1.38em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
@@ -2884,7 +2884,7 @@ button.btn.small, input[type="submit"].btn.small {
}
.thumbnails > li {
float: left;
- margin: 0 0 18px 20px;
+ margin: 0 0 1.38em 20px;
}
.thumbnail {
display: block;
@@ -2913,7 +2913,7 @@ a.thumbnail:hover {
}
.label {
padding: 1px 3px 2px;
- font-size: 9.75px;
+ font-size: 0.75em;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
@@ -3072,7 +3072,7 @@ a.thumbnail:hover {
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.accordion {
- margin-bottom: 18px;
+ margin-bottom: 1.38em;
}
.accordion-group {
background-color: #f5f5f5;
@@ -3204,9 +3204,9 @@ a.thumbnail:hover {
letter-spacing: -1px;
}
.hero-unit p {
- font-size: 18px;
+ font-size: 1.38em;
font-weight: 200;
- line-height: 27px;
+ line-height: 2.07em;
}
.pull-right {
float: right;
diff --git a/less/buttons.less b/less/buttons.less
index 54d00a13ac5ca9deb04eb9f6ff01fcb670be6edc..505d220ec337d4c00544657dc41066c29a504fe0 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -102,7 +102,7 @@
// Button Sizes
&.large {
padding: 9px 14px;
- font-size: @baseFontSize + 2px;
+ font-size: @baseFontSize * 1.53;
line-height: normal;
.border-radius(5px);
}
@@ -111,8 +111,8 @@
}
&.small {
padding: 5px 9px;
- font-size: @baseFontSize - 2px;
- line-height: @baseLineHeight - 2px;
+ font-size: @baseFontSize * 0.85;
+ line-height: @baseLineHeight * 0.89;
}
&.small .icon {
margin-top: -1px;
diff --git a/less/close.less b/less/close.less
index a0e5edba1b612733dc3c7b94c6265ed90656799d..98c2c7bd77d5da74f016328b0a3db1821d41000a 100644
--- a/less/close.less
+++ b/less/close.less
@@ -3,7 +3,7 @@
.close {
float: right;
- font-size: 20px;
+ font-size: 11px;
font-weight: bold;
line-height: @baseLineHeight;
color: @black;
diff --git a/less/code.less b/less/code.less
index 0cc3db857ae4a501f602114776c41a70e3e0b9c6..7061dd8988931861f7944e30d24e6121bd5bb4d4 100644
--- a/less/code.less
+++ b/less/code.less
@@ -7,7 +7,7 @@ code,
pre {
padding: 0 3px 2px;
#font > #family > .monospace;
- font-size: @baseFontSize - 1;
+ font-size: @baseFontSize * 0.92;
color: @grayDark;
.border-radius(3px);
}
@@ -19,9 +19,9 @@ code {
}
pre {
display: block;
- padding: (@baseLineHeight - 1) / 2;
+ padding: @baseLineHeight / 1.88;
margin: 0 0 @baseLineHeight / 2;
- font-size: 12px;
+ font-size: @baseFontSize * 0.92;
line-height: @baseLineHeight;
background-color: #f5f5f5;
border: 1px solid #ccc; // fallback for IE7-8
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 83f535ae861b4030986dddc0e31aacd5654bdaf8..024ecef9b126f2e7caddf89ebf497a9345a2bff9 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -93,7 +93,7 @@
padding: 3px 15px;
clear: both;
font-weight: normal;
- line-height: 18px;
+ line-height: @baseLineHeight;
color: @gray;
white-space: nowrap;
}
diff --git a/less/hero-unit.less b/less/hero-unit.less
index cba1cc46cff8e4f0b8c4cd8ed233899f00d655eb..51e3a129d27703236db3d69653fa2698ae5e8620 100644
--- a/less/hero-unit.less
+++ b/less/hero-unit.less
@@ -13,7 +13,7 @@
letter-spacing: -1px;
}
p {
- font-size: 18px;
+ font-size: @baseFontSize * 1.38;
font-weight: 200;
line-height: @baseLineHeight * 1.5;
}
diff --git a/less/navbar.less b/less/navbar.less
index 287459a27c247c129c9de1f982d29dce619b48b9..a53c9cc84c78dbf799344491c527e1e8be2a4b9f 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -37,7 +37,7 @@
// Plain text in topbar
.navbar-text {
margin-bottom: 0;
- line-height: 40px;
+ line-height: @baseLineHeight * 2.22;
color: @navbarText;
a:hover {
color: @white;
@@ -73,7 +73,7 @@
margin-bottom: 0;
.search-query {
padding: 4px 9px;
- #font > .sans-serif(13px, normal, 1);
+ #font > .sans-serif(@baseFontSize, normal, 1);
color: @white;
color: rgba(255,255,255,.75);
background: #666;
diff --git a/less/navs.less b/less/navs.less
index aa718cd746b126d04e17c3c1946b86681d02d9b4..da6803f4ef3797fe3eb8165ed397a2fd413ccc15 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -40,7 +40,7 @@
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav.list .nav-header {
- font-size: 11px;
+ font-size: @baseFontSize * 0.85;
font-weight: bold;
line-height: @baseLineHeight;
color: @grayLight;
diff --git a/less/pagination.less b/less/pagination.less
index 8ecb2a401548340ceb5e2bf1057aedd070a0ac4c..3854ad62f49ec8b85dd3498d3843d03ca3071411 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -19,7 +19,7 @@
.pagination a {
float: left;
padding: 0 14px;
- line-height: (@baseLineHeight * 2) - 2;
+ line-height: @baseLineHeight * 1.89;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
diff --git a/less/scaffolding.less b/less/scaffolding.less
index d8b3f56abcb643ea47fae2156a3ded36e09c08cd..9d7128a535048e760a0b07ce443d9008393f28c6 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -9,8 +9,8 @@
body {
margin: 0;
font-family: @baseFontFamily;
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
+ font-size: @bodyFontSize;
+ line-height: @bodyLineHeight;
color: @gray;
background-color: @white;
}
diff --git a/less/tooltip.less b/less/tooltip.less
index 5111a193f0393966667cde5474b19e97f82c0ec6..59285aee513cda32fff5973725b5ac0d554cebfb 100644
--- a/less/tooltip.less
+++ b/less/tooltip.less
@@ -7,7 +7,7 @@
display: block;
visibility: visible;
padding: 5px;
- font-size: 11px;
+ font-size: @baseFontSize * 0.85;
.opacity(0);
&.in { .opacity(80); }
&.top { margin-top: -2px; }
diff --git a/less/type.less b/less/type.less
index 7841bb0906a647fcad918fb5a8cdf37781a95e43..d8edf781514da5411e70416d234d80c4b2e6b4d2 100644
--- a/less/type.less
+++ b/less/type.less
@@ -12,13 +12,13 @@ p {
font-size: @baseFontSize;
line-height: @baseLineHeight;
small {
- font-size: @baseFontSize - 2;
+ font-size: 85%;
color: @grayLight;
}
}
.lead {
margin-bottom: @baseLineHeight;
- font-size: 20px;
+ font-size: @baseFontSize * 1.53;
font-weight: 200;
line-height: @baseLineHeight * 1.5;
}
@@ -37,40 +37,40 @@ h1, h2, h3, h4, h5, h6 {
}
}
h1 {
- font-size: 30px;
+ font-size: @baseFontSize * 2.31;
line-height: @baseLineHeight * 2;
small {
- font-size: 18px;
+ font-size: 60%;
}
}
h2 {
- font-size: 24px;
+ font-size: @baseFontSize * 1.85;
line-height: @baseLineHeight * 2;
small {
- font-size: 18px;
+ font-size: 75%;
}
}
h3 {
line-height: @baseLineHeight * 1.5;
- font-size: 18px;
+ font-size: @baseFontSize * 1.38;
small {
- font-size: 14px;
+ font-size: 78%;
}
}
h4, h5, h6 {
line-height: @baseLineHeight;
}
h4 {
- font-size: 14px;
+ font-size: @baseFontSize * 1.08;
small {
- font-size: 12px;
+ font-size: 86%;
}
}
h5 {
- font-size: 12px;
+ font-size: @baseFontSize * 0.92;
}
h6 {
- font-size: 11px;
+ font-size: @baseFontSize * 0.85;
color: @grayLight;
text-transform: uppercase;
}
diff --git a/less/variables.less b/less/variables.less
index 4265d7ed31e0cdd2775c62ca6ac782a1b47cff1a..6e0adc8237024ecaf0226d825f293f33cd868fc8 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -40,9 +40,12 @@
@fluidSidebarWidth: 220px;
// Typography
-@baseFontSize: 13px;
+@bodyFontSize: 0.813em;
+@bodyLineHeight: @bodyFontSize * 1.38;
+// Base font size relative to body font size
+@baseFontSize: 1em;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
-@baseLineHeight: 18px;
+@baseLineHeight: @baseFontSize * 1.38;
// Buttons
@primaryButtonBackground: @linkColor;