Mercurial > hg > mpiwgzen_wide

annotate sass/layouts/_fixed.scss @ 0:a3750d724105 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initital
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Tue, 02 Jun 2015 09:16:36 +0200
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
1 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
2 * @file
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
3 * Positioning for a fixed-width, desktop-centric layout.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
4 *
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
5 * Define CSS classes to create a table-free, 3-column, 2-column, or single
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
6 * column layout depending on whether blocks are enabled in the left or right
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
7 * columns.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
8 *
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
9 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
10 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
11
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
12 // We are going to create a 980px wide, 5 column grid with 20px gutters between
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
13 // columns (applied as 10px of left/right padding on each column).
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
14 $zen-column-count: 5;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
15 $zen-gutter-width: 20px;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
16 $zen-grid-width: 980px;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
17
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
18 // If you need IE6/7 support for box-sizing: border-box (default), see _init.scss
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
19 // Since the same CSS unit for grid width and gutter width are set here
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
20 // we can use box-sizing: content-box; without worrying about polyfills.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
21 $zen-box-sizing: content-box;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
22
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
23 // You can generate more efficient CSS if you manually apply the
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
24 // zen-grid-item-base mixin to all grid items from within a single ruleset.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
25 $zen-auto-include-item-base: false;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
26 // $zen-auto-include-flow-item-base: false;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
27
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
28 // Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
29 @if $zen-reverse-all-floats == false {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
30
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
31 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
32 * Center the page.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
33 *
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
34 * If you want to make the page a fixed width and centered in the viewport,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
35 * this is the standards-compliant way to do that.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
36 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
37 #page,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
38 .region-bottom {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
39 margin-left: auto;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
40 margin-right: auto;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
41 width: $zen-grid-width;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
42 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
43
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
44 /* Apply the shared properties of grid items in a single, efficient ruleset. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
45 #header,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
46 #content,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
47 #navigation,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
48 .region-sidebar-first,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
49 .region-sidebar-second,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
50 #footer {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
51 // See the note about $zen-auto-include-item-base above.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
52 @include zen-grid-item-base();
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
53 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
54
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
55 /* Containers for grid items and flow items. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
56 #header,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
57 #main,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
58 #footer {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
59 @include zen-grid-container();
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
60 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
61
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
62 /* Navigation bar */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
63 #main {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
64 /* Move all the children of #main down to make room. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
65 padding-top: $nav-height;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
66 position: relative;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
67 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
68 #navigation {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
69 /* Move the navbar up inside #main's padding. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
70 position: absolute;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
71 top: 0;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
72 height: $nav-height;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
73 width: $zen-grid-width - $zen-gutter-width;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
74 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
75
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
76 } // End of @if $zen-reverse-all-floats == true
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
77
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
78 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
79 * The layout when there is only one sidebar, the left one.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
80 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
81 .sidebar-first {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
82 /* Span 4 columns, starting in 2nd column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
83 #content {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
84 @include zen-grid-item(4, 2);
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
85 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
86
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
87 /* Span 1 column, starting in 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
88 .region-sidebar-first {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
89 @include zen-grid-item(1, 1);
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
90 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
91 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
92
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
93 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
94 * The layout when there is only one sidebar, the right one.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
95 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
96 .sidebar-second {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
97 /* Span 4 columns, starting in 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
98 #content {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
99 @include zen-grid-item(4, 1);
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
100 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
101
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
102 /* Span 1 column, starting in 5th column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
103 .region-sidebar-second {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
104 @include zen-grid-item(1, 5);
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
105 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
106 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
107
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
108 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
109 * The layout when there are two sidebars.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
110 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
111 .two-sidebars {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
112 /* Span 3 columns, starting in 2nd column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
113 #content {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
114 @include zen-grid-item(3, 2);
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
115 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
116
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
117 /* Span 1 column, starting in 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
118 .region-sidebar-first {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
119 @include zen-grid-item(1, 1);
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
120 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
121
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
122 /* Span 1 column, starting in 5th column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
123 .region-sidebar-second {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
124 @include zen-grid-item(1, 5);
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
125 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
126 }