about-rtl.css (27302B)
1 /*! This file is auto-generated */ 2 /*------------------------------------------------------------------------------ 3 22.0 - About Pages 4 5 1.0 Global: About, Credits, Freedoms, Privacy 6 1.1 Layout 7 1.2 Typography & Elements 8 1.3 Header 9 2.0 Credits Page 10 3.0 Freedoms Page 11 x.2.0 Legacy About Styles: Global 12 x.2.1 Typography 13 x.2.2 Structure 14 x.2.3 Point Releases 15 x.3.0 Legacy About Styles: About Page 16 x.3.1 Typography 17 x.3.2 Structure 18 x.4.0 Legacy About Styles: Credits & Freedoms Pages 19 x.5.0 Legacy About Styles: Media Queries 20 ------------------------------------------------------------------------------*/ 21 22 .about__container { 23 /* Section backgrounds */ 24 --background: transparent; 25 --subtle-background: #def; 26 27 /* Main text color */ 28 --text: #000; 29 --text-light: #fff; 30 31 /* Accent colors: used in header, on special classes. */ 32 --accent-1: #3858e9; /* Accent background, link color */ 33 --accent-2: #2d46ba; /* Header background */ 34 35 /* Navigation colors. */ 36 --nav-background: #fff; 37 --nav-border: transparent; 38 --nav-color: var(--text); 39 --nav-current: var(--accent-1); 40 41 --gap: 2rem; 42 } 43 44 /*------------------------------------------------------------------------------ 45 1.0 - Global: About, Credits, Freedoms, Privacy 46 ------------------------------------------------------------------------------*/ 47 48 .about-php, 49 .credits-php, 50 .freedoms-php, 51 .privacy-php { 52 background: #f0f7ff; 53 } 54 55 .about-php #wpcontent, 56 .credits-php #wpcontent, 57 .freedoms-php #wpcontent, 58 .privacy-php #wpcontent { 59 background: linear-gradient(-180deg, #fff 50%, #f0f7ff 100%); 60 padding: 0 24px; 61 } 62 63 @media screen and (max-width: 782px) { 64 .about-php.auto-fold #wpcontent, 65 .credits-php.auto-fold #wpcontent, 66 .freedoms-php.auto-fold #wpcontent, 67 .privacy-php.auto-fold #wpcontent { 68 padding-right: 24px; 69 } 70 } 71 72 .about__container { 73 max-width: 1000px; 74 margin: 24px auto; 75 clear: both; 76 } 77 78 .about__container .alignleft { 79 float: right; 80 } 81 82 .about__container .alignright { 83 float: left; 84 } 85 86 .about__container .aligncenter { 87 text-align: center; 88 } 89 90 .about__container .is-vertically-aligned-top { 91 align-self: start; 92 } 93 94 .about__container .is-vertically-aligned-center { 95 align-self: center; 96 } 97 98 .about__container .is-vertically-aligned-bottom { 99 align-self: end; 100 } 101 102 .about__section { 103 background: var(--background); 104 clear: both; 105 } 106 107 .about__container .has-accent-background-color { 108 background-color: var(--accent-1); 109 color: var(--text-light); 110 } 111 112 .about__container .has-accent-background-color a { 113 color: var(--text-light); 114 } 115 116 .about__container .has-transparent-background-color { 117 background-color: transparent; 118 } 119 120 .about__container .has-accent-color { 121 color: var(--accent-1); 122 } 123 124 .about__container .has-border { 125 border: 3px solid currentColor; 126 } 127 128 .about__container .has-subtle-background-color { 129 background-color: var(--subtle-background); 130 } 131 132 .about__container .has-background-image { 133 background-size: contain; 134 background-repeat: no-repeat; 135 background-position: center; 136 } 137 138 /* 1.1 - Layout */ 139 140 .about__section { 141 margin: 0 0 var(--gap); 142 } 143 144 .about__section .column { 145 padding: var(--gap); 146 } 147 148 .about__section + .about__section .column { 149 padding-top: 0; 150 } 151 152 .about__section + .about__section .is-section-header { 153 padding-bottom: var(--gap); 154 } 155 156 .about__section .column[class*="background-color"], 157 .about__section .column.has-border { 158 padding-top: var(--gap); 159 } 160 161 .about__section .column.is-edge-to-edge { 162 padding: 0; 163 } 164 165 .about__section .column p:first-of-type { 166 margin-top: 0; 167 } 168 169 .about__section .column p:last-of-type { 170 margin-bottom: 0; 171 } 172 173 .about__section .has-text-columns { 174 columns: 2; 175 column-gap: calc(var(--gap) * 2); 176 } 177 178 .about__section .is-section-header { 179 margin-bottom: 0; 180 padding: var(--gap) var(--gap) 0; 181 } 182 183 .about__section .is-section-header p:last-child { 184 margin-bottom: 0; 185 } 186 187 /* Section header is alone in a container. */ 188 .about__section .is-section-header:first-child:last-child { 189 padding: 0; 190 } 191 192 .about__section.is-feature { 193 padding: var(--gap); 194 } 195 196 .about__section.is-feature p { 197 margin: 0; 198 } 199 200 .about__section.is-feature p + p { 201 margin-top: calc(var(--gap) / 2); 202 } 203 204 .about__section.has-1-column { 205 margin-right: auto; 206 margin-left: auto; 207 max-width: 36em; 208 } 209 210 .about__section.has-2-columns, 211 .about__section.has-3-columns, 212 .about__section.has-4-columns, 213 .about__section.has-overlap-style { 214 display: grid; 215 } 216 217 .about__section.has-gutters { 218 gap: calc(var(--gap) / 2); 219 } 220 221 .about__section.has-2-columns { 222 grid-template-columns: 1fr 1fr; 223 } 224 225 .about__section.has-2-columns.is-wider-right { 226 grid-template-columns: 1fr 2fr; 227 } 228 229 .about__section.has-2-columns.is-wider-left { 230 grid-template-columns: 2fr 1fr; 231 } 232 233 .about__section.has-2-columns .is-section-header { 234 grid-column-start: 1; 235 -ms-grid-column-span: 2; 236 grid-column-end: span 2; 237 } 238 239 .about__section.has-2-columns .column:nth-of-type(2n+1) { 240 grid-column-start: 1; 241 } 242 243 .about__section.has-2-columns .column:nth-of-type(2n) { 244 grid-column-start: 2; 245 } 246 247 .about__section.has-3-columns { 248 grid-template-columns: repeat(3, 1fr); 249 } 250 251 .about__section.has-3-columns .is-section-header { 252 grid-column-start: 1; 253 -ms-grid-column-span: 3; 254 grid-column-end: span 3; 255 } 256 257 .about__section.has-3-columns .column:nth-of-type(3n+1) { 258 grid-column-start: 1; 259 } 260 261 .about__section.has-3-columns .column:nth-of-type(3n+2) { 262 grid-column-start: 2; 263 } 264 265 .about__section.has-3-columns .column:nth-of-type(3n) { 266 grid-column-start: 3; 267 } 268 269 .about__section.has-4-columns { 270 grid-template-columns: repeat(4, 1fr); 271 } 272 273 .about__section.has-4-columns .is-section-header { 274 grid-column-start: 1; 275 -ms-grid-column-span: 4; 276 grid-column-end: span 4; 277 } 278 279 .about__section.has-4-columns .column:nth-of-type(4n+1) { 280 grid-column-start: 1; 281 } 282 283 .about__section.has-4-columns .column:nth-of-type(4n+2) { 284 grid-column-start: 2; 285 } 286 287 .about__section.has-4-columns .column:nth-of-type(4n+3) { 288 grid-column-start: 3; 289 } 290 291 .about__section.has-4-columns .column:nth-of-type(4n) { 292 grid-column-start: 4; 293 } 294 295 /* Any columns following a section header need to be expicitly put into the second row, for IE support. */ 296 .about__section.has-2-columns .is-section-header ~ .column, 297 .about__section.has-3-columns .is-section-header ~ .column, 298 .about__section.has-4-columns .is-section-header ~ .column, 299 .about__section.has-overlap-style .is-section-header ~ .column { 300 grid-row-start: 2; 301 } 302 303 .about__section.has-overlap-style { 304 grid-template-columns: repeat(7, 1fr); 305 } 306 307 .about__section.has-overlap-style .column { 308 grid-row-start: 1; 309 } 310 311 .about__section.has-overlap-style .column:nth-of-type(2n+1) { 312 grid-column-start: 2; 313 -ms-grid-column-span: 3; 314 grid-column-end: span 3; 315 } 316 317 .about__section.has-overlap-style .column:nth-of-type(2n) { 318 grid-column-start: 4; 319 -ms-grid-column-span: 3; 320 grid-column-end: span 3; 321 } 322 323 .about__section.has-overlap-style .column.is-top-layer { 324 z-index: 1; 325 } 326 327 @media screen and (max-width: 782px) { 328 .about__section.has-2-columns.is-wider-right, 329 .about__section.has-2-columns.is-wider-left, 330 .about__section.has-3-columns { 331 display: block; 332 padding-bottom: calc(var(--gap) / 2); 333 } 334 335 .about__section.has-2-columns.has-gutters .column, 336 .about__section.has-2-columns.has-gutters .column, 337 .about__section.has-3-columns.has-gutters .column { 338 margin-bottom: calc(var(--gap) / 2); 339 } 340 341 .about__section.has-2-columns.has-gutters .column:last-child, 342 .about__section.has-2-columns.has-gutters .column:last-child, 343 .about__section.has-3-columns.has-gutters .column:last-child { 344 margin-bottom: 0; 345 } 346 347 .about__section.has-3-columns .column:nth-of-type(n) { 348 padding-top: calc(var(--gap) / 2); 349 padding-bottom: calc(var(--gap) / 2); 350 } 351 352 .about__section.has-4-columns { 353 grid-template-columns: repeat(2, 1fr); 354 } 355 356 .about__section.has-4-columns .column:nth-of-type(2n+1) { 357 grid-column-start: 1; 358 } 359 360 .about__section.has-4-columns .column:nth-of-type(2n) { 361 grid-column-start: 2; 362 } 363 364 .about__section.has-4-columns .column:nth-of-type(4n+3), 365 .about__section.has-4-columns .column:nth-of-type(4n) { 366 grid-row-start: 2; 367 } 368 369 .about__section.has-4-columns .is-section-header { 370 -ms-grid-column-span: 2; 371 grid-column-end: span 2; 372 } 373 374 .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n+3), 375 .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n) { 376 grid-row-start: 3; 377 } 378 379 .about__section.has-overlap-style { 380 grid-template-columns: 1fr; 381 } 382 383 /* At this size, the two columns fully overlap */ 384 .about__section.has-overlap-style .column.column { 385 grid-column-start: 1; 386 -ms-grid-column-span: 1; 387 grid-column-end: 2; 388 grid-row-start: 1; 389 -ms-grid-row-span: 1; 390 grid-row-end: 2; 391 } 392 } 393 394 @media screen and (max-width: 600px) { 395 .about__section.has-2-columns { 396 display: block; 397 padding-bottom: calc(var(--gap) / 2); 398 } 399 400 .about__section.has-2-columns.has-gutters .column { 401 margin-bottom: calc(var(--gap) / 2); 402 } 403 404 .about__section.has-2-columns.has-gutters .column:last-child { 405 margin-bottom: 0; 406 } 407 408 .about__section.has-2-columns .column:nth-of-type(n) { 409 padding-top: calc(var(--gap) / 2); 410 padding-bottom: calc(var(--gap) / 2); 411 } 412 } 413 414 @media screen and (max-width: 480px) { 415 .about__section.is-feature .column { 416 padding: 0; 417 } 418 419 .about__section.has-4-columns { 420 display: block; 421 padding-bottom: calc(var(--gap) / 2); 422 } 423 424 .about__section.has-4-columns.has-gutters .column { 425 margin-bottom: calc(var(--gap) / 2); 426 } 427 428 .about__section.has-4-columns.has-gutters .column:last-child { 429 margin-bottom: 0; 430 } 431 432 .about__section.has-4-columns .column:nth-of-type(n) { 433 padding-top: calc(var(--gap) / 2); 434 padding-bottom: calc(var(--gap) / 2); 435 } 436 } 437 438 /* 1.2 - Typography & Elements */ 439 440 .about__container { 441 line-height: 1.4; 442 color: var(--text); 443 } 444 445 .about__container h1 { 446 padding: 0; 447 color: inherit; 448 } 449 450 .about__container h1, 451 .about__container h2, 452 .about__container h3.is-larger-heading { 453 margin-top: 0; 454 margin-bottom: 0.5em; 455 font-size: 2em; 456 line-height: 1.2; 457 font-weight: 700; 458 } 459 460 .about__container h3, 461 .about__container h1.is-smaller-heading, 462 .about__container h2.is-smaller-heading { 463 margin-top: 0; 464 font-size: 1.6em; 465 line-height: 1.3; 466 font-weight: 400; 467 } 468 469 .about__container p { 470 font-size: inherit; 471 line-height: inherit; 472 } 473 474 .about__section a { 475 color: var(--accent-1); 476 text-decoration: underline; 477 } 478 479 .about__section a:hover, 480 .about__section a:active, 481 .about__section a:focus { 482 color: var(--accent-1); 483 text-decoration: none; 484 } 485 486 .wp-credits-list a { 487 text-decoration: none; 488 } 489 490 .wp-credits-list a:hover, 491 .wp-credits-list a:active, 492 .wp-credits-list a:focus { 493 text-decoration: underline; 494 } 495 496 .about__container ul { 497 list-style: disc; 498 margin-right: calc(var(--gap) / 2); 499 } 500 501 .about__container img { 502 margin: 0; 503 max-width: 100%; 504 vertical-align: middle; 505 } 506 507 .about__container .about__image { 508 margin: 0; 509 } 510 511 .about__container .about__image img { 512 max-width: 100%; 513 width: 100%; 514 height: auto; 515 } 516 517 .about__container .about__image figcaption { 518 margin-top: 0.5em; 519 text-align: center; 520 } 521 522 .about__container .about__image .wp-video { 523 margin-right: auto; 524 margin-left: auto; 525 } 526 527 .about__container .about__image-comparison { 528 position: relative; 529 display: inline-block; 530 max-width: 100%; 531 } 532 533 .about__container .about__image-comparison img { 534 -webkit-user-select: none; 535 user-select: none; 536 width: auto; 537 max-width: none; 538 max-height: 100%; 539 } 540 541 .about__container .about__image-comparison > img { 542 max-width: 100%; 543 } 544 545 .about__container .about__image-comparison-resize { 546 position: absolute !important; /* Needed to override inline style on ResizableBox */ 547 top: 0; 548 bottom: 0; 549 right: 0; 550 width: 50%; 551 max-width: 100%; 552 } 553 554 .about__container .about__image-comparison.no-js .about__image-comparison-resize { 555 overflow: hidden; 556 border-left: 2px solid var(--wp-admin-theme-color); 557 } 558 559 .about__container .about__image-comparison-resize .components-resizable-box__side-handle::before { 560 width: 4px; 561 left: calc(50% - 2px); 562 transition: none; 563 animation: none; 564 opacity: 1; 565 } 566 567 .about__container .about__image + h3 { 568 margin-top: 1.5em; 569 } 570 571 .about__container hr { 572 margin: 0; 573 height: var(--gap); 574 border: none; 575 } 576 577 .about__container hr.is-small { 578 height: calc(var(--gap) / 4); 579 } 580 581 .about__container hr.is-large { 582 height: calc(var(--gap) * 2); 583 margin: calc(var(--gap) / 2) auto; 584 } 585 586 .about__container div.updated, 587 .about__container div.error, 588 .about__container .notice { 589 display: none !important; 590 } 591 592 .about__section { 593 font-size: 1.2em; 594 } 595 596 .about__section.is-feature { 597 font-size: 1.6em; 598 } 599 600 @media screen and (max-width: 480px) { 601 .about__section.is-feature { 602 font-size: 1.4em; 603 } 604 605 .about__container h1, 606 .about__container h2, 607 .about__container h3.is-larger-heading { 608 font-size: 2em; 609 } 610 } 611 612 /* 1.3 - Header */ 613 614 .about__header { 615 margin-bottom: var(--gap); 616 padding-top: 0; 617 background-position: center; 618 background-repeat: no-repeat; 619 background-size: cover; 620 background-image: url('../images/about-header-about.svg'); 621 background-color: var(--accent-2); 622 color: var(--text-light); 623 } 624 625 .credits-php .about__header { 626 background-image: url('../images/about-header-credits.svg'); 627 } 628 629 .freedoms-php .about__header { 630 background-image: url('../images/about-header-freedoms.svg'); 631 } 632 633 .privacy-php .about__header { 634 background-image: url('../images/about-header-privacy.svg'); 635 } 636 637 .about__header-image { 638 margin: 0 var(--gap) 3em; 639 } 640 641 .about__header-title { 642 padding: 2rem 0 0; 643 margin: 0 2rem; 644 } 645 646 .about__header-title h1 { 647 margin: 0 0 0.5rem; 648 padding: 0; 649 font-size: 4.5rem; 650 line-height: 1; 651 font-weight: 400; 652 } 653 654 .about__header-text { 655 max-width: 42rem; 656 margin: 0 0 5em; 657 padding: 0 2rem; 658 font-size: 2rem; 659 line-height: 1.15; 660 } 661 662 .about__header-navigation { 663 display: flex; 664 justify-content: center; 665 padding-top: 0; 666 background: var(--nav-background); 667 color: var(--nav-color); 668 border-bottom: 3px solid var(--nav-border); 669 } 670 671 .about__header-navigation .nav-tab { 672 margin-right: 0; 673 padding: calc(var(--gap) * 0.75) var(--gap); 674 float: none; 675 font-size: 1.4em; 676 line-height: 1; 677 border-width: 0 0 3px; 678 border-style: solid; 679 border-color: transparent; 680 background: transparent; 681 color: inherit; 682 } 683 684 .about__header-navigation .nav-tab:hover, 685 .about__header-navigation .nav-tab:active { 686 background-color: var(--nav-current); 687 color: var(--text-light); 688 } 689 690 .about__header-navigation .nav-tab-active { 691 margin-bottom: -3px; 692 color: var(--nav-current); 693 border-width: 0 0 6px; 694 border-color: var(--nav-current); 695 } 696 697 .about__header-navigation .nav-tab-active:hover, 698 .about__header-navigation .nav-tab-active:active { 699 background-color: var(--nav-current); 700 color: var(--text-light); 701 border-color: var(--nav-current); 702 } 703 704 @media screen and (max-width: 960px){ 705 .about__header-title h1 { 706 font-size: 4.8em; 707 } 708 } 709 710 @media screen and (max-width: 782px) { 711 .about__container .about__header-text { 712 font-size: 1.4em; 713 } 714 715 .about__header-container { 716 display: block; 717 } 718 719 .about__header-title, 720 .about__header-image { 721 margin-right: calc(var(--gap) / 2); 722 margin-left: calc(var(--gap) / 2); 723 } 724 725 .about__header-text, 726 .about__header-navigation .nav-tab { 727 margin-top: 0; 728 margin-left: 0; 729 padding-right: calc(var(--gap) / 2); 730 padding-left: calc(var(--gap) / 2); 731 } 732 } 733 734 @media screen and (max-width: 480px) { 735 .about__header-title p { 736 font-size: 2.4em; 737 } 738 739 .about__header-text { 740 margin-bottom: 1em; 741 } 742 743 .about__header-navigation { 744 display: block; 745 } 746 747 .about__header-navigation .nav-tab { 748 display: block; 749 margin-bottom: 0; 750 padding: calc(var(--gap) / 2); 751 border-right-width: 6px; 752 border-bottom: none; 753 } 754 755 .about__header-navigation .nav-tab-active { 756 border-bottom: none; 757 border-right-width: 6px; 758 } 759 } 760 761 762 /*------------------------------------------------------------------------------ 763 2.0 - Credits Page 764 ------------------------------------------------------------------------------*/ 765 766 .about__section .wp-people-group-title { 767 margin-bottom: calc(var(--gap) * 2); 768 text-align: center; 769 770 } 771 772 .about__section .wp-people-group { 773 margin: 0; 774 display: flex; 775 flex-wrap: wrap; 776 } 777 778 .about__section .wp-person { 779 display: inline-block; 780 vertical-align: top; 781 box-sizing: border-box; 782 margin-bottom: var(--gap); 783 width: 25%; 784 text-align: center; 785 } 786 787 .about__section .compact .wp-person { 788 height: auto; 789 width: 20%; 790 } 791 792 .about__section .wp-person-avatar { 793 display: block; 794 margin: 0 auto calc(var(--gap) / 2); 795 width: 140px; 796 height: 140px; 797 border-radius: 100%; 798 overflow: hidden; 799 background: var(--accent-1); 800 } 801 802 .about__section .wp-person .gravatar { 803 width: 140px; 804 height: 140px; 805 filter: grayscale(100%); 806 mix-blend-mode: screen; 807 } 808 809 .about__section .compact .wp-person-avatar, 810 .about__section .compact .wp-person .gravatar { 811 width: 80px; 812 height: 80px; 813 } 814 815 .about__section .wp-person .web { 816 font-size: 1.4em; 817 font-weight: 600; 818 text-decoration: none; 819 } 820 821 .about__section .wp-person .web:hover { 822 text-decoration: underline; 823 } 824 825 .about__section .compact .wp-person .web { 826 font-size: 1.2em; 827 } 828 829 .about__section .wp-person .title { 830 display: block; 831 margin-top: 0.5em; 832 } 833 834 @media screen and (max-width: 782px) { 835 .about__section .wp-person { 836 width: 33%; 837 } 838 839 .about__section .compact .wp-person { 840 width: 25%; 841 } 842 843 .about__section .wp-person-avatar, 844 .about__section .wp-person .gravatar { 845 width: 120px; 846 height: 120px; 847 } 848 } 849 850 @media screen and (max-width: 600px) { 851 .about__section .wp-person { 852 width: 50%; 853 } 854 855 .about__section .compact .wp-person { 856 width: 33%; 857 } 858 859 .about__section .wp-person .web { 860 font-size: 1.2em; 861 } 862 } 863 864 @media screen and (max-width: 480px) { 865 .about__section .wp-person { 866 min-width: 100%; 867 } 868 869 .about__section .wp-person .web { 870 font-size: 1em; 871 } 872 873 .about__section .compact .wp-person .web { 874 font-size: 1em; 875 } 876 } 877 878 879 /*------------------------------------------------------------------------------ 880 3.0 - Freedoms Page 881 ------------------------------------------------------------------------------*/ 882 883 .about__section .column .freedom-image { 884 margin-bottom: var(--gap); 885 max-height: 140px; 886 } 887 888 889 /*------------------------------------------------------------------------------ 890 x.2.0 - Legacy About Styles: Global 891 ------------------------------------------------------------------------------*/ 892 893 .about-wrap { 894 position: relative; 895 margin: 25px 20px 0 40px; 896 max-width: 1050px; /* readability */ 897 font-size: 15px; 898 } 899 900 .about-wrap.full-width-layout { 901 max-width: 1200px; 902 } 903 904 .about-wrap-content { 905 max-width: 1050px; 906 } 907 908 .about-wrap div.updated, 909 .about-wrap div.error, 910 .about-wrap .notice { 911 display: none !important; 912 } 913 914 .about-wrap hr { 915 border: 0; 916 height: 0; 917 margin: 3em 0 0; 918 border-top: 1px solid rgba(0, 0, 0, 0.1); 919 } 920 921 .about-wrap img { 922 margin: 0; 923 width: 100%; 924 height: auto; 925 vertical-align: middle; 926 } 927 928 .about-wrap .inline-svg img { 929 max-width: 100%; 930 width: auto; 931 height: auto; 932 } 933 934 .about-wrap video { 935 margin: 1.5em auto; 936 } 937 938 /* WordPress Version Badge */ 939 940 .wp-badge { 941 background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat; 942 background-position: center 25px; 943 background-size: 80px 80px; 944 color: #fff; 945 font-size: 14px; 946 text-align: center; 947 font-weight: 600; 948 margin: 5px 0 0; 949 padding-top: 120px; 950 height: 40px; 951 display: inline-block; 952 width: 140px; 953 text-rendering: optimizeLegibility; 954 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 955 } 956 957 .svg .wp-badge { 958 background-image: url(../images/wordpress-logo-white.svg?ver=20160308); 959 } 960 961 .about-wrap .wp-badge { 962 position: absolute; 963 top: 0; 964 left: 0; 965 } 966 967 /* Tabs */ 968 969 .about-wrap .nav-tab { 970 padding-left: 15px; 971 padding-right: 15px; 972 font-size: 18px; 973 line-height: 1.33333333; 974 } 975 976 /* x.2.1 - Typography */ 977 978 .about-wrap h1 { 979 margin: 0.2em 0 0 200px; 980 padding: 0; 981 color: #32373c; 982 line-height: 1.2; 983 font-size: 2.8em; 984 font-weight: 400; 985 } 986 987 .about-wrap h2 { 988 margin: 40px 0 0.6em; 989 font-size: 2.7em; 990 line-height: 1.3; 991 font-weight: 300; 992 text-align: center; 993 } 994 995 .about-wrap h3 { 996 margin: 1.25em 0 0.6em; 997 font-size: 1.4em; 998 line-height: 1.5; 999 } 1000 1001 .about-wrap h4 { 1002 font-size: 16px; 1003 color: #23282d; 1004 } 1005 1006 .about-wrap p { 1007 line-height: 1.5; 1008 font-size: 16px; 1009 } 1010 1011 .about-wrap code, 1012 .about-wrap ol li p { 1013 font-size: 14px; 1014 font-weight: 400; 1015 } 1016 1017 .about-wrap figcaption { 1018 font-size: 13px; 1019 text-align: center; 1020 color: white; 1021 text-overflow: ellipsis; 1022 } 1023 1024 .about-wrap .about-description, 1025 .about-wrap .about-text { 1026 margin-top: 1.4em; 1027 font-weight: 400; 1028 line-height: 1.6; 1029 font-size: 19px; 1030 } 1031 1032 .about-wrap .about-text { 1033 margin: 1em 0 1em 200px; 1034 color: #555d66; 1035 } 1036 1037 /* x.2.2 - Structure */ 1038 1039 .about-wrap .has-1-columns, 1040 .about-wrap .has-2-columns, 1041 .about-wrap .has-3-columns, 1042 .about-wrap .has-4-columns { 1043 display: grid; 1044 max-width: 800px; 1045 margin-top: 40px; 1046 margin-right: auto; 1047 margin-left: auto; 1048 } 1049 1050 .about-wrap .column { 1051 margin-left: 20px; 1052 margin-right: 20px; 1053 } 1054 1055 .about-wrap .is-wide { 1056 max-width: 760px; 1057 } 1058 1059 .about-wrap .is-fullwidth { 1060 max-width: 100%; 1061 } 1062 1063 .about-wrap .has-1-columns { 1064 display: block; 1065 max-width: 680px; 1066 margin: 0 auto 40px; 1067 } 1068 1069 .about-wrap .has-2-columns { 1070 grid-template-columns: 1fr 1fr; 1071 } 1072 1073 .about-wrap .has-2-columns .column:nth-of-type(2n+1) { 1074 grid-column-start: 1; 1075 } 1076 1077 .about-wrap .has-2-columns .column:nth-of-type(2n) { 1078 grid-column-start: 2; 1079 } 1080 1081 .about-wrap .has-2-columns.is-wider-right { 1082 grid-template-columns: 1fr 2fr; 1083 } 1084 1085 .about-wrap .has-2-columns.is-wider-left { 1086 grid-template-columns: 2fr 1fr; 1087 } 1088 1089 .about-wrap .has-3-columns { 1090 grid-template-columns: repeat(3, 1fr); 1091 } 1092 1093 .about-wrap .has-3-columns .column:nth-of-type(3n+1) { 1094 grid-column-start: 1; 1095 } 1096 1097 .about-wrap .has-3-columns .column:nth-of-type(3n+2) { 1098 grid-column-start: 2; 1099 } 1100 1101 .about-wrap .has-3-columns .column:nth-of-type(3n) { 1102 grid-column-start: 3; 1103 } 1104 1105 .about-wrap .has-4-columns { 1106 grid-template-columns: repeat(4, 1fr); 1107 } 1108 1109 .about-wrap .has-4-columns .column:nth-of-type(4n+1) { 1110 grid-column-start: 1; 1111 } 1112 1113 .about-wrap .has-4-columns .column:nth-of-type(4n+2) { 1114 grid-column-start: 2; 1115 } 1116 1117 .about-wrap .has-4-columns .column:nth-of-type(4n+3) { 1118 grid-column-start: 3; 1119 } 1120 1121 .about-wrap .has-4-columns .column:nth-of-type(4n) { 1122 grid-column-start: 4; 1123 } 1124 1125 .about-wrap .column :first-child { 1126 margin-top: 0; 1127 } 1128 1129 .about-wrap .aligncenter { 1130 text-align: center; 1131 } 1132 1133 .about-wrap .alignleft { 1134 float: right; 1135 margin-left: 40px; 1136 } 1137 1138 .about-wrap .alignright { 1139 float: left; 1140 margin-right: 40px; 1141 } 1142 1143 .about-wrap .is-vertically-aligned-top { 1144 align-self: start; 1145 } 1146 1147 .about-wrap .is-vertically-aligned-center { 1148 align-self: center; 1149 } 1150 1151 .about-wrap .is-vertically-aligned-bottom { 1152 align-self: end; 1153 } 1154 1155 /* x.2.3 - Point Releases */ 1156 1157 .about-wrap .point-releases { 1158 margin-top: 5px; 1159 border-bottom: 1px solid #ddd; 1160 } 1161 1162 .about-wrap .changelog { 1163 margin-bottom: 40px; 1164 } 1165 1166 .about-wrap .changelog.point-releases h3 { 1167 padding-top: 35px; 1168 } 1169 1170 .about-wrap .changelog.point-releases h3:first-child { 1171 padding-top: 7px; 1172 } 1173 1174 .about-wrap .changelog.feature-section .col { 1175 margin-top: 40px; 1176 } 1177 1178 /*------------------------------------------------------------------------------ 1179 x.3.0 - Legacy About Styles: About Page 1180 ------------------------------------------------------------------------------*/ 1181 1182 /* x.3.1 - Typography */ 1183 1184 .about-wrap .lead-description { 1185 font-size: 1.5em; 1186 text-align: center; 1187 } 1188 1189 .about-wrap .feature-section p { 1190 margin-top: 0.6em; 1191 } 1192 1193 /* x.3.2 - Structure */ 1194 1195 .about-wrap .headline-feature { 1196 margin: 0 auto 40px; 1197 max-width: 680px; 1198 } 1199 1200 .about-wrap .headline-feature h2 { 1201 margin: 50px 0 0; 1202 } 1203 1204 .about-wrap .headline-feature img { 1205 max-width: 600px; 1206 width: 100%; 1207 } 1208 1209 /* Go to Dashboard Home link */ 1210 1211 .about-wrap .return-to-dashboard { 1212 margin: 30px -5px 0 0; 1213 font-size: 14px; 1214 font-weight: 600; 1215 } 1216 1217 .about-wrap .return-to-dashboard a { 1218 text-decoration: none; 1219 padding: 0 5px; 1220 } 1221 1222 /*------------------------------------------------------------------------------ 1223 x.4.0 - Legacy About Styles: Credits & Freedoms Pages 1224 ------------------------------------------------------------------------------*/ 1225 1226 /* Credits */ 1227 1228 .about-wrap h2.wp-people-group { 1229 margin: 2.6em 0 1.33em; 1230 padding: 0; 1231 font-size: 16px; 1232 line-height: inherit; 1233 font-weight: 600; 1234 text-align: right; 1235 } 1236 1237 .about-wrap .wp-people-group { 1238 padding: 0 5px; 1239 margin: 0 -5px 0 -15px; 1240 } 1241 1242 .about-wrap .compact { 1243 margin-bottom: 0; 1244 } 1245 1246 .about-wrap .wp-person { 1247 display: inline-block; 1248 vertical-align: top; 1249 margin-left: 10px; 1250 padding-bottom: 15px; 1251 height: 70px; 1252 width: 280px; 1253 } 1254 1255 .about-wrap .compact .wp-person { 1256 height: auto; 1257 width: 180px; 1258 padding-bottom: 0; 1259 margin-bottom: 0; 1260 } 1261 1262 .about-wrap .wp-person .gravatar { 1263 float: right; 1264 margin: 0 0 10px 10px; 1265 padding: 1px; 1266 width: 60px; 1267 height: 60px; 1268 } 1269 1270 .about-wrap .compact .wp-person .gravatar { 1271 width: 30px; 1272 height: 30px; 1273 } 1274 1275 .about-wrap .wp-person .web { 1276 margin: 6px 0 2px; 1277 font-size: 16px; 1278 font-weight: 400; 1279 line-height: 2; 1280 text-decoration: none; 1281 } 1282 1283 .about-wrap .wp-person .title { 1284 display: block; 1285 } 1286 1287 .about-wrap #wp-people-group-validators + p.wp-credits-list { 1288 margin-top: 0; 1289 } 1290 1291 .about-wrap p.wp-credits-list a { 1292 white-space: nowrap; 1293 } 1294 1295 /* Freedoms */ 1296 1297 .freedoms-php .about-wrap ol { 1298 margin: 40px 60px; 1299 } 1300 1301 .freedoms-php .about-wrap ol li { 1302 list-style-type: decimal; 1303 font-weight: 600; 1304 } 1305 1306 .freedoms-php .about-wrap ol p { 1307 font-weight: 400; 1308 margin: 0.6em 0; 1309 } 1310 1311 .freedoms-php .column .freedoms-image { 1312 background-image: url('../images/freedoms.png'); 1313 background-size: 100%; 1314 padding-top: 100%; 1315 } 1316 1317 .freedoms-php .column:nth-of-type(2) .freedoms-image { 1318 background-position: 100% 34%; 1319 } 1320 1321 .freedoms-php .column:nth-of-type(3) .freedoms-image { 1322 background-position: 100% 66%; 1323 } 1324 1325 .freedoms-php .column:nth-of-type(4) .freedoms-image { 1326 background-position: 100% 100%; 1327 } 1328 1329 /*------------------------------------------------------------------------------ 1330 x.5.0 - Legacy About Styles: Media Queries 1331 ------------------------------------------------------------------------------*/ 1332 1333 @media screen and (max-width: 782px) { 1334 .about-wrap .has-3-columns, 1335 .about-wrap .has-4-columns { 1336 grid-template-columns: 1fr 1fr; 1337 } 1338 1339 .about-wrap .has-3-columns .column:nth-of-type(3n+1), 1340 .about-wrap .has-4-columns .column:nth-of-type(4n+1) { 1341 grid-column-start: 1; 1342 grid-row-start: 1; 1343 } 1344 1345 .about-wrap .has-3-columns .column:nth-of-type(3n+2), 1346 .about-wrap .has-4-columns .column:nth-of-type(4n+2) { 1347 grid-column-start: 2; 1348 grid-row-start: 1; 1349 } 1350 1351 .about-wrap .has-3-columns .column:nth-of-type(3n), 1352 .about-wrap .has-4-columns .column:nth-of-type(4n+3) { 1353 grid-column-start: 1; 1354 grid-row-start: 2; 1355 } 1356 1357 .about-wrap .has-4-columns .column:nth-of-type(4n) { 1358 grid-column-start: 2; 1359 grid-row-start: 2; 1360 } 1361 } 1362 1363 @media screen and (max-width: 600px) { 1364 .about-wrap .has-2-columns, 1365 .about-wrap .has-3-columns, 1366 .about-wrap .has-4-columns { 1367 display: block; 1368 } 1369 1370 .about-wrap :not(.is-wider-right):not(.is-wider-left) .column { 1371 margin-left: 0; 1372 margin-right: 0; 1373 } 1374 1375 .about-wrap .has-2-columns.is-wider-right, 1376 .about-wrap .has-2-columns.is-wider-left { 1377 display: grid; 1378 } 1379 } 1380 1381 @media only screen and (max-width: 500px) { 1382 .about-wrap { 1383 margin-left: 20px; 1384 margin-right: 10px; 1385 } 1386 1387 .about-wrap h1, 1388 .about-wrap .about-text { 1389 margin-left: 0; 1390 } 1391 1392 .about-wrap .about-text { 1393 margin-bottom: 0.25em; 1394 } 1395 1396 .about-wrap .wp-badge { 1397 position: relative; 1398 margin-bottom: 1.5em; 1399 width: 100%; 1400 } 1401 } 1402 1403 @media only screen and (max-width: 480px) { 1404 .about-wrap .has-2-columns.is-wider-right, 1405 .about-wrap .has-2-columns.is-wider-left { 1406 display: block; 1407 } 1408 1409 .about-wrap .column { 1410 margin-left: 0; 1411 margin-right: 0; 1412 } 1413 1414 .about-wrap .has-2-columns.is-wider-right img, 1415 .about-wrap .has-2-columns.is-wider-left img { 1416 max-width: 160px; 1417 } 1418 }