[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-admin/css/ -> about.css (source)

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


Generated : Thu May 28 08:20:02 2020 Cross-referenced by PHPXref