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