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