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 .main-navigation a:hover, 139 .main-navigation li .curid > a { 140 background: none !important; 141 } 142 .js .main-navigation ul li:hover ul { 143 display: none; 144 } 145 .main-navigation ul ul { 146 display: block; 147 opacity: 1; 148 z-index: 1; 149 float: none; 150 position: relative; 151 top: auto; 152 left: auto; 153 width: 100%; 154 } 155 .js .main-navigation ul ul { 156 display: none; 157 } 158 .main-navigation ul ul a { 159 padding-left: 60px; 160 } 161 .main-navigation ul ul ul a { 162 padding-left: 80px; 163 } 164 .main-navigation .node > div > a { 165 position: relative; 166 padding-right: 84px; 167 } 168 .main-navigation .node > div > a:after { 169 display: none; 170 } 171 .main-navigation ul li:hover > ul { 172 -webkit-animation: none; 173 -moz-animation: none; 174 -ms-animation: none; 175 -o-animation: none; 176 animation: none; 177 } 178 .main-navigation .node > ul { 179 padding: 2.5px 0; 180 margin: 2.5px 0; 181 border-top: 5px solid @ini_text_alt; 182 border-bottom: 5px solid @ini_text_alt; 183 } 184 .main-navigation li.node:last-child > ul { 185 padding-bottom: 0; 186 margin-bottom: 0; 187 border-bottom: 0; 188 } 189 .dropdown-icon { 190 display: block; 191 position: absolute; 192 top: 2.5px; 193 right: 5px; 194 height: 39px; 195 width: 39px; 196 z-index: 2; 197 } 198 .dropdown-icon:after { 199 content: ''; 200 display: block; 201 position: absolute; 202 top: 50%; 203 right: 15px; 204 margin-top: -2.5px; 205 border-left: 5px solid transparent; 206 border-right: 5px solid transparent; 207 border-top: 5px solid @ini_background; 208 } 209 .dropdown-icon.open:after { 210 border-top: none; 211 border-bottom: 5px solid @ini_background; 212 } 213 214 .content-area { 215 padding-top: 20px; 216 } 217 218 div.breadcrumbs { 219 display: none; 220 } 221 222 #dw__toc { 223 float: none; 224 width: 100%; 225 margin: -20px -40px 20px; 226 padding: 0 40px; 227 228 h3, 229 & > div { 230 padding-left: 0; 231 padding-right: 0; 232 } 233 } 234} 235 236/* 768px > x */ 237@media only screen and (max-width: 767px) { 238 239 /* Theme */ 240 body { 241 background: @ini_background !important; 242 } 243 body:before { 244 display: none; 245 } 246 .sidebar-closed .site-header { 247 margin-right: 0; 248 width: 100%; 249 } 250 .site-header { 251 width: 640px; 252 } 253 body.sidebar-closed:after, 254 body.sidebar-closed:before { 255 display: none; 256 } 257 .sidebar-closed #writr__page { 258 width: 100%; 259 } 260 261 .sidebar-area { 262 background-color: @ini_theme_color; 263 } 264 .no-js .widget-area, 265 .no-js .site-footer { 266 width: auto; 267 } 268 269 .sidebar-closed .content-area { 270 width: 100%; 271 height: auto; 272 padding-left: 40px; 273 -webkit-box-sizing: border-box; 274 -moz-box-sizing: border-box; 275 box-sizing: border-box; 276 } 277 .content-area { 278 padding-left: 0; 279 width: 600px; 280 } 281 282 /* Menu */ 283 .sidebar-closed .main-navigation ul ul { 284 width: 100%; 285 } 286 .main-navigation, 287 .main-navigation ul ul { 288 width: 100%; 289 } 290} 291