aboutsummaryrefslogtreecommitdiff
path: root/stylesheets/library/_typography.sass
blob: d433601d01a75504a3bcdda0b0fa40a03b222c37 (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
$base-font-size: 16px !default
$small: floor($base-font-size * 0.85) !default
$big: floor($base-font-size * 1.25) !default
$base-font-color: #333333 !default
$h6: ceil($base-font-size * 1)
$h5: ceil($base-font-size * 1)
$h4: ceil($base-font-size * 1.2)
$h3: ceil($base-font-size * 1.8)
$h2: ceil($base-font-size * 2.8)
$h1: ceil($base-font-size * 3.2)

=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)
  $h5: ceil($font-size * 1)
  $h4: ceil($font-size * 1.2)
  $h3: ceil($font-size * 1.8)
  $h2: ceil($font-size * 2.8)
  $h1: ceil($font-size * 3.2)
  h1, h2, h3, h4
    &:first-child
      margin-top: 0
  h1,h2,h3,h4,h5,h6
    line-height: 1.1em
    margin-bottom: 0.7em
    margin-top: 0.3em
  h1
    font-size: $h1
  h2
    font-size: $h2
  h3
    font-size: $h3
  h4
    font-size: $h4
  h5
    font-size: $h5
  h6
    font-size: $h6

=typography-defaults($font-size: $base-font-size)
  body
    line-height: 1.45em
    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: #ffff66
    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, 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: 0.2em
  small, .small
    font-size: floor($font-size * 0.85)
  big, .big
    font-size: floor($font-size * 1.25)

=ol-style($font-size: $base-font-size)
  list-style: inside decimal
  margin: 0 0 $font-size * 1.625
  li 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.813
  &:before
    content: "\201C"
    font-size: $font-size * 3
    margin: 5px 0 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: 1.3em
  img
    float: left
    margin:
      top: $font-size * 0.5
      right: $font-size * 0.813
      bottom: $font-size * 0.813
      left: 0
    padding: 0
    &.right
      margin:
        right: 0
        left: $font-size * 0.813

=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