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: 540px; 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 .search-form, 53 .widget-area { 54 padding-left: 40px; 55 padding-right: 40px; 56 } 57 58 .search-form { 59 border-bottom-width: 0; 60 padding-bottom: 0; 61 } 62 } 63 .widget-area { 64 background-color: @ini_theme_color; 65 position: relative; 66 float: left; 67 width: 300px; 68 padding: 0 40px; 69 -webkit-box-sizing: border-box; 70 -moz-box-sizing: border-box; 71 box-sizing: border-box; 72 } 73 .no-js .widget-area { 74 float: right; 75 width: 540px; 76 } 77 .site-header { 78 float: right; 79 padding-top: 40px; 80 margin-top: -40px; 81 width: 540px; 82 } 83 84 .js .widget-area { 85 position: absolute; 86 } 87 .js .sidebar-closed .widget-area { 88 display: none; 89 position: static; 90 } 91 .no-js .widget-area { 92 clear: both; 93 padding-top: 20px; 94 } 95 96 /* Header */ 97 .site-branding { 98 border-bottom: none; 99 } 100 101 /* Menu */ 102 .js .menu-toggle, 103 .js .main-navigation.toggled > ul { 104 display: block; 105 } 106 .menu-toggle { 107 margin: 0 auto; 108 width: 100%; 109 height: 60px; 110 border-bottom: 5px solid @ini_text_alt; 111 color: @ini_background; 112 font-family: Genericons !important; 113 font-size: 20px !important; 114 line-height: 60px !important; 115 text-align: center; 116 } 117 .main-navigation { 118 padding: 0; 119 margin: 0; 120 width: 100%; 121 } 122 .main-navigation:after { 123 display: none; 124 } 125 .main-navigation.toggled { 126 border-bottom: 5px solid @ini_text_alt; 127 } 128 .no-js .main-navigation .skip-link { 129 position: static !important; 130 left: 0 !important; 131 right: 0 !important; 132 width: auto !important; 133 height: auto !important; 134 } 135 .js .main-navigation ul { 136 display: none; 137 } 138 .js .main-navigation.toggled > div.plugin_include_content > ul, 139 .js .main-navigation.toggled > div > div > ul { 140 display: block; 141 } 142 .main-navigation a:hover, 143 .main-navigation li .curid > a { 144 background: none !important; 145 } 146 .js .main-navigation ul li:hover ul { 147 display: none; 148 } 149 .main-navigation ul ul { 150 display: block; 151 opacity: 1; 152 z-index: 1; 153 float: none; 154 position: relative; 155 top: auto; 156 left: auto; 157 width: 100%; 158 } 159 .js .main-navigation ul ul { 160 display: none; 161 } 162 .main-navigation ul ul a { 163 padding-left: 60px; 164 } 165 .main-navigation ul ul ul a { 166 padding-left: 80px; 167 } 168 .main-navigation .node > div > a { 169 position: relative; 170 padding-right: 84px; 171 } 172 .main-navigation .node > div > a:after { 173 display: none; 174 } 175 .main-navigation ul li:hover > ul { 176 -webkit-animation: none; 177 -moz-animation: none; 178 -ms-animation: none; 179 -o-animation: none; 180 animation: none; 181 } 182 .main-navigation .node > ul { 183 padding: 2.5px 0; 184 margin: 2.5px 0; 185 border-top: 5px solid @ini_text_alt; 186 border-bottom: 5px solid @ini_text_alt; 187 } 188 .main-navigation li.node:last-child > ul { 189 padding-bottom: 0; 190 margin-bottom: 0; 191 border-bottom: 0; 192 } 193 .dropdown-icon { 194 display: block; 195 position: absolute; 196 top: 2.5px; 197 right: 5px; 198 height: 39px; 199 width: 39px; 200 z-index: 2; 201 } 202 .dropdown-icon:after { 203 content: ''; 204 display: block; 205 position: absolute; 206 top: 50%; 207 right: 15px; 208 margin-top: -2.5px; 209 border-left: 5px solid transparent; 210 border-right: 5px solid transparent; 211 border-top: 5px solid @ini_background; 212 } 213 .dropdown-icon.open:after { 214 border-top: none; 215 border-bottom: 5px solid @ini_background; 216 } 217 218 .content-area { 219 padding-top: 20px; 220 } 221 222 #writr__main, 223 .makeFullWidth #writr__main { 224 > h1:first-of-type { 225 width: 100vw; 226 } 227 } 228 229 .makeFullWidth #writr__main, 230 .makeFullWidth #writr__page:before { 231 width: 100%; 232 } 233 .makeFullWidth .page-footer, 234 .makeFullWidth div.breadcrumbs { 235 width: 100vw; 236 } 237 238 div.breadcrumbs { 239 display: none; 240 } 241 242 #dw__toc { 243 float: none; 244 width: 100vw; 245 margin: -20px -40px 20px; 246 padding: 0 40px; 247 248 h3, 249 & > div { 250 padding-left: 0; 251 padding-right: 0; 252 } 253 } 254} 255 256/* 768px > x */ 257@media only screen and (max-width: 767px) { 258 259 /* Theme */ 260 body { 261 background: @ini_background !important; 262 } 263 body:before { 264 display: none; 265 } 266 .sidebar-closed .site-header { 267 margin-right: 0; 268 width: 100%; 269 } 270 .site-header { 271 width: 640px; 272 } 273 body.sidebar-closed:after, 274 body.sidebar-closed:before { 275 display: none; 276 } 277 .sidebar-closed #writr__page { 278 width: 100%; 279 } 280 281 .sidebar-area { 282 background-color: @ini_theme_color; 283 } 284 .no-js .widget-area, 285 .no-js .site-footer { 286 width: auto; 287 } 288 289 .sidebar-closed .content-area { 290 width: 100%; 291 height: auto; 292 padding-left: 40px; 293 -webkit-box-sizing: border-box; 294 -moz-box-sizing: border-box; 295 box-sizing: border-box; 296 } 297 .content-area { 298 padding-left: 0; 299 width: 600px; 300 } 301 302 /* Menu */ 303 .sidebar-closed .main-navigation ul ul { 304 width: 100%; 305 } 306 .main-navigation, 307 .main-navigation ul ul { 308 width: 100%; 309 } 310} 311