1/** 2 * This file provides styles for the general layout structure. 3 * 4 * @author Ryan Schram based on Starter by Anika Henke 5 * <anika@selfthinker.org> 6 * 7 * Besides queries, the main changes have to do with the altered 8 * hierarchy in main.php. Regions occur in a logical reading order, 9 * and the layout follows from this. 10 */ 11 12body { 13 margin: 0; 14} 15#dokuwiki__site { 16 margin: 0 auto; 17 width: 100%; 18 max-width: __site_width__; 19 padding: 0; 20} 21 22#dokuwiki__header { 23 width: __site_width__; 24} 25#dokuwiki__header > .pad { 26 padding: 1em; 27} 28 29 30#dokuwiki__site .wrapper { 31 width: 100%; 32} 33 34 #dokuwiki__aside { 35 width: 100%; 36 display: block; 37 } 38 #dokuwiki__aside > .pad { 39 padding: 1em; 40 } 41 42 #dokuwiki__tools { 43 width: 100%; 44 display: block; 45 } 46 47 #dokuwiki__tools > .tools { 48 padding: 1em; 49 } 50 51 #dokuwiki__content { 52 width: 100%; 53 display: block; 54 } 55 #dokuwiki__content > .pad { 56 padding: 1em; 57 } 58 /* make content wider when there's no sidebar */ 59 .hasSidebar #dokuwiki__content { 60 width: 100%; 61 display: block; 62 } 63 .hasSidebar #dokuwiki__content > .pad { 64 padding: 1em; 65 } 66 67 #dw__toc { 68 margin: 0; padding: 0; width: 100%; 69 } 70 #dw__toc h3 { 71 padding: 1em 1em 0em 1em 72 } 73 #dw__toc .toc { 74 padding: 1em; 75 } 76 77#dokuwiki__footer { 78 clear: both; 79 width: 100%; 80 display: block; 81} 82#dokuwiki__footer > .pad { 83 padding: 1em; 84} 85 86/* Medium */ 87@media (min-width: 600px) and (max-width: 999px) { 88 89 90#dokuwiki__header { 91 width: 100%; 92} 93#dokuwiki__header > .pad { 94 padding: 1em; 95} 96 97 98#dokuwiki__site .wrapper { 99 margin: auto; 100 width: 100%; 101 max-width: __med_page_width__ 102} 103 104 #dokuwiki__aside { 105 width: 32%; 106 float: right; 107 clear: right; 108 display: block; 109 } 110 #dokuwiki__aside > .pad { 111 padding: 1em; 112 } 113 114 #dokuwiki__tools { 115 width: 32%; 116 float: right; 117 118 display: block; 119 } 120 121 #dokuwiki__tools > .tools { 122 padding: 1em; 123 } 124 125 #dokuwiki__content { 126 width: 68%; 127 float: left; 128 display: block; 129 } 130 #dokuwiki__content > .pad { 131 padding: 1em; 132 } 133 /* make content wider when there's no sidebar */ 134 .hasSidebar #dokuwiki__content { 135 width: 68%; 136 float: left; 137 display: block; 138 } 139 .hasSidebar #dokuwiki__content > .pad { 140 padding: 1em; 141 } 142 #dw__toc { 143 margin: 0 0 1.5em 1.5em; padding: 0; width: 12em; float: right; 144 } 145 #dw__toc h3 { 146 padding: 1em 1em 0em 1em 147 } 148 #dw__toc .toc { 149 padding: 1em; 150 } 151 152#dokuwiki__footer { 153 clear: both; 154 width: 100%; 155 display: block; 156} 157#dokuwiki__footer > .pad { 158 padding: 1em; 159} 160 161 162 163} 164 165/* Large */ 166@media (min-width: 1000px) and (max-width: 1799px) { 167 168 169#dokuwiki__header { 170 width: 100%; 171} 172#dokuwiki__header > .pad { 173 padding: 1em; 174} 175 176 177#dokuwiki__site .wrapper { 178 width: 100%; 179 max-width: __max_page_width__; 180 margin: auto; 181} 182 183 #dokuwiki__aside { 184 width: 20%; 185 float: left; 186 display: block; 187 } 188 #dokuwiki__aside > .pad { 189 padding: 1em; 190 } 191 192 #dokuwiki__tools { 193 width: 20%; 194 float: left; 195 display: block; 196 } 197 198 #dokuwiki__tools > .tools { 199 padding: 1em 1em 1em 1.5em; 200 } 201 202 #dokuwiki__content { 203 width: 80%; 204 float: left; 205 display: block; 206 } 207 #dokuwiki__content > .pad { 208 padding: 1em; 209 } 210 /* make content wider when there's no sidebar */ 211 .hasSidebar #dokuwiki__content { 212 width: 60%; 213 float: left; 214 display: block; 215 } 216 .hasSidebar #dokuwiki__content > .pad { 217 padding: 1em; 218 } 219 #dw__toc { 220 margin: 0 0 1.5em 1.5em; padding: 0; width: 12em; float: right; 221 } 222 #dw__toc h3 { 223 padding: 1em 1em 0em 1em 224 } 225 #dw__toc .toc { 226 padding: 1em; 227 } 228 229#dokuwiki__footer { 230 clear: both; 231 width: 100%; 232 display: block; 233} 234#dokuwiki__footer > .pad { 235 padding: 1em; 236} 237 238 239 240 241} 242 243 244/* Jumbo */ 245@media (min-width: 1800px) { 246#dokuwiki__header { 247 width: 20%; 248 /* float: left; */ 249 position: fixed; 250} 251#dokuwiki__header > .pad { 252 padding: 1em; 253} 254 255 256#dokuwiki__site .wrapper { 257 width: 60%; 258 margin-left: 20%; 259 float: left; 260} 261 262 #dokuwiki__aside { 263 width: 18%; 264 float: left; 265 display: block; 266 } 267 #dokuwiki__aside > .pad { 268 padding: 1em; 269 } 270 271 #dokuwiki__tools { 272 width: 18%; 273 float: left; 274 display: block; 275 } 276 277 #dokuwiki__tools > .tools { 278 padding: 1em 1em 1em 1.5em; 279 } 280 281 #dokuwiki__content { 282 width: 82%; 283 float: left; 284 display: block; 285 } 286 #dokuwiki__content > .pad { 287 padding: 1em; 288 } 289 /* make content wider when there's no sidebar */ 290 .hasSidebar #dokuwiki__content { 291 width: 64%; 292 float: left; 293 display: block; 294 } 295 .hasSidebar #dokuwiki__content > .pad { 296 padding: 1em; 297 } 298 #dw__toc { 299 margin: 0 0 1.5em 1.5em; padding: 0; width: 12em; float: right; 300 } 301 #dw__toc h3 { 302 padding: 1em 1em 0em 1em 303 } 304 #dw__toc .toc { 305 padding: 1em; 306 } 307 308 309#dokuwiki__footer { 310 clear: none; 311 float: left; 312 width: 20%; 313} 314#dokuwiki__footer > .pad { 315 padding: 1em; 316} 317 318 319 320 321} 322