xref: /template/writr/css/global.less (revision 9e642b38b0c8b5f46214462a9c2fcbab40c6f025) 
1/* =Global
2----------------------------------------------- */
3
4body,
5button,
6input,
7select,
8textarea {
9    color: @ini_background;
10    font-family: Montserrat, sans-serif;
11    font-size: 16px;
12    line-height: 1.5;
13}
14body.custom-background-size {
15    background-position: 0 0 !important;
16    background-repeat: no-repeat !important;
17    background-attachment: fixed !important;
18    -webkit-background-size: cover !important;
19    -moz-background-size:    cover !important;
20    background-size:         cover !important;
21}
22
23/* Headings */
24h1,
25h2,
26h3,
27h4,
28h5,
29h6 {
30    clear: both;
31    margin: 0 0 20px;
32    color: @ini_text_alt;
33}
34h1 {
35    font-size: 32px;
36    line-height: 1.2;
37}
38h2 {
39    font-size: 24px;
40    line-height: 1.3;
41}
42h3 {
43    font-size: 22px;
44    line-height: 1.4;
45}
46h4 {
47    font-size: 18px;
48}
49h5 {
50    font-size: 16px;
51}
52h6 {
53    font-size: 14px;
54}
55hr {
56    background-color: @ini_background_alt;
57    border: 0;
58    height: 5px;
59    margin-bottom: 20px;
60}
61
62/* Text elements */
63p {
64    margin-bottom: 20px;
65}
66ul,
67ol {
68    margin: 0 0 20px 0;
69}
70ul {
71    list-style: disc inside;
72}
73ol {
74    list-style: decimal inside;
75}
76li > ul,
77li > ol {
78    margin-bottom: 0;
79    margin-left: 20px;
80}
81dt {
82    font-weight: bold;
83}
84dd {
85    margin: 0 20px 20px;
86}
87b,
88strong {
89    font-weight: bold;
90}
91dfn,
92cite,
93em,
94i {
95    font-style: italic;
96}
97cite {
98    color: @ini_theme_color;
99}
100blockquote {
101    padding: 0 0 0 20px;
102    border-left: 15px double @ini_background_alt;
103}
104address {
105    margin: 0 0 20px;
106}
107pre {
108    overflow: auto;
109    padding: 20px;
110    margin-bottom: 20px;
111    max-width: 100%;
112    background: @ini_background_alt;
113    font: 15px/1.6 "Courier 10 Pitch", Courier, monospace;
114}
115code,
116kbd,
117tt,
118var {
119    font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
120}
121abbr,
122acronym {
123    border-bottom: 1px dotted;
124    cursor: help;
125}
126mark,
127ins {
128    padding: 0 5px;
129    background: @ini_theme_color;
130    color: @ini_background;
131    text-decoration: none;
132}
133sup,
134sub {
135    font-size: 75%;
136    height: 0;
137    line-height: 0;
138    position: relative;
139    vertical-align: baseline;
140}
141sup {
142    bottom: 1ex;
143}
144sub {
145    top: .5ex;
146}
147small {
148    font-size: 75%;
149}
150big {
151    font-size: 125%;
152}
153figure {
154    margin: 0;
155}
156table {
157    margin: 0 0 20px;
158    width: 100%;
159    background: @ini_background_alt;
160}
161th {
162    background: @ini_background_neu;
163    font-weight: bold;
164}
165th,
166td {
167    padding: 10px;
168    border-bottom: 1px solid @ini_background_neu;
169}
170tr:last-of-type td {
171    border-bottom: none;
172}
173img {
174    margin: auto;
175    height: auto; /* Make sure images are scaled correctly. */
176    max-width: 100%; /* Adhere to container width. */
177}
178
179/* Video */
180embed,
181iframe,
182object,
183video {
184    display: block;
185    max-width: 100%;
186    margin-bottom: 20px;
187}
188
189/* Forms */
190button,
191input,
192select,
193textarea {
194    font-size: 100%; /* Corrects font size not being inherited in all browsers */
195    margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
196    vertical-align: baseline; /* Improves appearance and consistency in all browsers */
197    *vertical-align: middle; /* Improves appearance and consistency in all browsers */
198}
199button,
200input {
201    line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
202}
203select {
204    width: 100%;
205    color: @ini_text_alt;
206}
207button,
208html input[type="button"],
209input[type="reset"],
210input[type="submit"] {
211    padding: 10px 20px;
212    border: none;
213    background: @ini_theme_color;
214    color: @ini_background;
215    font-size: 14px;
216    line-height: 1.5;
217    font-weight: bold;
218    text-transform: uppercase;
219    cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
220    -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
221    -webkit-box-sizing: border-box;
222    -moz-box-sizing:    border-box;
223    box-sizing:         border-box;
224}
225button:hover,
226html input[type="button"]:hover,
227input[type="reset"]:hover,
228input[type="submit"]:hover,
229button:focus,
230html input[type="button"]:focus,
231input[type="reset"]:focus,
232input[type="submit"]:focus,
233button:active,
234html input[type="button"]:active,
235input[type="reset"]:active,
236input[type="submit"]:active {
237    background: @ini_theme_color_alt;
238}
239input[type="checkbox"],
240input[type="radio"] {
241    box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
242    padding: 0; /* Addresses excess padding in IE8/9 */
243}
244input[type="search"] {
245    -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
246    -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
247    -moz-box-sizing:    content-box;
248    box-sizing:         content-box;
249}
250input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
251    -webkit-appearance: none;
252}
253button::-moz-focus-inner,
254input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
255    border: 0;
256    padding: 0;
257}
258input[type="text"],
259input[type="url"],
260input[type="email"],
261input[type="password"],
262input[type="search"],
263textarea {
264    width: 100%;
265    height: 40px;
266    padding: 5px 10px;
267    background: transparent;
268    color: @ini_text;
269    border: 5px solid @ini_background_alt;
270    font-size: 14px;
271    line-height: 1.43;
272    -webkit-box-sizing: border-box;
273    -moz-box-sizing:    border-box;
274    box-sizing:         border-box;
275    -webkit-appearance: none;
276}
277input[type="text"]:focus,
278input[type="url"]:focus,
279input[type="email"]:focus,
280input[type="password"]:focus,
281input[type="search"]:focus,
282textarea:focus {
283    outline: none;
284    border-color: @ini_background_neu;
285}
286textarea {
287    overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
288    vertical-align: top; /* Improves readability and alignment in all browsers */
289    height: auto;
290}
291::-webkit-input-placeholder {
292   color: @ini_text;
293}
294:-moz-placeholder {
295   color: @ini_text;
296}
297::-moz-placeholder {
298   color: @ini_text;
299}
300:-ms-input-placeholder {
301   color: @ini_text;
302}
303
304button,
305input[type="button"],
306input[type="reset"],
307input[type="submit"],
308input[type="text"],
309input[type="url"],
310input[type="email"],
311input[type="password"],
312input[type="search"],
313textarea {
314    -webkit-border-radius: 20px;
315    -moz-border-radius:    20px;
316    border-radius:         20px;
317}
318
319/* Links */
320a {
321    color: @ini_theme_color;
322}
323a:hover,
324a:focus,
325a:active {
326    color: @ini_theme_color_alt;
327}
328
329/* Transition */
330a:not(#writr__sidebar-toggle),
331input,
332.site-title a,
333.site-info a,
334.main-navigation a {
335    -webkit-transition: all 0.25s ease-in-out;
336    -moz-transition:    all 0.25s ease-in-out;
337    -ms-transition:     all 0.25s ease-in-out;
338    -o-transition:      all 0.25s ease-in-out;
339    transition:         all 0.25s ease-in-out;
340}
341
342/* Alignment */
343.medialeft {
344    display: inline;
345    float: left;
346    margin: 0 20px 20px 0;
347}
348.mediaright {
349    display: inline;
350    float: right;
351    margin: 0 0 20px 20px;
352}
353.mediacenter {
354    clear: both;
355    display: block;
356    margin: 0 auto 20px auto;
357}
358
359/* Clearing */
360.clear:before,
361.clear:after,
362.site-header:before,
363.site-header:after,
364.site-content:before,
365.site-content:after,
366.site-footer:before,
367.site-footer:after,
368.widget:before,
369.widget:after {
370    content: '';
371    display: table;
372}
373
374.clear:after,
375.site-header:after,
376.site-content:after,
377.site-footer:after,
378.widget:after {
379    clear: both;
380}
381