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


Generated : Thu Oct 22 08:20:02 2020 Cross-referenced by PHPXref