GitList
Browse code

updated typography, added typography debugging page

B Mathis authored on 21/10/2009 at 04:30:52
Showing 4 changed files
source/stylesheets/library/_typography.sass
History View file @ c94e6f5
... ... 
@@ -1,67 +1,151 @@
1 1 
 !base_font_size ||= 14px
2 2 
 !base_font_size_small ||= 12px
3 
-!h6 ||= !base_font_size
4 
-!h5 ||= ceil(!h6*1.1)
5 
-!h4 ||= ceil(!h5*1.1)
6 
-!h3 ||= ceil(!h4*1.2)
7 
-!h2 ||= ceil(!h3*1.25)
8 
-!h1 ||= ceil(!h2*1.255)
3 
+!h6 = ceil(!base_font_size*1.3)
4 
+!h5 = ceil(!base_font_size*1.4)
5 
+!h4 = ceil(!base_font_size*1.7)
6 
+!h3 = ceil(!base_font_size*1.9)
7 
+!h2 = ceil(!base_font_size*2.2)
8 
+!h1 = ceil(!base_font_size*2.5)
9 
+
10 
+=heading-font
11 
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
12 
+=sans-font
13 
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
14 
+=serif-font
15 
+  font-family: Times, "Times New Roman" Georgia, serif
16 
+=fixed-font
17 
+  font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
18 
+
19 
+=general-typography(!font_size = !base_font_size)
20 
+  +set-heading-sizes(!font_size)
21 
+  +typography-defaults(!font_size)
9 22
10 23 
 =set-heading-sizes(!font_size = !base_font_size)
11 
-  !h6 = !font_size
12 
-  !h5 = ceil(!h6*1.1)
13 
-  !h4 = ceil(!h5*1.1)
14 
-  !h3 = ceil(!h4*1.2)
15 
-  !h2 = ceil(!h3*1.25)
16 
-  !h1 = ceil(!h2*1.255)
24 
+  !h6 = ceil(!font_size*1.3)
25 
+  !h5 = ceil(!font_size*1.4)
26 
+  !h4 = ceil(!font_size*1.7)
27 
+  !h3 = ceil(!font_size*1.9)
28 
+  !h2 = ceil(!font_size*2.2)
29 
+  !h1 = ceil(!font_size*2.5)
17 30 
   h1, h2, h3, h4
18 31 
     &:first-child
19 32 
       margin-top: 0
20 33 
   h1
21 34 
     font-size= !h1
22 
-    margin-bottom= !h2/2
23 
-    line-height= !h1 * 1.2
35 
+    margin-bottom= !font_size * .765
36 
+    line-height= !h1 * 1.625
24 37 
   h2
25 38 
     font-size= !h2
26 
-    margin= !h2/2 0 !h2/2
27 
-    line-height= !h2 * 1.2
39 
+    margin-bottom= !font_size * .855
40 
+    line-height= !h2 * 1.625
28 41 
   h3
29 42 
     font-size= !h3
30 
-    margin= !h2/2 0 !h2/2
31 
-    line-height= !h3 * 1.2
43 
+    margin-bottom= !font_size * .956
44 
+    line-height= !h3 * 1.625
32 45 
   h4
33 46 
     font-size= !h4
34 
-    margin= !h4/2 0 !h4/2
35 
-    line-height= !h4 * 1.2
47 
+    margin-bottom= !font_size * 1.161
48 
+    line-height= !h4 * 1.625
36 49 
   h5
37 50 
     font-size= !h5
38 
-    margin= !h4/2 0 !h4/2
39 
-    line-height= !h5 * 1.2
51 
+    margin-bottom= !font_size * 1.238
52 
+    line-height= !h5 * 1.625
40 53 
   h6
41 54 
     font-size= !h6
42 
-    margin= !h4/2 0 !h4/2
43 
-    line-height= !h6 * 1.2
55 
+    margin-bottom= !font_size * 1.625
56 
+    line-height= !h6 * 1.625
44 57
45 58 
 =typography-defaults(!font_size = !base_font_size)
46 
-  line-height= ceil(!font_size * 1.5)
59 
+  body
60 
+    line-height= ceil(!font_size * 1.625)
47 61 
   p
