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