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