Fix some responsive issues on smaller screens.
[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     margin: 0;
1455 }
1456
1457 .timeline:after {
1458     content: "";
1459     display: table;
1460     clear: both;
1461 }
1462
1463 .timeline * {
1464     box-sizing: border-box;
1465 }
1466
1467 .timeline:before {
1468     content: "";
1469     position: absolute;
1470     height: 100%;
1471     width: 0.5rem;
1472     background: #e9eeef;
1473     left: -moz-calc(50% - 0.25rem);
1474     left: -o-calc(50% - 0.25rem);
1475     left: -webkit-calc(50% - 0.25rem);
1476     left: calc(50% - 0.25rem);
1477 }
1478
1479 .timeline > li {
1480     list-style-type: none;
1481     text-align: right;
1482 }
1483
1484 .timeline > li:before {
1485     position: absolute;
1486
1487     display: block;
1488     content: "";
1489     width: 3rem;
1490     height: 3rem;
1491
1492     right: -moz-calc(50% - 1.5rem);
1493     right: -o-calc(50% - 1.5rem);
1494     right: -webkit-calc(50% - 1.5rem);
1495     right: calc(50% - 1.5rem);
1496
1497     border-radius: 3em;
1498
1499     background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 51, color-stop(50%, white), color-stop(51%, #e9eeef));
1500     background-image: -webkit-radial-gradient(white 50%, #e9eeef 51%);
1501     background-image: -moz-radial-gradient(white 50%, #e9eeef 51%);
1502     background-image: -o-radial-gradient(white 50%, #e9eeef 51%);
1503     background-image: radial-gradient(white 50%, #e9eeef 51%);
1504 }
1505
1506 .timeline .content {
1507     position: relative;
1508     color: #323232;
1509     background: white;
1510     border: 1px solid #e9eeef;
1511     border-radius: 3px;
1512     margin-bottom: 6rem;
1513     padding: 0 3rem;
1514     text-align: center;
1515 }
1516
1517 .timeline figure {
1518     text-align: center;
1519     margin-bottom: 1rem;
1520 }
1521
1522 .timeline .time {
1523     color: white;
1524     background: #08c;
1525     display: inline-block;
1526     position: relative;
1527     font-weight: bold;
1528     top: -0.5rem;
1529     padding-top: 0.5rem;
1530     padding-bottom: 0.5rem;
1531     padding-left: 10rem;
1532     padding-right: 0.5rem;
1533     left: -moz-calc(-50% - 4.25rem);
1534     left: -o-calc(-50% - 4.25rem);
1535     left: -webkit-calc(-50% - 4.25rem);
1536     left: calc(-50% - 4.25rem);
1537     border-right: 1px solid #08c;
1538     border-left: 1px solid #08c;
1539     border-radius: 2px;
1540     white-space: nowrap;
1541     min-width: 300px;
1542 }
1543
1544 .timeline h2, .timeline h3 {
1545     text-align: center;
1546 }
1547
1548 .timeline .time::before {
1549     content: "";
1550     width: 0;
1551     height: 0;
1552     border-width: 1em;
1553     border-color: transparent;
1554     border-style: solid;
1555     border-left-color: #08c;
1556     position: absolute;
1557     right: -2em;
1558     top: 0;
1559 }
1560
1561 .timeline img {
1562     max-width: 90%;
1563 }
1564
1565 @media (min-width: 900px) {
1566     .timeline > li {
1567         width: 45%;
1568     }
1569
1570     .timeline > li.force-clear {
1571         clear: both !important;
1572     }
1573
1574     .timeline > li:nth-child(odd) {
1575         float: left;
1576         clear: left;
1577         text-align: right;
1578     }
1579
1580     .timeline > li:nth-child(even) {
1581         float: right;
1582         clear: right;
1583         text-align: left;
1584     }
1585
1586     .timeline > li:nth-child(2),
1587     .timeline > li.force-clear + li {
1588         margin-top: 10rem;
1589     }
1590
1591     .timeline li .time {
1592         left: auto;
1593     }
1594
1595     .timeline li:nth-child(odd) .time {
1596         padding-right: 0.5rem;
1597         padding-left: 10rem;
1598     }
1599
1600     .timeline li:nth-child(even) .time {
1601         padding-left: 0.5rem;
1602         padding-right: 10rem;
1603     }
1604
1605     .timeline li:nth-child(even) .time::before {
1606         border-left-color: transparent;
1607         border-right-color: #08c;
1608         right: auto;
1609         left: -2em;
1610     }
1611
1612     .timeline > li:nth-child(even):before {
1613         right: auto;
1614         left: -moz-calc(50% - 1.5rem);
1615         left: -o-calc(50% - 1.5rem);
1616         left: -webkit-calc(50% - 1.5rem);
1617         left: calc(50% - 1.5rem);
1618     }
1619 }
1620
1621 @media (max-width: 900px) {
1622     .timeline {
1623         padding: 0 3rem;
1624     }
1625
1626     .timeline:before {
1627         left: -moz-calc(15% - 0.25rem);
1628         left: -o-calc(15% - 0.25rem);
1629         left: -webkit-calc(15% - 0.25rem);
1630         left: calc(15% - 0.25rem);
1631     }
1632
1633     .timeline > li {
1634         text-align: left;
1635     }
1636
1637     .timeline > li:before {
1638         right: -moz-calc(85% - 1.5rem);
1639         right: -o-calc(85% - 1.5rem);
1640         right: -webkit-calc(85% - 1.5rem);
1641         right: calc(85% - 1.5rem);
1642     }
1643
1644     .timeline .content {
1645         padding: 0 2rem;
1646     }
1647
1648     .timeline .time {
1649         left: -moz-calc(15% + 2.25rem);
1650         left: -o-calc(15% + 2.25rem);
1651         left: -webkit-calc(15% + 2.25rem);
1652         left: calc(15% + 2.25rem);
1653
1654         text-align: left;
1655
1656         padding-left: 0.5rem;
1657         padding-right: 0.5rem;
1658
1659         min-width: 200px;
1660     }
1661
1662     .timeline li .time::before {
1663         border-left-color: transparent;
1664         border-right-color: #08c;
1665
1666         right: auto;
1667         left: -2em;
1668     }
1669 }
1670
1671 /** Screen Breakpoints **/
1672
1673 @media only screen and (max-width: 1180px) {
1674     
1675     .page-width {
1676         max-width: 1140px;
1677         padding-left: 2rem;
1678         padding-right: 2rem;
1679     }
1680
1681     article .byline {
1682         width: 60%;
1683         margin: 0 auto;
1684         float: none;
1685         text-align: center;
1686         margin-bottom: 3rem;
1687     }
1688
1689     article .byline p {
1690         display: inline;
1691     }
1692
1693 }
1694
1695 @media only screen and (max-width: 1000px) {
1696
1697     article.page h1 {
1698         width: 90%;
1699         margin-bottom: 3rem;
1700     }
1701     
1702     article .byline {
1703         width: 60%;
1704         margin: 0 auto;
1705         float: none;
1706         text-align: center;
1707         margin-bottom: 3rem;
1708     }
1709
1710     article .byline p {
1711         display: inline;
1712     }
1713
1714     article .bodycopy {
1715         width: 90%;
1716     }
1717
1718 }
1719
1720 @media only screen and (max-width: 920px) {
1721     
1722     .main-menu.label-toggle {
1723         display: inline-block;
1724         margin: 1.5rem 0 2.5rem;
1725         height: 3rem;
1726         width: 3rem;
1727         background: url('images/menu-down.svg') no-repeat 50%;
1728         cursor: pointer;
1729         
1730         -webkit-transition: transform 0.3s ease-out;
1731         -moz-transition: transform 0.3s ease-out;
1732         transition: transform 0.3s ease-out;
1733     }
1734     
1735     .menu-toggle:checked + .main-menu.label-toggle,
1736     header .menu-item > .menu-toggle:checked + a > .label-toggle::after {
1737         -webkit-transform: rotateX(-180deg);
1738         -moz-transform: rotateX(-180deg);
1739         transform: rotateX(-180deg);
1740         perspective: 600;
1741     }
1742
1743     header .menu {
1744         display: none;
1745         position: absolute;
1746         left: 0;
1747         margin-top: 1px;
1748         padding-top: 3rem;
1749         text-align: left;
1750         width: 100vw;
1751         overflow: hidden;
1752         box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
1753         backdrop-filter: blur(10px);
1754         -webkit-backdrop-filter: blur(10px);
1755         background: rgba(255,255,255,0.8);
1756     }
1757
1758     header .menu-toggle:checked ~ ul {
1759         display: block;
1760         opacity: 1;
1761     }
1762
1763     header .menu-main-menu-container >  ul > li {
1764         width: 100vw;
1765         position: relative;
1766         padding: 0 3rem 3rem;
1767         box-sizing: border-box;
1768         -webkit-transition: opacity 0.6s;
1769         -moz-transition: opacity 0.6s;
1770         transition: opacity 0.6s;
1771     }
1772
1773     header .menu > .menu-item > .sub-menu {
1774         box-shadow: none;
1775         border-bottom: 1px solid #e7e7e7;
1776     }
1777
1778     header .menu > .menu-item-has-children {
1779         margin-left: 0;
1780     }
1781
1782     header .sub-menu-layer {
1783         text-align: left;
1784         width: 100vw;
1785         left: 50%;
1786         margin-left: -50vw;
1787         border-radius: 0;
1788         border-left: none;
1789         border-right: none;
1790         opacity: 0;
1791         -webkit-transition: opacity 0.6s;
1792         -moz-transition: opacity 0.6s;
1793         transition: opacity 0.6s;
1794     }
1795     
1796     header .sub-menu-layer:after, .sub-menu-layer:before {
1797         bottom: 100%;
1798         left: 71%;
1799         border: solid transparent;
1800         content: " ";
1801         height: 0;
1802         width: 0;
1803         position: absolute;
1804         pointer-events: none;
1805     }
1806
1807     header .sub-menu-layer:after {
1808         border: none;
1809         margin-left: -10px;
1810     }
1811     
1812     header .sub-menu-layer:before {
1813         border: none;
1814         margin-left: -11px;
1815     }
1816     
1817     header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
1818         position: relative;
1819         top: 1.5rem;
1820         margin-top: 0;
1821     }
1822         
1823     footer nav li {
1824         padding: 0 3rem 3rem 0;
1825     }
1826
1827 }
1828
1829 @media only screen and (max-width: 690px) {
1830     
1831     .featured-tile {
1832         padding: 0;
1833     }
1834
1835     .tile.spacer {
1836         height: 0;
1837         min-height: 0;
1838         margin-bottom: 0;
1839     }
1840
1841     .page-width {
1842         max-width: 100vw;
1843         padding-left: 1rem;
1844         padding-right: 1rem;
1845         overflow: hidden;
1846         box-sizing: border-box;
1847     }
1848
1849     .tile {
1850         min-height: auto;
1851     }
1852
1853     .third-tile,
1854     .two-thirds-tile {
1855         width: -webkit-calc(100% - 1px);
1856         width: -moz-calc(100% - 1px);
1857         width: calc(100% - 1px);
1858     }
1859
1860     .icon-tile .icon {
1861         margin-top: -40%;
1862     }
1863
1864     .with-toc pre:nth-child(-n+8),
1865     article pre {
1866         position: relative;
1867         width: 100vw;
1868         left: 50%;
1869         transform: translate(-50%);
1870         margin-left: 0;
1871         border-radius: 0;
1872         border-left: none;
1873         border-right: none;
1874     }
1875    
1876     .table-of-contents { /* hug the edge */
1877         right: 0;
1878     }
1879     
1880     .pagination .prev-post,
1881     .pagination .next-post {
1882         min-width: auto;
1883         width: 90%;
1884         text-align: right;
1885     }
1886     
1887     .pagination .prev-post {
1888         margin-bottom: 1rem;
1889         text-align: left;
1890     }
1891     
1892     article .scrollable {
1893         overflow: auto;
1894         -webkit-overflow-scrolling: touch;
1895         position: relative;
1896         width: 100vw;
1897         left: 50%;
1898         transform: translate(-50%);
1899         margin: 3rem 0;
1900         border: 1px solid #cccccc;
1901         border-left: none;
1902         border-right: none;
1903     }
1904
1905     .scrollable .scrollable-padding {
1906         display: inline-block;
1907         padding: 0 3rem;
1908     }
1909
1910 }
1911
1912 @media only screen and (max-width: 600px) {
1913         
1914     header {
1915         padding-top: 1rem;
1916     }
1917         
1918     .site-logo {
1919         font-size: 4rem;
1920         padding-left: 6rem;
1921     }
1922     
1923     .site-logo .tagline {
1924         font-size: 1.6rem;
1925         line-height: 1;
1926     }
1927
1928     header nav .main-menu.label-toggle {
1929         margin-top: 2rem;
1930         margin-bottom: 2rem;
1931     }
1932
1933     .feature-filters {
1934         height: 6rem;
1935         overflow: hidden;
1936     }
1937
1938     .feature-filters.opened {
1939         height: auto;
1940     }
1941
1942     .feature-filters:after {
1943         display: inline-block;
1944         content: "";
1945         background: url('images/menu-down.svg') no-repeat 50%;
1946         background-size: 2rem;
1947         width: 2rem;
1948         height: 2rem;
1949         position: absolute;
1950         right: 1rem;
1951         top: 2rem;
1952         -webkit-transition: transform 0.3s ease-out;
1953         -moz-transition: transform 0.3s ease-out;
1954         transition: transform 0.3s ease-out;
1955         perspective: 600;
1956     }
1957
1958     .feature-filters.opened:after {
1959         -webkit-transform: rotateX(-180deg);
1960         -moz-transform: rotateX(-180deg);
1961         transform: rotateX(-180deg);
1962     }
1963     
1964     #wpadminbar {
1965         position: absolute;
1966     }
1967     
1968     .table-of-contents {
1969         height: 9rem;
1970         overflow: hidden;
1971         margin-right: -10%;
1972     }
1973     
1974     .menu-toggle:checked ~ .table-of-contents {
1975         height: auto;
1976     }
1977     
1978     .table-of-contents label {
1979         display: block;
1980     }
1981     
1982     .table-of-contents label:after {
1983         display: inline-block;
1984         content: "";
1985         background: url('images/menu-down.svg') no-repeat 50%;
1986         background-size: 2rem;
1987         width: 2rem;
1988         height: 2rem;
1989         position: absolute;
1990         right: 3rem;
1991         top: 3.5rem;
1992         -webkit-transition: transform 0.3s ease-out;
1993         -moz-transition: transform 0.3s ease-out;
1994         transition: transform 0.3s ease-out;
1995         perspective: 600;
1996     }
1997     
1998     .menu-toggle:checked ~ .table-of-contents label:after {
1999         -webkit-transform: rotateX(-180deg);
2000         -moz-transform: rotateX(-180deg);
2001         transform: rotateX(-180deg);
2002     }
2003     
2004     .table-of-contents h6 {
2005         margin-bottom: 3rem;
2006     }
2007     
2008     .with-toc pre:nth-child(-n+6),
2009     #post-4132 pre:nth-child(-n+8) {
2010         width: 100vw;
2011     }
2012         
2013 }
2014
2015 @media only screen and (max-width: 415px) {
2016     
2017     .table-of-contents { 
2018         /* Go one-column */
2019         width: 100vw;
2020         left: 50%;
2021         position: relative;
2022         transform: translate(-50%);
2023         float: none;
2024         margin: 0 0 3rem 0;
2025     }
2026     
2027 }
2028
2029 @media only screen and (max-height: 415px) {
2030     
2031     .hero .logo,
2032     .hero .tagline,
2033     .hero .particle {
2034         display: none;
2035     }
2036     
2037     .home .site-logo {
2038         opacity: 1;
2039         margin-top: 0;
2040     }
2041     
2042     .home .hero {
2043         margin: 7rem 0 0;
2044     }
2045     
2046     .home.admin-bar .hero {
2047         margin-top: 12rem;
2048     }
2049     
2050     header,
2051     .home header {
2052         padding-top: 1rem;
2053     }
2054     
2055     .home header {
2056         border-bottom: 1px solid #e7e7e7;
2057         background: rgba(255,255,255,0.9);
2058     }
2059
2060     @supports ( -webkit-backdrop-filter: blur(10px) ) {
2061         .home header {
2062             backdrop-filter: blur(10px);
2063             -webkit-backdrop-filter: blur(10px);
2064             background: rgba(255,255,255,0.8);
2065         }
2066     }
2067     
2068     .tile {
2069         min-height: 200px;
2070         max-height: 400px;
2071         overflow: hidden;
2072     }
2073     
2074     .tile .background-image {
2075         padding-bottom: 33%;
2076     }
2077     
2078     .tile.category-performance .background-image {
2079         background-position-y: 21.5%;
2080     }
2081
2082     .tile.category-web-inspector .background-image {
2083         background-position-y: 12.5%;
2084     }
2085     
2086     .table-of-contents {
2087         height: 9rem;
2088         overflow: hidden;
2089         margin-right: -10%;
2090     }
2091     
2092     .menu-toggle:checked ~ .table-of-contents {
2093         height: auto;
2094     }
2095     
2096     .table-of-contents label {
2097         display: block;
2098     }
2099     
2100     .table-of-contents label:after {
2101         display: inline-block;
2102         content: "";
2103         background: url('images/menu-down.svg') no-repeat 50%;
2104         background-size: 2rem;
2105         width: 2rem;
2106         height: 2rem;
2107         position: absolute;
2108         right: 3rem;
2109         top: 3.5rem;
2110         -webkit-transition: transform 0.3s ease-out;
2111         -moz-transition: transform 0.3s ease-out;
2112         transition: transform 0.3s ease-out;
2113         perspective: 600;
2114     }
2115     
2116     .menu-toggle:checked ~ .table-of-contents label:after {
2117         -webkit-transform: rotateX(-180deg);
2118         -moz-transform: rotateX(-180deg);
2119         transform: rotateX(-180deg);
2120     }
2121     
2122     .table-of-contents h6 {
2123         margin-bottom: 3rem;
2124     }
2125     
2126     .with-toc pre:nth-child(-n+6),
2127     #post-4132 pre:nth-child(-n+8) {
2128         width: 100vw;
2129     }
2130     
2131 }
2132
2133 @media only screen and (max-width: 320px) {
2134
2135     .home .hero {
2136         position: absolute;
2137     }
2138     
2139 }