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