xref: /template/writr/css/responsive.less (revision 7f068f83dd513ac89616165ef77aa7d390c50f8f) 
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: ~"calc(100vw - 14px)";
229    }
230
231    div.breadcrumbs {
232        display: none;
233    }
234
235    #dw__toc {
236        float: none;
237        width: ~"calc(100vw - 14px)";
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    .makeFullWidth #plugin_bloglinks__links {
249      width: ~"calc(100vw - 14px)";
250    }
251
252    #plugin_bloglinks__links > div {
253
254      a.wikilink1 {
255
256        span.title {
257          display: none;
258        }
259      }
260    }
261    .makeFullWidth div.comment_wrapper::before,
262    .makeFullWidth div.comment_wrapper::after {
263    	width: ~"calc(100vw - 14px)";
264    }
265}
266
267/* 768px > x */
268@media only screen and (max-width: 767px) {
269
270    /* Theme */
271    body {
272        background: @ini_background !important;
273    }
274    body:before {
275        display: none;
276    }
277    .sidebar-closed .site-header {
278        margin-right: 0;
279        width: 100%;
280    }
281    .site-header {
282        width: 640px;
283    }
284    body.sidebar-closed:after,
285    body.sidebar-closed:before {
286        display: none;
287    }
288    .sidebar-closed #writr__page {
289        width: 100%;
290    }
291
292    .sidebar-area {
293        background-color: @ini_theme_color;
294    }
295    .no-js .widget-area,
296    .no-js .site-footer {
297        width: auto;
298    }
299
300    .sidebar-closed .content-area {
301        width: 100%;
302        height: auto;
303        padding-left: 40px;
304        -webkit-box-sizing: border-box;
305        -moz-box-sizing:    border-box;
306        box-sizing:         border-box;
307    }
308    .content-area {
309        padding-left: 0;
310        width: 600px;
311    }
312
313    /* Menu */
314    .sidebar-closed .main-navigation ul ul {
315        width: 100%;
316    }
317    .main-navigation,
318    .main-navigation ul ul {
319        width: 100%;
320    }
321}
322