diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
index acaaa2a009..c14c1bfc50 100644
a
|
b
|
require_once ABSPATH . 'wp-admin/admin-header.php'; |
20 | 20 | |
21 | 21 | <div class="about__header"> |
22 | 22 | <div class="about__header-title"> |
23 | | <h1> |
| 23 | <p> |
24 | 24 | <?php _e( 'WordPress' ); ?> |
25 | 25 | <span><?php echo $display_version; ?></span> |
26 | | </h1> |
| 26 | </p> |
27 | 27 | </div> |
28 | 28 | |
29 | 29 | <div class="about__header-text"> |
… |
… |
require_once ABSPATH . 'wp-admin/admin-header.php'; |
41 | 41 | </div> |
42 | 42 | |
43 | 43 | <div class="about__section is-feature has-accent-background-color"> |
44 | | <p><?php _e( 'Say hello to more and better.' ); ?></p> |
| 44 | <h1><?php _e( 'Say hello to more and better.' ); ?></h1> |
| 45 | |
45 | 46 | <p><?php _e( 'More ways to make your pages come alive. With easier ways to get it all done and looking better than ever—and boosts in speed you can feel.' ); ?></p> |
46 | 47 | </div> |
47 | 48 | |
… |
… |
require_once ABSPATH . 'wp-admin/admin-header.php'; |
105 | 106 | <li><?php _e( 'Tips are gone. In their place, a Welcome Guide window you can bring up when you need it—and only when you need it—again and again.' ); ?></li> |
106 | 107 | <li><?php _e( 'Know at a glance whether you’re in a block’s Edit or Navigation mode. Or, if you have restricted vision, your screen reader will tell you which mode you’re in.' ); ?></li> |
107 | 108 | </ul> |
108 | | <p><em><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You’ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></em></p> |
| 109 | <p><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You’ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></p> |
109 | 110 | </div> |
110 | 111 | <div class="column is-edge-to-edge"> |
111 | 112 | <div class="about__image aligncenter"> |
diff --git a/src/wp-admin/credits.php b/src/wp-admin/credits.php
index 60b1ebb004..2fdb1266da 100644
a
|
b
|
$credits = wp_credits(); |
22 | 22 | |
23 | 23 | <div class="about__header"> |
24 | 24 | <div class="about__header-title"> |
25 | | <h1> |
| 25 | <p> |
26 | 26 | <?php _e( 'WordPress' ); ?> |
27 | 27 | <span><?php echo $display_version; ?></span> |
28 | | </h1> |
| 28 | </p> |
29 | 29 | </div> |
30 | 30 | |
31 | 31 | <div class="about__header-text"> |
… |
… |
$credits = wp_credits(); |
42 | 42 | </nav> |
43 | 43 | </div> |
44 | 44 | |
45 | | <div class="about__section"> |
| 45 | <div class="about__section is-feature"> |
46 | 46 | <div class="column"> |
47 | | <h2><?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?></h2> |
| 47 | <h1><?php _e( 'Credits' ); ?></h1> |
| 48 | |
| 49 | <?php if ( ! $credits ) : ?> |
48 | 50 | |
49 | 51 | <p> |
50 | 52 | <?php |
51 | | if ( ! $credits ) { |
52 | | printf( |
53 | | /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */ |
54 | | __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ), |
55 | | __( 'https://wordpress.org/about/' ), |
56 | | __( 'https://make.wordpress.org/' ) |
57 | | ); |
58 | | } else { |
59 | | printf( |
60 | | /* translators: %s: https://make.wordpress.org/ */ |
61 | | __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ), |
62 | | __( 'https://make.wordpress.org/' ) |
63 | | ); |
64 | | } |
| 53 | printf( |
| 54 | /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */ |
| 55 | __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ), |
| 56 | __( 'https://wordpress.org/about/' ), |
| 57 | __( 'https://make.wordpress.org/' ) |
| 58 | ); |
65 | 59 | ?> |
66 | 60 | </p> |
| 61 | |
| 62 | <?php else : ?> |
| 63 | |
| 64 | <p> |
| 65 | <?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?> |
| 66 | </p> |
| 67 | <p> |
| 68 | <?php |
| 69 | printf( |
| 70 | /* translators: %s: https://make.wordpress.org/ */ |
| 71 | __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ), |
| 72 | __( 'https://make.wordpress.org/' ) |
| 73 | ); |
| 74 | ?> |
| 75 | </p> |
| 76 | |
| 77 | <?php endif; ?> |
67 | 78 | </div> |
68 | 79 | |
69 | 80 | <div class="about__image aligncenter"> |
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 51e49261d6..430184753d 100644
a
|
b
|
|
99 | 99 | .about__section { |
100 | 100 | background: #f3f4f5; |
101 | 101 | background: var(--background); |
| 102 | clear: both; |
102 | 103 | } |
103 | 104 | |
104 | 105 | .about__container .has-accent-background-color { |
… |
… |
|
303 | 304 | } |
304 | 305 | |
305 | 306 | .about__container h1 { |
306 | | font-size: 5em; |
307 | | line-height: 1; |
| 307 | margin: 0 0 1em; |
| 308 | padding: 0; |
| 309 | font-weight: 600; |
| 310 | color: inherit; |
308 | 311 | } |
309 | 312 | |
| 313 | .about__container h1, |
310 | 314 | .about__container h2 { |
311 | 315 | margin-top: 0; |
312 | 316 | font-size: 1.4em; |
| 317 | line-height: 1.4; |
313 | 318 | } |
314 | 319 | |
315 | 320 | .about__container h3 { |
… |
… |
|
395 | 400 | text-align: center; |
396 | 401 | } |
397 | 402 | |
398 | | @media screen and (max-width: 782px) { |
399 | | .about__container h1 { |
400 | | font-size: 4em; |
401 | | } |
402 | | } |
403 | | |
404 | 403 | @media screen and (max-width: 480px) { |
405 | | .about__container h1 { |
406 | | font-size: 3.2em; |
407 | | } |
408 | | |
409 | 404 | .about__section.is-feature { |
410 | 405 | font-size: 1.4em; |
411 | 406 | font-weight: 500; |
… |
… |
|
415 | 410 | /* 1.3 - Header */ |
416 | 411 | |
417 | 412 | .about__header { |
418 | | display: -ms-grid; |
419 | | display: grid; |
420 | | -ms-grid-columns: 1fr 1fr; |
421 | | grid-template-columns: 1fr 1fr; |
422 | | -ms-grid-rows: 1fr 1fr; |
423 | | grid-template-rows: 1fr 1fr; |
424 | | min-height: 30em; |
425 | | max-height: 42em; |
426 | | height: 90vh; |
427 | 413 | margin-bottom: 32px; |
428 | 414 | background-color: #f3f4f5; |
429 | 415 | background-color: var(--background); |
430 | 416 | background-repeat: no-repeat; |
431 | | background-position: top center; |
| 417 | background-position: top right; |
432 | 418 | background-size: contain; |
433 | | background-image: url('https://wordpress.org/images/core/5.4/header.svg'); |
| 419 | background-image: url('http://trunk.wordpress.test/wp-content/uploads/header-diagonal.svg'); |
| 420 | } |
| 421 | |
| 422 | .rtl .about__header { |
| 423 | background-image: url('http://trunk.wordpress.test/wp-content/uploads/header-diagonal-rtl.svg'); |
434 | 424 | } |
435 | 425 | |
436 | 426 | .about__header > div { |
… |
… |
|
442 | 432 | } |
443 | 433 | |
444 | 434 | .about__header-title { |
445 | | -ms-grid-column: 1; |
446 | | grid-column: 1; |
447 | | -ms-grid-row: 1; |
448 | | -ms-grid-row-span: 2; |
449 | | grid-row: 1/span 2; |
450 | | padding: 32px; |
451 | | -webkit-writing-mode: vertical-rl; |
452 | | -ms-writing-mode: tb-rl; |
453 | | writing-mode: vertical-rl; |
454 | | transform: rotate(180deg); |
455 | | } |
456 | | |
457 | | /* Needs to be inline-block to use vertical-align, needs specificity to override flex. */ |
458 | | .about__header .about__header-title { |
459 | | display: inline-block; |
460 | | vertical-align: top; |
| 435 | min-height: 24em; |
| 436 | max-height: 32em; |
| 437 | height: 80vh; |
| 438 | padding: 0 32px; |
461 | 439 | } |
462 | 440 | |
463 | | .about__header-title h1 { |
| 441 | .about__header-title p { |
| 442 | margin: 0; |
464 | 443 | padding: 0; |
| 444 | font-size: 4em; |
| 445 | line-height: 1; |
| 446 | font-weight: 500; |
465 | 447 | color: #1730e5; |
466 | 448 | color: var(--accent-1); |
467 | 449 | } |
468 | 450 | |
469 | | .about__header-title h1 span { |
470 | | display: block; |
471 | | font-weight: 600; |
472 | | font-size: 1.2em; |
473 | | line-height: 1; |
| 451 | .about__header-title p span { |
| 452 | display: inline-block; |
474 | 453 | color: #216bce; |
475 | 454 | color: var(--accent-2); |
476 | 455 | } |
477 | 456 | |
478 | 457 | .about__header-text { |
479 | | -ms-grid-column: 2; |
480 | | grid-column: 2; |
481 | | -ms-grid-row: 2; |
482 | | grid-row: 2; |
483 | | padding: 32px; |
| 458 | padding: 16px 32px 32px; |
484 | 459 | font-size: 1.5em; |
485 | 460 | line-height: 1.4; |
486 | | text-align: right; |
487 | | justify-self: flex-end; |
488 | 461 | } |
489 | 462 | |
490 | 463 | .about__header-text p { |
… |
… |
|
492 | 465 | } |
493 | 466 | |
494 | 467 | .about__header-navigation { |
495 | | -ms-grid-column: 1; |
496 | | -ms-grid-column-span: 2; |
497 | | grid-column: 1/span 2; |
498 | | -ms-grid-row: 3; |
499 | | grid-row: 3; |
500 | 468 | padding-top: 0; |
501 | 469 | background: #216bce; |
502 | 470 | background: var(--nav-background); |
… |
… |
|
543 | 511 | .about__container .about__header-text { |
544 | 512 | font-size: 1.4em; |
545 | 513 | } |
546 | | } |
547 | | |
548 | | @media screen and (max-width: 600px) { |
549 | | .about__header { |
550 | | display: block; |
551 | | min-height: unset; |
552 | | max-height: unset; |
553 | | height: auto; |
554 | | } |
555 | 514 | |
556 | 515 | .about__header-title { |
| 516 | min-height: 0; |
| 517 | max-height: none; |
| 518 | height: auto; |
557 | 519 | /* |
558 | | * 80% is a "magic" number to create a top offset approx-equal to the height of the background image, |
| 520 | * 60% is a "magic" number to create a top offset approx-equal to the height of the background image, |
559 | 521 | * which scales to match the container width. |
560 | 522 | */ |
561 | | padding-top: 80%; |
562 | | padding-bottom: 0; |
563 | | -webkit-writing-mode: initial; |
564 | | -ms-writing-mode: initial; |
565 | | writing-mode: initial; |
566 | | transform: none; |
567 | | } |
568 | | |
569 | | .about__header-text { |
570 | | text-align: left; |
| 523 | padding-top: 60%; |
571 | 524 | } |
572 | 525 | |
573 | 526 | .about__header-navigation .nav-tab { |
… |
… |
|
578 | 531 | } |
579 | 532 | |
580 | 533 | @media screen and (max-width: 480px) { |
| 534 | .about__header-title p { |
| 535 | font-size: 3.2em; |
| 536 | } |
| 537 | |
581 | 538 | .about__header-navigation .nav-tab { |
582 | 539 | float: none; |
583 | 540 | display: block; |
diff --git a/src/wp-admin/freedoms.php b/src/wp-admin/freedoms.php
index c9bc298866..454a647c0d 100644
a
|
b
|
require_once ABSPATH . 'wp-admin/admin-header.php'; |
25 | 25 | |
26 | 26 | <div class="about__header"> |
27 | 27 | <div class="about__header-title"> |
28 | | <h1> |
| 28 | <p> |
29 | 29 | <?php _e( 'WordPress' ); ?> |
30 | 30 | <span><?php echo $display_version; ?></span> |
31 | | </h1> |
| 31 | </p> |
32 | 32 | </div> |
33 | 33 | |
34 | 34 | <div class="about__header-text"> |
… |
… |
require_once ABSPATH . 'wp-admin/admin-header.php'; |
46 | 46 | </div> |
47 | 47 | |
48 | 48 | <div class="about__section has-subtle-background-color is-feature"> |
49 | | <h2><?php _e( 'Freedoms' ); ?></h2> |
| 49 | <h1><?php _e( 'Freedoms' ); ?></h1> |
50 | 50 | |
51 | 51 | <p class="about-description"> |
52 | 52 | <?php |
diff --git a/src/wp-admin/privacy.php b/src/wp-admin/privacy.php
index 09248661bb..2ef4258e33 100644
a
|
b
|
require_once ABSPATH . 'wp-admin/admin-header.php'; |
19 | 19 | |
20 | 20 | <div class="about__header"> |
21 | 21 | <div class="about__header-title"> |
22 | | <h1> |
| 22 | <p> |
23 | 23 | <?php _e( 'WordPress' ); ?> |
24 | 24 | <span><?php echo $display_version; ?></span> |
25 | | </h1> |
| 25 | </p> |
26 | 26 | </div> |
27 | 27 | |
28 | 28 | <div class="about__header-text"> |
… |
… |
require_once ABSPATH . 'wp-admin/admin-header.php'; |
41 | 41 | |
42 | 42 | <div class="about__section"> |
43 | 43 | <div class="column"> |
44 | | <h2><?php _e( 'Privacy' ); ?></h2> |
| 44 | <h1><?php _e( 'Privacy' ); ?></h1> |
45 | 45 | |
46 | 46 | <p><?php _e( 'From time to time, your WordPress site may send data to WordPress.org — including, but not limited to — the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p> |
47 | 47 | |