root / cloudcms / static / cloudcms / less / type.less @ 1c8df218
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 |
} |