Commit 3c07eaa2 authored by Mark Otto's avatar Mark Otto

updates to type scale

parent c6ee96c0
......@@ -830,7 +830,7 @@
}
.page-header h1 small {
display: block;
line-height: 18px;
line-height: 20px;
}
input[type="checkbox"],
input[type="radio"] {
......@@ -882,10 +882,10 @@
position: static;
}
.navbar-fixed-top {
margin-bottom: 18px;
margin-bottom: 20px;
}
.navbar-fixed-bottom {
margin-top: 18px;
margin-top: 20px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
......@@ -905,7 +905,7 @@
}
.nav-collapse .nav {
float: none;
margin: 0 0 9px;
margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
......@@ -975,8 +975,8 @@
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 9px 15px;
margin: 9px 0;
padding: 10px 15px;
margin: 10px 0;
border-top: 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);
......
This diff is collapsed.
......@@ -26,17 +26,6 @@ body {
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 */
h3 code {
font-size: 14px;
......@@ -49,7 +38,6 @@ h3 code {
-------------------------------------------------- */
.navbar {
font-size: 13px;
}
/* Change the docs' brand */
......@@ -197,8 +185,7 @@ hr.soften {
}
.marketing h2 {
font-weight: 400;
letter-spacing: -1px;
}
`}
.marketing p {
color: #555;
}
......
......@@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</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="">
<a href="./extend.html">Extend</a>
</li>
......
......@@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</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="">
<a href="./extend.html">Extend</a>
</li>
......
......@@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</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="">
<a href="./extend.html">Extend</a>
</li>
......
......@@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</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="">
<a href="./extend.html">Extend</a>
</li>
......
......@@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</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="">
<a href="./extend.html">Extend</a>
</li>
......
......@@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</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="">
<a href="./extend.html">Extend</a>
</li>
......
......@@ -57,13 +57,6 @@
<li class="active">
<a href="./javascript.html">Javascript</a>
</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="">
<a href="./extend.html">Extend</a>
</li>
......
......@@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</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="">
<a href="./extend.html">Extend</a>
</li>
......
......@@ -69,13 +69,6 @@
<li class="{{javascript}}">
<a href="./javascript.html">{{_i}}Javascript{{/i}}</a>
</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}}">
<a href="./extend.html">{{_i}}Extend{{/i}}</a>
</li>
......
......@@ -57,13 +57,6 @@
<li class="">
<a href="./javascript.html">Javascript</a>
</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="">
<a href="./extend.html">Extend</a>
</li>
......
......@@ -206,7 +206,7 @@
float: none;
// Vertically center the text given @navbarHeight
@elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
line-height: 19px;
color: @navbarLinkColor;
text-decoration: none;
......
......@@ -12,9 +12,24 @@ body {
.subhead {
margin-bottom: 36px;
}
h4 {
/*h4 {
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 */
......
......@@ -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
================================================== -->
......
......@@ -3,8 +3,8 @@
// --------------------------------------------------
// BODY TEXT
// ---------
// Body text
// -------------------------
p {
margin: 0 0 @baseLineHeight / 2;
......@@ -20,13 +20,15 @@ p {
line-height: @baseLineHeight * 1.5;
}
// HEADINGS
// --------
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6 {
margin: 0;
margin: (@baseLineHeight / 2) 0;
font-family: @headingsFontFamily;
font-weight: @headingsFontWeight;
line-height: 1;
color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
......@@ -34,59 +36,31 @@ h1, h2, h3, h4, h5, h6 {
color: @grayLight;
}
}
h1 {
font-size: 30px;
line-height: @baseLineHeight * 2;
small {
font-size: 18px;
}
}
h2 {
font-size: 24px;
line-height: @baseLineHeight * 2;
small {
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;
}
h1 { font-size: 36px; line-height: 40px; }
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; }
h2 small { font-size: 18px; }
h3 small { font-size: 14px; }
h4 small { font-size: 14px; }
// Page header
// -------------------------
.page-header {
padding-bottom: @baseLineHeight - 1;
margin: @baseLineHeight 0;
margin: @baseLineHeight 0 (@baseLineHeight - 1);
border-bottom: 1px solid @grayLighter;
}
.page-header h1 {
line-height: 1;
}
// LISTS
// -----
// Lists
// --------------------------------------------------
// Unordered and Ordered lists
ul, ol {
......
......@@ -48,9 +48,9 @@
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 13px;
@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 18px;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment