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