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 #writr__main, 231 .makeFullWidth #writr__main { 232 > h1:first-of-type { 233 width: ~"calc(100vw - 40px - 100px)"; 234 } 235 } 236 237 .makeFullWidth #writr__main { 238 width: ~"calc(100vw - 40px - 100px - 80px)"; 239 } 240 241 .makeFullWidth #writr__page:before { 242 width: ~"calc(100vw - 40px - 100px)"; 243 } 244 .makeFullWidth .page-footer, 245 .makeFullWidth div.breadcrumbs { 246 width: ~"calc(100vw - 40px - 100px)"; 247 } 248 249 #dw__toc { 250 float: none; 251 // width: 100vw; 252 width: ~"calc(100vw - 40px - 100px)"; 253 margin: -20px -40px 20px; 254 padding: 0 40px; 255 256 h3, 257 & > div { 258 padding-left: 0; 259 padding-right: 0; 260 } 261 } 262} 263 264/* 768px > x */ 265@media only screen and (max-width: 767px) { 266 267 /* Theme */ 268 body { 269 background: @ini_background !important; 270 } 271 body:before { 272 display: none; 273 } 274 .sidebar-closed .site-header { 275 margin-right: 0; 276 width: 100%; 277 } 278 .site-header { 279 width: 100vw; 280 margin-left: 0; 281 } 282 body.sidebar-closed:after, 283 body.sidebar-closed:before { 284 display: none; 285 } 286 .sidebar-closed #writr__page { 287 width: 100%; 288 } 289 290 .sidebar-area { 291 background-color: @ini_theme_color; 292 } 293 .no-js .widget-area, 294 .no-js .site-footer { 295 width: auto; 296 } 297 298 .sidebar-closed .content-area { 299 width: 100%; 300 height: auto; 301 padding-left: 40px; 302 -webkit-box-sizing: border-box; 303 -moz-box-sizing: border-box; 304 box-sizing: border-box; 305 } 306 307 .site-content { 308 width: 100vw; 309 } 310 311 .content-area { 312 padding-left: 0; 313 width: 100vw; 314 } 315 316 /* Menu */ 317 .sidebar-closed .main-navigation ul ul { 318 width: 100%; 319 } 320 .main-navigation, 321 .main-navigation ul ul { 322 width: 100%; 323 } 324 325 #writr__main, 326 .makeFullWidth #writr__main { 327 > h1:first-of-type { 328 width: 100vw; 329 } 330 } 331 332 .makeFullWidth #writr__main, 333 .makeFullWidth #writr__page:before { 334 width: ~"calc(100vw - 80px)"; 335 } 336 .makeFullWidth .page-footer, 337 .makeFullWidth div.breadcrumbs { 338 width: 100vw; 339 } 340} 341