48 
-    padding-bottom= !font_size * 2
49 
-  h1,h2,h3,h4,h5,h6
50 
-    font-weight: bold
51 
-  em
62 
+    +p-style(!font_size)
63 
+  em, dfn
52 64 
     font-style: italic
53 
-  strong
65 
+  strong, dfn
54 66 
     font-weight: bold
67 
+  del
68 
+    text-decoration: line-through
55 69 
   span.highlight, em.highlight, strong.highlight
56 70 
     background-color: #ff6
57 71 
     padding: 2px
58 72 
     margin: 0 -2px
59 
-  ul, ol, dl
60 
-    list-style: inside
61 
-    margin= 0 0 (!font_size)
62 
-  li
63 
-    padding: 0 0 2px
73 
+  ol li
74 
+    list-style: decimal
75 
+  ul, ol
76 
+    list-style: outside
77 
+    margin= 0 0 !font_size * 1.625
78 
+  li ul, li ol
79 
+    margin= 0 0 !font_size * 1.625
80 
+  dl
81 
+    margin= 0 0 !font_size * 1.625
82 
+    dt
83 
+      font-weight: bold
84 
+    dd
85 
+      margin-left= !font_size * 1.625
86 
+  table
87 
+    margin= 0 0 !font_size * 1.625
88 
+    border-collapse: collapse
89 
+    th
90 
+      font-weight: bold
91 
+    tr, th, td
92 
+      margin: 0
93 
+      margin= 0 !font_size * 1.625 0 !font_size
94 
+    tfoot
95 
+      font-style: italic
96 
+    caption
97 
+      text-align: center
98 
+  abbr, acronym
99 
+    border-bottom: 1px dotted
100 
+  address
101 
+    margin-top= !font_size * 1.625
102 
+    font-style: italic
103 
+
104 
+  blockquote
105 
+    padding= !font_size !font_size !font_size * 1.625 !font_size * 1.4
106 
+    +serif-font
107 
+    font-size= !font_size * 1.2
108 
+    font-style: italic
109 
+    &:before
110 
+      content: "\201C"
111 
+      font-size= !font_size * 3
112 
+      margin= 0 0 0 -.625em
113 
+      position: absolute
114 
+      font-family: Times, Georgia, serif
115 
+      color: #aaa
116 
+      line-height: 0
117 
+    > p
118 
+      padding: 0
119 
+      margin: 0
120 
+  pre, code
121 
+    margin= !font_size * 1.625 0
122 
+    white-space: pre
123 
+  pre, code, tt
124 
+    +fixed-font
125 
+    font-size= !font_size
126 
+    line-height= !font_size * 1.5
127 
+  tt
128 
+    display: block
129 
+    margin= !font_size * 1.625 0
130 
+  hr
131 
+    margin-bottom= !font_size * 1.625
132 
+
64 133 
   small
65 134 
     font-size= floor(!font_size * .85)
66 135 
   big
67 
-    font-size= floor(!font_size * 1.25)
68 136 
\ No newline at end of file
137 
+    font-size= floor(!font_size * 1.25)
138 
+
139 
+=p-style(!font_size = !base_font_size)
140 
+  padding-bottom= !font_size * 0.8125
141 
+  img
142 
+    float: left
143 
+    margin:
144 
+      top= !font_size * .5
145 
+      right= !font_size * .8125
146 
+      bottom= !font_size* .8125
147 
+      left= 0
148 
+    padding: 0
149 
+    &.right
150 
+      margin:
151 
+        right= 0
152 
+        left= !font_size * .8125
69 153 
\ No newline at end of file
source/stylesheets/partials/base/_typography.sass
History View file @ c94e6f5
... ... 
@@ -1,26 +1,20 @@
1 
-!base_font_size = 15px
1 
+!base_font_size = 16px
2 2 
 !base_font_size_small = 13px
3 3 
 !default_border_radius = 6px
4 4
5 
-=heading-font
6 
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
7 
-=sans-font
8 
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
9 
-=serif-font
10 
-  font-family: Baskerville, "Times New Roman", Times, Georgia, serif
11 
-=fixed-font
12 
-  font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
13 
-
5 
++general-typography
6 
+=heading-font
7 
+  +serif-font
8 
+
14 9 
 body
