10
|
1 |
/* |
|
2 |
Theme Name: Twenty Thirteen |
|
3 |
Description: Used to style blocks. |
|
4 |
*/ |
|
5 |
|
|
6 |
/*-------------------------------------------------------------- |
|
7 |
>>> TABLE OF CONTENTS: |
|
8 |
---------------------------------------------------------------- |
|
9 |
1.0 Block Alignments |
|
10 |
2.0 General Block Styles |
|
11 |
3.0 Blocks - Common Blocks |
|
12 |
4.0 Blocks - Formatting |
|
13 |
5.0 Blocks - Layout Elements |
|
14 |
6.0 Blocks - Widgets |
|
15 |
7.0 Blocks - Colors |
|
16 |
--------------------------------------------------------------*/ |
|
17 |
|
|
18 |
/*-------------------------------------------------------------- |
|
19 |
1.0 Block Alignments |
|
20 |
--------------------------------------------------------------*/ |
|
21 |
|
|
22 |
.content-area { |
|
23 |
overflow-x: hidden; /* prevents side-scrolling caused by use of vw */ |
|
24 |
} |
|
25 |
|
|
26 |
[class^="wp-block-"].alignleft, |
|
27 |
[class^="wp-block-"] .alignleft { |
|
28 |
margin-right: 20px; |
|
29 |
} |
|
30 |
|
|
31 |
[class^="wp-block-"].alignright, |
|
32 |
[class^="wp-block-"] .alignright { |
|
33 |
margin-left: 20px; |
|
34 |
} |
|
35 |
|
|
36 |
.alignfull, |
|
37 |
.alignwide { |
|
38 |
clear: both; |
|
39 |
} |
|
40 |
|
|
41 |
body:not(.sidebar) .alignwide { |
|
42 |
margin-left: calc(25% - 25vw); |
|
43 |
margin-right: calc(25% - 25vw); |
|
44 |
width: auto; |
|
45 |
max-width: 1600px; |
|
46 |
} |
|
47 |
|
|
48 |
body:not(.sidebar) .alignfull { |
|
49 |
margin-left: calc(50% - 50vw); |
|
50 |
margin-right: calc(50% - 50vw); |
|
51 |
width: auto; |
|
52 |
max-width: 1600px; |
|
53 |
} |
|
54 |
|
|
55 |
/* Make non image-based blocks a bit narrower, so they don't get cut off. */ |
|
56 |
body:not(.sidebar) .wp-block-columns.alignfull, |
|
57 |
body:not(.sidebar) .wp-block-audio.alignfull, |
|
58 |
body:not(.sidebar) .wp-block-table.alignfull, |
|
59 |
body:not(.sidebar) .wp-block-latest-comments.alignfull { |
|
60 |
margin-left: calc(50% - 48vw); |
|
61 |
margin-right: calc(50% - 48vw); |
|
62 |
} |
|
63 |
|
|
64 |
@media (max-width: 999px) { |
|
65 |
body.sidebar .alignwide { |
|
66 |
margin-left: calc(25% - 25vw); |
|
67 |
margin-right: calc(25% - 25vw); |
|
68 |
width: auto; |
|
69 |
max-width: 1600px; |
|
70 |
} |
|
71 |
|
|
72 |
body.sidebar .alignfull { |
|
73 |
margin-left: calc(50% - 50vw); |
|
74 |
margin-right: calc(50% - 50vw); |
|
75 |
width: auto; |
|
76 |
max-width: 1600px; |
|
77 |
} |
|
78 |
|
|
79 |
/* Make non image-based blocks a bit narrower, so they don't get cut off. */ |
|
80 |
body.sidebar .wp-block-columns.alignfull, |
|
81 |
body.sidebar .wp-block-audio.alignfull, |
|
82 |
body.sidebar .wp-block-table.alignfull, |
|
83 |
body.sidebar .wp-block-latest-comments.alignfull { |
|
84 |
margin-left: calc(50% - 48vw); |
|
85 |
margin-right: calc(50% - 48vw); |
|
86 |
} |
|
87 |
} |
|
88 |
|
|
89 |
@media (min-width: 1600px) { |
|
90 |
|
|
91 |
/* Make sure the full and wide blocks still stay in Twenty Thirteen's wide container */ |
|
92 |
body:not(.sidebar) .alignfull { |
|
93 |
margin-left: calc(50% - 800px); |
|
94 |
margin-right: calc(50% - 800px); |
|
95 |
width: auto; |
|
96 |
max-width: 1000%; |
|
97 |
} |
|
98 |
|
|
99 |
body:not(.sidebar) .wp-block-columns.alignfull, |
|
100 |
body:not(.sidebar) .wp-block-audio.alignfull, |
|
101 |
body:not(.sidebar) .wp-block-table.alignfull, |
|
102 |
body:not(.sidebar) .wp-block-latest-comments.alignfull { |
|
103 |
margin-left: calc(50% - 780px); |
|
104 |
margin-right: calc(50% - 780px); |
|
105 |
} |
|
106 |
|
|
107 |
body:not(.sidebar) .wp-block-gallery.alignfull { |
|
108 |
margin-left: calc(50% - 808px); /* Adjust for gallery margins */ |
|
109 |
margin-right: calc(50% - 808px); |
|
110 |
width: auto; |
|
111 |
max-width: 1000%; |
|
112 |
} |
|
113 |
|
|
114 |
/* Make sure the 'wide' alignment doesn't get too wide. */ |
|
115 |
body:not(.sidebar) .alignwide { |
|
116 |
margin-left: -230px; |
|
117 |
margin-right: -230px; |
|
118 |
} |
|
119 |
} |
|
120 |
|
|
121 |
/*-------------------------------------------------------------- |
|
122 |
2.0 General Block Styles |
|
123 |
--------------------------------------------------------------*/ |
|
124 |
|
|
125 |
/* Captions */ |
|
126 |
|
|
127 |
[class^="wp-block-"] figcaption, |
|
128 |
[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body { |
|
129 |
color: #220e10; |
|
130 |
font-size: 18px; |
|
131 |
font-style: italic; |
|
132 |
font-weight: 300; |
|
133 |
line-height: 1.5; |
|
134 |
margin: 0 0 24px; |
|
135 |
} |
|
136 |
|
|
137 |
/*-------------------------------------------------------------- |
|
138 |
3.0 Blocks - Common Blocks |
|
139 |
--------------------------------------------------------------*/ |
|
140 |
|
|
141 |
/* Paragraph */ |
|
142 |
|
|
143 |
p.has-drop-cap:not(:focus)::first-letter { |
|
144 |
font-size: 5em; |
|
145 |
} |
|
146 |
|
|
147 |
/* Gallery */ |
|
148 |
|
|
149 |
.wp-block-gallery { |
|
150 |
margin-bottom: 24px; |
|
151 |
} |
|
152 |
|
|
153 |
.wp-block-gallery figcaption { |
|
154 |
margin-bottom: 0; |
|
155 |
} |
|
156 |
|
|
157 |
/* Quote */ |
|
158 |
|
|
159 |
.wp-block-quote { |
|
160 |
margin: 24px 40px; |
|
161 |
padding: 0; |
|
162 |
} |
|
163 |
|
|
164 |
.wp-block-quote:not(.is-large):not(.is-style-large) { |
|
165 |
border-left: 0; |
|
166 |
border-right: 0; |
|
167 |
padding-left: 0; |
|
168 |
padding-right: 0; |
|
169 |
} |
|
170 |
|
|
171 |
.wp-block-quote.is-large p, |
|
172 |
.wp-block-quote.is-style-large p { |
|
173 |
font-size: 28px; |
|
174 |
} |
|
175 |
|
|
176 |
.wp-block-quote cite { |
|
177 |
color: inherit; |
|
178 |
font-size: inherit; |
|
179 |
font-style: italic; |
|
180 |
} |
|
181 |
|
|
182 |
/* Audio */ |
|
183 |
|
|
184 |
.wp-block-audio audio { |
|
185 |
display: block; |
|
186 |
width: 100%; |
|
187 |
} |
|
188 |
|
|
189 |
/* Cover */ |
|
190 |
|
|
191 |
.wp-block-cover-image.aligncenter, |
|
192 |
.wp-block-cover.aligncenter { |
|
193 |
clear: both; |
|
194 |
display: flex; |
|
195 |
} |
|
196 |
|
|
197 |
/* File */ |
|
198 |
|
|
199 |
.wp-block-file .wp-block-file__button { |
|
200 |
background: #e05d22; /* Old browsers */ |
|
201 |
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ |
|
202 |
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ |
|
203 |
border: none; |
|
204 |
border-radius: 2px; |
|
205 |
border-bottom: 3px solid #b93207; |
|
206 |
color: #fff; |
|
207 |
display: inline-block; |
|
208 |
font-size: 16px; |
|
209 |
padding: 11px 24px 10px; |
|
210 |
text-decoration: none; |
|
211 |
} |
|
212 |
|
|
213 |
.wp-block-file .wp-block-file__button:hover, |
|
214 |
.wp-block-file .wp-block-file__button:focus { |
|
215 |
background: #ed6a31; /* Old browsers */ |
|
216 |
background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */ |
|
217 |
background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ |
|
218 |
color: #fff; |
|
219 |
outline: none; |
|
220 |
} |
|
221 |
|
|
222 |
.wp-block-file .wp-block-file__button:active { |
|
223 |
background: #d94412; /* Old browsers */ |
|
224 |
background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */ |
|
225 |
background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */ |
|
226 |
border: none; |
|
227 |
border-top: 3px solid #b93207; |
|
228 |
padding: 10px 24px 11px; |
|
229 |
} |
|
230 |
|
|
231 |
/*-------------------------------------------------------------- |
|
232 |
4.0 Blocks - Formatting |
|
233 |
--------------------------------------------------------------*/ |
|
234 |
|
|
235 |
/* Code */ |
|
236 |
|
|
237 |
.wp-block-code { |
|
238 |
background-color: transparent; |
|
239 |
border: 0; |
|
240 |
padding: 0; |
|
241 |
} |
|
242 |
|
|
243 |
/* Pullquote */ |
|
244 |
|
|
245 |
.wp-block-pullquote { |
|
246 |
border: 0; |
|
247 |
color: inherit; |
|
248 |
padding: 0.5em 0; |
|
249 |
} |
|
250 |
|
|
251 |
.wp-block-pullquote__citation, |
|
252 |
.wp-block-pullquote cite, |
|
253 |
.wp-block-pullquote footer { |
|
254 |
color: inherit; |
|
255 |
} |
|
256 |
|
|
257 |
/* Table */ |
|
258 |
|
|
259 |
.wp-block-table { |
|
260 |
border-bottom: 1px solid #ededed; |
|
261 |
border-collapse: collapse; |
|
262 |
border-spacing: 0; |
|
263 |
font-size: 14px; |
|
264 |
line-height: 2; |
|
265 |
margin: 0 0 20px; |
|
266 |
width: 100%; |
|
267 |
} |
|
268 |
|
|
269 |
.wp-block-table th { |
|
270 |
border: 0; |
|
271 |
font-weight: bold; |
|
272 |
text-transform: uppercase; |
|
273 |
} |
|
274 |
|
|
275 |
.wp-block-table td { |
|
276 |
border: 0; |
|
277 |
border-top: 1px solid #ededed; |
|
278 |
} |
|
279 |
|
|
280 |
body:not(.sidebar) .wp-block-table.alignwide, |
|
281 |
body:not(.sidebar) .wp-block-table.alignfull { |
|
282 |
width: 100%; |
|
283 |
} |
|
284 |
|
|
285 |
/* Some acrobatics to make sure the table blocks always fill the available space. */ |
|
286 |
|
|
287 |
@media (max-width: 1599px) { |
|
288 |
body:not(.sidebar) .wp-block-table.alignwide { |
|
289 |
width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */ |
|
290 |
} |
|
291 |
|
|
292 |
body:not(.sidebar) .wp-block-table.alignfull { |
|
293 |
width: 96vw; |
|
294 |
} |
|
295 |
} |
|
296 |
|
|
297 |
@media (max-width: 999px) { |
|
298 |
body.sidebar .wp-block-table.alignwide { |
|
299 |
width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */ |
|
300 |
} |
|
301 |
|
|
302 |
body.sidebar .wp-block-table.alignfull { |
|
303 |
width: 96vw; |
|
304 |
} |
|
305 |
} |
|
306 |
|
|
307 |
@media (max-width: 654px) { |
|
308 |
body:not(.sidebar) .wp-block-table.alignwide, |
|
309 |
body.sidebar .wp-block-table.alignwide { |
|
310 |
width: 96vw; |
|
311 |
} |
|
312 |
} |
|
313 |
|
|
314 |
@media (min-width: 1600px) { |
|
315 |
body:not(.sidebar) .wp-block-table.alignwide { |
|
316 |
width: 1064px; |
|
317 |
} |
|
318 |
|
|
319 |
body:not(.sidebar) .wp-block-table.alignfull { |
|
320 |
width: 1560px; |
|
321 |
} |
|
322 |
} |
|
323 |
|
|
324 |
/*-------------------------------------------------------------- |
|
325 |
5.0 Blocks - Layout Elements |
|
326 |
--------------------------------------------------------------*/ |
|
327 |
|
|
328 |
/* Buttons */ |
|
329 |
|
|
330 |
.wp-block-button.alignleft { |
|
331 |
margin-right: 20px; |
|
332 |
} |
|
333 |
|
|
334 |
.wp-block-button.alignright { |
|
335 |
margin-left: 20px; |
|
336 |
} |
|
337 |
|
|
338 |
.wp-block-button .wp-block-button__link { |
|
339 |
border-bottom: 3px solid #b93207; |
|
340 |
display: inline-block; |
|
341 |
font-size: 16px; |
|
342 |
padding: 11px 24px 10px; |
|
343 |
text-decoration: none; |
|
344 |
} |
|
345 |
|
|
346 |
.entry-content .wp-block-button__link { |
|
347 |
background-color: #e05d22; |
|
348 |
color: #fff; |
|
349 |
} |
|
350 |
|
|
351 |
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) { |
|
352 |
background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ |
|
353 |
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ |
|
354 |
} |
|
355 |
|
|
356 |
.entry-content .wp-block-button__link:hover, |
|
357 |
.entry-content .wp-block-button__link:focus, |
|
358 |
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover, |
|
359 |
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus { |
|
360 |
background: #ed6a31; |
|
361 |
color: #fff; |
|
362 |
} |
|
363 |
|
|
364 |
.wp-block-button.is-style-outline .wp-block-button__link { |
|
365 |
background-color: inherit; |
|
366 |
border-color: inherit; |
|
367 |
border-width: 2px; |
|
368 |
} |
|
369 |
|
|
370 |
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { |
|
371 |
color: #ed6a31; |
|
372 |
} |
|
373 |
|
|
374 |
.entry-content .wp-block-button__link:not(.has-background):hover, |
|
375 |
.entry-content .wp-block-button__link:not(.has-background):hover, |
|
376 |
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover { |
|
377 |
background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */ |
|
378 |
background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ |
|
379 |
} |
|
380 |
|
|
381 |
.entry-content .wp-block-button__link:active { |
|
382 |
background: #d94412; |
|
383 |
} |
|
384 |
|
|
385 |
.entry-content .wp-block-button__link:not(.has-background):active { |
|
386 |
background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */ |
|
387 |
background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */ |
|
388 |
} |
|
389 |
|
|
390 |
.entry-content .wp-block-button .wp-block-button__link:active { |
|
391 |
border: none; |
|
392 |
border-top: 3px solid #b93207; |
|
393 |
padding: 10px 24px 11px; |
|
394 |
} |
|
395 |
|
|
396 |
/* Separator */ |
|
397 |
|
|
398 |
.wp-block-separator { |
|
399 |
border: 0; |
|
400 |
max-width: 100px; |
|
401 |
} |
|
402 |
|
|
403 |
.wp-block-separator.is-style-wide { |
|
404 |
max-width: 100%; |
|
405 |
} |
|
406 |
|
|
407 |
/* Media & Text */ |
|
408 |
|
|
409 |
.wp-block-media-text { |
|
410 |
margin-bottom: 24px; |
|
411 |
} |
|
412 |
|
|
413 |
.wp-block-media-text *:last-child { |
|
414 |
margin-bottom: 0; |
|
415 |
} |
|
416 |
|
|
417 |
/*-------------------------------------------------------------- |
|
418 |
6.0 Blocks - Widgets |
|
419 |
--------------------------------------------------------------*/ |
|
420 |
|
|
421 |
/* Archives, Categories & Latest Posts */ |
|
422 |
|
|
423 |
.wp-block-archives.aligncenter, |
|
424 |
.wp-block-categories.aligncenter, |
|
425 |
.wp-block-latest-posts.aligncenter { |
|
426 |
list-style-position: inside; |
|
427 |
text-align: center; |
|
428 |
} |
|
429 |
|
|
430 |
/* Latest Comments */ |
|
431 |
|
|
432 |
.wp-block-latest-comments { |
|
433 |
margin: 0; |
|
434 |
padding: 0; |
|
435 |
} |
|
436 |
|
|
437 |
.wp-block-latest-comments .avatar, |
|
438 |
.wp-block-latest-comments__comment-avatar { |
|
439 |
border-radius: 0; |
|
440 |
} |
|
441 |
|
|
442 |
.wp-block-latest-comments__comment, |
|
443 |
.wp-block-latest-comments__comment-excerpt, |
|
444 |
.wp-block-latest-comments__comment-excerpt p { |
|
445 |
font-size: 16px; |
|
446 |
} |
|
447 |
|
|
448 |
.wp-block-latest-comments__comment-excerpt p:last-child { |
|
449 |
margin-bottom: 0; |
|
450 |
} |
|
451 |
|
|
452 |
.wp-block-latest-comments__comment-date { |
|
453 |
font-size: 16px; |
|
454 |
} |
|
455 |
|
|
456 |
.wp-block-latest-comments .wp-block-latest-comments__comment { |
|
457 |
background: url(../images/dotted-line.png) repeat-x left top; |
|
458 |
margin-bottom: 0; |
|
459 |
padding: 24px 0; |
|
460 |
} |
|
461 |
|
|
462 |
/*-------------------------------------------------------------- |
|
463 |
7.0 Blocks - Colors |
|
464 |
--------------------------------------------------------------*/ |
|
465 |
|
|
466 |
.entry-content .has-dark-gray-color { |
|
467 |
color: #141412; |
|
468 |
} |
|
469 |
|
|
470 |
.entry-content .has-dark-gray-background-color { |
|
471 |
background-color: #141412; |
|
472 |
} |
|
473 |
|
|
474 |
.entry-content .has-red-color { |
|
475 |
color: #bc360a; |
|
476 |
} |
|
477 |
|
|
478 |
.entry-content .has-red-background-color { |
|
479 |
background-color: #bc360a; |
|
480 |
} |
|
481 |
|
|
482 |
.entry-content .has-medium-orange-color { |
|
483 |
color: #db572f; |
|
484 |
} |
|
485 |
|
|
486 |
.entry-content .has-medium-orange-background-color { |
|
487 |
background-color: #db572f; |
|
488 |
} |
|
489 |
|
|
490 |
.entry-content .has-light-orange-color { |
|
491 |
color: #ea9629; |
|
492 |
} |
|
493 |
|
|
494 |
.entry-content .has-light-orange-background-color { |
|
495 |
background-color: #ea9629; |
|
496 |
} |
|
497 |
|
|
498 |
.entry-content .has-yellow-color { |
|
499 |
color: #fbca3c; |
|
500 |
} |
|
501 |
|
|
502 |
.entry-content .has-yellow-background-color { |
|
503 |
background-color: #fbca3c; |
|
504 |
} |
|
505 |
|
|
506 |
.entry-content .has-white-color { |
|
507 |
color: #fff; |
|
508 |
} |
|
509 |
|
|
510 |
.entry-content .has-white-background-color { |
|
511 |
background-color: #fff; |
|
512 |
} |
|
513 |
|
|
514 |
.entry-content .has-dark-brown-color { |
|
515 |
color: #220e10; |
|
516 |
} |
|
517 |
|
|
518 |
.entry-content .has-dark-brown-background-color { |
|
519 |
background-color: #220e10; |
|
520 |
} |
|
521 |
|
|
522 |
.entry-content .has-medium-brown-color { |
|
523 |
color: #722d19; |
|
524 |
} |
|
525 |
|
|
526 |
.entry-content .has-medium-brown-background-color { |
|
527 |
background-color: #722d19; |
|
528 |
} |
|
529 |
|
|
530 |
.entry-content .has-light-brown-color { |
|
531 |
color: #eadaa6; |
|
532 |
} |
|
533 |
|
|
534 |
.entry-content .has-light-brown-background-color { |
|
535 |
background-color: #eadaa6; |
|
536 |
} |
|
537 |
|
|
538 |
.entry-content .has-beige-color { |
|
539 |
color: #e8e5ce; |
|
540 |
} |
|
541 |
|
|
542 |
.entry-content .has-beige-background-color { |
|
543 |
background-color: #e8e5ce; |
|
544 |
} |
|
545 |
|
|
546 |
.entry-content .has-off-white-color { |
|
547 |
color: #f7f5e7; |
|
548 |
} |
|
549 |
|
|
550 |
.entry-content .has-off-white-background-color { |
|
551 |
background-color: #f7f5e7; |
|
552 |
} |