diff options
| -rw-r--r-- | css/main.scss | 43 |
1 files changed, 29 insertions, 14 deletions
diff --git a/css/main.scss b/css/main.scss index 9424be6..787cae0 100644 --- a/css/main.scss +++ b/css/main.scss @@ -11,6 +11,27 @@ $base-font-size: 11.2px; $base-line-height: (1.2 * $base-font-size); $base-font-family: "helvetica neue", arial, helvetica, sans-serif; +/* size headings using classic scale of 16, 18, 24, 36, relative to 14px (original base font size) */ + +$rel-12-font-size: 12/14 * $base-font-size; +$rel-16-font-size: 16/14 * $base-font-size; +$rel-18-font-size: 18/14 * $base-font-size; +$rel-24-font-size: 24/14 * $base-font-size; +$rel-36-font-size: 36/14 * $base-font-size; + +$h1-font-size: $rel-36-font-size; +$h2-font-size: $rel-16-font-size; +$h3-font-size: $rel-16-font-size; +$h4-font-size: $base-font-size; +$h5-font-size: $base-font-size; +$h6-font-size: $base-font-size; + +$front-leadin-font-size: $rel-18-font-size; +$caption-font-size: $rel-16-font-size; +$meta-font-size: $rel-12-font-size; +$ligature-font-size: 1.3 * $base-font-size; +$compact-font-size: 0.7 * $base-font-size; + /* @group Reset */ @import "normalize"; @@ -27,31 +48,27 @@ pre, code, kbd, tt, samp, tt { /* @group Font sizes & margins */ p, ul, ol, dl, address, table, pre, form, fieldset { - font-size: 1em /* 14px */; + @include normalize-font-size($base-font-size); margin-bottom: 0.5em; } -/* size headings using classic scale of 16, 18, 24, 36 */ - /* @end */ /* @group Headings */ h1 { - font-size: 2.571em /* 36px */; line-height:1em /* 36px */; margin-top:0.1667em /* 6px */; margin-bottom:0.5833em /* 21px */; } h1 span { - font-size: 0.5em; + @include normalize-font-size($front-leadin-font-size, $h1-font-size); line-height: 1; color: #999; display: block; margin-bottom: 0.3em; } h2, h3 { - font-size:1.143em /* 16px */; margin-top:0; padding-bottom: 0.5em; margin-bottom:0.5em /* 8px */; @@ -60,11 +77,9 @@ h2, h3 { } h4 { margin-top:1em /* 21px */; - font-size:1em /* 14px */; margin-bottom: 0.5em; } h5, h6 { - font-size:1em /* 14px */; margin-bottom: 0.5em; } @@ -101,9 +116,9 @@ table { } caption { + @include normalize-font-size($caption-font-size); font-weight: bold; padding-bottom: 0.4375em; /* 7px */ - font-size:1.144em; /* 16px */ } thead th { @@ -163,9 +178,9 @@ del { } pre { + @include normalize-font-size($compact-font-size); white-space: pre; width: 100%; - font-size: 0.7em; overflow: hidden; border-top: 3px double #C7C7C7; border-bottom: 3px double #C7C7C7; @@ -245,10 +260,10 @@ label { /* @group Meta */ form .help { + @include normalize-font-size($meta-font-size); display: block; color: #777; font-style: normal; - font-size: 0.857em; /* 12px */ } /* @end */ @@ -256,8 +271,8 @@ form .help { /* @group Form controls */ input, textarea, select, button { + @include normalize-font-size($base-font-size); font-family: inherit; - font-size: 1em; line-height: inherit; } @@ -338,9 +353,9 @@ button.link { /* @end */ .amp { + @include normalize-font-size($ligature-font-size); font-family: "Bell MT", "Adobe Caslon Pro", "Goudy Old Style"; font-style: italic; - font-size: 1.3em; line-height: 0.7; margin: 0 0.2em 0 0.1em; } @@ -426,7 +441,7 @@ h5.micro, h6.micro, p.micro, span.micro { - font-size: 0.7em; + @include normalize-font-size($compact-font-size); line-height: 1.5em; display: block; } |