From 8867d7c5824d86a85dcb2ddfbfca954dc29331c9 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Wed, 21 Oct 2009 07:48:31 -0500 Subject: separated table, p, blockquote, ol, ul, dl styling into mixins, added abbr --- source/stylesheets/library/_typography.sass | 106 +++++++++++++--------- source/stylesheets/partials/base/_typography.sass | 7 ++ source/typography.haml | 1 + 3 files changed, 70 insertions(+), 44 deletions(-) diff --git a/source/stylesheets/library/_typography.sass b/source/stylesheets/library/_typography.sass index f0139382..e532f673 100644 --- a/source/stylesheets/library/_typography.sass +++ b/source/stylesheets/library/_typography.sass @@ -1,5 +1,6 @@ !base_font_size ||= 14px !base_font_size_small ||= 12px +!base_font_color ||= #333 !h6 = ceil(!base_font_size*1.3) !h5 = ceil(!base_font_size*1.4) !h4 = ceil(!base_font_size*1.7) @@ -58,8 +59,19 @@ =typography-defaults(!font_size = !base_font_size) body line-height= ceil(!font_size * 1.625) + color= !base_font_color p +p-style(!font_size) + table + +table-style(!font_size) + ol + +ol-style(!font_size) + ul + +ul-style(!font_size) + dl + +dl-style(!font_size) + blockquote + +quote-style em, dfn font-style: italic strong, dfn @@ -70,59 +82,17 @@ background-color: #ff6 padding: 2px margin: 0 -2px - ol li - list-style: decimal - ul, ol - list-style: outside - margin= 0 0 !font_size * 1.625 - li ul, li ol - margin= 0 0 !font_size * 1.625 - dl - margin= 0 0 !font_size * 1.625 - dt - font-weight: bold - dd - margin-left= !font_size * 1.625 - table - margin= 0 0 !font_size * 1.625 - border-collapse: collapse - th - font-weight: bold - tr, th, td - margin: 0 - margin= 0 !font_size * 1.625 0 !font_size - tfoot - font-style: italic - caption - text-align: center abbr, acronym border-bottom: 1px dotted + cursor: help address margin-top= !font_size * 1.625 font-style: italic - - blockquote - padding= !font_size !font_size !font_size * 1.625 !font_size * 1.4 - +serif-font - font-size= !font_size * 1.2 - font-style: italic - &:before - content: "\201C" - font-size= !font_size * 3 - margin= 0 0 0 -.625em - position: absolute - font-family: Times, Georgia, serif - color: #aaa - line-height: 0 - > p - padding: 0 - margin: 0 pre, code margin= !font_size * 1.625 0 white-space: pre pre, code, tt +fixed-font - font-size= !font_size line-height= !font_size * 1.5 tt display: block @@ -135,6 +105,41 @@ big font-size= floor(!font_size * 1.25) +=ol-style(!font_size = !base_font_size) + list-style: outside + margin= 0 0 !font_size * 1.625 + li + list-style: decimal + ol + margin= 0 0 !font_size * 1.625 + +=ul-style(!font_size = !base_font_size) + list-style: outside + margin= 0 0 !font_size * 1.625 + li ul + margin= 0 0 !font_size * 1.625 + +=dl-style(!font_size = !base_font_size) + margin= 0 0 !font_size * 1.625 + dt + font-weight: bold + dd + margin-left= !font_size * 1.625 + +=quote-style(!font_size = !base_font_size) + padding= !font_size !font_size !font_size * 1.625 !font_size * 1.4 + &:before + content: "\201C" + font-size= !font_size * 3 + margin= 0 0 0 -.625em + position: absolute + font-family: Times, Georgia, serif + color: #aaa + line-height: 0 + > p + padding: 0 + margin: 0 + =p-style(!font_size = !base_font_size) padding-bottom= !font_size * 0.8125 img @@ -148,4 +153,17 @@ &.right margin: right= 0 - left= !font_size * .8125 \ No newline at end of file + left= !font_size * .8125 + +=table-style(!font_size = !base_font_size) + margin= 0 0 !font_size * 1.625 + border-collapse: collapse + th + font-weight: bold + tr, th, td + margin: 0 + padding= 0 !font_size * 1.625 0 !font_size + tfoot + font-style: italic + caption + text-align: center \ No newline at end of file diff --git a/source/stylesheets/partials/base/_typography.sass b/source/stylesheets/partials/base/_typography.sass index 65e0010c..b5fcd56e 100644 --- a/source/stylesheets/partials/base/_typography.sass +++ b/source/stylesheets/partials/base/_typography.sass @@ -1,10 +1,13 @@ !base_font_size = 16px !base_font_size_small = 13px +!base_font_color = #333 !default_border_radius = 6px +general-typography =heading-font +serif-font +=quote-font + +serif-font body font-size= !base_font_size @@ -14,6 +17,10 @@ h1,h2,h3,h4,h5,h6 color: #333 font-weight: bold +heading-font + +blockquote + +heading-font + font-size= !base_font_size * 1.2 .quote blockquote font-size= !h4 line-height= !h5 * 1.625 diff --git a/source/typography.haml b/source/typography.haml index 84746c17..885758c8 100644 --- a/source/typography.haml +++ b/source/typography.haml @@ -27,6 +27,7 @@ title: Typography Debug libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue. + %abbr(title="For The Win!") FTW! %h3 Unordered lists %ul -- cgit v1.2.1