separated table, p, blockquote, ol, ul, dl styling into mixins, added abbr
This commit is contained in:
parent
c94e6f531d
commit
8867d7c582
@ -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
|
||||||
@ -149,3 +154,16 @@
|
|||||||
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
|
@ -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
|
||||||
|
@ -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…
Reference in New Issue
Block a user