summaryrefslogtreecommitdiff
path: root/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_responsive.scss
blob: f1fd2117a9e14c7f3bdfbdb652b7ff9e1cb31d2a (plain)
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
/**
 * @file
 * Positioning for a responsive layout.
 *
 * Define CSS classes to create a fluid grid layout with optional sidebars
 * depending on whether blocks are placed in the left or right sidebars.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
 */

// We are going to create a fluid grid with 1, 3, or 5 columns and 20px gutters
// between columns (applied as 10px of left/right padding on each column).
$zen-column-count:  1;
$zen-gutter-width:  20px;

// If you need IE6/7 support for box-sizing: border-box (default), see _base.scss
//$zen-box-sizing: content-box;

// You can generate more efficient CSS if you manually apply the
// zen-grid-item-base mixin to all grid items from within a single ruleset.
$zen-auto-include-item-base: false;
// $zen-auto-include-flow-item-base: false;

// Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles.
@if $zen-reverse-all-floats == false {

/**
 * Center the page.
 *
 * For screen sizes larger than 1200px, prevent excessively long lines of text
 * by setting a max-width.
 */
#page,
.region-bottom {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

/* Apply the shared properties of grid items in a single, efficient ruleset. */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer {
  // See the note about $zen-auto-include-item-base above.
  @include zen-grid-item-base();
}

/* Containers for grid items and flow items. */
#header,
#main,
#footer {
  @include zen-grid-container();
}

/* Navigation bar */
@media all and (min-width: 480px) {
  #main {
    /* Move all the children of #main down to make room. */
    padding-top: $nav-height;
    position: relative;
  }
  #navigation {
    /* Move the navbar up inside #main's padding. */
    position: absolute;
    top: 0;
    height: $nav-height;
    width: $zen-grid-width;
  }
}

} // End of @if $zen-reverse-all-floats == true

/**
 * Use 3 grid columns for smaller screens.
 */
@media all and (min-width: 480px) and (max-width: 959px) {

  $zen-column-count: 3;

  /**
   * The layout when there is only one sidebar, the left one.
   */
  .sidebar-first {
    /* Span 2 columns, starting in 2nd column from left. */
    #content {
      @include zen-grid-item(2, 2);
    }

    /* Span 1 column, starting in 1st column from left. */
    .region-sidebar-first {
      @include zen-grid-item(1, 1);
    }
  }

  /**
   * The layout when there is only one sidebar, the right one.
   */
  .sidebar-second {
    /* Span 2 columns, starting in 1st column from left. */
    #content {
      @include zen-grid-item(2, 1);
    }

    /* Span 1 column, starting in 3rd column from left. */
    .region-sidebar-second {
      @include zen-grid-item(1, 3);
    }
  }

  /**
   * The layout when there are two sidebars.
   */
  .two-sidebars {
    /* Span 2 columns, starting in 2nd column from left. */
    #content {
      @include zen-grid-item(2, 2);
    }

    /* Span 1 column, starting in 1st column from left. */
    .region-sidebar-first {
      @include zen-grid-item(1, 1);
    }

    /* Start a new row and span all 3 columns. */
    .region-sidebar-second {
      @include zen-grid-item(3, 1);
      @include zen-nested-container(); // Since we're making every block in this region be a grid item.
      @include zen-clear();

      /* Apply the shared properties of grid items in a single, efficient ruleset. */
      .block {
        @include zen-grid-item-base();
      }
      /* Span 1 column, starting in the 1st column from left. */
      .block:nth-child(3n+1) {
        @include zen-grid-item(1, 1);
        @include zen-clear();
      }
      /* Span 1 column, starting in the 2nd column from left. */
      .block:nth-child(3n+2) {
        @include zen-grid-item(1, 2);
      }
      /* Span 1 column, starting in the 3rd column from left. */
      .block:nth-child(3n) {
        @include zen-grid-item(1, 3);
      }
    }
  }
}

/**
 * Use 5 grid columns for larger screens.
 */
@media all and (min-width: 960px) {

  $zen-column-count: 5;

  /**
   * The layout when there is only one sidebar, the left one.
   */
  .sidebar-first {
    /* Span 4 columns, starting in 2nd column from left. */
    #content {
      @include zen-grid-item(4, 2);
    }

    /* Span 1 column, starting in 1st column from left. */
    .region-sidebar-first {
      @include zen-grid-item(1, 1);
    }
  }

  /**
   * The layout when there is only one sidebar, the right one.
   */
  .sidebar-second {
    /* Span 4 columns, starting in 1st column from left. */
    #content {
      @include zen-grid-item(4, 1);
    }

    /* Span 1 column, starting in 5th column from left. */
    .region-sidebar-second {
      @include zen-grid-item(1, 5);
    }
  }

  /**
   * The layout when there are two sidebars.
   */
  .two-sidebars {
    /* Span 3 columns, starting in 2nd column from left. */
    #content {
      @include zen-grid-item(3, 2);
    }

    /* Span 1 column, starting in 1st column from left. */
    .region-sidebar-first {
      @include zen-grid-item(1, 1);
    }

    /* Span 1 column, starting in 5th column from left. */
    .region-sidebar-second {
      @include zen-grid-item(1, 5);
    }
  }
}