updated typography, added typography debugging page

source/stylesheets/library/_typography.sass

@@ -1,67 +1,151 @@
 !base_font_size ||= 14px
 !base_font_size_small ||= 12px
-!h6 ||= !base_font_size
+!h6 = ceil(!base_font_size*1.3)
-!h5 ||= ceil(!h6*1.1)
+!h5 = ceil(!base_font_size*1.4)
-!h4 ||= ceil(!h5*1.1)
+!h4 = ceil(!base_font_size*1.7)
-!h3 ||= ceil(!h4*1.2)
+!h3 = ceil(!base_font_size*1.9)
-!h2 ||= ceil(!h3*1.25)
+!h2 = ceil(!base_font_size*2.2)
-!h1 ||= ceil(!h2*1.255)
+!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
+  !h6 = ceil(!font_size*1.3)
-  !h5 = ceil(!h6*1.1)
+  !h5 = ceil(!font_size*1.4)
-  !h4 = ceil(!h5*1.1)
+  !h4 = ceil(!font_size*1.7)
-  !h3 = ceil(!h4*1.2)
+  !h3 = ceil(!font_size*1.9)
-  !h2 = ceil(!h3*1.25)
+  !h2 = ceil(!font_size*2.2)
-  !h1 = ceil(!h2*1.255)
+  !h1 = ceil(!font_size*2.5)
   h1, h2, h3, h4
     &:first-child
       margin-top: 0
   h1
     font-size= !h1
-    margin-bottom= !h2/2
+    margin-bottom= !font_size * .765
-    line-height= !h1 * 1.2
+    line-height= !h1 * 1.625
   h2
     font-size= !h2
-    margin= !h2/2 0 !h2/2
+    margin-bottom= !font_size * .855
-    line-height= !h2 * 1.2
+    line-height= !h2 * 1.625
   h3
     font-size= !h3
-    margin= !h2/2 0 !h2/2
+    margin-bottom= !font_size * .956
-    line-height= !h3 * 1.2
+    line-height= !h3 * 1.625
   h4
     font-size= !h4
-    margin= !h4/2 0 !h4/2
+    margin-bottom= !font_size * 1.161
-    line-height= !h4 * 1.2
+    line-height= !h4 * 1.625
   h5
     font-size= !h5
-    margin= !h4/2 0 !h4/2
+    margin-bottom= !font_size * 1.238
-    line-height= !h5 * 1.2
+    line-height= !h5 * 1.625
   h6
     font-size= !h6
-    margin= !h4/2 0 !h4/2
+    margin-bottom= !font_size * 1.625
-    line-height= !h6 * 1.2
+    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
+    +p-style(!font_size)
-  h1,h2,h3,h4,h5,h6
+  em, dfn
-    font-weight: bold
-  em
     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
+  ol li
-    list-style: inside
+    list-style: decimal
-    margin= 0 0 (!font_size)
+  ul, ol
-  li
+    list-style: outside
-    padding: 0 0 2px
+    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)
+
+=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

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
 
++general-typography
 =heading-font
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+  +serif-font
-=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
 
 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
+  +heading-font
-  list-style: decimal
+.quote blockquote
-  margin-left: 1.9em
+  font-size= !h4
+  line-height= !h5 * 1.625
+  color: #555

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

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