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 /** Screen Breakpoints **/
1450
1451 @media only screen and (max-width: 1180px) {
1452
1453     .page-width {
1454         max-width: 1140px;
1455         padding-left: 2rem;
1456         padding-right: 2rem;
1457     }
1458
1459     article .byline {
1460         width: 60%;
1461         margin: 0 auto;
1462         float: none;
1463         text-align: center;
1464         margin-bottom: 3rem;
1465     }
1466
1467     article .byline p {
1468         display: inline;
1469     }
1470
1471 }
1472
1473 @media only screen and (max-width: 1000px) {
1474
1475     article.page h1 {
1476         width: 90%;
1477         margin-bottom: 3rem;
1478     }
1479
1480     article .byline {
1481         width: 60%;
1482         margin: 0 auto;
1483         float: none;
1484         text-align: center;
1485         margin-bottom: 3rem;
1486     }
1487
1488     article .byline p {
1489         display: inline;
1490     }
1491
1492     article .bodycopy {
1493         width: 90%;
1494     }
1495
1496 }
1497
1498 @media only screen and (max-width: 920px) {
1499
1500     .main-menu.label-toggle {
1501         display: inline-block;
1502         margin: 1.5rem 0 2.5rem;
1503         height: 3rem;
1504         width: 3rem;
1505         background: url('images/menu-down.svg') no-repeat 50%;
1506         cursor: pointer;
1507
1508         -webkit-transition: transform 0.3s ease-out;
1509         -moz-transition: transform 0.3s ease-out;
1510         transition: transform 0.3s ease-out;
1511     }
1512
1513     .menu-toggle:checked + .main-menu.label-toggle,
1514     header .menu-item > .menu-toggle:checked + a > .label-toggle::after {
1515         -webkit-transform: rotateX(-180deg);
1516         -moz-transform: rotateX(-180deg);
1517         transform: rotateX(-180deg);
1518         perspective: 600;
1519     }
1520
1521     header .menu {
1522         display: none;
1523         position: absolute;
1524         left: 0;
1525         margin-top: 1px;
1526         padding-top: 3rem;
1527         text-align: left;
1528         width: 100vw;
1529         overflow: hidden;
1530         box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
1531         backdrop-filter: blur(10px);
1532         -webkit-backdrop-filter: blur(10px);
1533         background: rgba(255,255,255,0.8);
1534     }
1535
1536     header .menu-toggle:checked ~ ul {
1537         display: block;
1538         opacity: 1;
1539     }
1540
1541     header .menu-main-menu-container >  ul > li {
1542         width: 100vw;
1543         position: relative;
1544         padding: 0 3rem 3rem;
1545         box-sizing: border-box;
1546         -webkit-transition: opacity 0.6s;
1547         -moz-transition: opacity 0.6s;
1548         transition: opacity 0.6s;
1549     }
1550
1551     header .menu > .menu-item > .sub-menu {
1552         box-shadow: none;
1553         border-bottom: 1px solid #e7e7e7;
1554     }
1555
1556     header .menu > .menu-item-has-children {
1557         margin-left: 0;
1558     }
1559
1560     header .sub-menu-layer {
1561         text-align: left;
1562         width: 100vw;
1563         left: 50%;
1564         margin-left: -50vw;
1565         border-radius: 0;
1566         border-left: none;
1567         border-right: none;
1568         opacity: 0;
1569         -webkit-transition: opacity 0.6s;
1570         -moz-transition: opacity 0.6s;
1571         transition: opacity 0.6s;
1572     }
1573
1574     header .sub-menu-layer:after, .sub-menu-layer:before {
1575         bottom: 100%;
1576         left: 71%;
1577         border: solid transparent;
1578         content: " ";
1579         height: 0;
1580         width: 0;
1581         position: absolute;
1582         pointer-events: none;
1583     }
1584
1585     header .sub-menu-layer:after {
1586         border: none;
1587         margin-left: -10px;
1588     }
1589
1590     header .sub-menu-layer:before {
1591         border: none;
1592         margin-left: -11px;
1593     }
1594
1595     header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
1596         position: relative;
1597         top: 1.5rem;
1598         margin-top: 0;
1599     }
1600
1601     footer nav li {
1602         padding: 0 3rem 3rem 0;
1603     }
1604
1605 }
1606
1607 @media only screen and (max-width: 690px) {
1608
1609     .featured-tile {
1610         padding: 0;
1611     }
1612
1613     .tile.spacer {
1614         height: 0;
1615         min-height: 0;
1616         margin-bottom: 0;
1617     }
1618
1619     .page-width {
1620         max-width: 100vw;
1621         padding-left: 1rem;
1622         padding-right: 1rem;
1623         overflow: hidden;
1624         box-sizing: border-box;
1625     }
1626
1627     .tile {
1628         min-height: auto;
1629     }
1630
1631     .third-tile,
1632     .two-thirds-tile {
1633         width: -webkit-calc(100% - 1px);
1634         width: -moz-calc(100% - 1px);
1635         width: calc(100% - 1px);
1636     }
1637
1638     .icon-tile .icon {
1639         margin-top: -40%;
1640     }
1641
1642     .with-toc pre:nth-child(-n+8),
1643     article pre {
1644         position: relative;
1645         width: 100vw;
1646         left: 50%;
1647         transform: translate(-50%);
1648         margin-left: 0;
1649         border-radius: 0;
1650         border-left: none;
1651         border-right: none;
1652     }
1653
1654     .table-of-contents { /* hug the edge */
1655         right: 0;
1656     }
1657
1658     .pagination .prev-post,
1659     .pagination .next-post {
1660         min-width: auto;
1661         width: 90%;
1662         text-align: right;
1663     }
1664
1665     .pagination .prev-post {
1666         margin-bottom: 1rem;
1667         text-align: left;
1668     }
1669
1670     article .scrollable {
1671         overflow: auto;
1672         -webkit-overflow-scrolling: touch;
1673         position: relative;
1674         width: 100vw;
1675         left: 50%;
1676         transform: translate(-50%);
1677         margin: 3rem 0;
1678         border: 1px solid #cccccc;
1679         border-left: none;
1680         border-right: none;
1681     }
1682
1683     .scrollable .scrollable-padding {
1684         display: inline-block;
1685         padding: 0 3rem;
1686     }
1687
1688 }
1689
1690 @media only screen and (max-width: 600px) {
1691
1692     header {
1693         padding-top: 1rem;
1694     }
1695
1696     .site-logo {
1697         font-size: 4rem;
1698         padding-left: 6rem;
1699     }
1700
1701     .site-logo .tagline {
1702         font-size: 1.6rem;
1703         line-height: 1;
1704     }
1705
1706     header nav .main-menu.label-toggle {
1707         margin-top: 2rem;
1708         margin-bottom: 2rem;
1709     }
1710
1711     .feature-filters {
1712         height: 6rem;
1713         overflow: hidden;
1714     }
1715
1716     .feature-filters.opened {
1717         height: auto;
1718     }
1719
1720     .feature-filters:after {
1721         display: inline-block;
1722         content: "";
1723         background: url('images/menu-down.svg') no-repeat 50%;
1724         background-size: 2rem;
1725         width: 2rem;
1726         height: 2rem;
1727         position: absolute;
1728         right: 1rem;
1729         top: 2rem;
1730         -webkit-transition: transform 0.3s ease-out;
1731         -moz-transition: transform 0.3s ease-out;
1732         transition: transform 0.3s ease-out;
1733         perspective: 600;
1734     }
1735
1736     .feature-filters.opened:after {
1737         -webkit-transform: rotateX(-180deg);
1738         -moz-transform: rotateX(-180deg);
1739         transform: rotateX(-180deg);
1740     }
1741
1742     #wpadminbar {
1743         position: absolute;
1744     }
1745
1746     .table-of-contents {
1747         height: 9rem;
1748         overflow: hidden;
1749         margin-right: -10%;
1750     }
1751
1752     .menu-toggle:checked ~ .table-of-contents {
1753         height: auto;
1754     }
1755
1756     .table-of-contents label {
1757         display: block;
1758     }
1759
1760     .table-of-contents label:after {
1761         display: inline-block;
1762         content: "";
1763         background: url('images/menu-down.svg') no-repeat 50%;
1764         background-size: 2rem;
1765         width: 2rem;
1766         height: 2rem;
1767         position: absolute;
1768         right: 3rem;
1769         top: 3.5rem;
1770         -webkit-transition: transform 0.3s ease-out;
1771         -moz-transition: transform 0.3s ease-out;
1772         transition: transform 0.3s ease-out;
1773         perspective: 600;
1774     }
1775
1776     .menu-toggle:checked ~ .table-of-contents label:after {
1777         -webkit-transform: rotateX(-180deg);
1778         -moz-transform: rotateX(-180deg);
1779         transform: rotateX(-180deg);
1780     }
1781
1782     .table-of-contents h6 {
1783         margin-bottom: 3rem;
1784     }
1785
1786     .with-toc pre:nth-child(-n+6),
1787     #post-4132 pre:nth-child(-n+8) {
1788         width: 100vw;
1789     }
1790
1791 }
1792
1793 @media only screen and (max-width: 415px) {
1794
1795     .table-of-contents {
1796         /* Go one-column */
1797         width: 100vw;
1798         left: 50%;
1799         position: relative;
1800         transform: translate(-50%);
1801         float: none;
1802         margin: 0 0 3rem 0;
1803     }
1804
1805 }
1806
1807 @media only screen and (max-height: 415px) {
1808
1809     .hero .logo,
1810     .hero .tagline,
1811     .hero .particle {
1812         display: none;
1813     }
1814
1815     .home .site-logo {
1816         opacity: 1;
1817         margin-top: 0;
1818     }
1819
1820     .home .hero {
1821         margin: 7rem 0 0;
1822     }
1823
1824     .home.admin-bar .hero {
1825         margin-top: 12rem;
1826     }
1827
1828     header,
1829     .home header {
1830         padding-top: 1rem;
1831     }
1832
1833     .home header {
1834         border-bottom: 1px solid #e7e7e7;
1835         background: rgba(255,255,255,0.9);
1836     }
1837
1838     @supports ( -webkit-backdrop-filter: blur(10px) ) {
1839         .home header {
1840             backdrop-filter: blur(10px);
1841             -webkit-backdrop-filter: blur(10px);
1842             background: rgba(255,255,255,0.8);
1843         }
1844     }
1845
1846     .tile {
1847         min-height: 200px;
1848         max-height: 400px;
1849         overflow: hidden;
1850     }
1851
1852     .tile .background-image {
1853         padding-bottom: 33%;
1854     }
1855
1856     .tile.category-performance .background-image {
1857         background-position-y: 21.5%;
1858     }
1859
1860     .tile.category-web-inspector .background-image {
1861         background-position-y: 12.5%;
1862     }
1863
1864     .table-of-contents {
1865         height: 9rem;
1866         overflow: hidden;
1867         margin-right: -10%;
1868     }
1869
1870     .menu-toggle:checked ~ .table-of-contents {
1871         height: auto;
1872     }
1873
1874     .table-of-contents label {
1875         display: block;
1876     }
1877
1878     .table-of-contents label:after {
1879         display: inline-block;
1880         content: "";
1881         background: url('images/menu-down.svg') no-repeat 50%;
1882         background-size: 2rem;
1883         width: 2rem;
1884         height: 2rem;
1885         position: absolute;
1886         right: 3rem;
1887         top: 3.5rem;
1888         -webkit-transition: transform 0.3s ease-out;
1889         -moz-transition: transform 0.3s ease-out;
1890         transition: transform 0.3s ease-out;
1891         perspective: 600;
1892     }
1893
1894     .menu-toggle:checked ~ .table-of-contents label:after {
1895         -webkit-transform: rotateX(-180deg);
1896         -moz-transform: rotateX(-180deg);
1897         transform: rotateX(-180deg);
1898     }
1899
1900     .table-of-contents h6 {
1901         margin-bottom: 3rem;
1902     }
1903
1904     .with-toc pre:nth-child(-n+6),
1905     #post-4132 pre:nth-child(-n+8) {
1906         width: 100vw;
1907     }
1908
1909 }
1910
1911 @media only screen and (max-width: 320px) {
1912
1913     .home .hero {
1914         position: absolute;
1915     }
1916
1917 }