From 3c07eaa251b73e6c5eff4b56e074c54708a4b4ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 15:11:54 -0700 Subject: [PATCH] updates to type scale --- docs/assets/css/bootstrap-responsive.css | 12 +- docs/assets/css/bootstrap.css | 233 +++++++++++------------ docs/assets/css/docs.css | 15 +- docs/assets/img/grid-baseline-20px.png | Bin 0 -> 120 bytes docs/base-css.html | 7 - docs/components.html | 7 - docs/download.html | 7 - docs/examples.html | 7 - docs/extend.html | 7 - docs/index.html | 7 - docs/javascript.html | 7 - docs/scaffolding.html | 7 - docs/templates/layout.mustache | 7 - docs/upgrading.html | 7 - less/navbar.less | 2 +- less/tests/css-tests.css | 17 +- less/tests/css-tests.html | 39 ++++ less/type.less | 74 +++---- less/variables.less | 4 +- 19 files changed, 201 insertions(+), 265 deletions(-) create mode 100644 docs/assets/img/grid-baseline-20px.png diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 4102e4d2cc..ac3d334576 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -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); diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 28a4b84679..4ec240ba55 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -158,8 +158,8 @@ textarea { body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 18px; + font-size: 14px; + line-height: 20px; color: #333333; background-color: #ffffff; } @@ -544,19 +544,19 @@ a:hover { } p { - margin: 0 0 9px; + margin: 0 0 10px; } p small { - font-size: 11px; + font-size: 12px; color: #999999; } .lead { - margin-bottom: 18px; + margin-bottom: 20px; font-size: 20px; font-weight: 200; - line-height: 27px; + line-height: 30px; } h1, @@ -565,9 +565,10 @@ h3, h4, h5, h6 { - margin: 0; + margin: 10px 0; font-family: inherit; font-weight: bold; + line-height: 1; color: inherit; text-rendering: optimizelegibility; } @@ -583,70 +584,60 @@ h6 small { } h1 { - font-size: 30px; - line-height: 36px; -} - -h1 small { - font-size: 18px; + 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; - line-height: 36px; } h2 small { font-size: 18px; } -h3 { - font-size: 18px; - line-height: 27px; -} - h3 small { font-size: 14px; } -h4, -h5, -h6 { - line-height: 18px; -} - -h4 { +h4 small { font-size: 14px; } -h4 small { - font-size: 12px; -} - -h5 { - font-size: 12px; -} - -h6 { - font-size: 11px; - color: #999999; - text-transform: uppercase; -} - .page-header { - padding-bottom: 17px; - margin: 18px 0; + margin: 20px 0 19px; border-bottom: 1px solid #eeeeee; } -.page-header h1 { - line-height: 1; -} - ul, ol { padding: 0; - margin: 0 0 9px 25px; + margin: 0 0 10px 25px; } ul ul, @@ -665,7 +656,7 @@ ol { } li { - line-height: 18px; + line-height: 20px; } ul.unstyled, @@ -675,12 +666,12 @@ ol.unstyled { } dl { - margin-bottom: 18px; + margin-bottom: 20px; } dt, dd { - line-height: 18px; + line-height: 20px; } dt { @@ -688,7 +679,7 @@ dt { } dd { - margin-left: 9px; + margin-left: 10px; } .dl-horizontal dt { @@ -706,7 +697,7 @@ dd { } hr { - margin: 18px 0; + margin: 20px 0; border: 0; border-top: 1px solid #eeeeee; border-bottom: 1px solid #ffffff; @@ -736,7 +727,7 @@ abbr.initialism { blockquote { padding: 0 0 0 15px; - margin: 0 0 18px; + margin: 0 0 20px; border-left: 5px solid #eeeeee; } @@ -744,12 +735,12 @@ blockquote p { margin-bottom: 0; font-size: 16px; font-weight: 300; - line-height: 22.5px; + line-height: 25px; } blockquote small { display: block; - line-height: 18px; + line-height: 20px; color: #999999; } @@ -779,9 +770,9 @@ blockquote:after { address { display: block; - margin-bottom: 18px; + margin-bottom: 20px; font-style: normal; - line-height: 18px; + line-height: 20px; } small { @@ -796,7 +787,7 @@ code, pre { padding: 0 3px 2px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-size: 12px; + font-size: 13px; color: #333333; -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -812,10 +803,10 @@ code { pre { display: block; - padding: 8.5px; - margin: 0 0 9px; - font-size: 12.025px; - line-height: 18px; + padding: 9.5px; + margin: 0 0 10px; + font-size: 12.950000000000001px; + line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre; @@ -829,7 +820,7 @@ pre { } pre.prettyprint { - margin-bottom: 18px; + margin-bottom: 20px; } pre code { @@ -845,7 +836,7 @@ pre code { } form { - margin: 0 0 18px; + margin: 0 0 20px; } fieldset { @@ -858,16 +849,16 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: 27px; - font-size: 19.5px; - line-height: 36px; + margin-bottom: 30px; + font-size: 21px; + line-height: 40px; color: #333333; border: 0; border-bottom: 1px solid #e5e5e5; } legend small { - font-size: 13.5px; + font-size: 15px; color: #999999; } @@ -876,9 +867,9 @@ input, button, select, textarea { - font-size: 13px; + font-size: 14px; font-weight: normal; - line-height: 18px; + line-height: 20px; } input, @@ -911,11 +902,11 @@ input[type="tel"], input[type="color"], .uneditable-input { display: inline-block; - height: 18px; + height: 20px; padding: 4px; margin-bottom: 9px; - font-size: 13px; - line-height: 18px; + font-size: 14px; + line-height: 20px; color: #555555; -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -1325,9 +1316,9 @@ select:focus:required:invalid:focus { } .form-actions { - padding: 17px 20px 18px; - margin-top: 18px; - margin-bottom: 18px; + padding: 19px 20px 20px; + margin-top: 20px; + margin-bottom: 20px; background-color: #f5f5f5; border-top: 1px solid #e5e5e5; *zoom: 1; @@ -1377,7 +1368,7 @@ textarea::-webkit-input-placeholder { .help-block { display: block; - margin-bottom: 9px; + margin-bottom: 10px; } .help-inline { @@ -1403,7 +1394,7 @@ textarea::-webkit-input-placeholder { position: relative; margin-bottom: 0; *margin-left: 0; - font-size: 13px; + font-size: 14px; vertical-align: middle; -webkit-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 { display: inline-block; width: auto; - height: 18px; + height: 20px; min-width: 16px; padding: 4px 5px; - font-size: 13px; + font-size: 14px; font-weight: normal; - line-height: 18px; + line-height: 20px; text-align: center; text-shadow: 0 1px 0 #ffffff; vertical-align: middle; @@ -1590,16 +1581,16 @@ input.search-query { } .control-group { - margin-bottom: 9px; + margin-bottom: 10px; } legend + .control-group { - margin-top: 18px; + margin-top: 20px; -webkit-margin-top-collapse: separate; } .form-horizontal .control-group { - margin-bottom: 18px; + margin-bottom: 20px; *zoom: 1; } @@ -1633,7 +1624,7 @@ legend + .control-group { } .form-horizontal .help-block { - margin-top: 9px; + margin-top: 10px; margin-bottom: 0; } @@ -1650,13 +1641,13 @@ table { .table { width: 100%; - margin-bottom: 18px; + margin-bottom: 20px; } .table th, .table td { padding: 8px; - line-height: 18px; + line-height: 20px; text-align: left; vertical-align: top; border-top: 1px solid #dddddd; @@ -2569,7 +2560,7 @@ table .span24 { .dropdown-menu .divider { *width: 100%; height: 1px; - margin: 8px 1px; + margin: 9px 1px; *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; @@ -2581,7 +2572,7 @@ table .span24 { padding: 3px 15px; clear: both; font-weight: normal; - line-height: 18px; + line-height: 20px; color: #333333; white-space: nowrap; } @@ -2709,7 +2700,7 @@ table .span24 { float: right; font-size: 20px; font-weight: bold; - line-height: 18px; + line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; @@ -2738,8 +2729,8 @@ button.close { padding: 4px 10px 4px; margin-bottom: 0; *margin-left: .3em; - font-size: 13px; - line-height: 18px; + font-size: 14px; + line-height: 20px; *line-height: 20px; color: #333333; text-align: center; @@ -2833,7 +2824,7 @@ button.close { .btn-large { padding: 9px 14px; - font-size: 15px; + font-size: 16px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; @@ -2846,8 +2837,8 @@ button.close { .btn-small { padding: 5px 9px; - font-size: 11px; - line-height: 16px; + font-size: 12px; + line-height: 18px; } .btn-small [class^="icon-"] { @@ -2856,8 +2847,8 @@ button.close { .btn-mini { padding: 2px 6px; - font-size: 11px; - line-height: 14px; + font-size: 12px; + line-height: 16px; } .btn-primary, @@ -3110,8 +3101,8 @@ input[type="submit"].btn.btn-mini { } .btn-toolbar { - margin-top: 9px; - margin-bottom: 9px; + margin-top: 10px; + margin-bottom: 10px; } .btn-toolbar .btn-group { @@ -3132,16 +3123,16 @@ input[type="submit"].btn.btn-mini { .btn-group > .btn, .btn-group > .dropdown-menu { - font-size: 13px; + font-size: 14px; } .btn-group > .btn-mini, .btn-group > .btn-small { - font-size: 11px; + font-size: 12px; } .btn-group > .btn-large { - font-size: 15px; + font-size: 16px; } .btn-group > .btn:first-child { @@ -3343,7 +3334,7 @@ input[type="submit"].btn.btn-mini { .alert { padding: 8px 35px 8px 14px; - margin-bottom: 18px; + margin-bottom: 20px; color: #c09853; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; @@ -3357,7 +3348,7 @@ input[type="submit"].btn.btn-mini { position: relative; top: -2px; right: -21px; - line-height: 18px; + line-height: 20px; } .alert-success { @@ -3394,7 +3385,7 @@ input[type="submit"].btn.btn-mini { } .nav { - margin-bottom: 18px; + margin-bottom: 20px; margin-left: 0; list-style: none; } @@ -3417,7 +3408,7 @@ input[type="submit"].btn.btn-mini { padding: 3px 15px; font-size: 11px; font-weight: bold; - line-height: 18px; + line-height: 20px; color: #999999; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-transform: uppercase; @@ -3458,7 +3449,7 @@ input[type="submit"].btn.btn-mini { .nav-list .divider { *width: 100%; height: 1px; - margin: 8px 1px; + margin: 9px 1px; *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; @@ -3508,7 +3499,7 @@ input[type="submit"].btn.btn-mini { .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; - line-height: 18px; + line-height: 20px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; @@ -3773,7 +3764,7 @@ input[type="submit"].btn.btn-mini { .navbar { *position: relative; *z-index: 2; - margin-bottom: 18px; + margin-bottom: 20px; overflow: visible; } @@ -3997,7 +3988,7 @@ input[type="submit"].btn.btn-mini { .navbar .nav > li > a { float: none; - padding: 10px 12px 11px; + padding: 10px 15px 11px; line-height: 19px; color: #999999; text-decoration: none; @@ -4012,7 +4003,7 @@ input[type="submit"].btn.btn-mini { display: inline-block; padding: 4px 10px 4px; margin: 5px 5px 6px; - line-height: 18px; + line-height: 20px; } .navbar .btn-group { @@ -4285,7 +4276,7 @@ input[type="submit"].btn.btn-mini { .breadcrumb { padding: 7px 14px; - margin: 0 0 18px; + margin: 0 0 20px; list-style: none; background-color: #fbfbfb; background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); @@ -4321,8 +4312,8 @@ input[type="submit"].btn.btn-mini { } .pagination { - height: 36px; - margin: 18px 0; + height: 40px; + margin: 20px 0; } .pagination ul { @@ -4347,7 +4338,7 @@ input[type="submit"].btn.btn-mini { .pagination span { float: left; padding: 0 14px; - line-height: 34px; + line-height: 38px; text-decoration: none; border: 1px solid #ddd; border-left-width: 0; @@ -4397,7 +4388,7 @@ input[type="submit"].btn.btn-mini { } .pager { - margin-bottom: 18px; + margin-bottom: 20px; margin-left: 0; text-align: center; list-style: none; @@ -4864,7 +4855,7 @@ input[type="submit"].btn.btn-mini { .thumbnails > li { float: left; - margin-bottom: 18px; + margin-bottom: 20px; margin-left: 20px; } @@ -4902,7 +4893,7 @@ a.thumbnail:hover { .label, .badge { - font-size: 10.998px; + font-size: 11.844px; font-weight: bold; line-height: 14px; color: #ffffff; @@ -5177,7 +5168,7 @@ a.badge:hover { } .accordion { - margin-bottom: 18px; + margin-bottom: 20px; } .accordion-group { @@ -5208,7 +5199,7 @@ a.badge:hover { .carousel { position: relative; - margin-bottom: 18px; + margin-bottom: 20px; line-height: 1; } @@ -5338,7 +5329,7 @@ a.badge:hover { .hero-unit p { font-size: 18px; font-weight: 200; - line-height: 27px; + line-height: 30px; color: inherit; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7b12bb5da4..6d64028f82 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -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; } diff --git a/docs/assets/img/grid-baseline-20px.png b/docs/assets/img/grid-baseline-20px.png new file mode 100644 index 0000000000000000000000000000000000000000..1ff044468e1ec5ca0fbd00e523e784302f5abf7d GIT binary patch literal 120 zcmeAS@N?(olHy`uVBq!ia0vp^j6f{H!3HFK_`(+gDajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_d9MN*zFjv*Ddl4hJdpm6lV|Nr%DYHSJ%I2i>J7!toSUoDGy Rs}5Af;OXk;vd$@?2>{_+BEJ9t literal 0 HcmV?d00001 diff --git a/docs/base-css.html b/docs/base-css.html index 2b7c1ec712..4655da12fc 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • diff --git a/docs/components.html b/docs/components.html index 4a658c7605..2c07efbf6e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • diff --git a/docs/download.html b/docs/download.html index 34fdc741ec..3463cbb030 100644 --- a/docs/download.html +++ b/docs/download.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • diff --git a/docs/examples.html b/docs/examples.html index 3b541df3b5..767b024cb6 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • diff --git a/docs/extend.html b/docs/extend.html index 7169908a6a..77c93af3b9 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • diff --git a/docs/index.html b/docs/index.html index 1789a507c5..683c94086c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • diff --git a/docs/javascript.html b/docs/javascript.html index 7fb1448ec0..d2a2a961e4 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 3fe6affab9..bb9308ec9f 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 1cda879541..763669b1c8 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -69,13 +69,6 @@
  • {{_i}}Javascript{{/i}}
    • -
  • -
  • - {{_i}}Customize{{/i}} -
    • -
  • - {{_i}}Examples{{/i}} -
  • {{_i}}Extend{{/i}}
    • diff --git a/docs/upgrading.html b/docs/upgrading.html index f001f17721..b12ac2e503 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • diff --git a/less/navbar.less b/less/navbar.less index a9582e0a47..660838eb8e 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -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; diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css index e0870be449..628dbba6f8 100644 --- a/less/tests/css-tests.css +++ b/less/tests/css-tests.css @@ -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 */ diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 2396e348cf..4b8b1a2772 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -55,6 +55,45 @@ + + +
    +

    Typography

    +
    + +
    +
    +
    +

    h1. Heading 1

    +

    h2. Heading 2

    +

    h3. Heading 3

    +

    h4. Heading 4

    +
    h5. Heading 5
    +
    h6. Heading 6
    +

    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.

    +
    +
    +
    +
    +

    h1. Heading 1

    +

    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.

    +

    h2. Heading 2

    +

    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.

    +

    h3. Heading 3

    +

    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.

    +

    h4. Heading 4

    +

    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.

    +
    h5. Heading 5
    +

    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.

    +
    h6. Heading 6
    +

    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.

    +
    +
    +
    + + + diff --git a/less/type.less b/less/type.less index 61a7db493a..8ff42476a6 100644 --- a/less/type.less +++ b/less/type.less @@ -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 { diff --git a/less/variables.less b/less/variables.less index 5d900164cf..9a3e0ed4e3 100644 --- a/less/variables.less +++ b/less/variables.less @@ -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