Added a new theme and plugins for a redesigned webkit.org.
[WebKit-https.git] / Websites / webkit.org / wp-content / themes / webkit / style.css
1 /*
2 Theme Name: WebKit
3 Theme URI: http://webkit.org/
4 Author: The WebKit Team
5 Author URI: http://webkit.org/
6 Description: Modern, adaptive theme for the WebKit project.
7 Version: 1.0
8 */
9
10 /** Resets **/
11 html, body, div, span, object, iframe,
12 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
13 a, abbr, acronym, address, big, cite, code,
14 del, dfn, em, img, ins, kbd, q, samp,
15 small, strike, strong, sub, sup, tt, var,
16 dl, dt, dd, ol, ul, li,
17 fieldset, form, label, legend,
18 table, caption, tbody, tfoot, thead, tr, th, td,
19 article, aside, canvas, details,
20 figure, figcaption, footer, header, hgroup,
21 menu, nav, output, section, summary,
22 time, mark, audio, video {
23         margin: 0;
24         padding: 0;
25         border: 0;
26         font: inherit;
27         vertical-align: baseline;
28 }
29 /* HTML5 display-role reset for older browsers */
30 article, aside, details, figcaption, figure,
31 footer, header, hgroup, menu, nav, section {
32         display: block;
33 }
34 html {
35     font-family: "Myriad Set Pro","Helvetica Neue",sans-serif;
36     font-size: 62.5%;
37     font-synthesis: none;
38 }
39 body {
40     background-color: #f7f7f7;
41     font-size: 1.6rem;
42     font-weight: 400;
43         line-height: 1.4;
44 }
45 ol, ul {
46         list-style: none;
47 }
48 blockquote, q {
49         quotes: none;
50 }
51 blockquote:before, blockquote:after,
52 q:before, q:after {
53         content: '';
54         content: none;
55 }
56 table {
57         border-collapse: collapse;
58         border-spacing: 0;
59 }
60 p:empty {
61     display: none;
62 }
63 a {
64     color: #08c;
65     text-decoration: none;
66     transition: color 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* ease-out-exponential */
67 }
68 a:hover {
69     text-decoration: underline;
70 }
71 a > code {
72     color: #08c;
73 }
74
75 h1 a:hover {
76     text-decoration: none;
77 }
78 hr {
79     border: none;
80     border-bottom: 1px solid #ddd;
81 }
82 strong {
83     font-weight: 700;
84 }
85 em {
86     font-weight: 200;
87 }
88 code {
89     font-family: Menlo, monospace;
90     background: #f2f2f2;
91     border-radius: 2px;
92     border: 1px solid #e7e7e7;
93     padding: 0 0.5rem;
94     font-size: 80%;
95     color: #444;
96 }
97
98 /** Form Elements **/
99 body, input, textarea, select, button {
100     font-synthesis: none;
101     text-rendering: optimizeLegibility;
102     -webkit-font-smoothing: antialiased;
103     -moz-osx-font-smoothing: grayscale;
104     -moz-font-feature-settings: 'liga', 'kern';
105 }
106
107 /** Accessibility Helpers **/
108 a[name] {
109     display: block;
110     position: relative;
111     top: -3rem;
112     visibility: hidden;
113 }
114
115 .admin-bar a[name] {
116     top: calc(-32px - 3rem);
117 }
118
119 .screen-reader-text {
120         clip: rect(1px, 1px, 1px, 1px);
121         position: absolute !important;
122         height: 1px;
123         width: 1px;
124         overflow: hidden;
125 }
126
127 .screen-reader-text:focus {
128         background-color: #f1f1f1;
129         border-radius: 3px;
130         box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
131         clip: auto !important;
132         color: #21759b;
133         display: block;
134         font-size: 14px;
135         font-size: 0.875rem;
136         font-weight: bold;
137         height: auto;
138         left: 5px;
139         line-height: normal;
140         padding: 15px 23px 14px;
141         text-decoration: none;
142         top: 5px;
143         width: auto;
144         z-index: 100000; /* Above WP toolbar. */
145 }
146
147
148 /** Page Layout **/
149 .page-width {
150     max-width: 1140px;
151     margin: 0 auto;
152 }
153
154 /** Header **/
155 header {
156     background: #f9f9f9;
157     border-bottom: 1px solid #e7e7e7;
158     overflow: visible;
159     width: 100vw;
160     max-width: 100%;
161     padding-top: 2rem;
162     margin: 0;
163     position: relative;
164     z-index: 500;
165 }
166
167 @supports ( -webkit-backdrop-filter: blur(10px) ) {
168     header {
169         backdrop-filter: blur(10px);
170         -webkit-backdrop-filter: blur(10px);
171         background: rgba(255,255,255,0.8);
172     }
173 }
174
175 a.download {
176     background: url('images/download.svg') right no-repeat;
177     padding-right: 4rem;
178 }
179
180 /** Pagination **/
181 .pagination {
182     text-align: center;
183     margin: 3rem auto;
184     font-weight: bold;
185 }
186
187 .pagination .page-numbers {
188     display: inline-block;
189     padding: 0.5rem 1rem 0.3rem;
190     background: white;
191     border-radius: 3px;
192 }
193
194 .pagination .page-numbers:not(.current, .dots):hover {
195     text-decoration: none;
196     background: #08c;
197     color: white;
198 }
199
200 .pagination .dots,
201 .pagination .page-numbers.current {
202     background: none;
203 }
204
205 .pagination .prev-post,
206 .pagination .next-post {
207     min-width: 25%;
208 }
209
210 .pagination .prev-post {
211     text-align: right;
212 }
213
214 .pagination .next-post {
215     text-align: left;
216 }
217
218 .pagination .prev-post span,
219 .pagination .next-post span {
220     display: block;
221     font-size: 1.4rem;
222     font-weight: normal;
223 }
224
225 /* Front page next button */
226 .pagination .next-button {
227     display: inline-block;
228     line-height: 3rem;
229     box-sizing: border-box;
230     width: -webkit-calc(33.33% - 10px);
231     width: -moz-calc(33.33% - 10px);
232     width: calc(33.33% - 10px);
233 }
234
235 /** Footer **/
236 footer {
237     content: "";
238     display: table;
239     clear: both;
240     width: 100%;
241     padding-bottom: 3rem;
242     box-sizing: border-box;
243 }
244
245 footer .menu {
246     font-size: 1.3rem;
247 }
248
249 /** Tiles **/
250 .tiles {
251     font-size: 0;
252     display: -webkit-flex;
253     display: flex;
254     -webkit-flex-wrap: wrap;
255     flex-wrap: wrap;
256     -webkit-justify-content: space-between;
257     justify-content: space-between;
258     box-sizing: border-box;
259     width: 100%;
260     margin-top: 3rem;
261 }
262
263 .tile {
264     background: white;
265     display: inline-block;
266     margin: 0 0 15px;
267     position: relative;
268     vertical-align: top;
269     box-sizing: border-box;
270     min-height: 450px;
271     overflow: hidden;
272     box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 1px;
273 }
274
275 .tile.spacer {
276     background: none;
277     box-shadow: none;
278 }
279
280 .tile-link,
281 .tile-link:hover {
282     text-decoration: none;
283     display: block;
284     position: absolute;
285     top: 0;
286     left: 0;
287     width: 100%;
288     height: 100%;
289     font-size: 0;
290     z-index: 1;
291 }
292
293 .third-tile {
294     width: -webkit-calc(33.33% - 10px);
295     width: -moz-calc(33.33% - 10px);
296     width: calc(33.33% - 10px);
297 }
298
299 .two-thirds-tile {
300     width: -webkit-calc(66.66% - 5px);
301     width: -moz-calc(66.66% - 5px);
302     width: calc(66.66% - 5px);
303 }
304
305 .featured-tile {
306     padding: 0;
307     /*border: 1px solid #e7e7e7;*/
308 }
309
310 .tile .background-image {
311     position: relative;
312     margin-top: -1px;
313     height: 0;
314     padding-bottom: 80%;
315     overflow: hidden;
316
317     background-size: cover;
318     background-position: 50% 1%;
319     background-color: #8E8E93;
320     background-repeat: no-repeat;
321     background-image: url('images/icons.svg');
322 }
323
324 .tile .background-image.has-featured-image {
325     -webkit-transition: -webkit-filter 10s ease-in;
326     transition: filter 1s ease-in;
327     -webkit-filter: saturate(0);
328             filter: saturate(0);
329 }
330
331 .tile:not(.has-post-thumbnail) .featured-image {
332     display: none;
333 }
334
335 .tile.category-web-inspector .background-image {
336     background-color: #08c;
337     background-position-y: 10.75%;
338 }
339
340 .tile.category-performance .background-image {
341     background-color: rgb(152, 188, 77);
342     background-position-y: 20.5%;
343 }
344
345 .tile.category-javascript .background-image {
346     background-color: #997FA6;
347     background-position-y: 30.5%;
348 }
349
350 .tile.category-css .background-image {
351     background-color: #bf6d71;
352     background-position-y: 40.4%;
353 }
354
355 .tile.category-standards .background-image {
356     background-color: #BF7600;
357     background-position-y: 50.4%;
358 }
359
360 .tile.category-contributing .background-image {
361     background-color: #CBAA44;
362     background-position-y: 59.8%;
363 }
364
365 .tile.category-storage .background-image {
366     background-color: #997FA6;
367     background-position-y: 69.6%;
368 }
369
370 .tile.category-layout .background-image {
371     background-color: #bf6d71;
372     background-position-y: 79.45%;
373 }
374
375 .tile.tag-console .background-image,
376 .tile.tag-debugger .background-image,
377 .tile.tag-shortcuts .background-image,
378 .tile.tag-timeline .background-image {
379      background-image: url('images/inspector.svg');
380 }
381
382 .tile.tag-console .background-image {
383     background-position-y: 3%;
384 }
385
386 .tile.tag-debugger .background-image {
387     background-position-y: 34%;
388 }
389
390 .tile.tag-shortcuts .background-image {
391     background-position-y: 66%;
392 }
393
394 .tile.tag-timeline .background-image {
395     background-position-y: 97%;
396 }
397
398 .tile .background-image.loaded {
399     background: none;
400     -webkit-filter: saturate(1);
401             filter: saturate(1);
402     
403 }
404
405 .tile .featured-image::before {
406     padding-bottom: 80%;
407     content: '';
408     display: block;
409 }
410
411 .tile .featured-image {
412     position: relative;
413     max-height: 450px;
414     background-size: cover;
415     background-position: 50% 50%;
416
417     opacity: 0;
418     -webkit-transition: opacity 0.4s ease-in;
419     -moz-transition: opacity 0.4s ease-in;
420     transition: opacity 0.4s ease-in;
421 }
422
423 .tile .featured-image,
424 .tile:not(.has-post-thumbnail) .background-image,
425 .tile .loaded .featured-image {
426     box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0 1px;
427 }
428
429 .has-post-thumbnail .background-image {
430     filter: saturate(0);
431     -webkit-filter: saturate(0);
432     opacity: 0.1;    
433 }
434
435 .has-post-thumbnail .background-image.loaded,
436 .tile .background-image.loaded .featured-image {
437     opacity: 1;
438 }
439
440 .featured-tile .background-image {
441     padding-bottom: 60%;
442     margin-bottom: 0;
443 }
444
445 .tile .tile-content {
446     font-size: 1.6rem;
447     line-height: 3rem;
448     max-width: 100%;
449     box-sizing: border-box;
450     padding: 2rem;
451 }
452
453 .featured-tile .tile-content {
454     padding: 0 24px;
455     box-sizing: border-box;
456     position: absolute;
457     -webkit-transform: none;
458     transform: none;
459     bottom: 15px;
460     top: auto;
461 }
462
463 .background-vignette {
464     width: 100%;
465     padding-bottom: 60%;
466     position: absolute;
467     top:0;
468     background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 1));
469 }
470
471 .tag-window .background-image {
472     background-color: #f2f2f2;
473 }
474
475 .tag-window .background-vignette {
476     background-image: linear-gradient(-180deg, rgba(242,242,242,0) 25%,rgba(242,242,242,1) 65%);
477 }
478
479 .featured-tile.tag-dark.tile {
480     background: black;
481 }
482
483 .featured-tile.tag-dark .background-vignette {
484     background-image: linear-gradient(-180deg, rgba(0,0,0,0) 33%,rgba(0,0,0,0.85));
485 }
486
487 .featured-tile.tag-dark .tile-content {
488     color: white;
489 }
490
491 .featured-tile.tag-dark .tile-content a {
492     color: #6cf;
493 }
494
495 .tile-content p {
496     margin: 0;
497 }
498
499 .tile h1 {
500     font-size: 3rem;
501     line-height: 4rem;
502     font-weight: 200;
503     text-align: left;
504 }
505 .tile h2 {
506     font-size: 3rem;
507     line-height: 4rem;
508     font-weight: 400;
509     text-align: inherit;
510 }
511
512 .icon-tile {
513     text-align: center;
514     font-size: 2rem;
515 }
516
517 .icon-tile h2 + p {
518     font-weight: 200;
519     margin-bottom: 1rem;
520 }
521
522 .icon-tile .icon {
523     position: relative;
524     background: url('images/compass.svg') no-repeat;
525     background-position: 50% 50%;
526     margin: 0 auto 3rem;
527     padding: 40%;
528     color: #fff;
529 }
530
531 .icon-tile.download .icon {
532     background-image: url('images/download.svg');
533 }
534
535 .icon-tile.developer .icon {
536     background-image: url('images/developer.svg');
537 }
538
539 .icon-tile, .icon-tile a {
540     color: white;
541 }
542 .amber-tile {
543     background-color: #FFCC00;
544 }
545 .gray-tile, .gray-tile a {
546     color: #017BFD;
547 }
548
549 .gray-tile {
550     background: linear-gradient(rgb(40, 40, 40), rgb(74, 74, 74));
551 }
552 .gray-tile, .gray-tile a {
553     color: #fff;
554 }
555
556 .amber-tile {
557     background-color: #FFCC00;
558 }
559 .blue-tile {
560     background-color: #08c;
561 }
562
563 .twitter-tile {
564     background-color: #34AADC;
565 }
566
567 .twitter-tile, .twitter-tile a {
568     color: white;
569 }
570
571 .tile-content a {
572     position: relative;
573     z-index: 200;
574 }
575
576 .twitter-tile .tile-content {
577     position: relative;
578     box-sizing: border-box;
579     font-size: 2rem;
580 }
581
582 .twitter-tile.text-only {
583     display: -webkit-flex;
584     display: flex;
585     justify-content: center;
586 }
587
588 .twitter-tile.text-only .tile-content {
589     font-size: 2.5rem;
590     font-weight: 400;
591     line-height: 3rem;
592     align-self: center;
593 }
594
595 .twitter-tile img {
596     width: 100%;
597     height: auto;
598     max-height: 256px;
599 }
600
601 .twitter-controls {
602     padding: 0 1.5rem;
603     box-sizing: border-box;
604     width: 100%;
605     font-size: 1.5rem;
606     line-height: 3rem;
607     text-align: center;
608     font-weight: 600;
609     position: absolute;
610     left: 0;
611     bottom: 15px;
612     z-index: 200;
613     display: -webkit-flex;
614     display: flex;
615     -webkit-flex-wrap: wrap;
616     flex-wrap: wrap;
617     -webkit-justify-content: space-between;
618     justify-content: space-between;
619 }
620
621 .twitter-controls li {
622     display: inline-block;
623     margin: 0 1.3rem;
624 }
625 .twitter-controls a {
626     opacity: 0.66;
627     transition: opacity 300ms ease-out;
628 }
629 .twitter-controls a:hover {
630     opacity: 1;
631     text-decoration: none;
632 }
633
634 /** Twitter Icons **/
635
636 .twitter-icon {
637     background: url('images/twitter.svg') no-repeat;
638     background-size: cover;
639 }
640
641 .icon.twitter-icon {
642     position: relative;
643     margin: 3rem auto 3rem;
644     width: 1px;
645     padding: 33%;
646     color: #ffffff;
647     opacity: 0.33;
648 }
649
650 .twitter-tile h2 {
651     text-align: center;
652 }
653
654 .twitter-controls .twitter-icon {
655     text-indent: -9999em;
656     display: inline-block;
657     width: 2.5rem;
658     height: 2.5rem;
659 }
660
661 .twitter-icon.reply-icon {
662     background-position-y: 33%;
663 }
664
665 .twitter-icon.retweet-icon {
666     background-position-y: 66%;
667 }
668
669 .twitter-icon.favorite-icon {
670     background-position-y: 99%;
671 }
672
673 /** Code Syntax Highlighting **/
674 pre {
675     width: calc(100% + 6rem);
676         overflow: auto;
677     -webkit-overflow-scrolling: touch;
678     background: #f2f2f2;
679         border: 1px solid #E6E6E6;
680         border-radius: 3px;
681
682     box-sizing: border-box;
683     padding: 3rem;
684     margin-left: -3rem;
685 }
686
687 code {
688     color: #555555;
689         font-size: 1.6rem;
690     line-height: 2.5rem;
691 }
692
693 pre code {
694     border: none;
695     padding: 0;
696 }
697
698 code .keyword,
699 code.html .tag { color: #708; }
700 code .keyword.builtin,
701 code .keyword.literal { color: #aa0d91;}
702 code .keyword.type { color: #cb4b16; }
703 code .preprocessor { color: #996; }
704 code .comment { color: #93a1a1; float: none; display: inline; }
705 code .comment .doc { color: #839496; font-weight: bold; }
706 code .identifier { color: #1C63A8; }
707 code .string, code .char { color: #5B6E04; }
708 code .escaped { color: #AAA; }
709 code .number, code .tag { color: #586e75; }
710 code .regex, code .attribute { color: rgb(131, 108, 40); }
711 code .attribute.value { color: rgb(196, 26, 22) ;}
712 code .operator { color: #888; }
713 code .keyword.operator { color: #A90007; }
714 code .whitespace { background: #333; }
715 code .error { border-bottom: 1px solid red; }
716 code .doctype { color: rgb(192, 192, 192); }
717 code .property { color: #881391; }
718
719 code.xml .comment,
720 code.html .comment { color: rgb(0, 116, 0); }
721
722 code.xml .preprocessor .keyword { color: #996; }
723 code.xml .meta, code.xml .meta .keyword { color: #399; }
724
725 code.cpp .preprocessor .identifier { color: #996; }
726
727 code::-moz-selection, code span::-moz-selection {
728     background: #A3CDFE;
729 }
730
731 code::selection, code span::selection {
732     background: #A3CDFE;
733 }
734
735 code.syntax { white-space: normal; }
736 code.syntax .newlines { white-space: pre; display: block; }
737
738 code.css .attribute,
739 code.css .identifier,
740 code.css .preprocessor { color: rgb(170, 13, 145); }
741
742 code.css .keyword { color: black; }
743 code.css .number { color: rgb(28, 0, 207); }
744
745 /** Post Typography **/
746 article h1 {
747     font-size: 5.2rem;
748     line-height: 1.0625;
749     font-weight: 200;
750     letter-spacing: -0.02em;
751     text-align: center;
752     color: #037DFD;
753     margin: 5rem auto 3rem;
754 }
755
756 article h1 a {
757     color: #444444;
758     text-decoration: none;
759 }
760
761 article h2 {
762     font-size: 4.2rem;
763     line-height: 1.08654;
764     font-weight: 200;
765     letter-spacing: -0.014em;
766     margin: 4rem 0 1rem;
767 }
768
769 article h3 {
770     font-size: 3.2rem;
771     line-height: 1.14286;
772     font-weight: 200;
773     letter-spacing: -0.01em;
774 }
775
776 article h4 {
777     font-size: 2.2rem;
778     line-height: 1.125;
779     font-weight: 200;
780 }
781
782 article h5 {
783     font-size: 2rem;
784     line-height: 1.5;
785     font-weight: 600;
786 }
787
788 article h6 {
789     font-size: 2rem;
790     line-height: 1.5;
791     font-weight: 600;
792     font-size: 2rem;
793 }
794
795 article h3,
796 article h4,
797 article h5,
798 article h6 {
799     margin-bottom: 0.5rem;
800 }
801
802 article h2 + h3,
803 article h3 + h4,
804 article h4 + h5,
805 article h5 + h6 {
806     margin-top: 3rem;
807 }
808
809 article p,
810 article div > img,
811 article pre,
812 article hr {
813     margin-bottom: 3rem;
814 }
815
816 article .byline p {
817     font-size: 1.5rem;
818     line-height: 3rem;
819     margin-bottom: 0;
820     color: #8E8E93;
821 }
822
823 article .byline .date {
824     font-weight: 900;
825 }
826
827 article .byline .author {
828     white-space: nowrap;
829
830 }
831
832 article .bodycopy {
833     font-size: 2rem;
834     line-height: 3rem;
835 }
836
837 article table {
838     font-size: 1.6rem;
839     border-collapse: collapse;
840     border-spacing: 0;
841     margin: 3rem 0;
842     width: 100%;
843 }
844
845 article thead, article tfoot {
846     border-top: 1px solid #bbbbbb;
847     border-bottom: 1px solid #e0e0e0;
848 }
849
850 article tr {
851     border-top: 1px solid #e0e0e0;
852 }
853
854 article tr:first-child {
855     border-top: 0 none;
856 }
857
858 article th {
859     font-weight: bold;
860     vertical-align: bottom;
861     text-align: left;
862
863 }
864 article td, th {
865     padding: 1.754386%;
866 }
867 article th:first-child {
868     padding-left: 0;
869 }
870
871 article ol,
872 article ul {
873     padding-left: 3rem;
874     margin: 3rem 0;
875 }
876
877 article ol {
878     list-style-type: decimal;
879 }
880
881 article ul {
882     list-style-type: square;
883 }
884
885 article ul ul,
886 article ul ol,
887 article ol ul,
888 article ol ol {
889     margin-top: 0;
890     margin-bottom: 0;
891 }
892
893 article blockquote {
894     width: 100vw;
895     height: auto;
896     padding: 0 3rem;
897     left: 50%;
898     position: relative;
899     margin-left: -50vw;
900     box-sizing: border-box;
901     font-weight: 200;
902     font-size: 3rem;
903     line-height: 4.2rem;
904     text-align: center;
905     color: #555555;
906 }
907 article blockquote > * {
908     max-width: 1140px;
909     margin-left: auto;
910     margin-right: auto;
911 }
912
913 article blockquote:first-child {
914     width: 100%;
915     text-align: left;
916     margin: 0 auto;
917     left: 0;
918     padding: 0;
919 }
920
921 .post .bodycopy > p:last-child:after {
922     content: " \220E"; /* Tombstone */
923     color: #666666;
924 }
925
926 article div.note {
927     margin-left: -3rem;
928     margin-right: -3rem;
929     padding: 3rem;
930     background-color: hsl(50, 100%, 94%);
931     border: 1px solid hsl(40, 100%, 90%);
932     color: hsl(30, 90%, 35%);
933     border-radius: 3px;
934     margin-bottom: 3rem;
935     box-sizing: normal;
936 }
937
938 article .two-columns {
939     columns: 2;
940     column-gap: 6rem;
941     margin: 3rem 0;
942 }
943
944 article .two-columns h2,
945 article .two-columns h3,
946 article .two-columns h4,
947 article .two-columns h5,
948 article .two-columns h6 {
949     break-after: avoid-column; /* https://bugs.webkit.org/show_bug.cgi?id=148814 */
950 }
951
952 article .two-columns p {
953     break-inside: avoid-column;
954 }
955
956 /** Post Layout **/
957
958 article .byline {
959     float: left;
960     width: 191px;
961     text-align: right;
962     padding-right: 3rem;
963     box-sizing: border-box;
964 }
965
966 article .bodycopy {
967     width: 66%;
968     margin: 0 auto;
969     position: relative;
970 }
971
972 article .aligncenter .wp-caption-text {
973     right: -50%;
974 }
975
976 article .alignleft {
977     float: left;
978     margin: 1.5rem 1.5rem 1.5rem 0;
979 }
980
981 article .aligncenter {
982     clear: both;
983     display: block;
984     margin: 0 auto 3rem;
985 }
986
987 article div.aligncenter {
988     position: relative;
989     float: right;
990     right: 50%;
991 }
992
993 article div.aligncenter img {
994     position: relative;
995     right: -50%;
996 }
997
998 article .alignright {
999     float: right;
1000     margin: 1.5rem 0 1.5rem 1.5rem;
1001 }
1002
1003 article .alignnone {
1004     display: block;
1005     float: none;
1006 }
1007
1008 article .alignnone.size-full {
1009     width: 100vw;
1010     height: auto;
1011     left: 50%;
1012     position: relative;
1013     -webkit-transform: translate(-50vw, 0);
1014     transform: translate(-50vw, 0);
1015 }
1016
1017 article .pull-left {
1018     float: left;
1019     margin: 1.5rem 1.5rem 1.5rem -25%;
1020 }
1021
1022 article .pull-right {
1023     float: right;
1024     margin: 1.5rem -25% 1.5rem 1.5rem;
1025 }
1026
1027 article .cliptop {
1028     border-top: 1px solid #dddddd;
1029 }
1030
1031 article .clipbottom {
1032     border-bottom: 1px solid #dddddd;
1033 }
1034
1035 article .clipright {
1036     border-right: 1px solid #dddddd;
1037 }
1038
1039 article .clipleft {
1040     border-left: 1px solid #dddddd;
1041 }
1042
1043 article .mattewhite {
1044     background: white;
1045     border-top: 1px solid #e7e7e7;
1046     border-bottom: 1px solid #e7e7e7;
1047     padding-top: 3rem;
1048     padding-bottom: 3rem;
1049 }
1050
1051 /** Article Figures **/
1052
1053 article figure {
1054     margin-bottom: 3rem;
1055     text-align: center;
1056 }
1057 article figure > img {
1058     display: inline-block;
1059     max-width: 100%;
1060 }
1061
1062 figure.widescreen {
1063     position: relative;
1064     width: 100vw;
1065     left: 50%;
1066     transform: translate(-50%);
1067 }
1068
1069 figure.widescreen img,
1070 figure.widescreen figcaption {
1071     display: block;
1072     margin: 0 auto;
1073 }
1074
1075 figure.widescreen img {
1076     max-width: 100%;
1077     height: auto;
1078 }
1079
1080 figure.widescreen figcaption {
1081     margin-top: 3rem;
1082 }
1083
1084 figure.widescreen video {
1085     max-height: 420px;
1086     max-width: 66%;
1087 }
1088
1089 article figcaption {
1090     text-align: left;
1091     margin-top: 1.5rem;
1092     max-width: 970px;
1093     padding-left: 1.5rem;
1094     box-sizing: border-box;
1095     font-size: 1.5rem;
1096     font-style: italic;
1097     color: #8E8E93;
1098     position: relative;
1099 }
1100
1101 article figcaption::before {
1102     left: 1.5rem;
1103     width: 10%;
1104     height: 100%;
1105     bottom: 1rem;
1106     border-top: 1px solid #cccccc;
1107     content: '';
1108     opacity: 1;
1109     display: inline-block;
1110     box-sizing: border-box;
1111     position: absolute;
1112 }
1113
1114 article .clipbottom + p + figcaption {
1115     margin-top: 1rem;
1116 }
1117
1118 article .clipbottom + p + figcaption::before {
1119     width: 0;
1120 }
1121
1122 /** Page Layout **/
1123 article.page h1 {
1124     text-align: left;
1125     width: 66%;
1126 }
1127
1128 .page .bodycopy h1 {
1129     width: 100%;
1130 }
1131
1132 /** Load Effects **/
1133
1134 @keyframes fade-in {
1135     from {
1136         opacity: 0;
1137     }
1138
1139     to {
1140         opacity: 1;
1141     }
1142 }
1143
1144 @-webkit-keyframes fade-in {
1145     from {
1146         opacity: 0;
1147     }
1148
1149     to {
1150         opacity: 1;
1151     }
1152 }
1153
1154 @keyframes fade-in-move-down {
1155     from {
1156         opacity: 0;
1157         -webkit-transform: translateY(-3rem);
1158         transform: translateY(-3rem)
1159     }
1160
1161     to {
1162         opacity: 1;
1163         -webkit-transform: translateY(0);
1164         transform: translateY(0)
1165     }
1166 }
1167
1168 @-webkit-keyframes fade-in-move-down {
1169     from {
1170         opacity: 0;
1171         -webkit-transform: translateY(-3rem);
1172         transform: translateY(-3rem)
1173     }
1174
1175     to {
1176         opacity: 1;
1177         -webkit-transform: translateY(0);
1178         transform: translateY(0)
1179     }
1180 }
1181
1182 article,
1183 .feature-status-page {
1184     -webkit-animation: fade-in-move-down 0.7s;
1185     animation: fade-in-move-down 0.7s;
1186 }
1187
1188 .tile {
1189     -webkit-animation: fade-in 0.4s;
1190     animation: fade-in 0.4s;
1191 }
1192
1193 /** Page Table of Contents **/
1194
1195 .table-of-contents {
1196     float: right;
1197     box-sizing: border-box;
1198     padding: 3rem;
1199     margin: 0 0 3rem 3rem;
1200
1201     width: 252px;
1202     background: #ffffff;
1203     z-index: 5;
1204     
1205 }
1206
1207 .table-of-contents ul {
1208     margin: 0;
1209     list-style: none;
1210     font-size: 1.6rem;
1211     line-height: 2rem;
1212     padding-left: 2rem;
1213     padding-right: 0;
1214 }
1215
1216 .table-of-contents .list > ul {
1217     padding-left: 0;
1218 }
1219
1220 .table-of-contents ul li {
1221     margin-bottom: 1rem;
1222 }
1223
1224 .table-of-contents ul li:last-child {
1225     margin-bottom: 0;
1226 }
1227
1228 .table-of-contents ul li > ul {
1229     margin-top: 1rem;
1230 }
1231
1232 .with-toc pre:nth-child(-n+6),
1233 #post-4132 pre:nth-child(-n+8) {
1234     width: 55%;
1235     z-index: -1;
1236 }
1237
1238 /** Logo **/
1239 .site-logo {
1240     float: left;
1241     font-size: 4.2rem;
1242     line-height: 4.2rem;
1243     font-weight: 200;
1244     display: inline-block;
1245     background: url('images/webkit.svg') no-repeat;
1246     padding-left: 7rem;
1247     color: #333;
1248 }
1249
1250 .site-logo .tagline {
1251     display: block;
1252     font-size: 1.8rem;
1253     line-height: 2rem;
1254     letter-spacing: -0.05rem;
1255     color: #666;
1256 }
1257
1258 .hero .logo {
1259     background-image: url('images/webkit.svg');
1260 }
1261
1262 /** Status Page **/
1263
1264 .feature-header:after {
1265     display: inline-block;
1266     content: "";
1267     background: url('images/menu-down.svg') no-repeat 50%;
1268     background-size: 2rem;
1269     width: 2rem;
1270     height: 2rem;
1271     position: absolute;
1272     right: 0;
1273     top: 0.5rem;
1274     -webkit-transition: transform 0.3s ease-out;
1275     -moz-transition: transform 0.3s ease-out;
1276     transition: transform 0.3s ease-out;
1277 }
1278
1279 .feature.opened .feature-header:after {
1280         -webkit-transform: rotateX(-180deg);
1281         -moz-transform: rotateX(-180deg);
1282         transform: rotateX(-180deg);
1283     perspective: 600;
1284 }
1285
1286 /** Navigation **/
1287
1288 .label-toggle {
1289     cursor: pointer;
1290 }
1291
1292 header nav {
1293     text-align: right;
1294 }
1295
1296 /* Hide menu toggle checkboxes */
1297 input.menu-toggle {
1298     visibility: hidden;
1299     position: absolute;
1300     top: 0;
1301     left: 0;
1302 }
1303
1304 footer nav {
1305     padding: 3rem 0;
1306 }
1307
1308 header nav li {
1309     display: inline-block;
1310     padding: 2.5rem 0 1.5rem 3rem;
1311 }
1312
1313 footer nav li {
1314     display: inline-block;
1315     position: relative;
1316     padding: 0 0 1.5rem 3rem;
1317 }
1318
1319 footer nav li:first-child {
1320     padding-left: 0;
1321 }
1322
1323 header nav a,
1324 footer nav a {
1325     position: relative;
1326     display: inline-block;
1327     text-decoration: none;
1328     color: #333;
1329     cursor: pointer;
1330 }
1331
1332 header nav a:hover,
1333 footer nav a:hover {
1334     color: #08c;
1335     text-decoration: none;
1336 }
1337
1338 header nav .menu-item-has-children .label-toggle {
1339     background: url('images/menu-down.svg') right 0.7rem no-repeat;
1340     background-size: 1rem;
1341     display: inline-block;
1342     padding-right: 1.5rem;
1343 }
1344
1345 header nav .menu-item { /* add bottom dimension to main menu items */
1346     padding-bottom: 3rem;
1347 }
1348
1349 /* Improves mouse accessibility of menus */
1350 header .menu > .menu-item-has-children:hover > a::before {
1351     position: absolute;
1352     content: '';
1353     width: 100%;
1354     height: 100%;
1355     padding: 0rem 10rem 1rem 0;
1356     top: 2rem;
1357     right: -3rem;
1358 }
1359
1360 .sub-menu-layer {
1361     text-align: center;
1362     padding: 3rem;
1363     box-sizing: border-box;
1364
1365     width: 210px;
1366     margin-left: -110px;
1367     
1368     position: absolute;
1369     top: 7rem;    
1370     
1371     background: rgba(255,255,255,0.95);
1372     box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.10);
1373     border: 1px solid #e7e7e7;
1374     border-radius: 5px;
1375
1376     -webkit-transition: opacity 0.6s, top 0.6s;
1377     -moz-transition: opacity 0.6s, top 0.6s;
1378     transition: opacity 0.6s, top 0.6s;
1379     opacity: 0;
1380 }
1381
1382 .sub-menu-layer:after, .sub-menu-layer:before {
1383     bottom: 100%;
1384     left: 71%;
1385     border: solid transparent;
1386     content: " ";
1387     height: 0;
1388     width: 0;
1389     position: absolute;
1390     pointer-events: none;
1391 }
1392
1393 .sub-menu-layer:after {
1394     border-bottom-color: rgba(255,255,255,0.9);
1395     border-width: 10px;
1396     margin-left: -10px;
1397 }
1398
1399 .sub-menu-layer:before {
1400     border-bottom-color: #e7e7e7;
1401     border-width: 11px;
1402     margin-left: -11px;
1403 }
1404
1405 .sub-menu-layer .menu-item {
1406     padding: 1.5rem 0 0 0;
1407     width: 100%;    
1408 }
1409
1410 .sub-menu-layer .menu-item:first-child {
1411     padding: 0;
1412 }
1413
1414 .menu > .menu-item > a:focus ~ .sub-menu,
1415 .menu > .menu-item.open-menu> .sub-menu,
1416 .menu > .menu-item:hover > .sub-menu,
1417 .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
1418     display: block;
1419     box-sizing: border-box;
1420     z-index: 1;
1421     opacity: 1;
1422     top: 8rem;    
1423 }
1424
1425 /** Screen Breakpoints **/
1426
1427 @media only screen and (max-width: 1180px) {
1428     
1429     .page-width {
1430         max-width: 1140px;
1431         padding-left: 2rem;
1432         padding-right: 2rem;
1433     }
1434
1435     article .byline {
1436         width: 60%;
1437         margin: 0 auto;
1438         float: none;
1439         text-align: center;
1440         margin-bottom: 3rem;
1441     }
1442
1443     article .byline p {
1444         display: inline;
1445     }
1446
1447 }
1448
1449 @media only screen and (max-width: 1000px) {
1450
1451     article.page h1 {
1452         width: 90%;
1453         margin-bottom: 3rem;
1454     }
1455     
1456     article .byline {
1457         width: 60%;
1458         margin: 0 auto;
1459         float: none;
1460         text-align: center;
1461         margin-bottom: 3rem;
1462     }
1463
1464     article .byline p {
1465         display: inline;
1466     }
1467
1468     article .bodycopy {
1469         width: 90%;
1470     }
1471
1472 }
1473
1474 @media only screen and (max-width: 920px) {
1475     
1476     header nav .main-menu.label-toggle {
1477         display: inline-block;
1478         margin: 1.5rem 0 2.5rem;
1479         height: 3rem;
1480         width: 3rem;
1481         background: url('images/menu-down.svg') no-repeat 50%;
1482         cursor: pointer;
1483     }
1484
1485     header .menu {
1486         display: none;
1487         position: absolute;
1488         left: 0;
1489         margin-top: 1px;
1490         padding-top: 3rem;
1491         text-align: left;
1492         width: 100vw;
1493         overflow: hidden;
1494         box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
1495         backdrop-filter: blur(10px);
1496         -webkit-backdrop-filter: blur(10px);
1497         background: rgba(255,255,255,0.8);
1498     }
1499
1500     header nav .menu-toggle:checked ~ ul {
1501         display: block;
1502         opacity: 1;
1503     }
1504
1505     header .menu-main-menu-container >  ul > li {
1506         width: 100vw;
1507         position: relative;
1508         padding: 0 3rem 3rem;
1509         box-sizing: border-box;
1510         -webkit-transition: opacity 0.6s;
1511         -moz-transition: opacity 0.6s;
1512         transition: opacity 0.6s;
1513     }
1514
1515     header .menu > .menu-item > .sub-menu {
1516         box-shadow: none;
1517         border-bottom: 1px solid #e7e7e7;
1518     }
1519
1520     header .menu > .menu-item-has-children {
1521         margin-left: 0;
1522     }
1523
1524     header .sub-menu-layer {
1525         text-align: left;
1526         width: 100vw;
1527         left: 50%;
1528         margin-left: -50vw;
1529         border-radius: 0;
1530         border-left: none;
1531         border-right: none;
1532         opacity: 0;
1533         -webkit-transition: opacity 0.6s;
1534         -moz-transition: opacity 0.6s;
1535         transition: opacity 0.6s;
1536     }
1537     
1538     header .sub-menu-layer:after, .sub-menu-layer:before {
1539         bottom: 100%;
1540         left: 71%;
1541         border: solid transparent;
1542         content: " ";
1543         height: 0;
1544         width: 0;
1545         position: absolute;
1546         pointer-events: none;
1547     }
1548
1549     header .sub-menu-layer:after {
1550         border: none;
1551         margin-left: -10px;
1552     }
1553     
1554     header .sub-menu-layer:before {
1555         border: none;
1556         margin-left: -11px;
1557     }
1558     
1559     header .menu-toggle:checked ~ .sub-menu {
1560         text-align: left;
1561     }
1562
1563     header .menu > .menu-item:hover > .sub-menu,
1564     header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
1565         position: relative;
1566         top: 1.5rem;
1567     }
1568     
1569     footer nav li {
1570         padding: 0 3rem 3rem 0;
1571     }
1572
1573 }
1574
1575 @media only screen and (max-width: 782px) {
1576     
1577     .featured-tile {
1578         padding: 0;
1579     }
1580
1581     .tile.spacer {
1582         height: 0;
1583         min-height: 0;
1584         margin-bottom: 0;
1585     }
1586
1587     .page-width {
1588         max-width: 100vw;
1589         padding-left: 1rem;
1590         padding-right: 1rem;
1591         overflow: hidden;
1592         box-sizing: border-box;
1593     }
1594
1595     .tile {
1596         min-height: auto;
1597     }
1598
1599     .third-tile,
1600     .two-thirds-tile {
1601         width: -webkit-calc(100% - 1px);
1602         width: -moz-calc(100% - 1px);
1603         width: calc(100% - 1px);
1604     }
1605
1606     .icon-tile .icon {
1607         margin-top: -40%;
1608     }
1609
1610     .with-toc pre:nth-child(-n+8),
1611     article pre {
1612         position: relative;
1613         width: 100vw;
1614         left: 50%;
1615         transform: translate(-50%);
1616         margin-left: 0;
1617         border-radius: 0;
1618         border-left: none;
1619         border-right: none;
1620     }
1621    
1622     .table-of-contents { /* hug the edge */
1623         right: 0;
1624     }
1625     
1626     .pagination .prev-post,
1627     .pagination .next-post {
1628         min-width: auto;
1629         width: 90%;
1630         text-align: right;
1631     }
1632     
1633     .pagination .prev-post {
1634         margin-bottom: 1rem;
1635         text-align: left;
1636     }
1637
1638 }
1639
1640 @media only screen and (max-width: 600px) {
1641         
1642     header {
1643         padding-top: 1rem;
1644     }
1645         
1646     .site-logo {
1647         font-size: 4rem;
1648         padding-left: 6rem;
1649     }
1650     
1651     .site-logo .tagline {
1652         font-size: 1.6rem;
1653         line-height: 1;
1654     }
1655
1656     header nav .main-menu.label-toggle {
1657         margin-top: 2rem;
1658         margin-bottom: 2rem;
1659     }
1660
1661     .feature-filters {
1662         height: 6rem;
1663         overflow: hidden;
1664     }
1665
1666     .feature-filters.opened {
1667         height: auto;
1668     }
1669
1670     .feature-filters:after {
1671         display: inline-block;
1672         content: "";
1673         background: url('images/menu-down.svg') no-repeat 50%;
1674         background-size: 2rem;
1675         width: 2rem;
1676         height: 2rem;
1677         position: absolute;
1678         right: 1rem;
1679         top: 2rem;
1680         -webkit-transition: transform 0.3s ease-out;
1681         -moz-transition: transform 0.3s ease-out;
1682         transition: transform 0.3s ease-out;
1683         perspective: 600;
1684     }
1685
1686     .feature-filters.opened:after {
1687         -webkit-transform: rotateX(-180deg);
1688         -moz-transform: rotateX(-180deg);
1689         transform: rotateX(-180deg);
1690     }
1691     
1692     #wpadminbar {
1693         position: absolute;
1694     }
1695     
1696     .table-of-contents {
1697         height: 9rem;
1698         overflow: hidden;
1699         margin-right: -10%;
1700     }
1701     
1702     .menu-toggle:checked ~ .table-of-contents {
1703         height: auto;
1704     }
1705     
1706     .table-of-contents label {
1707         display: block;
1708     }
1709     
1710     .table-of-contents label:after {
1711         display: inline-block;
1712         content: "";
1713         background: url('images/menu-down.svg') no-repeat 50%;
1714         background-size: 2rem;
1715         width: 2rem;
1716         height: 2rem;
1717         position: absolute;
1718         right: 3rem;
1719         top: 3.5rem;
1720         -webkit-transition: transform 0.3s ease-out;
1721         -moz-transition: transform 0.3s ease-out;
1722         transition: transform 0.3s ease-out;
1723         perspective: 600;
1724     }
1725     
1726     .menu-toggle:checked ~ .table-of-contents label:after {
1727         -webkit-transform: rotateX(-180deg);
1728         -moz-transform: rotateX(-180deg);
1729         transform: rotateX(-180deg);
1730     }
1731     
1732     .table-of-contents h6 {
1733         margin-bottom: 3rem;
1734     }
1735     
1736     .with-toc pre:nth-child(-n+6),
1737     #post-4132 pre:nth-child(-n+8) {
1738         width: 100vw;
1739     }
1740         
1741 }
1742
1743 @media only screen and (max-width: 415px) {
1744     
1745     .table-of-contents { 
1746         /* Go one-column */
1747         width: 100vw;
1748         left: 50%;
1749         position: relative;
1750         transform: translate(-50%);
1751         float: none;
1752         margin: 0 0 3rem 0;
1753     }
1754     
1755 }
1756
1757 @media only screen and (max-height: 415px) {
1758     
1759     .hero .logo,
1760     .hero .tagline,
1761     .hero .particle {
1762         display: none;
1763     }
1764     
1765     .home .site-logo {
1766         opacity: 1;
1767         margin-top: 0;
1768     }
1769     
1770     .home .hero {
1771         margin: 7rem 0 0;
1772     }
1773     
1774     .home.admin-bar .hero {
1775         margin-top: 12rem;
1776     }
1777     
1778     header,
1779     .home header {
1780         padding-top: 1rem;
1781     }
1782     
1783     .home header {
1784         border-bottom: 1px solid #e7e7e7;
1785         background: rgba(255,255,255,0.9);
1786     }
1787
1788     @supports ( -webkit-backdrop-filter: blur(10px) ) {
1789         .home header {
1790             backdrop-filter: blur(10px);
1791             -webkit-backdrop-filter: blur(10px);
1792             background: rgba(255,255,255,0.8);
1793         }
1794     }
1795     
1796     .tile {
1797         min-height: 200px;
1798         max-height: 400px;
1799         overflow: hidden;
1800     }
1801     
1802     .tile .background-image {
1803         padding-bottom: 33%;
1804     }
1805     
1806     .tile.category-performance .background-image {
1807         background-position-y: 21.5%;
1808     }
1809
1810     .tile.category-web-inspector .background-image {
1811         background-position-y: 12.5%;
1812     }
1813     
1814     .table-of-contents {
1815         height: 9rem;
1816         overflow: hidden;
1817         margin-right: -10%;
1818     }
1819     
1820     .menu-toggle:checked ~ .table-of-contents {
1821         height: auto;
1822     }
1823     
1824     .table-of-contents label {
1825         display: block;
1826     }
1827     
1828     .table-of-contents label:after {
1829         display: inline-block;
1830         content: "";
1831         background: url('images/menu-down.svg') no-repeat 50%;
1832         background-size: 2rem;
1833         width: 2rem;
1834         height: 2rem;
1835         position: absolute;
1836         right: 3rem;
1837         top: 3.5rem;
1838         -webkit-transition: transform 0.3s ease-out;
1839         -moz-transition: transform 0.3s ease-out;
1840         transition: transform 0.3s ease-out;
1841         perspective: 600;
1842     }
1843     
1844     .menu-toggle:checked ~ .table-of-contents label:after {
1845         -webkit-transform: rotateX(-180deg);
1846         -moz-transform: rotateX(-180deg);
1847         transform: rotateX(-180deg);
1848     }
1849     
1850     .table-of-contents h6 {
1851         margin-bottom: 3rem;
1852     }
1853     
1854     .with-toc pre:nth-child(-n+6),
1855     #post-4132 pre:nth-child(-n+8) {
1856         width: 100vw;
1857     }
1858     
1859 }
1860
1861 @media only screen and (max-width: 320px) {
1862
1863     .home .hero {
1864         position: absolute;
1865     }
1866     
1867 }