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


Generated : Fri Mar 29 08:20:02 2024 Cross-referenced by PHPXref