15 10 
   font-size= !base_font_size
16 
-  +set-heading-sizes
17 
-  +typography-defaults
18 11 
   +sans-font
19 12
20 13 
 h1,h2,h3,h4,h5,h6
21 14 
   color: #333
22 
-  letter-spacing: -1px
23 15 
   font-weight: bold
24 
-ol li
25 
-  list-style: decimal
26 
-  margin-left: 1.9em
27 16 
\ No newline at end of file
17 
+  +heading-font
18 
+.quote blockquote
19 
+  font-size= !h4
20 
+  line-height= !h5 * 1.625
21 
+  color: #555
28 22 
\ No newline at end of file
source/stylesheets/partials/main/_layout.sass
History View file @ c94e6f5
... ... 
@@ -14,6 +14,7 @@ html body
14 14 
   padding: 20px 0
15 15 
   a.title
16 16 
     font-size= !h3
17 
+    +heading-font
17 18 
     display: inline-block
18 19 
     color= !header_nav
19 20 
     text-decoration: none
source/typography.haml
History View file @ c94e6f5
20 21 
new file mode 100644
... ... 
@@ -0,0 +1,108 @@
0 
+---
1 
+layout: default
2 
+title: Typography Debug
3 
+---
4 
+
5 
+%h1 Level 01 Heading
6 
+%h2 Level 02 Heading
7 
+%h3 Level 03 Heading
8 
+%h4 Level 04 Heading
9 
+%h5 Level 05 Heading
10 
+%h6 Level 06 Heading
11 
+
12 
+%p
13 
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu
14 
+  viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat
15 
+  arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum
16 
+  vel pede ut urna eleifend lacinia.
17 
+%p
18 
+  Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla
19 
+  ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat.
20 
+  Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed
21 
+  sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
22 
+%p
23 
+  Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id
24 
+  nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate
25 
+  felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a
26 
+  libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam
27 
+  porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum
28 
+  neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
29 
+
30 
+%h3 Unordered lists
31 
+%ul
32 
+  %li Lorem ipsum dolor sit amet
33 
+  %li Consectetur adipisicing elit
34 
+  %li Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
35 
+  %li Ut enim ad minim veniam
36 
+
37 
+%h3 Ordered lists
38 
+%ol
39 
+  %li Consectetur adipisicing elit
40 
+  %li Sed do eiusmod tempor incididunt ut labore
41 
+  %li Et dolore magna aliqua
42 
+
43 
+%h3 Blockquotes
44 
+%blockquote
45 
+  %p
46 
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
47 
+    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
48 
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
49 
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
50 
+
51 
+%h3 Tables
52 
+%table
53 
+  %caption
54 
+    Jimi Hendrix - albums
55 
+    %thead
56 
+      %tr
57 
+        %th Album
58 
+        %th Year
59 
+        %th Price
60 
+    %tfoot
61 
+      %tr
62 
+        %td Album
63 
+        %td Year
64 
+        %td Price
65 
+    %tbody
66 
+      %tr
67 
+        %td Are You Experienced
68 
+        %td 1967
69 
+        %td $10.00
70 
+      %tr
71 
+        %td Axis: Bold as Love
72 
+        %td 1967
73 
+        %td $12.00
74 
+      %tr
75 
+        %td Electric Ladyland
76 
+        %td 1968
77 
+        %td $10.00
78 
+      %tr
79 
+        %td Band of Gypsys
80 
+        %td 1970
81 
+        %td $12.00
82 
+%p
83 
+  %a(href="#")Link
84 
+  %br/
85 
+  %strong <strong>
86 
+  %br/
87 
+  %del <del> deleted
88 
+  %br/
89 
+  %dfn <dfn> dfn
90 
+  %br/
91 
+  %em <em> emphasis
92 
+  %br/
93 
+
94 
+%pre
95 
+  %code
96 
+    <html>
97 
+    <head>
98 
+    </head>
99 
+    <body>
100 
+    <div class = "main"> <div>
101 
+    </body>
102 
+    </html>
103 
+
104 
+%tt
105 
+  <tt>
106 
+  Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
107 
+%hr
0 108 
\ No newline at end of file