Statistics
| Branch: | Tag: | Revision:

root / snf-astakos-app / astakos / im / static / im / less / type.less @ cf4c546f

History | View | Annotate | Download (2.7 kB)

1
/* Typography.less
2
 * Headings, body text, lists, code, and more for a versatile and durable typography system
3
 * ---------------------------------------------------------------------------------------- */
4

    
5

    
6
// BODY TEXT
7
// ---------
8

    
9
p {
10
  #font > .shorthand(normal,@basefont,@baseline);
11
  margin-bottom: @baseline / 2;
12
  small {
13
    font-size: @basefont - 2;
14
    color: @grayLight;
15
  }
16
}
17

    
18

    
19
// HEADINGS
20
// --------
21

    
22
h1, h2, h3, h4, h5, h6 {
23
  font-weight: bold;
24
  color: @grayDark;
25
  small {
26
    color: @grayLight;
27
  }
28
}
29
h1 {
30
  margin-bottom: @baseline;
31
  font-size: 30px;
32
  line-height: @baseline * 2;
33
  small {
34
    font-size: 18px;
35
  }
36
}
37
h2 {
38
  font-size: 24px;
39
  line-height: @baseline * 2;
40
  small {
41
    font-size: 14px;
42
  }
43
}
44
h3, h4, h5, h6 {
45
  line-height: @baseline * 2;
46
}
47
h3 {
48
  font-size: 18px;
49
  small {
50
    font-size: 14px;
51
  }
52
}
53
h4 {
54
  font-size: 16px;
55
  small {
56
    font-size: 12px;
57
  }
58
}
59
h5 {
60
  font-size: 14px;
61
}
62
h6 {
63
  font-size: 13px;
64
  color: @grayLight;
65
  text-transform: uppercase;
66
}
67

    
68

    
69
// COLORS
70
// ------
71

    
72
// Unordered and Ordered lists
73
ul, ol {
74
  margin: 0 0 @baseline 25px;
75
}
76
ul ul,
77
ul ol,
78
ol ol,
79
ol ul {
80
  margin-bottom: 0;
81
}
82
ul {
83
  list-style: disc;
84
}
85
ol {
86
  list-style: decimal;
87
}
88
li {
89
  line-height: @baseline;
90
  color: @gray;
91
}
92
ul.unstyled {
93
  list-style: none;
94
  margin-left: 0;
95
}
96

    
97
// Description Lists
98
dl {
99
  margin-bottom: @baseline;
100
  dt, dd {
101
    line-height: @baseline;
102
  }
103
  dt {
104
    font-weight: bold;
105
  }
106
  dd {
107
    margin-left: @baseline / 2;
108
  }
109
}
110

    
111
// MISC
112
// ----
113

    
114
// Horizontal rules
115
hr {
116
  margin: 20px 0 19px;
117
  border: 0;
118
  border-bottom: 1px solid #eee;
119
}
120

    
121
// Emphasis
122
strong {
123
  font-style: inherit;
124
  font-weight: bold;
125
}
126
em {
127
  font-style: italic;
128
  font-weight: inherit;
129
  line-height: inherit;
130
}
131
.muted {
132
  color: @grayLight;
133
}
134

    
135
// Blockquotes
136
blockquote {
137
  margin-bottom: @baseline;
138
  border-left: 5px solid #eee;
139
  padding-left: 15px;
140
  p {
141
    #font > .shorthand(300,14px,@baseline);
142
    margin-bottom: 0;
143
  }
144
  small {
145
    display: block;
146
    #font > .shorthand(300,12px,@baseline);
147
    color: @grayLight;
148
    &:before {
149
      content: '\2014 \00A0';
150
    }
151
  }
152
}
153

    
154
// Addresses
155
address {
156
  display: block;
157
  line-height: @baseline;
158
  margin-bottom: @baseline;
159
}
160

    
161
// Inline and block code styles
162
code, pre {
163
  padding: 0 3px 2px;
164
  font-family: Monaco, Andale Mono, Courier New, monospace;
165
  font-size: 12px;
166
  .border-radius(3px);
167
}
168
code {
169
  background-color: lighten(@orange, 40%);
170
  color: rgba(0,0,0,.75);
171
  padding: 1px 3px;
172
}
173
pre {
174
  background-color: #f5f5f5;
175
  display: block;
176
  padding: (@baseline - 1) / 2;
177
  margin: 0 0 @baseline;
178
  line-height: @baseline;
179
  font-size: 12px;
180
  border: 1px solid #ccc;
181
  border: 1px solid rgba(0,0,0,.15);
182
  .border-radius(3px);
183
  white-space: pre;
184
  white-space: pre-wrap;
185
  word-wrap: break-word;
186

    
187
}