306c80287a4a5eb5fbd60ef9325733ee6548ea5a
[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.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     width: auto;
1177 }
1178
1179 figure.widescreen {
1180     position: relative;
1181     width: 100vw;
1182     left: 50%;
1183     transform: translate(-50%);
1184 }
1185
1186 figure.widescreen img,
1187 figure.widescreen figcaption {
1188     display: block;
1189     margin: 0 auto;
1190 }
1191
1192 figure.widescreen figcaption {
1193     margin-top: 3rem;
1194 }
1195
1196 figure.widescreen video {
1197     max-height: 420px;
1198     max-width: 66%;
1199 }
1200
1201 article video.alignleft,
1202 article video.alignright {
1203     max-width: 50%;
1204 }
1205
1206 article .alignleft:first-child,
1207 article .alignright:first-child {
1208     margin-top: 0.5rem;
1209     margin-bottom: 0.5rem;
1210 }
1211
1212 article figcaption {
1213     text-align: left;
1214     margin-top: 1.5rem;
1215     max-width: 970px;
1216     padding-left: 1.5rem;
1217     box-sizing: border-box;
1218     font-size: 1.5rem;
1219     font-style: italic;
1220     color: #8E8E93;
1221     position: relative;
1222 }
1223
1224 article figcaption::before {
1225     left: 1.5rem;
1226     width: 10%;
1227     height: 100%;
1228     bottom: 1rem;
1229     border-top: 1px solid #cccccc;
1230     content: '';
1231     opacity: 1;
1232     display: inline-block;
1233     box-sizing: border-box;
1234     position: absolute;
1235 }
1236
1237 figure.aligncenter figcaption {
1238     text-align: center;
1239     padding-left: 0;
1240 }
1241
1242 figure.aligncenter figcaption::before {
1243     margin: 0 auto;
1244     width: 20%;
1245     left: 50%;
1246     transform: translate(-50%);
1247 }
1248
1249 article .clipbottom + p + figcaption {
1250     margin-top: 1rem;
1251 }
1252
1253 article .clipbottom + p + figcaption::before {
1254     width: 0;
1255 }
1256
1257 /** Page Layout **/
1258 article.page h1 {
1259     text-align: left;
1260     width: 66%;
1261 }
1262
1263 .page .bodycopy h1 {
1264     width: 100%;
1265 }
1266
1267 /** Load Effects **/
1268
1269 @keyframes fade-in {
1270     from {
1271         opacity: 0;
1272     }
1273
1274     to {
1275         opacity: 1;
1276     }
1277 }
1278
1279 @-webkit-keyframes fade-in {
1280     from {
1281         opacity: 0;
1282     }
1283
1284     to {
1285         opacity: 1;
1286     }
1287 }
1288
1289 @keyframes fade-in-move-down {
1290     from {
1291         opacity: 0;
1292         -webkit-transform: translateY(-3rem);
1293         transform: translateY(-3rem)
1294     }
1295
1296     to {
1297         opacity: 1;
1298         -webkit-transform: translateY(0);
1299         transform: translateY(0)
1300     }
1301 }
1302
1303 @-webkit-keyframes fade-in-move-down {
1304     from {
1305         opacity: 0;
1306         -webkit-transform: translateY(-3rem);
1307         transform: translateY(-3rem)
1308     }
1309
1310     to {
1311         opacity: 1;
1312         -webkit-transform: translateY(0);
1313         transform: translateY(0)
1314     }
1315 }
1316
1317 article,
1318 .feature-status-page {
1319     -webkit-animation: fade-in-move-down 0.7s;
1320     animation: fade-in-move-down 0.7s;
1321 }
1322
1323 .tile {
1324     -webkit-animation: fade-in 0.4s;
1325     animation: fade-in 0.4s;
1326 }
1327
1328 /** Page Table of Contents **/
1329
1330 .table-of-contents {
1331     float: right;
1332     box-sizing: border-box;
1333     padding: 3rem;
1334     margin: 0 0 3rem 3rem;
1335
1336     width: 252px;
1337     background: #ffffff;
1338     z-index: 5;
1339
1340 }
1341
1342 .table-of-contents ul {
1343     margin: 0;
1344     list-style: none;
1345     font-size: 1.6rem;
1346     line-height: 2rem;
1347     padding-left: 2rem;
1348     padding-right: 0;
1349 }
1350
1351 .table-of-contents .list > ul {
1352     padding-left: 0;
1353 }
1354
1355 .table-of-contents ul li {
1356     margin-bottom: 1rem;
1357 }
1358
1359 .table-of-contents ul li:last-child {
1360     margin-bottom: 0;
1361 }
1362
1363 .table-of-contents ul li > ul {
1364     margin-top: 1rem;
1365 }
1366
1367 .with-toc pre:nth-child(-n+6),
1368 #post-4132 pre:nth-child(-n+10) {
1369     width: 55%;
1370     z-index: -1;
1371 }
1372
1373 /** Logo **/
1374 .site-logo {
1375     float: left;
1376     font-size: 4.2rem;
1377     line-height: 4.2rem;
1378     font-weight: 200;
1379     display: inline-block;
1380     background: url('images/webkit.svg') no-repeat;
1381     padding-left: 7rem;
1382     color: #333;
1383 }
1384
1385 .site-logo .tagline {
1386     display: block;
1387     font-size: 1.8rem;
1388     line-height: 2rem;
1389     letter-spacing: -0.05rem;
1390     color: #666;
1391 }
1392
1393 .hero .logo {
1394     background-image: url('images/webkit.svg');
1395 }
1396
1397 /** Status Page **/
1398
1399 .feature-header:after {
1400     display: inline-block;
1401     content: "";
1402     background: url('images/menu-down.svg') no-repeat 50%;
1403     background-size: 2rem;
1404     width: 2rem;
1405     height: 2rem;
1406     position: absolute;
1407     right: 0;
1408     top: 0.5rem;
1409     -webkit-transition: transform 0.3s ease-out;
1410     -moz-transition: transform 0.3s ease-out;
1411     transition: transform 0.3s ease-out;
1412 }
1413
1414 .feature.opened .feature-header:after {
1415     -webkit-transform: rotateX(-180deg);
1416     -moz-transform: rotateX(-180deg);
1417     transform: rotateX(-180deg);
1418     perspective: 600;
1419 }
1420
1421 /** Navigation **/
1422
1423 .label-toggle {
1424     cursor: pointer;
1425 }
1426
1427 header nav {
1428     text-align: right;
1429 }
1430
1431 /* Hide menu toggle checkboxes */
1432 input.menu-toggle {
1433     visibility: hidden;
1434     position: absolute;
1435     top: 0;
1436     left: 0;
1437 }
1438
1439 footer nav {
1440     padding: 3rem 0;
1441 }
1442
1443 header nav li {
1444     display: inline-block;
1445     padding: 2.5rem 0 1.5rem 3rem;
1446 }
1447
1448 footer nav li {
1449     display: inline-block;
1450     position: relative;
1451     padding: 0 0 1.5rem 3rem;
1452 }
1453
1454 footer nav li:first-child {
1455     padding-left: 0;
1456 }
1457
1458 header nav a,
1459 footer nav a {
1460     position: relative;
1461     display: inline-block;
1462     text-decoration: none;
1463     color: #333;
1464     cursor: pointer;
1465 }
1466
1467 header nav a:hover,
1468 footer nav a:hover {
1469     color: #08c;
1470     text-decoration: none;
1471 }
1472
1473 header .menu-item-has-children .label-toggle::after {
1474     background: url('images/menu-down.svg') no-repeat;
1475     background-size: 1.2rem;
1476     display: inline-block;
1477     padding-right: 1.2rem;
1478     padding-top: 0.8rem;
1479     margin-left: 0.5rem;
1480     margin-top: -0.1rem;
1481     content: '';
1482
1483     -webkit-transition: transform 0.3s ease-out;
1484     -moz-transition: transform 0.3s ease-out;
1485     transition: transform 0.3s ease-out;
1486 }
1487
1488 header .menu-item { /* add bottom dimension to main menu items */
1489     padding-bottom: 3rem;
1490 }
1491
1492 .sub-menu-layer {
1493     text-align: center;
1494     padding: 3rem;
1495     box-sizing: border-box;
1496
1497     width: 21rem;
1498     margin-left: -11rem;
1499     margin-top: -99rem;
1500
1501     position: absolute;
1502     top: 8rem;
1503     transform: translateY(-1rem);
1504
1505     background: rgba(255,255,255,0.95);
1506     box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.10);
1507     border: 1px solid #e7e7e7;
1508     border-radius: 5px;
1509
1510     -webkit-transition: opacity 0.6s, transform 0.6s;
1511     -moz-transition: opacity 0.6s, transform 0.6s;
1512     transition: opacity 0.6s, transform 0.6s;
1513     opacity: 0;
1514
1515 }
1516
1517 .sub-menu-layer:after, .sub-menu-layer:before {
1518     bottom: 100%;
1519     left: 71%;
1520     border: solid transparent;
1521     content: " ";
1522     height: 0;
1523     width: 0;
1524     position: absolute;
1525     pointer-events: none;
1526
1527 }
1528
1529 .sub-menu-layer:after {
1530     border-bottom-color: rgba(255,255,255,0.9);
1531     border-width: 10px;
1532     margin-left: -10px;
1533 }
1534
1535 .sub-menu-layer:before {
1536     border-bottom-color: #e7e7e7;
1537     border-width: 11px;
1538     margin-left: -11px;
1539 }
1540
1541 .sub-menu-layer .menu-item {
1542     padding: 1.5rem 0 0 0;
1543     width: 100%;
1544 }
1545
1546 .sub-menu-layer .menu-item:first-child {
1547     padding: 0;
1548 }
1549
1550 .menu > .menu-item > a:focus ~ .sub-menu,
1551 .menu > .menu-item.open-menu > .sub-menu,
1552 .menu > .menu-item:hover > .sub-menu,
1553 .menu > .menu-item > .menu-toggle:checked + .sub-menu {
1554     display: block;
1555     box-sizing: border-box;
1556     z-index: 1;
1557     opacity: 1;
1558     transform: translateY(0);
1559     margin-top: 0;
1560 }
1561
1562 /** Timeline blog content **/
1563
1564 .timeline {
1565     position: relative;
1566     padding: 0 5rem;
1567     margin: 0;
1568 }
1569
1570 .timeline:after {
1571     content: "";
1572     display: table;
1573     clear: both;
1574 }
1575
1576 .timeline * {
1577     box-sizing: border-box;
1578 }
1579
1580 .timeline:before {
1581     content: "";
1582     position: absolute;
1583     height: 100%;
1584     width: 0.5rem;
1585     background: #e9eeef;
1586     left: -moz-calc(50% - 0.25rem);
1587     left: -o-calc(50% - 0.25rem);
1588     left: -webkit-calc(50% - 0.25rem);
1589     left: calc(50% - 0.25rem);
1590 }
1591
1592 .timeline > li {
1593     list-style-type: none;
1594     text-align: right;
1595 }
1596
1597 .timeline > li:before {
1598     position: absolute;
1599
1600     display: block;
1601     content: "";
1602     width: 3rem;
1603     height: 3rem;
1604
1605     right: -moz-calc(50% - 1.5rem);
1606     right: -o-calc(50% - 1.5rem);
1607     right: -webkit-calc(50% - 1.5rem);
1608     right: calc(50% - 1.5rem);
1609
1610     border-radius: 3em;
1611
1612     background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 51, color-stop(50%, white), color-stop(51%, #e9eeef));
1613     background-image: -webkit-radial-gradient(white 50%, #e9eeef 51%);
1614     background-image: -moz-radial-gradient(white 50%, #e9eeef 51%);
1615     background-image: -o-radial-gradient(white 50%, #e9eeef 51%);
1616     background-image: radial-gradient(white 50%, #e9eeef 51%);
1617 }
1618
1619 .timeline .content {
1620     position: relative;
1621     color: #323232;
1622     background: white;
1623     border: 1px solid #e9eeef;
1624     border-radius: 3px;
1625     margin-bottom: 6rem;
1626     padding: 0 3rem;
1627     text-align: center;
1628 }
1629
1630 .timeline figure {
1631     text-align: center;
1632     margin-bottom: 1rem;
1633 }
1634
1635 .timeline .time {
1636     color: white;
1637     background: #08c;
1638     display: inline-block;
1639     position: relative;
1640     font-weight: bold;
1641     top: -0.5rem;
1642     padding-top: 0.5rem;
1643     padding-bottom: 0.5rem;
1644     padding-left: 10rem;
1645     padding-right: 0.5rem;
1646     left: -moz-calc(-50% - 4.25rem);
1647     left: -o-calc(-50% - 4.25rem);
1648     left: -webkit-calc(-50% - 4.25rem);
1649     left: calc(-50% - 4.25rem);
1650     border-right: 1px solid #08c;
1651     border-left: 1px solid #08c;
1652     border-radius: 2px;
1653     white-space: nowrap;
1654     min-width: 300px;
1655 }
1656
1657 .timeline h2, .timeline h3 {
1658     text-align: center;
1659 }
1660
1661 .timeline .time::before {
1662     content: "";
1663     width: 0;
1664     height: 0;
1665     border-width: 1em;
1666     border-color: transparent;
1667     border-style: solid;
1668     border-left-color: #08c;
1669     position: absolute;
1670     right: -2em;
1671     top: 0;
1672 }
1673
1674 .timeline img {
1675     max-width: 90%;
1676 }
1677
1678 @media (min-width: 900px) {
1679     .timeline > li {
1680         width: 45%;
1681     }
1682
1683     .timeline > li.force-clear {
1684         clear: both !important;
1685     }
1686
1687     .timeline > li:nth-child(odd) {
1688         float: left;
1689         clear: left;
1690         text-align: right;
1691     }
1692
1693     .timeline > li:nth-child(even) {
1694         float: right;
1695         clear: right;
1696         text-align: left;
1697     }
1698
1699     .timeline > li:nth-child(2),
1700     .timeline > li.force-clear + li {
1701         margin-top: 10rem;
1702     }
1703
1704     .timeline li .time {
1705         left: auto;
1706     }
1707
1708     .timeline li:nth-child(odd) .time {
1709         padding-right: 0.5rem;
1710         padding-left: 10rem;
1711     }
1712
1713     .timeline li:nth-child(even) .time {
1714         padding-left: 0.5rem;
1715         padding-right: 10rem;
1716     }
1717
1718     .timeline li:nth-child(even) .time::before {
1719         border-left-color: transparent;
1720         border-right-color: #08c;
1721         right: auto;
1722         left: -2em;
1723     }
1724
1725     .timeline > li:nth-child(even):before {
1726         right: auto;
1727         left: -moz-calc(50% - 1.5rem);
1728         left: -o-calc(50% - 1.5rem);
1729         left: -webkit-calc(50% - 1.5rem);
1730         left: calc(50% - 1.5rem);
1731     }
1732 }
1733
1734 @media (max-width: 900px) {
1735     .timeline {
1736         padding: 0 3rem;
1737     }
1738
1739     .timeline:before {
1740         left: -moz-calc(15% - 0.25rem);
1741         left: -o-calc(15% - 0.25rem);
1742         left: -webkit-calc(15% - 0.25rem);
1743         left: calc(15% - 0.25rem);
1744     }
1745
1746     .timeline > li {
1747         text-align: left;
1748     }
1749
1750     .timeline > li:before {
1751         right: -moz-calc(85% - 1.5rem);
1752         right: -o-calc(85% - 1.5rem);
1753         right: -webkit-calc(85% - 1.5rem);
1754         right: calc(85% - 1.5rem);
1755     }
1756
1757     .timeline .content {
1758         padding: 0 2rem;
1759     }
1760
1761     .timeline .time {
1762         left: -moz-calc(15% + 2.25rem);
1763         left: -o-calc(15% + 2.25rem);
1764         left: -webkit-calc(15% + 2.25rem);
1765         left: calc(15% + 2.25rem);
1766
1767         text-align: left;
1768
1769         padding-left: 0.5rem;
1770         padding-right: 0.5rem;
1771
1772         min-width: 200px;
1773     }
1774
1775     .timeline li .time::before {
1776         border-left-color: transparent;
1777         border-right-color: #08c;
1778
1779         right: auto;
1780         left: -2em;
1781     }
1782 }
1783
1784 /** Screen Breakpoints **/
1785
1786 @media only screen and (max-width: 1180px) {
1787     .page-width {
1788         max-width: 1140px;
1789         padding-left: 2rem;
1790         padding-right: 2rem;
1791     }
1792
1793     article .byline {
1794         width: 60%;
1795         margin: 0 auto;
1796         float: none;
1797         text-align: center;
1798         margin-bottom: 3rem;
1799     }
1800
1801     article .byline p {
1802         display: inline;
1803     }
1804 }
1805
1806 @media only screen and (max-width: 1000px) {
1807     article.page h1 {
1808         width: 90%;
1809         margin-bottom: 3rem;
1810     }
1811
1812     article .byline {
1813         width: 60%;
1814         margin: 0 auto;
1815         float: none;
1816         text-align: center;
1817         margin-bottom: 3rem;
1818     }
1819
1820     article .byline p {
1821         display: inline;
1822     }
1823
1824     article .bodycopy {
1825         width: 90%;
1826     }
1827 }
1828
1829 @media only screen and (max-width: 920px) {
1830     .main-menu.label-toggle {
1831         display: inline-block;
1832         margin: 1.5rem 0 2.5rem;
1833         height: 3rem;
1834         width: 3rem;
1835         background: url('images/menu-down.svg') no-repeat 50%;
1836         cursor: pointer;
1837
1838         -webkit-transition: transform 0.3s ease-out;
1839         -moz-transition: transform 0.3s ease-out;
1840         transition: transform 0.3s ease-out;
1841     }
1842
1843     .menu-toggle:checked + .main-menu.label-toggle,
1844     header .menu-item > .menu-toggle:checked + a > .label-toggle::after {
1845         -webkit-transform: rotateX(-180deg);
1846         -moz-transform: rotateX(-180deg);
1847         transform: rotateX(-180deg);
1848         perspective: 600;
1849     }
1850
1851     header .menu {
1852         display: none;
1853         position: absolute;
1854         left: 0;
1855         margin-top: 1px;
1856         padding-top: 3rem;
1857         text-align: left;
1858         width: 100vw;
1859         overflow: hidden;
1860         box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
1861         backdrop-filter: blur(10px);
1862         -webkit-backdrop-filter: blur(10px);
1863         background: rgba(255,255,255,0.8);
1864     }
1865
1866     header .menu-toggle:checked ~ ul {
1867         display: block;
1868         opacity: 1;
1869     }
1870
1871     header .menu-main-menu-container >  ul > li {
1872         width: 100vw;
1873         position: relative;
1874         padding: 0 3rem 3rem;
1875         box-sizing: border-box;
1876         -webkit-transition: opacity 0.6s;
1877         -moz-transition: opacity 0.6s;
1878         transition: opacity 0.6s;
1879     }
1880
1881     header .menu > .menu-item > .sub-menu {
1882         box-shadow: none;
1883         border-bottom: 1px solid #e7e7e7;
1884     }
1885
1886     header .menu > .menu-item-has-children {
1887         margin-left: 0;
1888     }
1889
1890     header .sub-menu-layer {
1891         text-align: left;
1892         width: 100vw;
1893         left: 50%;
1894         margin-left: -50vw;
1895         border-radius: 0;
1896         border-left: none;
1897         border-right: none;
1898         opacity: 0;
1899         transform: translateY(0);
1900         -webkit-transition: opacity 0.6s;
1901         -moz-transition: opacity 0.6s;
1902         transition: opacity 0.6s;
1903     }
1904
1905     header .sub-menu-layer:after, .sub-menu-layer:before {
1906         bottom: 100%;
1907         left: 71%;
1908         border: solid transparent;
1909         content: " ";
1910         height: 0;
1911         width: 0;
1912         position: absolute;
1913         pointer-events: none;
1914     }
1915
1916     header .sub-menu-layer:after {
1917         border: none;
1918         margin-left: -10px;
1919     }
1920
1921     header .sub-menu-layer:before {
1922         border: none;
1923         margin-left: -11px;
1924     }
1925
1926     header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
1927         position: relative;
1928         top: 1.5rem;
1929         margin-top: 0;
1930     }
1931
1932     footer nav li {
1933         padding: 0 3rem 3rem 0;
1934     }
1935 }
1936
1937 @media only screen and (max-width: 690px) {
1938     .featured-tile {
1939         padding: 0;
1940     }
1941
1942     .tile.spacer {
1943         height: 0;
1944         min-height: 0;
1945         margin-bottom: 0;
1946     }
1947
1948     .page-width {
1949         max-width: 100vw;
1950         padding-left: 1rem;
1951         padding-right: 1rem;
1952         overflow: hidden;
1953         box-sizing: border-box;
1954     }
1955
1956     .tile {
1957         min-height: 320px;
1958     }
1959
1960     .third-tile,
1961     .two-thirds-tile {
1962         width: -webkit-calc(100% - 1px);
1963         width: -moz-calc(100% - 1px);
1964         width: calc(100% - 1px);
1965     }
1966
1967     .icon-tile .icon {
1968         margin-top: -40%;
1969     }
1970
1971     .with-toc pre:nth-child(-n+8),
1972     article pre {
1973         position: relative;
1974         width: 100vw;
1975         left: 50%;
1976         transform: translate(-50%);
1977         margin-left: 0;
1978         border-radius: 0;
1979         border-left: none;
1980         border-right: none;
1981     }
1982
1983     .table-of-contents { /* hug the edge */
1984         right: 0;
1985     }
1986
1987     .pagination .prev-post,
1988     .pagination .next-post {
1989         min-width: auto;
1990         width: 90%;
1991         text-align: right;
1992     }
1993
1994     .pagination .prev-post {
1995         margin-bottom: 1rem;
1996         text-align: left;
1997     }
1998
1999     article .scrollable {
2000         overflow: auto;
2001         -webkit-overflow-scrolling: touch;
2002         position: relative;
2003         width: 100vw;
2004         left: 50%;
2005         transform: translate(-50%);
2006         margin: 3rem 0;
2007         border: 1px solid #cccccc;
2008         border-left: none;
2009         border-right: none;
2010     }
2011
2012     article video.alignleft,
2013     article video.alignright {
2014         min-width: 30rem;
2015     }
2016
2017     .scrollable .scrollable-padding {
2018         display: inline-block;
2019         padding: 0 3rem;
2020     }
2021 }
2022
2023 @media only screen and (max-width: 600px) {
2024     header {
2025         padding-top: 1rem;
2026     }
2027
2028     .site-logo {
2029         font-size: 4rem;
2030         padding-left: 6rem;
2031     }
2032
2033     .site-logo .tagline {
2034         font-size: 1.6rem;
2035         line-height: 1;
2036     }
2037
2038     header nav .main-menu.label-toggle {
2039         margin-top: 2rem;
2040         margin-bottom: 2rem;
2041     }
2042
2043     .feature-filters {
2044         height: 6rem;
2045         overflow: hidden;
2046     }
2047
2048     .feature-filters.opened {
2049         height: auto;
2050     }
2051
2052     .feature-filters:after {
2053         display: inline-block;
2054         content: "";
2055         background: url('images/menu-down.svg') no-repeat 50%;
2056         background-size: 2rem;
2057         width: 2rem;
2058         height: 2rem;
2059         position: absolute;
2060         right: 1rem;
2061         top: 2rem;
2062         -webkit-transition: transform 0.3s ease-out;
2063         -moz-transition: transform 0.3s ease-out;
2064         transition: transform 0.3s ease-out;
2065         perspective: 600;
2066     }
2067
2068     .feature-filters.opened:after {
2069         -webkit-transform: rotateX(-180deg);
2070         -moz-transform: rotateX(-180deg);
2071         transform: rotateX(-180deg);
2072     }
2073
2074     #wpadminbar {
2075         position: absolute;
2076     }
2077
2078     .table-of-contents {
2079         height: 9rem;
2080         overflow: hidden;
2081         margin-right: -10%;
2082     }
2083
2084     .menu-toggle:checked ~ .table-of-contents {
2085         height: auto;
2086     }
2087
2088     .table-of-contents label {
2089         display: block;
2090     }
2091
2092     .table-of-contents label:after {
2093         display: inline-block;
2094         content: "";
2095         background: url('images/menu-down.svg') no-repeat 50%;
2096         background-size: 2rem;
2097         width: 2rem;
2098         height: 2rem;
2099         position: absolute;
2100         right: 3rem;
2101         top: 3.5rem;
2102         -webkit-transition: transform 0.3s ease-out;
2103         -moz-transition: transform 0.3s ease-out;
2104         transition: transform 0.3s ease-out;
2105         perspective: 600;
2106     }
2107
2108     .menu-toggle:checked ~ .table-of-contents label:after {
2109         -webkit-transform: rotateX(-180deg);
2110         -moz-transform: rotateX(-180deg);
2111         transform: rotateX(-180deg);
2112     }
2113
2114     .table-of-contents h6 {
2115         margin-bottom: 3rem;
2116     }
2117
2118     .with-toc pre:nth-child(-n+6),
2119     #post-4132 pre:nth-child(-n+8) {
2120         width: 100vw;
2121     }
2122
2123     article video.alignleft,
2124     article video.alignright {
2125         max-width: 100%;
2126         min-width: none;
2127         width: 100%;
2128     }
2129
2130     article .alignleft:first-child,
2131     article .alignright:first-child {
2132         margin-bottom: 3rem;
2133     }
2134
2135 }
2136
2137 @media only screen and (max-width: 415px) {
2138     .table-of-contents {
2139         /* Go one-column */
2140         width: 100vw;
2141         left: 50%;
2142         position: relative;
2143         transform: translate(-50%);
2144         float: none;
2145         margin: 0 0 3rem 0;
2146     }
2147 }
2148
2149 @media only screen and (max-height: 415px) {
2150     .hero .logo,
2151     .hero .tagline,
2152     .hero .particle {
2153         display: none;
2154     }
2155
2156     .home .site-logo {
2157         opacity: 1;
2158         margin-top: 0;
2159     }
2160
2161     .home .hero {
2162         margin: 7rem 0 0;
2163     }
2164
2165     .home.admin-bar .hero {
2166         margin-top: 12rem;
2167     }
2168
2169     header,
2170     .home header {
2171         padding-top: 1rem;
2172     }
2173
2174     .home header {
2175         border-bottom: 1px solid #e7e7e7;
2176         background: rgba(255,255,255,0.9);
2177     }
2178
2179     @supports ( -webkit-backdrop-filter: blur(10px) ) {
2180         .home header {
2181             backdrop-filter: blur(10px);
2182             -webkit-backdrop-filter: blur(10px);
2183             background: rgba(255,255,255,0.8);
2184         }
2185     }
2186
2187     .tile {
2188         min-height: 200px;
2189         max-height: 400px;
2190         overflow: hidden;
2191     }
2192
2193     .tile .background-image {
2194         padding-bottom: 33%;
2195     }
2196
2197     .tile.category-performance .background-image {
2198         background-position-y: 21.5%;
2199     }
2200
2201     .tile.category-web-inspector .background-image {
2202         background-position-y: 12.5%;
2203     }
2204
2205     .table-of-contents {
2206         height: 9rem;
2207         overflow: hidden;
2208         margin-right: -10%;
2209     }
2210
2211     .menu-toggle:checked ~ .table-of-contents {
2212         height: auto;
2213     }
2214
2215     .table-of-contents label {
2216         display: block;
2217     }
2218
2219     .table-of-contents label:after {
2220         display: inline-block;
2221         content: "";
2222         background: url('images/menu-down.svg') no-repeat 50%;
2223         background-size: 2rem;
2224         width: 2rem;
2225         height: 2rem;
2226         position: absolute;
2227         right: 3rem;
2228         top: 3.5rem;
2229         -webkit-transition: transform 0.3s ease-out;
2230         -moz-transition: transform 0.3s ease-out;
2231         transition: transform 0.3s ease-out;
2232         perspective: 600;
2233     }
2234
2235     .menu-toggle:checked ~ .table-of-contents label:after {
2236         -webkit-transform: rotateX(-180deg);
2237         -moz-transform: rotateX(-180deg);
2238         transform: rotateX(-180deg);
2239     }
2240
2241     .table-of-contents h6 {
2242         margin-bottom: 3rem;
2243     }
2244
2245     .with-toc pre:nth-child(-n+6),
2246     #post-4132 pre:nth-child(-n+8) {
2247         width: 100vw;
2248     }
2249 }
2250
2251 @media only screen and (max-width: 320px) {
2252     .home .hero {
2253         position: absolute;
2254     }
2255 }