xref: /template/writr/css/responsive.less (revision 51f100e9dde724152c866e9b05d22396c53a370e) 
1/* =Responsive
2----------------------------------------------- */
3
4/* 960px > x */
5@media only screen and (max-width: 959px) {
6
7    /* Grid */
8    body.sidebar-closed:after {
9        width: 40px;
10    }
11    body.sidebar-closed:before {
12        left: 40px;
13    }
14    .sidebar-closed #page {
15        width: 680px;
16    }
17    .sidebar-closed #page:before {
18        left: 140px;
19        width: @ini_content_width;
20    }
21    #sidebar-toggle {
22        display: block;
23    }
24    body:not(.sidebar-closed) .sidebar-area:after {
25        content: '';
26        display: block;
27        position: fixed;
28        z-index: 9997;
29        top: 0;
30        left: 300px;
31        width: 100%;
32        height: 200%;
33        background: rgba(0, 0, 0, 0.5);
34
35    }
36    .site-header {
37        float: right;
38        padding-top: 40px;
39        margin-top: -40px;
40        width: @ini_content_width;
41    }
42    .widget-area,
43    .site-footer {
44        display: none;
45    }
46    .block {
47        display: block;
48    }
49
50    /* Header */
51    .site-branding {
52        border-bottom: none;
53    }
54
55    /* Menu */
56    .menu-toggle,
57    .main-navigation.toggled .nav-menu {
58        display: block;
59    }
60    .menu-toggle {
61        margin: 0 auto;
62        width: 100%;
63        height: 60px;
64        border-bottom: 5px solid @ini_text_alt;
65        color: @ini_background;
66        font-family: Genericons !important;
67        font-size: 20px !important;
68        line-height: 60px !important;
69        text-align: center;
70    }
71    .main-navigation {
72        padding: 0;
73        margin: 0;
74        width: @ini_content_width;
75    }
76    .main-navigation:after {
77        display: none;
78    }
79    .main-navigation.toggled {
80        border-bottom: 5px solid @ini_text_alt;
81    }
82    .main-navigation ul {
83        display: none;
84    }
85    .main-navigation a:hover,
86    .main-navigation li.current_page_item > a,
87    .main-navigation li.current-menu-item > a {
88        background: none !important;
89    }
90    .main-navigation ul li:hover ul {
91        display: none;
92    }
93    .main-navigation ul ul {
94        display: none;
95        opacity: 1;
96        z-index: 1;
97        float: none;
98        position: relative;
99        top: auto;
100        left: auto;
101        width: @ini_content_width;
102    }
103    .main-navigation ul ul a {
104        padding-left: 60px;
105    }
106    .main-navigation ul ul ul a {
107        padding-left: 80px;
108    }
109    .main-navigation .dropdown > a {
110        position: relative;
111        padding-right: 84px;
112    }
113    .main-navigation .dropdown > a:after {
114        display: none;
115    }
116    .main-navigation ul li:hover > ul {
117        -webkit-animation: none;
118        -moz-animation:    none;
119        -ms-animation:     none;
120        -o-animation:      none;
121        animation:         none;
122    }
123    .main-navigation .dropdown-menu {
124        padding: 2.5px 0;
125        margin: 2.5px 0;
126        border-top: 5px solid @ini_text_alt;
127        border-bottom: 5px solid @ini_text_alt;
128    }
129    .main-navigation li:last-child .dropdown-menu {
130        padding-bottom: 0;
131        margin-bottom: 0;
132        border-bottom: 0;
133    }
134    .dropdown-icon {
135        display: block;
136        position: absolute;
137        top: 2.5px;
138        right: 5px;
139        height: 39px;
140        width: 39px;
141        z-index: 2;
142    }
143    .dropdown-icon:after {
144        content: '';
145        display: block;
146        position: absolute;
147        top: 50%;
148        right: 15px;
149        margin-top: -2.5px;
150        border-left: 5px solid transparent;
151        border-right: 5px solid transparent;
152        border-top: 5px solid @ini_background;
153    }
154    .dropdown-icon.open:after {
155        border-top: none;
156        border-bottom: 5px solid @ini_background;
157    }
158
159}
160
161/* 768px > x */
162@media only screen and (max-width: 767px) {
163
164    /* Theme */
165    body {
166        background: @ini_background !important;
167    }
168    body:before {
169        display: none;
170    }
171    .sidebar-closed .site-header {
172        margin-right: 0;
173        width: 100%;
174    }
175    .site-header {
176        width: 640px;
177    }
178    body.sidebar-closed:after,
179    body.sidebar-closed:before {
180        display: none;
181    }
182    .sidebar-closed #page {
183        width: 100%;
184    }
185    .sidebar-closed .content-area {
186        width: 100%;
187        height: auto;
188        padding: 0 40px;
189        -webkit-box-sizing: border-box;
190        -moz-box-sizing:    border-box;
191        box-sizing:         border-box;
192    }
193    .content-area {
194        padding-left: 0;
195        width: 600px;
196    }
197
198    /* Menu */
199    .sidebar-closed .main-navigation ul ul {
200        width: 100%;
201    }
202    .main-navigation,
203    .main-navigation ul ul {
204        width: 100%;
205    }
206
207    /* Content */
208    .entry-title:after {
209        display: none;
210    }
211    .entry-format-badge {
212        display: none;
213    }
214
215    /* Comments */
216    .comment-author .avatar,
217    .comment-author:after {
218        display: none;
219    }
220
221    /* Media */
222    .jetpack-video-wrapper .video-player {
223        max-width: 100%;
224    }
225
226}
227