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