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