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 .makeFullWidth #writr__main, 223 .makeFullWidth #writr__page:before { 224 width: 100%; 225 } 226 .makeFullWidth .page-footer, 227 .makeFullWidth div.breadcrumbs { 228 width: 100vw; 229 } 230 231 div.breadcrumbs { 232 display: none; 233 } 234 235 #dw__toc { 236 float: none; 237 width: 100vw; 238 margin: -20px -40px 20px; 239 padding: 0 40px; 240 241 h3, 242 & > div { 243 padding-left: 0; 244 padding-right: 0; 245 } 246 } 247} 248 249/* 768px > x */ 250@media only screen and (max-width: 767px) { 251 252 /* Theme */ 253 body { 254 background: @ini_background !important; 255 } 256 body:before { 257 display: none; 258 } 259 .sidebar-closed .site-header { 260 margin-right: 0; 261 width: 100%; 262 } 263 .site-header { 264 width: 640px; 265 } 266 body.sidebar-closed:after, 267 body.sidebar-closed:before { 268 display: none; 269 } 270 .sidebar-closed #writr__page { 271 width: 100%; 272 } 273 274 .sidebar-area { 275 background-color: @ini_theme_color; 276 } 277 .no-js .widget-area, 278 .no-js .site-footer { 279 width: auto; 280 } 281 282 .sidebar-closed .content-area { 283 width: 100%; 284 height: auto; 285 padding-left: 40px; 286 -webkit-box-sizing: border-box; 287 -moz-box-sizing: border-box; 288 box-sizing: border-box; 289 } 290 .content-area { 291 padding-left: 0; 292 width: 600px; 293 } 294 295 /* Menu */ 296 .sidebar-closed .main-navigation ul ul { 297 width: 100%; 298 } 299 .main-navigation, 300 .main-navigation ul ul { 301 width: 100%; 302 } 303} 304