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