Mercurial > hg > mpiwgzen_wide

comparison sass-extensions/zen-grids/templates/project/_layout.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
comparison
equal deleted inserted replaced
-1:000000000000 0:a3750d724105
1 /**
2 * @file
3 * Layout styles.
4 *
5 * We use example breakpoints of 444px, 666px, 777px, 999px and 1111px. The
6 * right breakpoints to use for your site depend on your content.
7 */
8
9 .centered {
10 @include zen-grid-background();
11 padding: {
12 top: 1.5em;
13 bottom: 1.5em;
14 }
15 margin: {
16 left: auto;
17 right: auto;
18 }
19 max-width: 1111px;
20 }
21
22 /* Set the shared properties for all grid items. */
23 %grid-item,
24 .grid-item {
25 @include zen-grid-item-base();
26 }
27
28 /* Set the container for our grid items. */
29 .main {
30 @include zen-grid-container();
31 }
32
33 /* Horizontal navigation bar */
34 @media all and (min-width: 444px) {
35 $zen-column-count: 1;
36 $navbar-height: 5em;
37
38 .main {
39 padding-top: $navbar-height;
40 }
41 .grid-item__menu {
42 @include zen-grid-item(1, 1);
43 margin-top: -$navbar-height;
44 height: $navbar-height;
45 }
46 }
47
48 @media all and (min-width: 444px) and (max-width: 665px) {
49 $zen-column-count: 2;
50
51 .centered {
52 @include zen-grid-background();
53 }
54 .grid-item__content {
55 @include zen-grid-item(2, 1);
56 }
57 .grid-item__aside1 {
58 @include zen-clear(); // Clear left-floated elements (.grid-item__content)
59 @include zen-grid-item(1, 1);
60 }
61 .grid-item__aside2 {
62 @include zen-grid-item(1, 2);
63 }
64 }
65
66 @media all and (min-width: 666px) and (max-width: 776px) {
67 $zen-column-count: 3;
68
69 .centered {
70 @include zen-grid-background();
71 }
72 .grid-item__content {
73 @include zen-grid-item(2, 1);
74 }
75 .grid-item__aside1 {
76 @include zen-grid-item(1, 1, right); // Position from the right
77 }
78 .grid-item__aside2 {
79 @include zen-clear(); // Clear left-floated elements (.grid-item__content)
80 @include zen-grid-item(2, 1);
81 }
82 }
83
84 @media all and (min-width: 777px) and (max-width: 998px) {
85 $zen-column-count: 3;
86
87 .centered {
88 @include zen-grid-background();
89 }
90 .grid-item__content {
91 @include zen-grid-item(2, 1);
92 }
93 .grid-item__aside1 {
94 @include zen-grid-item(1, 1, right); // Position from the right
95 }
96 .grid-item__aside2 {
97 @include zen-clear(right); // Clear right-floated elements (.grid-item__aside1)
98 @include zen-grid-item(1, 1, right);
99 }
100 }
101
102 @media all and (min-width: 999px) {
103 $zen-column-count: 5;
104
105 .centered {
106 @include zen-grid-background();
107 }
108 .grid-item__content {
109 @include zen-grid-item(3, 2);
110 }
111 .grid-item__aside1 {
112 @include zen-grid-item(1, 1);
113 }
114 .grid-item__aside2 {
115 @include zen-grid-item(1, 5);
116 }
117 }