Websites/webkit.org/wp-content/themes/webkit/style.css

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