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