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