From c94e6f531d02e658d96a3b6255bbf424367765e9 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Tue, 20 Oct 2009 23:30:52 -0500 Subject: [PATCH] updated typography, added typography debugging page --- source/stylesheets/library/_typography.sass | 156 ++++++++++++++---- .../partials/base/_typography.sass | 26 ++- source/stylesheets/partials/main/_layout.sass | 1 + source/typography.haml | 108 ++++++++++++ 4 files changed, 239 insertions(+), 52 deletions(-) create mode 100644 source/typography.haml diff --git a/source/stylesheets/library/_typography.sass b/source/stylesheets/library/_typography.sass index 8b2c67c..f013938 100644 --- a/source/stylesheets/library/_typography.sass +++ b/source/stylesheets/library/_typography.sass @@ -1,67 +1,151 @@ !base_font_size ||= 14px !base_font_size_small ||= 12px -!h6 ||= !base_font_size -!h5 ||= ceil(!h6*1.1) -!h4 ||= ceil(!h5*1.1) -!h3 ||= ceil(!h4*1.2) -!h2 ||= ceil(!h3*1.25) -!h1 ||= ceil(!h2*1.255) +!h6 = ceil(!base_font_size*1.3) +!h5 = ceil(!base_font_size*1.4) +!h4 = ceil(!base_font_size*1.7) +!h3 = ceil(!base_font_size*1.9) +!h2 = ceil(!base_font_size*2.2) +!h1 = ceil(!base_font_size*2.5) + +=heading-font + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif +=sans-font + font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif +=serif-font + font-family: Times, "Times New Roman" Georgia, serif +=fixed-font + font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace + +=general-typography(!font_size = !base_font_size) + +set-heading-sizes(!font_size) + +typography-defaults(!font_size) =set-heading-sizes(!font_size = !base_font_size) - !h6 = !font_size - !h5 = ceil(!h6*1.1) - !h4 = ceil(!h5*1.1) - !h3 = ceil(!h4*1.2) - !h2 = ceil(!h3*1.25) - !h1 = ceil(!h2*1.255) + !h6 = ceil(!font_size*1.3) + !h5 = ceil(!font_size*1.4) + !h4 = ceil(!font_size*1.7) + !h3 = ceil(!font_size*1.9) + !h2 = ceil(!font_size*2.2) + !h1 = ceil(!font_size*2.5) h1, h2, h3, h4 &:first-child margin-top: 0 h1 font-size= !h1 - margin-bottom= !h2/2 - line-height= !h1 * 1.2 + margin-bottom= !font_size * .765 + line-height= !h1 * 1.625 h2 font-size= !h2 - margin= !h2/2 0 !h2/2 - line-height= !h2 * 1.2 + margin-bottom= !font_size * .855 + line-height= !h2 * 1.625 h3 font-size= !h3 - margin= !h2/2 0 !h2/2 - line-height= !h3 * 1.2 + margin-bottom= !font_size * .956 + line-height= !h3 * 1.625 h4 font-size= !h4 - margin= !h4/2 0 !h4/2 - line-height= !h4 * 1.2 + margin-bottom= !font_size * 1.161 + line-height= !h4 * 1.625 h5 font-size= !h5 - margin= !h4/2 0 !h4/2 - line-height= !h5 * 1.2 + margin-bottom= !font_size * 1.238 + line-height= !h5 * 1.625 h6 font-size= !h6 - margin= !h4/2 0 !h4/2 - line-height= !h6 * 1.2 + margin-bottom= !font_size * 1.625 + line-height= !h6 * 1.625 =typography-defaults(!font_size = !base_font_size) - line-height= ceil(!font_size * 1.5) + body + line-height= ceil(!font_size * 1.625) p - padding-bottom= !font_size * 2 - h1,h2,h3,h4,h5,h6 - font-weight: bold - em + +p-style(!font_size) + em, dfn font-style: italic - strong + strong, dfn font-weight: bold + del + text-decoration: line-through span.highlight, em.highlight, strong.highlight background-color: #ff6 padding: 2px margin: 0 -2px - ul, ol, dl - list-style: inside - margin= 0 0 (!font_size) - li - padding: 0 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 + 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 + margin= !font_size * 1.625 0 + hr + margin-bottom= !font_size * 1.625 + small font-size= floor(!font_size * .85) big - font-size= floor(!font_size * 1.25) \ No newline at end of file + font-size= floor(!font_size * 1.25) + +=p-style(!font_size = !base_font_size) + padding-bottom= !font_size * 0.8125 + img + float: left + margin: + top= !font_size * .5 + right= !font_size * .8125 + bottom= !font_size* .8125 + left= 0 + padding: 0 + &.right + margin: + right= 0 + left= !font_size * .8125 \ No newline at end of file diff --git a/source/stylesheets/partials/base/_typography.sass b/source/stylesheets/partials/base/_typography.sass index 3a607b5..65e0010 100644 --- a/source/stylesheets/partials/base/_typography.sass +++ b/source/stylesheets/partials/base/_typography.sass @@ -1,26 +1,20 @@ -!base_font_size = 15px +!base_font_size = 16px !base_font_size_small = 13px !default_border_radius = 6px -=heading-font - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif -=sans-font - font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif -=serif-font - font-family: Baskerville, "Times New Roman", Times, Georgia, serif -=fixed-font - font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace - ++general-typography +=heading-font + +serif-font + body font-size= !base_font_size - +set-heading-sizes - +typography-defaults +sans-font h1,h2,h3,h4,h5,h6 color: #333 - letter-spacing: -1px font-weight: bold -ol li - list-style: decimal - margin-left: 1.9em \ No newline at end of file + +heading-font +.quote blockquote + font-size= !h4 + line-height= !h5 * 1.625 + color: #555 \ No newline at end of file diff --git a/source/stylesheets/partials/main/_layout.sass b/source/stylesheets/partials/main/_layout.sass index 5ad0250..0b6bf27 100644 --- a/source/stylesheets/partials/main/_layout.sass +++ b/source/stylesheets/partials/main/_layout.sass @@ -14,6 +14,7 @@ html body padding: 20px 0 a.title font-size= !h3 + +heading-font display: inline-block color= !header_nav text-decoration: none diff --git a/source/typography.haml b/source/typography.haml new file mode 100644 index 0000000..84746c1 --- /dev/null +++ b/source/typography.haml @@ -0,0 +1,108 @@ +--- +layout: default +title: Typography Debug +--- + +%h1 Level 01 Heading +%h2 Level 02 Heading +%h3 Level 03 Heading +%h4 Level 04 Heading +%h5 Level 05 Heading +%h6 Level 06 Heading + +%p + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu + viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat + arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum + vel pede ut urna eleifend lacinia. +%p + Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla + ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. + Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed + sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna. +%p + Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id + nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate + felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a + 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. + +%h3 Unordered lists +%ul + %li Lorem ipsum dolor sit amet + %li Consectetur adipisicing elit + %li Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua + %li Ut enim ad minim veniam + +%h3 Ordered lists +%ol + %li Consectetur adipisicing elit + %li Sed do eiusmod tempor incididunt ut labore + %li Et dolore magna aliqua + +%h3 Blockquotes +%blockquote + %p + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +%h3 Tables +%table + %caption + Jimi Hendrix - albums + %thead + %tr + %th Album + %th Year + %th Price + %tfoot + %tr + %td Album + %td Year + %td Price + %tbody + %tr + %td Are You Experienced + %td 1967 + %td $10.00 + %tr + %td Axis: Bold as Love + %td 1967 + %td $12.00 + %tr + %td Electric Ladyland + %td 1968 + %td $10.00 + %tr + %td Band of Gypsys + %td 1970 + %td $12.00 +%p + %a(href="#")Link + %br/ + %strong <strong> + %br/ + %del <del> deleted + %br/ + %dfn <dfn> dfn + %br/ + %em <em> emphasis + %br/ + +%pre + %code + <html> + <head> + </head> + <body> + <div class = "main"> <div> + </body> + </html> + +%tt + <tt> + Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus. +%hr \ No newline at end of file