1/* =Responsive 2----------------------------------------------- */ 3 4@media only screen and (max-width: 1219px) { 5 #writr__page { 6 width: 940px; 7 } 8 #writr__page:before { 9 width: 540px; 10 } 11 .content-area { 12 width: 540px; 13 } 14} 15 16/* 960px > x */ 17@media only screen and (max-width: 959px) { 18 19 /* Grid */ 20 body.sidebar-closed:after { 21 width: 40px; 22 } 23 body.sidebar-closed:before { 24 left: 40px; 25 } 26 .sidebar-closed #writr__page { 27 width: 680px; 28 } 29 .sidebar-closed #writr__page:before { 30 left: 140px; 31 width: ~"calc(100vw - 40px - 100px)"; 32 } 33 #writr__sidebar-toggle { 34 display: block; 35 } 36 body:not(.sidebar-closed) .sidebar-area:after { 37 content: ''; 38 display: block; 39 position: fixed; 40 z-index: 9997; 41 top: 0; 42 left: 300px; 43 width: 100%; 44 height: 200%; 45 background: rgba(0, 0, 0, 0.5); 46 } 47 .sidebar-area { 48 float: none; 49 width: 100%; 50 padding: 0; 51 52 .widget-area { 53 position: fixed; 54 top: 0px; 55 height: 100vh; 56 padding-top: 120px; 57 } 58 59 .search-form, 60 .widget-area { 61 padding-left: 40px; 62 padding-right: 40px; 63 } 64 65 .search-form { 66 border-bottom-width: 0; 67 padding-bottom: 0; 68 } 69 } 70 .widget-area { 71 background-color: @ini_theme_color; 72 position: relative; 73 float: left; 74 width: 300px; 75 padding: 0 40px; 76 -webkit-box-sizing: border-box; 77 -moz-box-sizing: border-box; 78 box-sizing: border-box; 79 } 80 .no-js .widget-area { 81 float: right; 82 width: 540px; 83 } 84 .site-header { 85 padding-top: 40px; 86 margin-top: -40px; 87 margin-left: ~"calc(40px + 100px)"; 88 width: ~"calc(100vw - 40px - 100px)"; 89 } 90 .js .sidebar-closed .widget-area { 91 display: none; 92 position: static; 93 } 94 .no-js .widget-area { 95 clear: both; 96 padding-top: 20px; 97 } 98 99 /* Header */ 100 .site-branding { 101 border-bottom: none; 102 } 103 104 /* Menu */ 105 .js .menu-toggle, 106 .js .main-navigation.toggled > ul { 107 display: block; 108 } 109 .menu-toggle { 110 margin: 0 auto; 111 width: 100%; 112 height: 60px; 113 border-bottom: 5px solid @ini_text_alt; 114 color: @ini_background; 115 font-family: Genericons !important; 116 font-size: 20px !important; 117 line-height: 60px !important; 118 text-align: center; 119 } 120 .main-navigation { 121 padding: 0; 122 margin: 0; 123 width: 100%; 124 } 125 .main-navigation:after { 126 display: none; 127 } 128 .main-navigation.toggled { 129 border-bottom: 5px solid @ini_text_alt; 130 } 131 .no-js .main-navigation .skip-link { 132 position: static !important; 133 left: 0 !important; 134 right: 0 !important; 135 width: auto !important; 136 height: auto !important; 137 } 138 .js .main-navigation ul { 139 display: none; 140 } 141 .js .main-navigation.toggled > div.plugin_include_content > ul, 142 .js .main-navigation.toggled > div > div > ul { 143 display: block; 144 } 145 .main-navigation a:hover, 146 .main-navigation li .curid > a { 147 background: none !important; 148 } 149 .js .main-navigation ul li:hover ul { 150 display: none; 151 } 152 .main-navigation ul ul { 153 display: block; 154 opacity: 1; 155 z-index: 1; 156 float: none; 157 position: relative; 158 top: auto; 159 left: auto; 160 width: 100%; 161 } 162 .js .main-navigation ul ul { 163 display: none; 164 } 165 .main-navigation ul ul a { 166 padding-left: 60px; 167 } 168 .main-navigation ul ul ul a { 169 padding-left: 80px; 170 } 171 .main-navigation .node > div > a { 172 position: relative; 173 padding-right: 84px; 174 } 175 .main-navigation .node > div > a:after { 176 display: none; 177 } 178 .main-navigation ul li:hover > ul { 179 -webkit-animation: none; 180 -moz-animation: none; 181 -ms-animation: none; 182 -o-animation: none; 183 animation: none; 184 } 185 .main-navigation .node > ul { 186 padding: 2.5px 0; 187 margin: 2.5px 0; 188 border-top: 5px solid @ini_text_alt; 189 border-bottom: 5px solid @ini_text_alt; 190 } 191 .main-navigation li.node:last-child > ul { 192 padding-bottom: 0; 193 margin-bottom: 0; 194 border-bottom: 0; 195 } 196 .dropdown-icon { 197 display: block; 198 position: absolute; 199 top: 2.5px; 200 right: 5px; 201 height: 39px; 202 width: 39px; 203 z-index: 2; 204 } 205 .dropdown-icon:after { 206 content: ''; 207 display: block; 208 position: absolute; 209 top: 50%; 210 right: 15px; 211 margin-top: -2.5px; 212 border-left: 5px solid transparent; 213 border-right: 5px solid transparent; 214 border-top: 5px solid @ini_background; 215 } 216 .dropdown-icon.open:after { 217 border-top: none; 218 border-bottom: 5px solid @ini_background; 219 } 220 221 .site-content { 222 width: 100vw; 223 } 224 225 .content-area { 226 padding-top: 20px; 227 width: ~"calc(100vw - 40px - 100px)"; 228 } 229 230 .makeFullWidth #writr__main { 231 width: ~"calc(100vw - 80px)" !important; 232 233 > h1:first-of-type, 234 > #dw__toc + h1, 235 > .section_highlight_wrapper:first-child > h1:first-of-type, 236 > #dw__toc + .section_highlight_wrapper > h1:first-of-type { 237 width: ~"calc(100vw)" !important; 238 } 239 } 240 241 #writr__main, 242 .makeFullWidth #writr__main { 243 > h1:first-of-type { 244 width: ~"calc(100vw - 40px - 100px)"; 245 } 246 } 247 248 .makeFullWidth #writr__main { 249 width: ~"calc(100vw - 40px - 100px - 80px)"; 250 } 251 252 .makeFullWidth #writr__page:before { 253 width: ~"calc(100vw - 40px - 100px)"; 254 } 255 .makeFullWidth .page-footer, 256 .makeFullWidth div.breadcrumbs { 257 width: ~"calc(100vw - 40px - 100px)"; 258 } 259 260 #dw__toc { 261 float: none; 262 // width: 100vw; 263 width: ~"calc(100vw - 40px - 100px)"; 264 margin: -20px -40px 20px; 265 padding: 0 40px; 266 267 h3, 268 & > div { 269 padding-left: 0; 270 padding-right: 0; 271 } 272 } 273} 274 275/* 768px > x */ 276@media only screen and (max-width: 767px) { 277 278 /* Theme */ 279 body { 280 background: @ini_background !important; 281 } 282 body:before { 283 display: none; 284 } 285 .sidebar-closed .site-header { 286 margin-right: 0; 287 width: 100%; 288 } 289 .site-header { 290 width: 100vw; 291 margin-left: 0; 292 } 293 body.sidebar-closed:after, 294 body.sidebar-closed:before { 295 display: none; 296 } 297 .sidebar-closed #writr__page { 298 width: 100%; 299 } 300 301 .sidebar-area { 302 background-color: @ini_theme_color; 303 } 304 .no-js .widget-area, 305 .no-js .site-footer { 306 width: auto; 307 } 308 309 .sidebar-closed .content-area { 310 width: 100%; 311 height: auto; 312 padding-left: 40px; 313 -webkit-box-sizing: border-box; 314 -moz-box-sizing: border-box; 315 box-sizing: border-box; 316 } 317 318 .site-content { 319 width: 100vw; 320 } 321 322 .content-area { 323 padding-left: 0; 324 width: 100vw; 325 } 326 327 /* Menu */ 328 .sidebar-closed .main-navigation ul ul { 329 width: 100%; 330 } 331 .main-navigation, 332 .main-navigation ul ul { 333 width: 100%; 334 } 335 336 #writr__main, 337 .makeFullWidth #writr__main { 338 > h1:first-of-type { 339 width: 100vw; 340 } 341 } 342 343 .makeFullWidth #writr__main, 344 .makeFullWidth #writr__page:before { 345 width: ~"calc(100vw - 80px)"; 346 } 347 .makeFullWidth .page-footer, 348 .makeFullWidth div.breadcrumbs { 349 width: 100vw; 350 } 351} 352