aboutsummaryrefslogtreecommitdiff
path: root/stylesheets/library/_typography.sass
blob: 8867057fcf8ebe53b26bbcb14996c7995b1014aa (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
!base_font_size ||= 16px
!small ||= floor(!base_font_size * .85)
!big ||= floor(!base_font_size * 1.25)
!base_font_color ||= #333
!h6 = ceil(!base_font_size*1.3)
!h5 = ceil(!base_font_size*1.4)
!h4 = ceil(!base_font_size*1.7)
!h3 = ceil(!base_font_size*1.9)
!h2 = ceil(!base_font_size*2.2)
!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: Georgia, Times, "Times New Roman", serif
=fixed-font
  font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
=mono-font
  +fixed-font

=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 = ceil(!font_size*1.3)
  !h5 = ceil(!font_size*1.4)
  !h4 = ceil(!font_size*1.7)
  !h3 = ceil(!font_size*1.9)
  !h2 = ceil(!font_size*2.2)
  !h1 = ceil(!font_size*2.5)
  h1, h2, h3, h4
    &:first-child
      margin-top: 0
  h1
    font-size= !h1
    margin-bottom= !font_size * .765
    line-height= !h1 * 1.625
  h2
    font-size= !h2
    margin-bottom= !font_size * .855
    line-height= !h2 * 1.625
  h3
    font-size= !h3
    margin-bottom= !font_size * .956
    line-height= !h3 * 1.625
  h4
    font-size= !h4
    margin-bottom= !font_size * 1.161
    line-height= !h4 * 1.625
  h5
    font-size= !h5
    margin-bottom= !font_size * 1.238
    line-height= !h5 * 1.625
  h6
    font-size= !h6
    margin-bottom= !font_size * 1.625
    line-height= !h6 * 1.625

=typography-defaults(!font_size = !base_font_size)
  body
    line-height: 1.625em
    color= !base_font_color
  p
    +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
  q
    font-style: italic
    &:before
      content: "\201C"
    &:after
      content: "\201D"
  em, dfn
    font-style: italic
  strong, dfn
    font-weight: bold
  del
    text-decoration: line-through
  span.highlight, em.highlight, strong.highlight
    background-color: #ff6
    padding: 2px
    margin: 0 -2px
  abbr, acronym
    border-bottom: 1px dotted
    cursor: help
  address
    margin-top= !font_size * 1.625
    font-style: italic
  pre, code
    margin= !font_size * 1.625 0
    white-space: pre
  pre, code, tt
    +fixed-font
    line-height= !font_size * 1.5
  tt
    display: block
    margin= !font_size * 1.625 0
  sub, sup
    line-height: 0
  hr
    margin-bottom= !font_size * 1.625
  
  small, .small
    font-size= floor(!font_size * .85)
  big, .big
    font-size= floor(!font_size * 1.25)

=ol-style(!font_size = !base_font_size)
  list-style: inside
  margin= 0 0 !font_size * 1.625
  li
    list-style-type: decimal
    ol
      margin= 0 0 !font_size * 1.625
      
=ul-style(!font_size = !base_font_size)
  list-style: inside
  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*1.5 !font_size*1.5 !font_size * 1.5 !font_size * 1.8
  position: relative
  margin-bottom= !font_size * 0.8125 
  &:before
    content: "\201C"
    font-size= !font_size * 3
    margin= 5px 0 0 -.525em
    position: absolute
    font-family: Times, Georgia, serif
    line-height: 0
  > p
    padding: 0
    margin: 0
    
=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

=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