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