[Summary view] [Print] [Text view]

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