Projet

Général

Profil

Paste
Télécharger (2,38 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / themes / zen / STARTERKIT / sass-extensions / zen-grids / templates / project / _layout.scss @ 87dbc3bf

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
}