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 }