-
Notifications
You must be signed in to change notification settings - Fork 0
/
layout.scss
103 lines (91 loc) · 3.12 KB
/
layout.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
/* layout.css
* ==========
* TODO UPDATE THIS DOCUMENTATION
*
* Author: Alexander Hirzel <[email protected]>
*
*
* Abstract
* --------
* This stylesheet provides general rules to structure a document and allow it
* document to have multiple columns. This enables the designer to have much
* more freedom in placing elements.
*
*
* How to structure the document
* -----------------------------
* The <body> element must contain div#page-middle and div#page-footer only.
* Each #top-navigation > ul > li must contain a div.padding.
*
* Width is set on .panel.
* Only div.panels MUST immediately contain only a dummy div.
*
* Padding is to be set by .panel.padded
*
* The following elements must have an empty <span></span> as the last child:
* - div.multicolumn
* - div.sidebar
* - ul.horizontal-navigation - must have <li></li>
*
*
* How to use this stylesheet
* --------------------------
* In order to use these layout rules, content must be properly placed into
* a hierarchy of <div> elements. Several hierarchies are possible. For each,
* the top-level container is either (nothing), div.double or div.triple. The
* requirements for each are as follows:
*
* - (none) - divides page into a wider main part and sidebar. Contains a
* div.panel and a div.sidebar (one of each), inside either a
* div.right or div.left (one of each);
*
* - div.double - divides the page in half. Contains a div.left and a
* div.right, each with child div.panel's;
*
* - div.triple - divides the page into thirds. Contains a div.left,
* div.center and div.right, each with child div.panel's.
*
* The div.left and div.right containers may contain a div.padding, which adds
* a pattern that is consistent site-wide.
*
*/
@media all {
/* cleanse the margins so we don't have to worry about a stray (this layout is
* particularly sensitive) */
html, body, div { margin: 0; padding: 0; }
html, body { height: 100%; }
#top-navigation { padding-top: 3em; }
#page-footer { padding-bottom: 3em; }
/* center the whole page */
#top-navigation, #page-middle, #page-footer { max-width: 50em; margin: 0 auto; }
/* Cool CS3 trick: an empty <span> at the end of a div will clear */
* + span:empty {
clear: both;
display: block;
}
/* Multi-column structural definitions
* -----------------------------------
*/
/* sizes */
.multicolumn.two > .left > .panel,
.multicolumn.two > .right > .panel { width: 25em; }
.multicolumn.three > .left > .panel,
.multicolumn.three > .center > .panel,
.multicolumn.three > .right > .panel { width: 16.666666666666em; }
.sidebar > .sidebar > .panel { width: 14em; }
.sidebar > .big > .panel { width: 36em; }
/* floaty behavior */
.multicolumn > .left,
.sidebar > .left { float: left; }
.multicolumn > .center { margin: 0 33.333333333333%; }
.multicolumn > .right,
.sidebar > .right { float: right; }
/* footer */
#page-footer p {
margin: 0;
padding: 0;
line-height: 2em;
text-align: center;
vertical-align: middle;
}
}