by JohnAlbin: Add @import base to all sass files.
[project/zen.git] / STARTERKIT / sass / html-reset.scss
1 //
2 // HTML Element Styling
3 //
4 // Ok, I admit it. I fooled you. This isn't a "reset" stylesheet. Instead this
5 // is the place where you should set (not reset) the default styling for all
6 // HTML elements.
7 //
8 // @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
9 // @see http://snook.ca/archives/html_and_css/no_css_reset/
10 //
11
12 @import "base";
13
14
15 //
16 // Fonts
17 //
18 // Our font size and line height declarations are based on the following
19 // articles:
20 // - http://www.alistapart.com/articles/howtosizetextincss
21 // - http://24ways.org/2006/compose-to-a-vertical-rhythm
22 //
23 // All modern browsers use a 16px default font size. Specifying the font-size
24 // and line-height in ems (relative to the 16px default font) allows the user
25 // to resize the font in the browser and produces the most consistent results
26 // across different browsers.
27 //
28 body {
29   font-size: 100%; // Fixes exaggerated text resizing in IE6 and IE7
30 }
31
32 #skip-to-nav,
33 #page {
34   //
35   // To use a 12px font size on the page, delete the 14px declarations.
36   // to use a 14px font size on the page, delete the 12px declarations.
37   //
38
39   // Use a 12px base font size with a 18px line height
40   font-size: 0.75em; // 16px x .75 = 12px
41   line-height: 1.5em; // 12px x 1.5 = 18px
42
43   // Use a 14px base font size with a 21px line height
44   font-size: 0.875em; // 16px x .875 = 14px
45   line-height: 1.5em; // 14px x 1.5 = 21px
46 }
47
48 // Instead of relying on the fonts that are available on a user's computer, you
49 // can use web fonts which, like images, are resources downloaded to the user's
50 // browser. Because of the bandwidth and rendering resources required, web fonts
51 // should be used with care.
52 //
53 // Numerous resources for web fonts can be found on Google. Here are a few
54 // websites where you can find Open Source fonts to download:
55 // - http://www.fontsquirrel.com/fontface
56 // - http://www.theleagueofmoveabletype.com
57 //
58 // In order to use these fonts, you will need to convert them into formats
59 // suitable for web fonts. We recommend the free-to-use Font Squirrel's
60 // Font-Face Generator:
61 //   http://www.fontsquirrel.com/fontface/generator
62 //
63 // The following is an example @font-face declaration. This font can then be
64 // used in any ruleset using a property like this:  font-family: Example, serif;
65
66 /*
67 @font-face {
68   font-family: 'Example';
69   src: url('../fonts/example.eot');
70   src: url('../fonts/example.eot?iefix') format('eot'),
71     url('../fonts/example.woff') format('woff'),
72     url('../fonts/example.ttf') format('truetype'),
73     url('../fonts/example.svg#webfontOkOndcij') format('svg');
74   font-weight: normal;
75   font-style: normal;
76 }
77 */
78
79 body,
80 caption,
81 th,
82 td,
83 input,
84 textarea,
85 select,
86 option,
87 legend,
88 fieldset {
89   // The following font family declarations are based on the Microsoft core web
90   // fonts which are common fonts available on most computer systems. The DejaVu
91   // and Nimbus Sans fonts are commonly available on Linux systems where the MS
92   // fonts are less common. Tahoma and Helvetica are also widely available.
93   //
94   // A user's web browser will look at the comma-separated list and will
95   // attempt to use each font in turn until it finds one that is available
96   // on the user's computer. The final "generic" font (sans-serif, serif or
97   // monospace) hints at what type of font to use if the web browser doesn't
98   // find any of the fonts in the list.
99
100   /*
101   font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
102   font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
103   font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
104
105   font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
106   font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif;
107   font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
108   font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
109
110   font-family: "Courier New", "DejaVu Sans Mono", monospace;
111   */
112
113   font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
114 }
115
116 pre,
117 code,
118 kbd,
119 samp,
120 tt,
121 var {
122   font-family: "Courier New", "DejaVu Sans Mono", monospace;
123 }
124
125
126 //
127 // Block-level elements
128 //
129 // To achieve a pleasant vertical rhythm, we use the 1.5em line height of our
130 // base font as the top and bottom margins for our block level elements and make
131 // the line heights of any larger fonts be a multiple of 1.5 ems. For more
132 // information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
133 //
134 h1, h2, h3, h4, h5, h6,
135 p, blockquote, pre,
136 ul, ol, dl,
137 hr, table, fieldset {
138   margin: 1.5em 0;
139 }
140
141 // Headings
142 h1 {
143   font-size: 2em;
144   line-height: 1.5em;
145   margin: 0.75em 0;
146   // 0.75em is equivalent to 1.5em in the page's base font. font. Remember, a
147   // margin specified in ems is relative to the element's font-size, not to the
148   // pages' base font size. So, for example, if we want a 1.5em margin (relative
149   // to the base font), we have to divide that length by the element's
150   // font-size:  1.5em / 2em = 0.5em
151 }
152
153 h2 {
154   font-size: 1.5em;
155   margin: 1em 0; // Equivalent to 1.5em in the page's base font: 1.5 / 1.5 = 1em
156 }
157
158 h3 {
159   font-size: 1.3em;
160   margin: 1.154em 0; // Equivalent to 1.5em in the page's base font: 1.5 / 1.3 = 1.154
161 }
162
163 h4,
164 h5,
165 h6 {
166   font-size: 1.1em;
167   margin: 1.364em 0; // Equivalent to 1.5em in the page's base font: 1.5 / 1.1 = 1.364
168 }
169
170 // Other block-level elements
171 p {
172 }
173
174 blockquote {
175   margin-left: 2em;
176   margin-right: 2em;
177 }
178
179 pre {
180   font-size: 1.1em; // Monospace fonts can be hard to read
181   margin: 1.364em 0; // Equivalent to 1.5em in the page's base font: 1.5 / 1.1 = 1.364
182 }
183
184 hr {
185   height: 1px;
186   border: 1px solid #666;
187 }
188
189 address {
190 }
191
192
193 //
194 // Lists
195 //
196 // We need to standardize the list item indentation.
197 //
198 ul,
199 ol {
200   margin-left: 0; // LTR
201   padding-left: 2em; // LTR
202 }
203
204 .item-list ul { // Drupal overrides
205   margin: 1.5em 0;
206   padding: 0 0 0 2em; // LTR
207 }
208
209 ul, ol, .item-list ul, .item-list ol {
210   ul, ol {
211     margin: 0;
212   }
213 }
214
215 li,
216 .item-list ul li,
217 ul.menu li,
218 li.expanded,
219 li.collapsed,
220 li.leaf { // List items, including Drupal overrides
221   margin: 0;
222   padding: 0;
223 }
224
225 ul {
226   list-style-type: disc;
227   ul {
228     list-style-type: circle;
229     ul {
230       list-style-type: square;
231       ul {
232         list-style-type: circle;
233 }}}}
234
235 ol {
236   list-style-type: decimal;
237   ol {
238     list-style-type: lower-alpha;
239     ol {
240       list-style-type: decimal;
241 }}}
242
243 dl {
244 }
245
246 dt {
247   margin: 0;
248   padding: 0;
249 }
250
251 dd {
252   margin: 0 0 0 2em; // LTR
253   padding: 0;
254 }
255
256
257 //
258 // Tables
259 //
260 // Drupal provides table styling which is only useful for its admin section
261 // forms, so we override this default CSS. (We set it back in forms.css.)
262 //
263 table {
264   border-collapse: collapse;
265   // width: 100%; // Prevent cramped-looking tables
266 }
267
268 th {
269   text-align: left; // LTR
270   padding: 0;
271   border-bottom: none;
272 }
273
274 tbody {
275   border-top: none;
276 }
277
278 thead {
279 }
280
281 tfoot {
282 }
283
284 caption {
285 }
286
287 colgroup {
288 }
289
290 col {
291 }
292
293 tr {
294 }
295
296 td {
297 }
298
299
300 //
301 // Forms
302 //
303 form {
304   margin: 0;
305   padding: 0;
306 }
307
308 fieldset {
309   padding: 0.5em;
310 }
311
312 legend {
313 }
314
315 label {
316 }
317
318 input {
319 }
320
321 select {
322 }
323
324 optgroup {
325 }
326
327 option {
328 }
329
330 textarea {
331 }
332
333 button {
334 }
335
336
337 //
338 // Links
339 //
340 // The order of link states are based on Eric Meyer's article:
341 // http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
342 //
343 a {
344   &:link {
345   }
346
347   &:visited {
348   }
349
350   &:hover,
351   &:focus {
352   }
353
354   &:active {
355   }
356 }
357
358
359 //
360 // Other inline elements
361 //
362 img {
363   border: 0;
364   // vertical-align: bottom; // Suppress the space beneath the baseline
365 }
366
367 abbr, // Abbreviations
368 acronym {
369   border-bottom: 1px dotted #666;
370   cursor: help;
371   white-space: nowrap;
372 }
373
374 q {
375 }
376
377 cite {
378 }
379
380 strong, b {
381 }
382
383 em, i {
384 }
385
386 code,
387 kbd,
388 samp,
389 tt,
390 var { // Code, keyboard input, sample output, teletype, variable
391 }
392
393 del {
394 }
395
396 ins {
397 }
398
399 big {
400 }
401
402 small {
403 }
404
405 sub {
406 }
407
408 sup {
409 }