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