GitList
Browse code

separated table, p, blockquote, ol, ul, dl styling into mixins, added abbr

B Mathis authored on 21/10/2009 at 12:48:31
Showing 3 changed files
source/stylesheets/library/_typography.sass
History View file @ 8867d7c
... ... 
@@ -1,5 +1,6 @@
1 1 
 !base_font_size ||= 14px
2 2 
 !base_font_size_small ||= 12px
3 
+!base_font_color ||= #333
3 4 
 !h6 = ceil(!base_font_size*1.3)
4 5 
 !h5 = ceil(!base_font_size*1.4)
5 6 
 !h4 = ceil(!base_font_size*1.7)
... ... 
@@ -58,8 +59,19 @@
58 58 
 =typography-defaults(!font_size = !base_font_size)
59 59 
   body
60 60 
     line-height= ceil(!font_size * 1.625)
61 
+    color= !base_font_color
61 62 
   p
62 63 
     +p-style(!font_size)
64 
+  table
65 
+    +table-style(!font_size)
66 
+  ol
67 
+    +ol-style(!font_size)
68 
+  ul
69 
+    +ul-style(!font_size)
70 
+  dl
71 
+    +dl-style(!font_size)
72 
+  blockquote
73 
+    +quote-style
63 74 
   em, dfn
64 75 
     font-style: italic
65 76 
   strong, dfn
... ... 
@@ -70,59 +82,17 @@
70 70 
     background-color: #ff6
71 71 
     padding: 2px
72 72 
     margin: 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 73 
   abbr, acronym
99 74 
     border-bottom: 1px dotted
75 
+    cursor: help
100 76 
   address
101 77 
     margin-top= !font_size * 1.625
102 78 
     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 79 
   pre, code
121 80 
     margin= !font_size * 1.625 0
122 81 
     white-space: pre
123 82 
   pre, code, tt
124 83 
     +fixed-font
125 
-    font-size= !font_size
126 84 
     line-height= !font_size * 1.5
127 85 
   tt
128 86 
     display: block
... ... 
@@ -135,6 +105,41 @@
135 135 
   big
136 136 
     font-size= floor(!font_size * 1.25)
137 137
138 
+=ol-style(!font_size = !base_font_size)
139 
+  list-style: outside
140 
+  margin= 0 0 !font_size * 1.625
141 
+  li
142 
+    list-style: decimal
143 
+    ol
144 
+      margin= 0 0 !font_size * 1.625
145 
+
146 
+=ul-style(!font_size = !base_font_size)
147 
+  list-style: outside
148 
+  margin= 0 0 !font_size * 1.625
149 
+  li ul
150 
+    margin= 0 0 !font_size * 1.625
151 
+
152 
+=dl-style(!font_size = !base_font_size)
153 
+  margin= 0 0 !font_size * 1.625
154 
+  dt
155 
+    font-weight: bold
156 
+  dd
157 
+    margin-left= !font_size * 1.625
158 
+
159 
+=quote-style(!font_size = !base_font_size)
160 
+  padding= !font_size !font_size !font_size * 1.625 !font_size * 1.4
161 
+  &:before
162 
+    content: "\201C"
163 
+    font-size= !font_size * 3
164 
+    margin= 0 0 0 -.625em
165 
+    position: absolute
166 
+    font-family: Times, Georgia, serif
167 
+    color: #aaa
168 
+    line-height: 0
169 
+  > p
170 
+    padding: 0
171 
+    margin: 0
172 
+
138 173 
 =p-style(!font_size = !base_font_size)
139 174 
   padding-bottom= !font_size * 0.8125
140 175 
   img
... ... 
@@ -148,4 +153,17 @@
148 148 
     &.right
149 149 
       margin:
150 150 
         right= 0
151 
-        left= !font_size * .8125
152 151 
\ No newline at end of file
152 
+        left= !font_size * .8125
153 
+
154 
+=table-style(!font_size = !base_font_size)
155 
+  margin= 0 0 !font_size * 1.625
156 
+  border-collapse: collapse
157 
+  th
158 
+    font-weight: bold
159 
+  tr, th, td
160 
+    margin: 0
161 
+    padding= 0 !font_size * 1.625 0 !font_size
162 
+  tfoot
163 
+    font-style: italic
164 
+  caption
165 
+    text-align: center
153 166 
\ No newline at end of file
source/stylesheets/partials/base/_typography.sass
History View file @ 8867d7c
... ... 
@@ -1,10 +1,13 @@
1 1 
 !base_font_size = 16px
2 2 
 !base_font_size_small = 13px
3 
+!base_font_color = #333
3 4 
 !default_border_radius = 6px
4 5
5 6 
 +general-typography
6 7 
 =heading-font
7 8 
   +serif-font
9 
+=quote-font
10 
+  +serif-font
8 11
9 12 
 body
10 13 
   font-size= !base_font_size
... ... 
@@ -14,6 +17,10 @@ h1,h2,h3,h4,h5,h6
14 14 
   color: #333
15 15 
   font-weight: bold
16 16 
   +heading-font
17 
+
18 
+blockquote
19 
+  +heading-font
20 
+  font-size= !base_font_size * 1.2
17 21 
 .quote blockquote
18 22 
   font-size= !h4
19 23 
   line-height= !h5 * 1.625
source/typography.haml
History View file @ 8867d7c
... ... 
@@ -27,6 +27,7 @@ title: Typography Debug
27 27 
   libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam
28 28 
   porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum
29 29 
   neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
30 
+  %abbr(title="For The Win!") FTW!
30 31
31 32 
 %h3 Unordered lists
32 33 
 %ul