root / snf-astakos-app / astakos / im / static / im / less / type.less @ 9b32e2fb
History | View | Annotate | Download (2.7 kB)
1 | 13858d75 | Kostas Papadimitriou | /* Typography.less |
---|---|---|---|
2 | 13858d75 | Kostas Papadimitriou | * Headings, body text, lists, code, and more for a versatile and durable typography system |
3 | 13858d75 | Kostas Papadimitriou | * ---------------------------------------------------------------------------------------- */ |
4 | 13858d75 | Kostas Papadimitriou | |
5 | 13858d75 | Kostas Papadimitriou | |
6 | 13858d75 | Kostas Papadimitriou | // BODY TEXT |
7 | 13858d75 | Kostas Papadimitriou | // --------- |
8 | 13858d75 | Kostas Papadimitriou | |
9 | 13858d75 | Kostas Papadimitriou | p { |
10 | 13858d75 | Kostas Papadimitriou | #font > .shorthand(normal,@basefont,@baseline); |
11 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline / 2; |
12 | 13858d75 | Kostas Papadimitriou | small { |
13 | 13858d75 | Kostas Papadimitriou | font-size: @basefont - 2; |
14 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
15 | 13858d75 | Kostas Papadimitriou | } |
16 | 13858d75 | Kostas Papadimitriou | } |
17 | 13858d75 | Kostas Papadimitriou | |
18 | 13858d75 | Kostas Papadimitriou | |
19 | 13858d75 | Kostas Papadimitriou | // HEADINGS |
20 | 13858d75 | Kostas Papadimitriou | // -------- |
21 | 13858d75 | Kostas Papadimitriou | |
22 | 13858d75 | Kostas Papadimitriou | h1, h2, h3, h4, h5, h6 { |
23 | 13858d75 | Kostas Papadimitriou | font-weight: bold; |
24 | 13858d75 | Kostas Papadimitriou | color: @grayDark; |
25 | 13858d75 | Kostas Papadimitriou | small { |
26 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
27 | 13858d75 | Kostas Papadimitriou | } |
28 | 13858d75 | Kostas Papadimitriou | } |
29 | 13858d75 | Kostas Papadimitriou | h1 { |
30 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
31 | 13858d75 | Kostas Papadimitriou | font-size: 30px; |
32 | 13858d75 | Kostas Papadimitriou | line-height: @baseline * 2; |
33 | 13858d75 | Kostas Papadimitriou | small { |
34 | 13858d75 | Kostas Papadimitriou | font-size: 18px; |
35 | 13858d75 | Kostas Papadimitriou | } |
36 | 13858d75 | Kostas Papadimitriou | } |
37 | 13858d75 | Kostas Papadimitriou | h2 { |
38 | 13858d75 | Kostas Papadimitriou | font-size: 24px; |
39 | 13858d75 | Kostas Papadimitriou | line-height: @baseline * 2; |
40 | 13858d75 | Kostas Papadimitriou | small { |
41 | 13858d75 | Kostas Papadimitriou | font-size: 14px; |
42 | 13858d75 | Kostas Papadimitriou | } |
43 | 13858d75 | Kostas Papadimitriou | } |
44 | 13858d75 | Kostas Papadimitriou | h3, h4, h5, h6 { |
45 | 13858d75 | Kostas Papadimitriou | line-height: @baseline * 2; |
46 | 13858d75 | Kostas Papadimitriou | } |
47 | 13858d75 | Kostas Papadimitriou | h3 { |
48 | 13858d75 | Kostas Papadimitriou | font-size: 18px; |
49 | 13858d75 | Kostas Papadimitriou | small { |
50 | 13858d75 | Kostas Papadimitriou | font-size: 14px; |
51 | 13858d75 | Kostas Papadimitriou | } |
52 | 13858d75 | Kostas Papadimitriou | } |
53 | 13858d75 | Kostas Papadimitriou | h4 { |
54 | 13858d75 | Kostas Papadimitriou | font-size: 16px; |
55 | 13858d75 | Kostas Papadimitriou | small { |
56 | 13858d75 | Kostas Papadimitriou | font-size: 12px; |
57 | 13858d75 | Kostas Papadimitriou | } |
58 | 13858d75 | Kostas Papadimitriou | } |
59 | 13858d75 | Kostas Papadimitriou | h5 { |
60 | 13858d75 | Kostas Papadimitriou | font-size: 14px; |
61 | 13858d75 | Kostas Papadimitriou | } |
62 | 13858d75 | Kostas Papadimitriou | h6 { |
63 | 13858d75 | Kostas Papadimitriou | font-size: 13px; |
64 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
65 | 13858d75 | Kostas Papadimitriou | text-transform: uppercase; |
66 | 13858d75 | Kostas Papadimitriou | } |
67 | 13858d75 | Kostas Papadimitriou | |
68 | 13858d75 | Kostas Papadimitriou | |
69 | 13858d75 | Kostas Papadimitriou | // COLORS |
70 | 13858d75 | Kostas Papadimitriou | // ------ |
71 | 13858d75 | Kostas Papadimitriou | |
72 | 13858d75 | Kostas Papadimitriou | // Unordered and Ordered lists |
73 | 13858d75 | Kostas Papadimitriou | ul, ol { |
74 | 13858d75 | Kostas Papadimitriou | margin: 0 0 @baseline 25px; |
75 | 13858d75 | Kostas Papadimitriou | } |
76 | 13858d75 | Kostas Papadimitriou | ul ul, |
77 | 13858d75 | Kostas Papadimitriou | ul ol, |
78 | 13858d75 | Kostas Papadimitriou | ol ol, |
79 | 13858d75 | Kostas Papadimitriou | ol ul { |
80 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
81 | 13858d75 | Kostas Papadimitriou | } |
82 | 13858d75 | Kostas Papadimitriou | ul { |
83 | 13858d75 | Kostas Papadimitriou | list-style: disc; |
84 | 13858d75 | Kostas Papadimitriou | } |
85 | 13858d75 | Kostas Papadimitriou | ol { |
86 | 13858d75 | Kostas Papadimitriou | list-style: decimal; |
87 | 13858d75 | Kostas Papadimitriou | } |
88 | 13858d75 | Kostas Papadimitriou | li { |
89 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
90 | 13858d75 | Kostas Papadimitriou | color: @gray; |
91 | 13858d75 | Kostas Papadimitriou | } |
92 | 13858d75 | Kostas Papadimitriou | ul.unstyled { |
93 | 13858d75 | Kostas Papadimitriou | list-style: none; |
94 | 13858d75 | Kostas Papadimitriou | margin-left: 0; |
95 | 13858d75 | Kostas Papadimitriou | } |
96 | 13858d75 | Kostas Papadimitriou | |
97 | 13858d75 | Kostas Papadimitriou | // Description Lists |
98 | 13858d75 | Kostas Papadimitriou | dl { |
99 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
100 | 13858d75 | Kostas Papadimitriou | dt, dd { |
101 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
102 | 13858d75 | Kostas Papadimitriou | } |
103 | 13858d75 | Kostas Papadimitriou | dt { |
104 | 13858d75 | Kostas Papadimitriou | font-weight: bold; |
105 | 13858d75 | Kostas Papadimitriou | } |
106 | 13858d75 | Kostas Papadimitriou | dd { |
107 | 13858d75 | Kostas Papadimitriou | margin-left: @baseline / 2; |
108 | 13858d75 | Kostas Papadimitriou | } |
109 | 13858d75 | Kostas Papadimitriou | } |
110 | 13858d75 | Kostas Papadimitriou | |
111 | 13858d75 | Kostas Papadimitriou | // MISC |
112 | 13858d75 | Kostas Papadimitriou | // ---- |
113 | 13858d75 | Kostas Papadimitriou | |
114 | 13858d75 | Kostas Papadimitriou | // Horizontal rules |
115 | 13858d75 | Kostas Papadimitriou | hr { |
116 | 13858d75 | Kostas Papadimitriou | margin: 20px 0 19px; |
117 | 13858d75 | Kostas Papadimitriou | border: 0; |
118 | 13858d75 | Kostas Papadimitriou | border-bottom: 1px solid #eee; |
119 | 13858d75 | Kostas Papadimitriou | } |
120 | 13858d75 | Kostas Papadimitriou | |
121 | 13858d75 | Kostas Papadimitriou | // Emphasis |
122 | 13858d75 | Kostas Papadimitriou | strong { |
123 | 13858d75 | Kostas Papadimitriou | font-style: inherit; |
124 | 13858d75 | Kostas Papadimitriou | font-weight: bold; |
125 | 13858d75 | Kostas Papadimitriou | } |
126 | 13858d75 | Kostas Papadimitriou | em { |
127 | 13858d75 | Kostas Papadimitriou | font-style: italic; |
128 | 13858d75 | Kostas Papadimitriou | font-weight: inherit; |
129 | 13858d75 | Kostas Papadimitriou | line-height: inherit; |
130 | 13858d75 | Kostas Papadimitriou | } |
131 | 13858d75 | Kostas Papadimitriou | .muted { |
132 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
133 | 13858d75 | Kostas Papadimitriou | } |
134 | 13858d75 | Kostas Papadimitriou | |
135 | 13858d75 | Kostas Papadimitriou | // Blockquotes |
136 | 13858d75 | Kostas Papadimitriou | blockquote { |
137 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
138 | 13858d75 | Kostas Papadimitriou | border-left: 5px solid #eee; |
139 | 13858d75 | Kostas Papadimitriou | padding-left: 15px; |
140 | 13858d75 | Kostas Papadimitriou | p { |
141 | 13858d75 | Kostas Papadimitriou | #font > .shorthand(300,14px,@baseline); |
142 | 13858d75 | Kostas Papadimitriou | margin-bottom: 0; |
143 | 13858d75 | Kostas Papadimitriou | } |
144 | 13858d75 | Kostas Papadimitriou | small { |
145 | 13858d75 | Kostas Papadimitriou | display: block; |
146 | 13858d75 | Kostas Papadimitriou | #font > .shorthand(300,12px,@baseline); |
147 | 13858d75 | Kostas Papadimitriou | color: @grayLight; |
148 | 13858d75 | Kostas Papadimitriou | &:before { |
149 | 13858d75 | Kostas Papadimitriou | content: '\2014 \00A0'; |
150 | 13858d75 | Kostas Papadimitriou | } |
151 | 13858d75 | Kostas Papadimitriou | } |
152 | 13858d75 | Kostas Papadimitriou | } |
153 | 13858d75 | Kostas Papadimitriou | |
154 | 13858d75 | Kostas Papadimitriou | // Addresses |
155 | 13858d75 | Kostas Papadimitriou | address { |
156 | 13858d75 | Kostas Papadimitriou | display: block; |
157 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
158 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
159 | 13858d75 | Kostas Papadimitriou | } |
160 | 13858d75 | Kostas Papadimitriou | |
161 | 13858d75 | Kostas Papadimitriou | // Inline and block code styles |
162 | 13858d75 | Kostas Papadimitriou | code, pre { |
163 | 13858d75 | Kostas Papadimitriou | padding: 0 3px 2px; |
164 | 13858d75 | Kostas Papadimitriou | font-family: Monaco, Andale Mono, Courier New, monospace; |
165 | 13858d75 | Kostas Papadimitriou | font-size: 12px; |
166 | 13858d75 | Kostas Papadimitriou | .border-radius(3px); |
167 | 13858d75 | Kostas Papadimitriou | } |
168 | 13858d75 | Kostas Papadimitriou | code { |
169 | 13858d75 | Kostas Papadimitriou | background-color: lighten(@orange, 40%); |
170 | 13858d75 | Kostas Papadimitriou | color: rgba(0,0,0,.75); |
171 | 13858d75 | Kostas Papadimitriou | padding: 1px 3px; |
172 | 13858d75 | Kostas Papadimitriou | } |
173 | 13858d75 | Kostas Papadimitriou | pre { |
174 | 13858d75 | Kostas Papadimitriou | background-color: #f5f5f5; |
175 | 13858d75 | Kostas Papadimitriou | display: block; |
176 | 13858d75 | Kostas Papadimitriou | padding: (@baseline - 1) / 2; |
177 | 13858d75 | Kostas Papadimitriou | margin: 0 0 @baseline; |
178 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
179 | 13858d75 | Kostas Papadimitriou | font-size: 12px; |
180 | 13858d75 | Kostas Papadimitriou | border: 1px solid #ccc; |
181 | 13858d75 | Kostas Papadimitriou | border: 1px solid rgba(0,0,0,.15); |
182 | 13858d75 | Kostas Papadimitriou | .border-radius(3px); |
183 | 13858d75 | Kostas Papadimitriou | white-space: pre; |
184 | 13858d75 | Kostas Papadimitriou | white-space: pre-wrap; |
185 | 13858d75 | Kostas Papadimitriou | word-wrap: break-word; |
186 | 13858d75 | Kostas Papadimitriou | |
187 | 13858d75 | Kostas Papadimitriou | } |