Revision ca55d066
Added by Andreas Kohlbecker over 11 years ago
| 7.x/themes/zen_dataportal/css/layouts/responsive-sidebars.css | ||
|---|---|---|
| 8 | 8 |
* |
| 9 | 9 |
* This layout uses the Zen Grids plugin for Compass: http://zengrids.com |
| 10 | 10 |
*/ |
| 11 |
|
|
| 12 | 11 |
/* |
| 13 | 12 |
* Center the page. |
| 14 | 13 |
*/ |
| 15 |
|
|
| 14 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\0000344}}
|
|
| 16 | 15 |
#page, |
| 17 | 16 |
.region-bottom {
|
| 18 | 17 |
/* For screen sizes larger than 1200px, prevent excessively long lines of text |
| 19 | 18 |
by setting a max-width. */ |
| 20 | 19 |
margin-left: auto; |
| 21 | 20 |
margin-right: auto; |
| 22 |
max-width: 1200px;
|
|
| 21 |
max-width: 960px;
|
|
| 23 | 22 |
} |
| 24 | 23 |
|
| 25 | 24 |
/* |
| 26 | 25 |
* Apply the shared properties of grid items in a single, efficient ruleset. |
| 27 | 26 |
*/ |
| 28 |
|
|
| 27 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\0000362}}
|
|
| 29 | 28 |
#header, |
| 30 | 29 |
#content, |
| 31 | 30 |
#navigation, |
| ... | ... | |
| 39 | 38 |
-ms-box-sizing: border-box; |
| 40 | 39 |
box-sizing: border-box; |
| 41 | 40 |
word-wrap: break-word; |
| 42 |
_display: inline; |
|
| 43 |
_overflow: hidden; |
|
| 44 |
_overflow-y: visible; |
|
| 45 | 41 |
} |
| 46 | 42 |
|
| 47 | 43 |
/* |
| 48 | 44 |
* Containers for grid items and flow items. |
| 49 | 45 |
*/ |
| 50 |
|
|
| 51 |
#header, |
|
| 52 |
#main, |
|
| 53 |
#footer {
|
|
| 54 |
*position: relative; |
|
| 55 |
*zoom: 1; |
|
| 56 |
} |
|
| 46 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass-extensions\/zen-grids\/stylesheets\/zen\/_grids\.scss}line{font-family:\0000352}}
|
|
| 57 | 47 |
#header:before, #header:after, |
| 58 |
#main:before, #main:after, |
|
| 59 |
#footer:before, #footer:after {
|
|
| 48 |
#main:before, |
|
| 49 |
#main:after, |
|
| 50 |
#footer:before, |
|
| 51 |
#footer:after {
|
|
| 60 | 52 |
content: ""; |
| 61 | 53 |
display: table; |
| 62 | 54 |
} |
| 55 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass-extensions\/zen-grids\/stylesheets\/zen\/_grids\.scss}line{font-family:\0000356}}
|
|
| 63 | 56 |
#header:after, |
| 64 | 57 |
#main:after, |
| 65 | 58 |
#footer:after {
|
| ... | ... | |
| 69 | 62 |
/* |
| 70 | 63 |
* Navigation bar |
| 71 | 64 |
*/ |
| 72 |
|
|
| 73 | 65 |
@media all and (min-width: 480px) {
|
| 66 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\0000381}}
|
|
| 74 | 67 |
#main {
|
| 75 |
padding-top: 3em; /* Move all the children of #main down to make room. */ |
|
| 68 |
padding-top: 3em; |
|
| 69 |
/* Move all the children of #main down to make room. */ |
|
| 76 | 70 |
position: relative; |
| 77 | 71 |
} |
| 78 | 72 |
|
| 73 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\0000385}}
|
|
| 79 | 74 |
#navigation {
|
| 80 | 75 |
position: absolute; |
| 81 |
top: 0; /* Move the navbar up inside #main's padding. */ |
|
| 76 |
top: 0; |
|
| 77 |
/* Move the navbar up inside #main's padding. */ |
|
| 82 | 78 |
height: 3em; |
| 83 | 79 |
width: 100%; |
| 84 | 80 |
} |
| 85 | 81 |
} |
| 86 |
|
|
| 87 |
/* |
|
| 88 |
* Use 3 grid columns for smaller screens. |
|
| 89 |
*/ |
|
| 90 |
|
|
| 91 | 82 |
@media all and (min-width: 480px) and (max-width: 959px) {
|
| 92 |
|
|
| 83 |
/* |
|
| 84 |
* Use 3 grid columns for smaller screens. |
|
| 85 |
*/ |
|
| 93 | 86 |
/* |
| 94 | 87 |
* The layout when there is only one sidebar, the left one. |
| 95 | 88 |
*/ |
| 96 |
|
|
| 97 |
.sidebar-first #content { /* Span 2 columns, starting in 2nd column from left. */
|
|
| 89 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003104}}
|
|
| 90 |
.sidebar-first #content {
|
|
| 91 |
/* Span 2 columns, starting in 2nd column from left. */ |
|
| 98 | 92 |
float: left; |
| 99 |
width: 66.667%; |
|
| 100 |
margin-left: 33.333%; |
|
| 93 |
width: 66.66667%;
|
|
| 94 |
margin-left: 33.33333%;
|
|
| 101 | 95 |
margin-right: -100%; |
| 102 | 96 |
} |
| 103 |
.sidebar-first .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
|
|
| 97 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003108}}
|
|
| 98 |
.sidebar-first .region-sidebar-first {
|
|
| 99 |
/* Span 1 column, starting in 1st column from left. */ |
|
| 104 | 100 |
float: left; |
| 105 |
width: 33.333%; |
|
| 101 |
width: 33.33333%;
|
|
| 106 | 102 |
margin-left: 0%; |
| 107 |
margin-right: -33.333%; |
|
| 103 |
margin-right: -33.33333%;
|
|
| 108 | 104 |
} |
| 109 | 105 |
|
| 110 | 106 |
/* |
| 111 | 107 |
* The layout when there is only one sidebar, the right one. |
| 112 | 108 |
*/ |
| 113 |
|
|
| 114 |
.sidebar-second #content { /* Span 2 columns, starting in 1st column from left. */
|
|
| 109 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003118}}
|
|
| 110 |
.sidebar-second #content {
|
|
| 111 |
/* Span 2 columns, starting in 1st column from left. */ |
|
| 115 | 112 |
float: left; |
| 116 |
width: 66.667%; |
|
| 113 |
width: 66.66667%;
|
|
| 117 | 114 |
margin-left: 0%; |
| 118 |
margin-right: -66.667%; |
|
| 115 |
margin-right: -66.66667%;
|
|
| 119 | 116 |
} |
| 120 |
.sidebar-second .region-sidebar-second { /* Span 1 column, starting in 3rd column from left. */
|
|
| 117 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003122}}
|
|
| 118 |
.sidebar-second .region-sidebar-second {
|
|
| 119 |
/* Span 1 column, starting in 3rd column from left. */ |
|
| 121 | 120 |
float: left; |
| 122 |
width: 33.333%; |
|
| 123 |
margin-left: 66.667%; |
|
| 121 |
width: 33.33333%;
|
|
| 122 |
margin-left: 66.66667%;
|
|
| 124 | 123 |
margin-right: -100%; |
| 125 | 124 |
} |
| 126 | 125 |
|
| 127 | 126 |
/* |
| 128 | 127 |
* The layout when there are two sidebars. |
| 129 | 128 |
*/ |
| 130 |
|
|
| 131 |
.two-sidebars #content { /* Span 2 columns, starting in 2nd column from left. */
|
|
| 129 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003132}}
|
|
| 130 |
.two-sidebars #content {
|
|
| 131 |
/* Span 2 columns, starting in 2nd column from left. */ |
|
| 132 | 132 |
float: left; |
| 133 |
width: 66.667%; |
|
| 134 |
margin-left: 33.333%; |
|
| 133 |
width: 66.66667%;
|
|
| 134 |
margin-left: 33.33333%;
|
|
| 135 | 135 |
margin-right: -100%; |
| 136 | 136 |
} |
| 137 |
.two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
|
|
| 137 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003136}}
|
|
| 138 |
.two-sidebars .region-sidebar-first {
|
|
| 139 |
/* Span 1 column, starting in 1st column from left. */ |
|
| 138 | 140 |
float: left; |
| 139 |
width: 33.333%; |
|
| 141 |
width: 33.33333%;
|
|
| 140 | 142 |
margin-left: 0%; |
| 141 |
margin-right: -33.333%; |
|
| 143 |
margin-right: -33.33333%;
|
|
| 142 | 144 |
} |
| 143 |
.two-sidebars .region-sidebar-second { /* Start a new row and span all 3 columns. */
|
|
| 145 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003140}}
|
|
| 146 |
.two-sidebars .region-sidebar-second {
|
|
| 147 |
/* Start a new row and span all 3 columns. */ |
|
| 144 | 148 |
float: left; |
| 145 | 149 |
width: 100%; |
| 146 | 150 |
margin-left: 0%; |
| 147 | 151 |
margin-right: -100%; |
| 148 |
*position: relative; |
|
| 149 |
*zoom: 1; |
|
| 150 | 152 |
padding-left: 0; |
| 151 | 153 |
padding-right: 0; |
| 152 | 154 |
clear: left; |
| 153 | 155 |
} |
| 154 |
.two-sidebars .region-sidebar-second:before, |
|
| 155 |
.two-sidebars .region-sidebar-second:after {
|
|
| 156 |
content: ""; |
|
| 157 |
display: table; |
|
| 158 |
} |
|
| 159 |
.two-sidebars .region-sidebar-second:after {
|
|
| 160 |
clear: both; |
|
| 161 |
} |
|
| 156 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003145}}
|
|
| 162 | 157 |
.two-sidebars .region-sidebar-second .block {
|
| 163 | 158 |
padding-left: 10px; |
| 164 | 159 |
padding-right: 10px; |
| ... | ... | |
| 167 | 162 |
-ms-box-sizing: border-box; |
| 168 | 163 |
box-sizing: border-box; |
| 169 | 164 |
word-wrap: break-word; |
| 170 |
_display: inline; |
|
| 171 |
_overflow: hidden; |
|
| 172 |
_overflow-y: visible; |
|
| 173 | 165 |
} |
| 174 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+1) { /* Span 1 column, starting in the 1st column from left. */
|
|
| 166 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003148}}
|
|
| 167 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
|
|
| 168 |
/* Span 1 column, starting in the 1st column from left. */ |
|
| 175 | 169 |
float: left; |
| 176 |
width: 33.333%; |
|
| 170 |
width: 33.33333%;
|
|
| 177 | 171 |
margin-left: 0%; |
| 178 |
margin-right: -33.333%; |
|
| 172 |
margin-right: -33.33333%;
|
|
| 179 | 173 |
clear: left; |
| 180 | 174 |
} |
| 181 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+2) { /* Span 1 column, starting in the 2nd column from left. */
|
|
| 175 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003152}}
|
|
| 176 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
|
|
| 177 |
/* Span 1 column, starting in the 2nd column from left. */ |
|
| 182 | 178 |
float: left; |
| 183 |
width: 33.333%; |
|
| 184 |
margin-left: 33.333%; |
|
| 185 |
margin-right: -66.667%; |
|
| 179 |
width: 33.33333%;
|
|
| 180 |
margin-left: 33.33333%;
|
|
| 181 |
margin-right: -66.66667%;
|
|
| 186 | 182 |
} |
| 187 |
.two-sidebars .region-sidebar-second .block:nth-child(3n) { /* Span 1 column, starting in the 3rd column from left. */
|
|
| 183 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003155}}
|
|
| 184 |
.two-sidebars .region-sidebar-second .block:nth-child(3n) {
|
|
| 185 |
/* Span 1 column, starting in the 3rd column from left. */ |
|
| 188 | 186 |
float: left; |
| 189 |
width: 33.333%; |
|
| 190 |
margin-left: 66.667%; |
|
| 187 |
width: 33.33333%;
|
|
| 188 |
margin-left: 66.66667%;
|
|
| 191 | 189 |
margin-right: -100%; |
| 192 | 190 |
} |
| 193 | 191 |
} |
| 194 |
|
|
| 195 |
/* |
|
| 196 |
* Use 5 grid columns for larger screens. |
|
| 197 |
*/ |
|
| 198 |
|
|
| 199 | 192 |
@media all and (min-width: 960px) {
|
| 200 |
|
|
| 193 |
/* |
|
| 194 |
* Use 5 grid columns for larger screens. |
|
| 195 |
*/ |
|
| 201 | 196 |
/* |
| 202 | 197 |
* The layout when there is only one sidebar, the left one. |
| 203 | 198 |
*/ |
| 204 |
|
|
| 205 |
.sidebar-first #content { /* Span 4 columns, starting in 2nd column from left. */
|
|
| 199 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003173}}
|
|
| 200 |
.sidebar-first #content {
|
|
| 201 |
/* Span 4 columns, starting in 2nd column from left. */ |
|
| 206 | 202 |
float: left; |
| 207 | 203 |
width: 80%; |
| 208 | 204 |
margin-left: 20%; |
| 209 | 205 |
margin-right: -100%; |
| 210 | 206 |
} |
| 211 |
.sidebar-first .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
|
|
| 207 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003177}}
|
|
| 208 |
.sidebar-first .region-sidebar-first {
|
|
| 209 |
/* Span 1 column, starting in 1st column from left. */ |
|
| 212 | 210 |
float: left; |
| 213 | 211 |
width: 20%; |
| 214 | 212 |
margin-left: 0%; |
| ... | ... | |
| 218 | 216 |
/* |
| 219 | 217 |
* The layout when there is only one sidebar, the right one. |
| 220 | 218 |
*/ |
| 221 |
|
|
| 222 |
.sidebar-second #content { /* Span 4 columns, starting in 1st column from left. */
|
|
| 219 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003187}}
|
|
| 220 |
.sidebar-second #content {
|
|
| 221 |
/* Span 4 columns, starting in 1st column from left. */ |
|
| 223 | 222 |
float: left; |
| 224 | 223 |
width: 80%; |
| 225 | 224 |
margin-left: 0%; |
| 226 | 225 |
margin-right: -80%; |
| 227 | 226 |
} |
| 228 |
.sidebar-second .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */
|
|
| 227 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003191}}
|
|
| 228 |
.sidebar-second .region-sidebar-second {
|
|
| 229 |
/* Span 1 column, starting in 5th column from left. */ |
|
| 229 | 230 |
float: left; |
| 230 | 231 |
width: 20%; |
| 231 | 232 |
margin-left: 80%; |
| ... | ... | |
| 235 | 236 |
/* |
| 236 | 237 |
* The layout when there are two sidebars. |
| 237 | 238 |
*/ |
| 238 |
|
|
| 239 |
.two-sidebars #content { /* Span 3 columns, starting in 2nd column from left. */
|
|
| 239 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003201}}
|
|
| 240 |
.two-sidebars #content {
|
|
| 241 |
/* Span 3 columns, starting in 2nd column from left. */ |
|
| 240 | 242 |
float: left; |
| 241 | 243 |
width: 60%; |
| 242 | 244 |
margin-left: 20%; |
| 243 | 245 |
margin-right: -80%; |
| 244 | 246 |
} |
| 245 |
.two-sidebars .region-sidebar-first { /* Span 1 column, starting in 1st column from left. */
|
|
| 247 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003205}}
|
|
| 248 |
.two-sidebars .region-sidebar-first {
|
|
| 249 |
/* Span 1 column, starting in 1st column from left. */ |
|
| 246 | 250 |
float: left; |
| 247 | 251 |
width: 20%; |
| 248 | 252 |
margin-left: 0%; |
| 249 | 253 |
margin-right: -20%; |
| 250 | 254 |
} |
| 251 |
.two-sidebars .region-sidebar-second { /* Span 1 column, starting in 5th column from left. */
|
|
| 255 |
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/andreas\/workspaces\/www\/drupal-7\.16\/sites\/all\/themes\/zen_dataportal\/sass\/layouts\/responsive-sidebars\.scss}line{font-family:\00003209}}
|
|
| 256 |
.two-sidebars .region-sidebar-second {
|
|
| 257 |
/* Span 1 column, starting in 5th column from left. */ |
|
| 252 | 258 |
float: left; |
| 253 | 259 |
width: 20%; |
| 254 | 260 |
margin-left: 80%; |
Also available in: Unified diff
configuring theme and first sass editing