|
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 } |