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