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