WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
03/25/2025 03:14:48 PM (10 months ago)
Author:
ryelle
Message:

Help/About: Update the About page for 6.8.

Introducing the new content for the 6.8 About page. This release introduces a new header image, but otherwise only minor tweaks to the layout and colors.

See #63025.
Props michelleames, marybaum, jeffpaul, flixos90, krupajnanda, vgnavada, karmatosed, benjamin_zekavica, ryelle, peterwilsoncc, benniledl, audrasjb.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/about.css

    r59580 r60087  
    2222.about__container {
    2323    /* Section backgrounds */
    24     --background: #ededed;
    25     --subtle-background: #eef0fd;
     24    --background: #f6f5f2;
     25    --subtle-background: yellow;
    2626
    2727    /* Main text color */
    … …  
    4040    --nav-current: var(--accent-1);
    4141
    42     --border-radius: 16px;
     42    --border-radius: 0;
    4343
    4444    --gap: 2rem;
    … …  
    412412}
    413413
    414 .about__container :is(h1, h2, h3, h4):lang(en) {
     414.about__container :is(h1, h2, h3, h4, .about__header-text):lang(en) {
    415415    text-wrap: balance;
    416416}
    … …  
    427427.about__container p.is-subheading {
    428428    margin-top: 0;
     429    margin-bottom: 1rem;
    429430    font-size: 1.5rem;
    430431    font-weight: 300;
    … …  
    573574    box-sizing: border-box;
    574575    padding: calc(var(--gap) * 1.5);
     576    padding-right: 26rem; /* Space for the background image. */
    575577    min-height: clamp(10rem, 25vw, 18.75rem);
    576578    border-radius: var(--border-radius);
     579    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='412' height='198' fill='none'%3E%3Cpath stroke='%239D1825' stroke-width='12' d='M6 0v198'/%3E%3Cpath stroke='%23D90120' stroke-width='12' d='m30.171 1.82 51.246 191.253'/%3E%3Cpath stroke='%23408538' stroke-width='12' d='m62.427 7.626 87.895 177.422'/%3E%3Cpath stroke='%23FFEE58' stroke-width='12' d='M98.769 20.973 230.2 169.061'/%3E%3Cpath stroke='%23F17826' stroke-width='12' d='m152.67 36.891 161.59 114.424'/%3E%3Cpath stroke='%23fff' stroke-width='12' d='m246.433 66.098 190.42 54.264'/%3E%3C/svg%3E%0A");
    577580    background-repeat: no-repeat;
    578     background-position: right 7% center, top left;
     581    background-position: right center;
     582    background-size: auto 65%;
    579583    background-color: var(--background);
     584}
     585
     586[dir="rtl"] .about__header {
     587    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='412' height='198' fill='none'%3E%3Cg transform='scale(-1,1)' transform-origin='50%25 50%25'%3E%3Cpath stroke='%239D1825' stroke-width='12' d='M6 0v198'/%3E%3Cpath stroke='%23D90120' stroke-width='12' d='m30.171 1.82 51.246 191.253'/%3E%3Cpath stroke='%23408538' stroke-width='12' d='m62.427 7.626 87.895 177.422'/%3E%3Cpath stroke='%23FFEE58' stroke-width='12' d='M98.769 20.973 230.2 169.061'/%3E%3Cpath stroke='%23F17826' stroke-width='12' d='m152.67 36.891 161.59 114.424'/%3E%3Cpath stroke='%23fff' stroke-width='12' d='m246.433 66.098 190.42 54.264'/%3E%3C/g%3E%3C/svg%3E%0A");
    580588}
    581589
    … …  
    668676
    669677@media screen and (max-width: 960px) {
     678    .about__header {
     679        padding-right: 21rem;
     680    }
    670681
    671682    .about-php .about__header-title h1,
    … …  
    694705    .about__header {
    695706        padding: var(--gap);
     707        padding-right: 17rem;
    696708    }
    697709
    … …  
    710722    .about__header {
    711723        min-height: auto;
     724        padding-right: var(--gap);
    712725    }
    713726
Note: See TracChangeset for help on using the changeset viewer.