Statistics
| Branch: | Tag: | Revision:

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

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
}