Browse Source

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

unreleased_contents
B Mathis 15 years ago
parent
commit
8867d7c582
  1. 106
      source/stylesheets/library/_typography.sass
  2. 7
      source/stylesheets/partials/base/_typography.sass
  3. 1
      source/typography.haml

106
source/stylesheets/library/_typography.sass

@ -1,5 +1,6 @@
!base_font_size ||= 14px !base_font_size ||= 14px
!base_font_size_small ||= 12px !base_font_size_small ||= 12px
!base_font_color ||= #333
!h6 = ceil(!base_font_size*1.3) !h6 = ceil(!base_font_size*1.3)
!h5 = ceil(!base_font_size*1.4) !h5 = ceil(!base_font_size*1.4)
!h4 = ceil(!base_font_size*1.7) !h4 = ceil(!base_font_size*1.7)
@ -58,8 +59,19 @@
=typography-defaults(!font_size = !base_font_size) =typography-defaults(!font_size = !base_font_size)
body body
line-height= ceil(!font_size * 1.625) line-height= ceil(!font_size * 1.625)
color= !base_font_color
p p
+p-style(!font_size) +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 em, dfn
font-style: italic font-style: italic
strong, dfn strong, dfn
@ -70,59 +82,17 @@
background-color: #ff6 background-color: #ff6
padding: 2px padding: 2px
margin: 0 -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 abbr, acronym
border-bottom: 1px dotted border-bottom: 1px dotted
cursor: help
address address
margin-top= !font_size * 1.625 margin-top= !font_size * 1.625
font-style: italic 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 pre, code
margin= !font_size * 1.625 0 margin= !font_size * 1.625 0
white-space: pre white-space: pre
pre, code, tt pre, code, tt
+fixed-font +fixed-font
font-size= !font_size
line-height= !font_size * 1.5 line-height= !font_size * 1.5
tt tt
display: block display: block
@ -135,6 +105,41 @@
big big
font-size= floor(!font_size * 1.25) 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) =p-style(!font_size = !base_font_size)
padding-bottom= !font_size * 0.8125 padding-bottom= !font_size * 0.8125
img img
@ -148,4 +153,17 @@
&.right &.right
margin: margin:
right= 0 right= 0
left= !font_size * .8125 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

7
source/stylesheets/partials/base/_typography.sass

@ -1,10 +1,13 @@
!base_font_size = 16px !base_font_size = 16px
!base_font_size_small = 13px !base_font_size_small = 13px
!base_font_color = #333
!default_border_radius = 6px !default_border_radius = 6px
+general-typography +general-typography
=heading-font =heading-font
+serif-font +serif-font
=quote-font
+serif-font
body body
font-size= !base_font_size font-size= !base_font_size
@ -14,6 +17,10 @@ h1,h2,h3,h4,h5,h6
color: #333 color: #333
font-weight: bold font-weight: bold
+heading-font +heading-font
blockquote
+heading-font
font-size= !base_font_size * 1.2
.quote blockquote .quote blockquote
font-size= !h4 font-size= !h4
line-height= !h5 * 1.625 line-height= !h5 * 1.625

1
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 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 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. neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
%abbr(title="For The Win!") FTW!
%h3 Unordered lists %h3 Unordered lists
%ul %ul

Loading…
Cancel
Save