WordPress.org
Get WordPress

Make WordPress Core

Changeset 49640


Ignore:
Timestamp:
11/17/2020 09:32:16 PM (6 years ago)
Author:
ryelle
Message:

Help/About: WordPress 5.6 About Page.

This change introduces the new About page for WordPress 5.6.

Props elmastudio, ryelle, melchoyce, karmatosed, webcommsat, marybaum, meher, OGlekler, lmurillom, vimes1984, sabrinazeidan, nalininonstopnewsuk, afshanadiya, michelleames, bmcdede, yvettesonneveld, sarahricker, isabel_brison, helen, hellofromtonya, poena, chanthaboune, cbringmann, joedolson, sabernhardt, garrett-eclipse, audrasjb, marks99.
See #51415.

Location:
trunk/src/wp-admin
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r49539 r49640  
    2020
    2121                <div class="about__header">
    22                         <div class="about__header-text">
    23                                 <?php _e( 'Speed. Search. Security.' ); ?>
    24                         </div>
    25 
    26                         <div class="about__header-title">
    27                                 <p>
    28                                         <?php _e( 'WordPress' ); ?>
    29                                         <span><?php echo $display_version; ?></span>
    30                                 </p>
     22                        <div class="about__header-image">
     23                                <picture>
     24                                        <source media="(max-width: 782px)" srcset="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205 109" width="205"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-rule="nonzero" d="M65.901 108.433c2.546-5.254 4.927-9.195 7.143-11.822H1.246v-5.173h71.798c-2.216-2.627-4.597-6.568-7.143-11.822h4.31c5.173 5.993 10.592 10.427 16.257 13.3v2.217c-5.665 2.791-11.084 7.225-16.256 13.3h-4.31z"/><path fill="#000" fill-rule="nonzero" d="M29.345 26.834c-.129 1.365-.633 2.432-1.512 3.2-.879.76-2.048 1.142-3.507 1.142-1.02 0-1.919-.24-2.698-.72-.773-.487-1.371-1.176-1.793-2.066-.422-.891-.641-1.925-.659-3.103v-1.195c0-1.207.214-2.27.642-3.19.427-.92 1.04-1.63 1.836-2.128.803-.498 1.729-.747 2.778-.747 1.412 0 2.549.384 3.41 1.152.861.767 1.362 1.851 1.503 3.252H27.13c-.105-.92-.375-1.582-.809-1.987-.427-.41-1.057-.615-1.89-.615-.966 0-1.71.355-2.232 1.064-.515.703-.779 1.737-.79 3.102v1.134c0 1.383.245 2.437.738 3.164.498.727 1.224 1.09 2.18 1.09.872 0 1.529-.197 1.968-.59.44-.392.718-1.045.835-1.959h2.215zm14.008-1.898c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.803.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.07-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.808.498 1.432 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.27-2.505-.808-3.261-.534-.756-1.292-1.134-2.277-1.134-.96 0-1.714.378-2.258 1.134-.54.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.55.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.267-1.125.534-.75.8-1.846.8-3.287v-.668zM47.368 31V18.203h3.78c1.13 0 2.132.252 3.005.756a5.146 5.146 0 012.039 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.243 2.28-.729 3.199a5.057 5.057 0 01-2.065 2.127c-.89.498-1.913.747-3.068.747h-3.682zm2.223-11.004v9.229h1.45c1.167 0 2.06-.364 2.681-1.09.627-.733.947-1.782.958-3.147v-.712c0-1.388-.302-2.449-.905-3.181-.604-.733-1.48-1.099-2.628-1.099h-1.556zm18.816 5.291h-5.256v3.938h6.144V31h-8.368V18.203h8.306v1.793h-6.082v3.533h5.256v1.758zM81.534 31H79.32V18.203h2.215V31zm11.222-3.296c0-.562-.199-.996-.597-1.3-.393-.305-1.105-.613-2.136-.924-1.031-.31-1.852-.656-2.461-1.037-1.166-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.258-2.549.843-.668 1.936-1.002 3.278-1.002.89 0 1.685.164 2.382.492a3.898 3.898 0 011.643 1.407c.399.603.598 1.274.598 2.013h-2.215c0-.669-.21-1.19-.633-1.565-.416-.38-1.013-.571-1.793-.571-.726 0-1.292.155-1.696.466-.398.31-.598.744-.598 1.3 0 .47.217.862.65 1.178.434.31 1.15.615 2.145.914.996.293 1.796.63 2.4 1.01.603.376 1.046.81 1.327 1.302.281.486.422 1.057.422 1.713 0 1.067-.41 1.916-1.23 2.55-.815.626-1.923.94-3.323.94-.926 0-1.778-.17-2.558-.51-.773-.346-1.376-.82-1.81-1.424-.428-.603-.642-1.306-.642-2.11h2.224c0 .727.24 1.29.72 1.688.481.399 1.17.598 2.066.598.774 0 1.354-.155 1.74-.466.393-.316.59-.732.59-1.248zm14.481-1.459V31h-2.224V18.203h4.896c1.43 0 2.563.372 3.401 1.116.844.745 1.266 1.729 1.266 2.954 0 1.253-.413 2.229-1.239 2.926-.821.697-1.972 1.046-3.454 1.046h-2.646zm0-1.784h2.672c.791 0 1.395-.185 1.811-.554.416-.375.624-.914.624-1.617 0-.691-.211-1.242-.633-1.652-.422-.416-1.002-.63-1.74-.642h-2.734v4.465zm21.303.475c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.802.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.069-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.809.498 1.433 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.269-2.505-.808-3.261-.533-.756-1.292-1.134-2.277-1.134-.96 0-1.713.378-2.258 1.134-.539.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.551.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.268-1.125.533-.75.799-1.846.799-3.287v-.668zm13.718 1.02h-5.255v3.937h6.143V31h-8.367V18.203h8.306v1.793h-6.082v3.533h5.255v1.758zm13.92-5.292h-3.99V31h-2.206V19.996h-3.955v-1.793h10.151v1.793zm8.19 6.073h-2.478V31h-2.224V18.203h4.5c1.477 0 2.616.331 3.419.993.803.662 1.204 1.62 1.204 2.874 0 .856-.208 1.574-.624 2.154-.41.574-.984 1.016-1.723 1.327l2.874 5.335V31h-2.381l-2.567-4.93zm-2.478-1.784h2.285c.75 0 1.336-.187 1.758-.562.421-.381.632-.9.632-1.556 0-.686-.196-1.216-.588-1.59-.387-.376-.967-.57-1.741-.58h-2.346v4.288zm14.561-.017l2.945-6.065h2.461l-4.289 8.086V31h-2.233v-4.71l-4.298-8.087h2.47l2.944 6.065z"/><path stroke="#000" stroke-width="2" d="M2 1h201v46H2z"/></g></svg>' ); ?>" />
     25                                        <img alt="<?php _e( 'Code is Poetry' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1210 48"><path fill="#000" d="M65.875 39.875c2.583-5.333 5-9.333 7.25-12H.25v-5.25h72.875c-2.25-2.667-4.667-6.667-7.25-12h4.375c5.25 6.083 10.75 10.583 16.5 13.5v2.25c-5.75 2.833-11.25 7.333-16.5 13.5h-4.375zM1035.34 26.834c-.12 1.365-.63 2.432-1.51 3.2-.88.76-2.04 1.142-3.5 1.142-1.02 0-1.92-.24-2.7-.72-.78-.487-1.37-1.176-1.79-2.066-.43-.891-.65-1.925-.66-3.103v-1.195c0-1.207.21-2.27.64-3.19.43-.92 1.04-1.63 1.83-2.128.81-.498 1.73-.747 2.78-.747 1.41 0 2.55.384 3.41 1.152.86.767 1.36 1.851 1.5 3.252h-2.21c-.11-.92-.37-1.582-.81-1.987-.43-.41-1.06-.615-1.89-.615-.96 0-1.71.355-2.23 1.064-.52.703-.78 1.737-.79 3.102v1.134c0 1.383.24 2.437.74 3.164.49.727 1.22 1.09 2.18 1.09.87 0 1.53-.197 1.97-.59.43-.392.71-1.045.83-1.959h2.21zm14.01-1.898c0 1.253-.21 2.355-.65 3.304-.43.944-1.05 1.67-1.86 2.18-.8.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.8-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.66-3.243v-.72c0-1.249.22-2.35.65-3.306.45-.955 1.07-1.684 1.88-2.188.81-.51 1.73-.765 2.77-.765 1.05 0 1.97.252 2.77.756.81.498 1.44 1.219 1.87 2.162.44.938.67 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.53-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.25 1.134-.54.75-.82 1.813-.83 3.19v.739c0 1.406.27 2.493.82 3.26.55.768 1.31 1.152 2.28 1.152.99 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm6.24 6.732V18.203h3.78c1.13 0 2.13.252 3 .756a5.138 5.138 0 012.04 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.24 2.28-.73 3.199a5.08 5.08 0 01-2.06 2.127c-.89.498-1.92.747-3.07.747h-3.68zm2.22-11.004v9.229h1.45c1.17 0 2.06-.364 2.68-1.09.63-.733.95-1.782.96-3.147v-.712c0-1.388-.3-2.449-.9-3.181-.61-.733-1.48-1.099-2.63-1.099h-1.56zm18.82 5.291h-5.26v3.938h6.14V31h-8.36V18.203h8.3v1.793h-6.08v3.533h5.26v1.758zM1087.53 31h-2.21V18.203h2.21V31zm11.23-3.296c0-.562-.2-.996-.6-1.3-.39-.305-1.11-.613-2.14-.924-1.03-.31-1.85-.656-2.46-1.037-1.16-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.26-2.549.84-.668 1.94-1.002 3.28-1.002.89 0 1.68.164 2.38.492.7.329 1.25.797 1.64 1.407.4.603.6 1.274.6 2.013h-2.21c0-.669-.21-1.19-.64-1.565-.41-.38-1.01-.571-1.79-.571-.73 0-1.29.155-1.7.466-.39.31-.59.744-.59 1.3 0 .47.21.862.65 1.178.43.31 1.15.615 2.14.914 1 .293 1.8.63 2.4 1.01.6.376 1.05.81 1.33 1.302.28.486.42 1.057.42 1.713 0 1.067-.41 1.916-1.23 2.55-.82.626-1.92.94-3.32.94-.93 0-1.78-.17-2.56-.51-.77-.346-1.38-.82-1.81-1.424-.43-.603-.64-1.306-.64-2.11h2.22c0 .727.24 1.29.72 1.688.48.399 1.17.598 2.07.598.77 0 1.35-.155 1.74-.466.39-.316.59-.732.59-1.248zm14.48-1.459V31h-2.23V18.203h4.9c1.43 0 2.56.372 3.4 1.116.84.745 1.27 1.729 1.27 2.954 0 1.253-.42 2.229-1.24 2.926-.82.697-1.97 1.046-3.46 1.046h-2.64zm0-1.784h2.67c.79 0 1.39-.185 1.81-.554.42-.375.62-.914.62-1.617 0-.691-.21-1.242-.63-1.652-.42-.416-1-.63-1.74-.642h-2.73v4.465zm21.3.475c0 1.253-.22 2.355-.65 3.304-.43.944-1.06 1.67-1.86 2.18-.81.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.81-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.67-3.243v-.72c0-1.249.22-2.35.66-3.306.45-.955 1.07-1.684 1.87-2.188.81-.51 1.74-.765 2.78-.765 1.04 0 1.97.252 2.77.756.81.498 1.43 1.219 1.87 2.162.44.938.66 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.54-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.26 1.134-.54.75-.81 1.813-.82 3.19v.739c0 1.406.27 2.493.81 3.26.55.768 1.32 1.152 2.29 1.152.98 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm13.71 1.02h-5.25v3.937h6.14V31h-8.37V18.203h8.31v1.793h-6.08v3.533h5.25v1.758zm13.92-5.292h-3.99V31h-2.2V19.996h-3.96v-1.793h10.15v1.793zm8.19 6.073h-2.47V31h-2.23V18.203h4.5c1.48 0 2.62.331 3.42.993.8.662 1.21 1.62 1.21 2.874 0 .856-.21 1.574-.63 2.154-.41.574-.98 1.016-1.72 1.327l2.87 5.335V31h-2.38l-2.57-4.93zm-2.47-1.784h2.28c.75 0 1.34-.187 1.76-.562.42-.381.63-.9.63-1.556 0-.686-.19-1.216-.59-1.59-.38-.376-.96-.57-1.74-.58h-2.34v4.288zm14.56-.017l2.94-6.065h2.46l-4.29 8.086V31h-2.23v-4.71l-4.3-8.087h2.47l2.95 6.065z"/><path stroke="#000" stroke-width="2" d="M1008 1h201v46h-201z"/></svg>' ); ?>" />
     26                                </picture>
     27                        </div>
     28
     29                        <div class="about__header-container">
     30                                <div class="about__header-title">
     31                                        <p>
     32                                                <?php _e( 'WordPress' ); ?>
     33                                                <?php echo $display_version; ?>
     34                                        </p>
     35                                </div>
     36
     37                                <div class="about__header-text">
     38                                        <?php _e( 'Sharing your stories has never been easier' ); ?>
     39                                </div>
     40                                <div class="about__header-badge">
     41                                        <img alt="<?php _e( 'New' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 153 153" width="115"><circle cx="76.5" cy="76.5" r="76.5" fill="#000"/><path fill="#D1CFE4" d="M53.333 86h-2.827L39.769 69.564V86H36.94V64.672h2.828L50.535 81.18V64.67h2.798V86zm26.05-9.858h-9.242V83.7h10.737V86h-13.55V64.672h13.403v2.314h-10.59v6.856h9.243v2.3zm18.596 3.134l.41 2.813.6-2.534 4.219-14.883h2.373l4.116 14.883.586 2.578.454-2.871 3.311-14.59h2.827L111.704 86h-2.563l-4.395-15.542-.337-1.626-.337 1.626L99.517 86h-2.564l-5.156-21.328h2.812l3.37 14.604z"/></svg>' ); ?>" />
     42                                </div>
    3143                        </div>
    3244
    … …  
    3951                </div>
    4052
    41                 <div class="about__section is-feature has-subtle-background-color">
    42                         <h1>
     53                <div class="about__section is-feature">
     54                        <h1 class="aligncenter">
    4355                                <?php
    4456                                printf(
    … …  
    5365                                printf(
    5466                                        /* translators: %s: The current WordPress version number. */
    55                                         __( 'In WordPress %s, your site gets new power in three major areas: speed, search, and security.' ),
     67                                        __( 'WordPress %s brings you countless ways to set your ideas free and bring them to life. With a brand-new default theme as your canvas, it supports an ever-growing collection of blocks as your brushes. Paint with words. Pictures. Sound. Or rich embedded media.' ),
    5668                                        $display_version
    5769                                );
    … …  
    6072                </div>
    6173
    62                 <hr />
     74                <div class="has-background-image" style="background-image: url('data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1035 884"><circle cx="503" cy="434" r="310" fill="#E3DAD1"/><circle cx="831" cy="204" r="204" fill="#D1CFE4"/><circle cx="113.5" cy="770.5" r="113.5" fill="#D1DEE4"/></svg>' ); ?>');">
     75                        <div class="about__section has-2-columns is-wider-left has-transparent-background-color">
     76                                <div class="column">
     77                                        <h2><?php _e( 'Greater layout flexibility' ); ?></h2>
     78                                        <p><?php _e( 'Bring your stories to life with more tools that let you edit your layout with or without code. Single column blocks, designs using mixed widths and columns, full-width headers, and videos in your cover block—make small changes or big statements with equal ease!' ); ?></p>
     79                                </div>
     80                        </div>
     81                        <div class="about__section has-2-columns is-wider-right has-transparent-background-color">
     82                                <div class="column"><!-- space for alignment. --></div>
     83                                <div class="column">
     84                                        <h2><?php _e( 'More block patterns' ); ?></h2>
     85                                        <p><?php _e( 'In select themes, preconfigured block patterns make setting up standard pages on your site a breeze. Find the power of patterns to streamline your workflow, or share some of that power with your clients and save yourself a few clicks.' ); ?></p>
     86                                </div>
     87                        </div>
     88                        <div class="about__section has-2-columns is-wider-left has-transparent-background-color">
     89                                <div class="column">
     90                                        <h2><?php _e( 'Caption videos—right in the block editor' ); ?></h2>
     91                                        <p><?php _e( 'Adding captions to your videos has landed in the block editor, with special attention to accessibility. Whether you’re navigating with a keyboard or a mouse, whether or not you use a screen reader, captions are easier to include than ever.' ); ?></p>
     92                                </div>
     93                        </div>
     94                </div>
     95
     96                <hr class="is-large" />
    6397
    6498                <div class="about__section has-1-column">
    65                         <div class="column">
    66                                 <h2><?php _e( 'Speed' ); ?></h2>
    67                                 <p><strong><?php _e( 'Posts and pages feel faster, thanks to lazy-loaded images.' ); ?></strong></p>
    68                                 <p><?php _e( 'Images give your story a lot of impact, but they can sometimes make your site seem slow.' ); ?></p>
    69                                 <p><?php _e( 'In WordPress 5.5, images wait to load until they’re just about to scroll into view. The technical term is ‘lazy loading’.' ); ?></p>
    70                                 <p><?php _e( 'On mobile, lazy loading can also keep browsers from loading files meant for other devices. That can save your readers money on data — and help preserve battery life.' ); ?></p>
    71                         </div>
    72                 </div>
    73 
    74                 <div class="about__section has-1-column">
    75                         <div class="column">
    76                                 <h2><?php _ex( 'Search', 'sitemap' ); ?></h2>
    77                                 <p><strong><?php _e( 'Say hello to your new sitemap.' ); ?></strong></p>
    78                                 <p><?php _e( 'WordPress sites work well with search engines.' ); ?></p>
    79                                 <p><?php _e( 'Now, by default, WordPress 5.5 includes an XML sitemap that helps search engines discover your most important pages from the very minute you go live.' ); ?></p>
    80                                 <p><?php _e( 'So more people will find your site sooner, giving you more time to engage, retain and convert them to subscribers, customers or whatever fits your definition of success.' ); ?></p>
    81                         </div>
    82                 </div>
    83 
    84                 <hr />
    85 
    86                 <div class="about__section has-2-columns has-accent-background-color is-wider-right">
    87                         <div class="column">
    88                                 <h2><?php _e( 'Security' ); ?></h2>
    89                                 <p><strong><?php _e( 'Auto-updates for Plugins and Themes' ); ?></strong></p>
    90                                 <p><?php _e( 'Now you can set plugins and themes to update automatically — or not! — in the WordPress admin. So you always know your site is running the latest code available.' ); ?></p>
    91                                 <p><?php _e( 'You can also turn auto-updates on or off for each plugin or theme you have installed — all on the same screens you’ve always used.' ); ?></p>
    92                                 <p><strong><?php _e( 'Update by uploading ZIP files' ); ?></strong></p>
    93                                 <p><?php _e( 'If updating plugins and themes manually is your thing, now that’s easier too — just upload a ZIP file.' ); ?></p>
    94                         </div>
    95                         <div class="column about__image is-vertically-aligned-center">
    96                                 <figure aria-labelledby="about-security" class="about__image">
    97                                         <video controls poster="https://s.w.org/images/core/5.5/auto-updates-poster.png">
    98                                                 <source src="https://s.w.org/images/core/5.5/auto-updates.mp4" type="video/mp4" />
    99                                                 <source src="https://s.w.org/images/core/5.5/auto-updates.webm" type="video/webm" />
    100                                         </video>
    101                                         <figcaption id="about-security" class="screen-reader-text"><?php _e( 'Video: Installed plugin screen, which shows a new column, Automatic Updates. In this column are buttons that say "Enable auto-updates". When clicked, the auto-updates feature is turned on for that plugin, and the button switches to say "Disable auto-updates".' ); ?></figcaption>
    102                                 </figure>
    103                         </div>
    104                 </div>
    105 
    106                 <hr />
    107 
    108                 <div class="about__section has-subtle-background-color">
    109                         <div class="column">
    110                                 <h2><?php _e( 'Highlights from the block editor' ); ?></h2>
    111                                 <p><?php _e( 'Once again, the latest WordPress release packs a long list of exciting new features for the block editor. For example:' ); ?></p>
    112                         </div>
    113                 </div>
    114                 <div class="about__section has-2-columns has-subtle-background-color">
    115                         <div class="column about__image is-vertically-aligned-center">
    116                                 <figure aria-labelledby="about-block-pattern" class="about__image">
    117                                         <video controls poster="https://s.w.org/images/core/5.5/block-patterns-poster.png">
    118                                                 <source src="https://s.w.org/images/core/5.5/block-patterns.mp4" type="video/mp4" />
    119                                                 <source src="https://s.w.org/images/core/5.5/block-patterns.webm" type="video/webm" />
    120                                         </video>
    121                                         <figcaption id="about-block-pattern" class="screen-reader-text"><?php _e( 'Video: In the editor, the block inserter shows two tabs, Blocks and Patterns. The Patterns tab is selected. There are different block layouts in this tab. After scrolling through options including buttons and columns, a pattern called "Large header with a heading" is chosen. This adds a cover block, which is customized with a photo and the name of the WordPress 5.5 jazz musician.' ); ?></figcaption>
    122                                 </figure>
    123                                 <hr />
    124                                 <figure aria-labelledby="about-image-editor" class="about__image">
    125                                         <video controls poster="https://s.w.org/images/core/5.5/inline-image-editing-poster.png">
    126                                                 <source src="https://s.w.org/images/core/5.5/inline-image-editing.mp4" type="video/mp4" />
    127                                                 <source src="https://s.w.org/images/core/5.5/inline-image-editing-1.webm" type="video/webm" />
    128                                         </video>
    129                                         <figcaption id="about-image-editor" class="screen-reader-text"><?php _e( 'Video: An image is added with an image block. In the block toolbar, an icon called "Crop" is selected, which changes the toolbar to show image resizing tools. First, zoom is used to zoom into the center of the image. Next, aspect ratio is clicked. This shows a dropdown of common aspect ratios. Square is chosen, and the image is moved within the new square outline. The crop is completed by clicking "Apply."' ); ?></figcaption>
    130                                 </figure>
    131                         </div>
    132                         <div class="column">
    133                                 <h3><?php _e( 'Block patterns' ); ?></h3>
    134                                 <p><?php _e( 'New block patterns make it simple and fun to create complex, beautiful layouts, using combinations of text and media that you can mix and match to fit your story.' ); ?></p>
    135                                 <p><?php _e( 'You will also find block patterns in a wide variety of plugins and themes, with more added all the time. Pick any of them from a single place — just click and go!' ); ?></p>
    136                                 <h3><?php _e( 'Inline image editing' ); ?></h3>
    137                                 <p><?php _e( 'Crop, rotate, and zoom your photos right from the image block. If you spend a lot of time on images, this could save you hours!' ); ?></p>
    138 
    139                                 <h3><?php _e( 'The New Block Directory' ); ?></h3>
    140                                 <p><?php _e( 'Now it’s easier than ever to find the block you need. The new block directory is built right into the block editor, so you can install new block types to your site without ever leaving the editor.' ); ?></p>
    141 
    142                                 <h3><?php _e( 'And so much more.' ); ?></h3>
    143                                 <p><?php _e( 'The highlights above are a tiny fraction of the new block editor features you’ve just installed. Open the block editor and enjoy!' ); ?></p>
    144                         </div>
    145                 </div>
    146 
    147                 <hr />
    148 
    149                 <div class="about__section has-1-column">
    150                         <div class="column">
    151                                 <h2><?php _e( 'Accessibility' ); ?></h2>
    152                                 <p><?php _e( 'Every release adds improvements to the accessible publishing experience, and that remains true for WordPress 5.5.' ); ?></p>
    153                                 <p><?php _e( 'Now you can copy links in media screens and modal dialogs with a button, instead of trying to highlight a line of text.' ); ?></p>
    154                                 <p><?php _e( 'You can also move meta boxes with the keyboard, and edit images in WordPress with your assistive device, as it can read you the instructions in the image editor.' ); ?></p>
    155                         </div>
    156                 </div>
    157 
    158                 <hr />
    159 
    160                 <div class="about__section has-subtle-background-color has-2-columns">
    161                         <header class="is-section-header">
    162                                 <h2><?php _e( 'For developers' ); ?></h2>
    163                                 <p><?php _e( '5.5 also brings a big box of changes just for developers.' ); ?></p>
     99                        <h2><?php _e( 'Twenty Twenty-One is here!' ); ?></h2>
     100                        <p>
     101                                <?php
     102                                _e( 'Twenty Twenty-One is a blank canvas for your ideas, and the block editor is the best brush. It is built for the block editor and packed with brand-new block patterns you can only get in the default themes. Try different layouts in a matter of seconds, and let the theme’s eye-catching, yet timeless design make your work shine.' );
     103                                ?>
     104                        </p>
     105                </div>
     106
     107                <hr />
     108
     109                <div class="about__section">
     110                        <div class="column about__image is-edge-to-edge">
     111                                <img src="https://make.wordpress.org/core/files/2020/11/TT1-Screenshots-Compressed.jpg" alt="" />
     112                        </div>
     113                </div>
     114
     115                <hr />
     116
     117                <div class="about__section has-overlap-style">
     118                        <div class="column is-vertically-aligned-center is-top-layer">
     119                                <p>
     120                                        <?php
     121                                        printf(
     122                                                /* translators: %s: WCAG information link. */
     123                                                __( 'What’s more, this default theme puts accessibility at the heart of your website. It conforms to <a href="%s">Web Content Accessibility Guidelines (WCAG) 2.1</a> at Level AAA right out of the box, so you can meet the highest level of international accessibility standards. Just add the necessary elements to your plugins, pictures, and other content, and you’re ready to go!' ),
     124                                                'https://www.w3.org/WAI/WCAG2AAA-Conformance'
     125                                        );
     126                                        ?>
     127                                </p>
     128                        </div>
     129                        <div class="column about__image aligncenter is-edge-to-edge">
     130                                <img src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 440 291"><circle cx="294.5" cy="145.5" r="145.5" fill="#E5D1D1"/><circle cx="106.5" cy="106.5" r="106.5" fill="#EEEADD"/></svg>' ); ?>" style="max-width:25em" alt="" />
     131                        </div>
     132                </div>
     133
     134                <hr />
     135
     136                <div class="about__section has-2-columns">
     137                        <div class="column is-vertically-aligned-center">
     138                                <h3 class="is-larger-heading"><?php _e( 'A rainbow of soft pastels' ); ?></h3>
     139                        </div>
     140                        <div class="column">
     141                                <p><?php _e( 'Perfect for a new year, Twenty Twenty-One gives you a range of pre-selected color palettes in pastel, all of which meet AAA standards for contrast. You can also choose your own background color for the theme, and the theme chooses accessibility-conscious text colors for you — automatically!' ); ?></p>
     142                                <p><?php _e( 'Need more flexibility than that? You can also choose your own color palette from the color picker.' ); ?></p>
     143                        </div>
     144                </div>
     145
     146                <div class="about__section">
     147                        <div class="column about__image is-edge-to-edge">
     148                                <img src="https://make.wordpress.org/core/files/2020/11/Rainbow-Compressed.png" alt="" />
     149                        </div>
     150                </div>
     151
     152                <hr />
     153                <hr class="is-large" />
     154
     155                <div class="about__section">
     156                        <header class="column is-edge-to-edge">
     157                                <h2><?php _e( 'Improvements for everyone' ); ?></h2>
    164158                        </header>
    165                         <div class="column">
    166                                 <h3><?php _e( 'Server-side registered blocks in the REST API' ); ?></h3>
    167                                 <p><?php _e( 'The addition of block types endpoints means that JavaScript apps (like the block editor) can retrieve definitions for any blocks registered on the server.' ); ?></p>
    168                         </div>
    169                         <div class="column">
    170                                 <h3><?php _e( 'Dashicons' ); ?></h3>
    171                                 <p><?php _e( 'The Dashicons library has received its final update in 5.5. It adds 39 block editor icons along with 26 others.' ); ?></p>
    172                         </div>
    173                 </div>
    174 
    175                 <div class="about__section has-subtle-background-color has-2-columns">
    176                         <div class="column">
    177                                 <h3><?php _e( 'Defining environments' ); ?></h3>
    178                                 <p>
    179                                         <?php
    180                                         printf(
    181                                                 /* translators: %s: 'wp_get_environment_type' function name. */
    182                                                 __( 'WordPress now has a standardized way to define a site’s environment type (staging, production, etc). Retrieve that type with %s and execute only the appropriate code.' ),
    183                                                 '<code>wp_get_environment_type()</code>'
    184                                         );
    185                                         ?>
    186                                 </p>
    187                         </div>
    188                         <div class="column">
    189                                 <h3><?php _e( 'Passing data to template files' ); ?></h3>
    190                                 <p>
    191                                         <?php
    192                                         printf(
    193                                                 /* translators: %1$s: 'get_header' function name, %2$s: 'get_template_part' function name, %3$s: '$args' variable name. */
    194                                                 __( 'The template loading functions (%1$s, %2$s, etc.) have a new %3$s argument. So now you can pass an entire array’s worth of data to those templates.' ),
    195                                                 '<code>get_header()</code>',
    196                                                 '<code>get_template_part()</code>',
    197                                                 '<code>$args</code>'
    198                                         );
    199                                         ?>
    200                                 </p>
    201                         </div>
    202                 </div>
    203 
    204                 <div class="about__section has-subtle-background-color">
    205                         <div class="column">
    206                                 <h3><?php _e( 'More changes for developers' ); ?></h3>
    207                                 <ul>
    208                                         <li><?php _e( 'The PHPMailer library just got a major update, going from version 5.2.27 to 6.1.6.' ); ?></li>
    209                                         <li>
    210                                                 <?php
    211                                                 printf(
    212                                                         /* translators: %s: 'redirect_guess_404_permalink' function name. */
    213                                                         __( 'Now get more fine-grained control of %s.' ),
    214                                                         '<code>redirect_guess_404_permalink()</code>'
    215                                                 );
    216                                                 ?>
    217                                         </li>
    218                                         <li>
    219                                                 <?php
    220                                                 printf(
    221                                                         /* translators: %s: 'wp_opcache_invalidate' function name. */
    222                                                         __( 'Sites that use PHP’s OPcache will see more reliable cache invalidation, thanks to the new %s function during updates (including to plugins and themes).' ),
    223                                                         '<code>wp_opcache_invalidate()</code>'
    224                                                 );
    225                                                 ?>
    226                                         </li>
    227                                         <li><?php _e( 'Custom post types associated with the category taxonomy can now opt-in to supporting the default term.' ); ?></li>
    228                                         <li>
    229                                                 <?php
    230                                                 printf(
    231                                                         /* translators: %s: 'register_taxonomy' function name. */
    232                                                         __( 'Default terms can now be specified for custom taxonomies in %s.' ),
    233                                                         '<code>register_taxonomy()</code>'
    234                                                 );
    235                                                 ?>
    236                                         </li>
    237                                         <li>
    238                                                 <?php
    239                                                 printf(
    240                                                         /* translators: %s: 'register_meta' function name. */
    241                                                         __( 'The REST API now officially supports specifying default metadata values through %s.' ),
    242                                                         '<code>register_meta()</code>'
    243                                                 );
    244                                                 ?>
    245                                         </li>
    246                                         <li><?php _e( 'You will find updated versions of these bundled libraries: SimplePie, Twemoji, Masonry, imagesLoaded, getID3, Moment.js, and clipboard.js.' ); ?></li>
    247                                 </ul>
     159                </div>
     160
     161                <div class="about__section has-3-columns has-gutters">
     162                        <div class="column has-border" style="background-color:#eeeadd;background-color:var(--global--color-yellow)">
     163                                <h3><?php _e( 'Expanding auto-updates' ); ?></h3>
     164                                <p><?php _e( 'For years, only developers have been able to update WordPress automatically. But now, you have that option, right in your dashboard. If this is your first site, you have auto-updates ready to go, right now! Upgrading an existing site? No problem! Everything is the same as it was before.' ); ?></p>
     165                        </div>
     166                        <div class="column has-border" style="background-color:#e4d1d1;background-color:var(--global--color-red)">
     167                                <h3><?php _e( 'Accessibility statement template' ); ?></h3>
     168                                <p><?php _e( 'Even if you’re not an expert, you can start letting folks know about your site’s commitment to accessibility at the click of a button! The new <a href="%s">feature plugin</a> includes template copy for you to update and publish, and it’s written to support different contexts and jurisdictions.', '#' ); ?></p>
     169                        </div>
     170                        <div class="column has-border" style="background-color:#d1d1e4;background-color:var(--global--color-purple)">
     171                                <h3><?php _e( 'Built-in patterns' ); ?></h3>
     172                                <p><?php _e( 'If you’ve not had the chance to play with block patterns yet, all default themes now feature a range of block patterns that let you master complex layouts with minimal effort. Customize the patterns to your liking with the copy, images and colors that fit your story or brand.' ); ?></p>
     173                        </div>
     174                </div>
     175
     176                <hr />
     177
     178                <div class="about__section has-2-columns">
     179                        <h2 class="is-section-header"><?php _e( 'For developers' ); ?></h2>
     180                        <div class="column">
     181                                <h3><?php _e( 'REST API authentication with Application Passwords' ); ?></h3>
     182                                <p><?php _e( 'Thanks to the API’s new Application Passwords authorization feature, third-party apps can connect to your site seamlessly and securely. This new REST API feature lets you see what apps are connecting to your site and control what they do.' ); ?></p>
     183                        </div>
     184                        <div class="column">
     185                                <h3><?php _e( 'More PHP 8 support' ); ?></h3>
     186                                <p><?php _e( '5.6 marks the first steps toward WordPress Core support for PHP 8. Now is a great time to start planning how your WordPress products, services and sites can support the latest PHP version. For more information about what to expect next, [link text].' ); ?></p>
     187                        </div>
     188                </div>
     189                <div class="about__section">
     190                        <div class="column">
     191                                <h3><?php _e( 'jQuery' ); ?></h3>
     192                                <p>
     193                                        <?php
     194                                        printf(
     195                                                /* translators: %s: jQuery update test plugin link. */
     196                                                __( 'Updates to jQuery in WordPress take place across three releases: 5.5, 5.6, and 5.7. As we reach the mid-point of this process, run the <a href="%s">update test plugin</a> to check your sites for errors ahead of time.' ),
     197                                                'https://wordpress.org/plugins/wp-jquery-update-test/'
     198                                        );
     199                                        ?>
     200                                </p>
     201                                <p>
     202                                        <?php
     203                                        printf(
     204                                                /* translators: %s: jQuery migrate plugin link. */
     205                                                __( 'If you find issues with the way your site looks (e.g. a slider doesn’t work, a button is stuck — that sort of thing), install the <a href="%s">jQuery Migrate plugin.</a>' ),
     206                                                'https://wordpress.org/plugins/enable-jquery-migrate-helper/ '
     207                                        );
     208                                        ?>
     209                                </p>
    248210                        </div>
    249211                </div>
    … …  
    257219                                        <?php
    258220                                        printf(
    259                                                 /* translators: %s: WordPress 5.5 Field Guide link. */
    260                                                 __( 'There’s a lot more for developers to love in WordPress 5.5. To discover more and learn how to make these changes shine on your sites, themes, plugins and more, check the <a href="%s">WordPress 5.5 Field Guide.</a>' ),
    261                                                 'https://make.wordpress.org/core/wordpress-5-5-field-guide/'
     221                                                /* translators: %s: WordPress 5.6 Field Guide link. */
     222                                                __( 'Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of. <a href="%s">WordPress 5.6 Field Guide.</a>' ),
     223                                                '#'
    262224                                        );
    263225                                        ?>

  • trunk/src/wp-admin/credits.php

    r48730 r49640  
    2222
    2323        <div class="about__header">
    24                 <div class="about__header-text">
    25                         <?php _e( 'Speed. Search. Security.' ); ?>
     24                <div class="about__header-image">
     25                        <picture>
     26                                <source media="(max-width: 782px)" srcset="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205 109" width="205"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-rule="nonzero" d="M65.901 108.433c2.546-5.254 4.927-9.195 7.143-11.822H1.246v-5.173h71.798c-2.216-2.627-4.597-6.568-7.143-11.822h4.31c5.173 5.993 10.592 10.427 16.257 13.3v2.217c-5.665 2.791-11.084 7.225-16.256 13.3h-4.31z"/><path fill="#000" fill-rule="nonzero" d="M29.345 26.834c-.129 1.365-.633 2.432-1.512 3.2-.879.76-2.048 1.142-3.507 1.142-1.02 0-1.919-.24-2.698-.72-.773-.487-1.371-1.176-1.793-2.066-.422-.891-.641-1.925-.659-3.103v-1.195c0-1.207.214-2.27.642-3.19.427-.92 1.04-1.63 1.836-2.128.803-.498 1.729-.747 2.778-.747 1.412 0 2.549.384 3.41 1.152.861.767 1.362 1.851 1.503 3.252H27.13c-.105-.92-.375-1.582-.809-1.987-.427-.41-1.057-.615-1.89-.615-.966 0-1.71.355-2.232 1.064-.515.703-.779 1.737-.79 3.102v1.134c0 1.383.245 2.437.738 3.164.498.727 1.224 1.09 2.18 1.09.872 0 1.529-.197 1.968-.59.44-.392.718-1.045.835-1.959h2.215zm14.008-1.898c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.803.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.07-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.808.498 1.432 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.27-2.505-.808-3.261-.534-.756-1.292-1.134-2.277-1.134-.96 0-1.714.378-2.258 1.134-.54.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.55.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.267-1.125.534-.75.8-1.846.8-3.287v-.668zM47.368 31V18.203h3.78c1.13 0 2.132.252 3.005.756a5.146 5.146 0 012.039 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.243 2.28-.729 3.199a5.057 5.057 0 01-2.065 2.127c-.89.498-1.913.747-3.068.747h-3.682zm2.223-11.004v9.229h1.45c1.167 0 2.06-.364 2.681-1.09.627-.733.947-1.782.958-3.147v-.712c0-1.388-.302-2.449-.905-3.181-.604-.733-1.48-1.099-2.628-1.099h-1.556zm18.816 5.291h-5.256v3.938h6.144V31h-8.368V18.203h8.306v1.793h-6.082v3.533h5.256v1.758zM81.534 31H79.32V18.203h2.215V31zm11.222-3.296c0-.562-.199-.996-.597-1.3-.393-.305-1.105-.613-2.136-.924-1.031-.31-1.852-.656-2.461-1.037-1.166-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.258-2.549.843-.668 1.936-1.002 3.278-1.002.89 0 1.685.164 2.382.492a3.898 3.898 0 011.643 1.407c.399.603.598 1.274.598 2.013h-2.215c0-.669-.21-1.19-.633-1.565-.416-.38-1.013-.571-1.793-.571-.726 0-1.292.155-1.696.466-.398.31-.598.744-.598 1.3 0 .47.217.862.65 1.178.434.31 1.15.615 2.145.914.996.293 1.796.63 2.4 1.01.603.376 1.046.81 1.327 1.302.281.486.422 1.057.422 1.713 0 1.067-.41 1.916-1.23 2.55-.815.626-1.923.94-3.323.94-.926 0-1.778-.17-2.558-.51-.773-.346-1.376-.82-1.81-1.424-.428-.603-.642-1.306-.642-2.11h2.224c0 .727.24 1.29.72 1.688.481.399 1.17.598 2.066.598.774 0 1.354-.155 1.74-.466.393-.316.59-.732.59-1.248zm14.481-1.459V31h-2.224V18.203h4.896c1.43 0 2.563.372 3.401 1.116.844.745 1.266 1.729 1.266 2.954 0 1.253-.413 2.229-1.239 2.926-.821.697-1.972 1.046-3.454 1.046h-2.646zm0-1.784h2.672c.791 0 1.395-.185 1.811-.554.416-.375.624-.914.624-1.617 0-.691-.211-1.242-.633-1.652-.422-.416-1.002-.63-1.74-.642h-2.734v4.465zm21.303.475c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.802.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.069-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.809.498 1.433 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.269-2.505-.808-3.261-.533-.756-1.292-1.134-2.277-1.134-.96 0-1.713.378-2.258 1.134-.539.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.551.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.268-1.125.533-.75.799-1.846.799-3.287v-.668zm13.718 1.02h-5.255v3.937h6.143V31h-8.367V18.203h8.306v1.793h-6.082v3.533h5.255v1.758zm13.92-5.292h-3.99V31h-2.206V19.996h-3.955v-1.793h10.151v1.793zm8.19 6.073h-2.478V31h-2.224V18.203h4.5c1.477 0 2.616.331 3.419.993.803.662 1.204 1.62 1.204 2.874 0 .856-.208 1.574-.624 2.154-.41.574-.984 1.016-1.723 1.327l2.874 5.335V31h-2.381l-2.567-4.93zm-2.478-1.784h2.285c.75 0 1.336-.187 1.758-.562.421-.381.632-.9.632-1.556 0-.686-.196-1.216-.588-1.59-.387-.376-.967-.57-1.741-.58h-2.346v4.288zm14.561-.017l2.945-6.065h2.461l-4.289 8.086V31h-2.233v-4.71l-4.298-8.087h2.47l2.944 6.065z"/><path stroke="#000" stroke-width="2" d="M2 1h201v46H2z"/></g></svg>' ); ?>" />
     27                                <img alt="<?php _e( 'Code is Poetry' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1210 48"><path fill="#000" d="M65.875 39.875c2.583-5.333 5-9.333 7.25-12H.25v-5.25h72.875c-2.25-2.667-4.667-6.667-7.25-12h4.375c5.25 6.083 10.75 10.583 16.5 13.5v2.25c-5.75 2.833-11.25 7.333-16.5 13.5h-4.375zM1035.34 26.834c-.12 1.365-.63 2.432-1.51 3.2-.88.76-2.04 1.142-3.5 1.142-1.02 0-1.92-.24-2.7-.72-.78-.487-1.37-1.176-1.79-2.066-.43-.891-.65-1.925-.66-3.103v-1.195c0-1.207.21-2.27.64-3.19.43-.92 1.04-1.63 1.83-2.128.81-.498 1.73-.747 2.78-.747 1.41 0 2.55.384 3.41 1.152.86.767 1.36 1.851 1.5 3.252h-2.21c-.11-.92-.37-1.582-.81-1.987-.43-.41-1.06-.615-1.89-.615-.96 0-1.71.355-2.23 1.064-.52.703-.78 1.737-.79 3.102v1.134c0 1.383.24 2.437.74 3.164.49.727 1.22 1.09 2.18 1.09.87 0 1.53-.197 1.97-.59.43-.392.71-1.045.83-1.959h2.21zm14.01-1.898c0 1.253-.21 2.355-.65 3.304-.43.944-1.05 1.67-1.86 2.18-.8.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.8-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.66-3.243v-.72c0-1.249.22-2.35.65-3.306.45-.955 1.07-1.684 1.88-2.188.81-.51 1.73-.765 2.77-.765 1.05 0 1.97.252 2.77.756.81.498 1.44 1.219 1.87 2.162.44.938.67 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.53-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.25 1.134-.54.75-.82 1.813-.83 3.19v.739c0 1.406.27 2.493.82 3.26.55.768 1.31 1.152 2.28 1.152.99 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm6.24 6.732V18.203h3.78c1.13 0 2.13.252 3 .756a5.138 5.138 0 012.04 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.24 2.28-.73 3.199a5.08 5.08 0 01-2.06 2.127c-.89.498-1.92.747-3.07.747h-3.68zm2.22-11.004v9.229h1.45c1.17 0 2.06-.364 2.68-1.09.63-.733.95-1.782.96-3.147v-.712c0-1.388-.3-2.449-.9-3.181-.61-.733-1.48-1.099-2.63-1.099h-1.56zm18.82 5.291h-5.26v3.938h6.14V31h-8.36V18.203h8.3v1.793h-6.08v3.533h5.26v1.758zM1087.53 31h-2.21V18.203h2.21V31zm11.23-3.296c0-.562-.2-.996-.6-1.3-.39-.305-1.11-.613-2.14-.924-1.03-.31-1.85-.656-2.46-1.037-1.16-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.26-2.549.84-.668 1.94-1.002 3.28-1.002.89 0 1.68.164 2.38.492.7.329 1.25.797 1.64 1.407.4.603.6 1.274.6 2.013h-2.21c0-.669-.21-1.19-.64-1.565-.41-.38-1.01-.571-1.79-.571-.73 0-1.29.155-1.7.466-.39.31-.59.744-.59 1.3 0 .47.21.862.65 1.178.43.31 1.15.615 2.14.914 1 .293 1.8.63 2.4 1.01.6.376 1.05.81 1.33 1.302.28.486.42 1.057.42 1.713 0 1.067-.41 1.916-1.23 2.55-.82.626-1.92.94-3.32.94-.93 0-1.78-.17-2.56-.51-.77-.346-1.38-.82-1.81-1.424-.43-.603-.64-1.306-.64-2.11h2.22c0 .727.24 1.29.72 1.688.48.399 1.17.598 2.07.598.77 0 1.35-.155 1.74-.466.39-.316.59-.732.59-1.248zm14.48-1.459V31h-2.23V18.203h4.9c1.43 0 2.56.372 3.4 1.116.84.745 1.27 1.729 1.27 2.954 0 1.253-.42 2.229-1.24 2.926-.82.697-1.97 1.046-3.46 1.046h-2.64zm0-1.784h2.67c.79 0 1.39-.185 1.81-.554.42-.375.62-.914.62-1.617 0-.691-.21-1.242-.63-1.652-.42-.416-1-.63-1.74-.642h-2.73v4.465zm21.3.475c0 1.253-.22 2.355-.65 3.304-.43.944-1.06 1.67-1.86 2.18-.81.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.81-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.67-3.243v-.72c0-1.249.22-2.35.66-3.306.45-.955 1.07-1.684 1.87-2.188.81-.51 1.74-.765 2.78-.765 1.04 0 1.97.252 2.77.756.81.498 1.43 1.219 1.87 2.162.44.938.66 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.54-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.26 1.134-.54.75-.81 1.813-.82 3.19v.739c0 1.406.27 2.493.81 3.26.55.768 1.32 1.152 2.29 1.152.98 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm13.71 1.02h-5.25v3.937h6.14V31h-8.37V18.203h8.31v1.793h-6.08v3.533h5.25v1.758zm13.92-5.292h-3.99V31h-2.2V19.996h-3.96v-1.793h10.15v1.793zm8.19 6.073h-2.47V31h-2.23V18.203h4.5c1.48 0 2.62.331 3.42.993.8.662 1.21 1.62 1.21 2.874 0 .856-.21 1.574-.63 2.154-.41.574-.98 1.016-1.72 1.327l2.87 5.335V31h-2.38l-2.57-4.93zm-2.47-1.784h2.28c.75 0 1.34-.187 1.76-.562.42-.381.63-.9.63-1.556 0-.686-.19-1.216-.59-1.59-.38-.376-.96-.57-1.74-.58h-2.34v4.288zm14.56-.017l2.94-6.065h2.46l-4.29 8.086V31h-2.23v-4.71l-4.3-8.087h2.47l2.95 6.065z"/><path stroke="#000" stroke-width="2" d="M1008 1h201v46h-201z"/></svg>' ); ?>" />
     28                        </picture>
    2629                </div>
    2730
    28                 <div class="about__header-title">
    29                         <p>
    30                                 <?php _e( 'WordPress' ); ?>
    31                                 <span><?php echo $display_version; ?></span>
    32                         </p>
     31                <div class="about__header-container">
     32                        <div class="about__header-title">
     33                                <p>
     34                                        <?php _e( 'WordPress' ); ?>
     35                                        <?php echo $display_version; ?>
     36                                </p>
     37                        </div>
     38
     39                        <div class="about__header-text">
     40                                <?php _e( 'Sharing your stories has never been easier' ); ?>
     41                        </div>
     42                        <div class="about__header-badge">
     43                                <img alt="<?php _e( 'New' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 153 153" width="115"><circle cx="76.5" cy="76.5" r="76.5" fill="#000"/><path fill="#D1CFE4" d="M53.333 86h-2.827L39.769 69.564V86H36.94V64.672h2.828L50.535 81.18V64.67h2.798V86zm26.05-9.858h-9.242V83.7h10.737V86h-13.55V64.672h13.403v2.314h-10.59v6.856h9.243v2.3zm18.596 3.134l.41 2.813.6-2.534 4.219-14.883h2.373l4.116 14.883.586 2.578.454-2.871 3.311-14.59h2.827L111.704 86h-2.563l-4.395-15.542-.337-1.626-.337 1.626L99.517 86h-2.564l-5.156-21.328h2.812l3.37 14.604z"/></svg>' ); ?>" />
     44                        </div>
    3345                </div>
    3446

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

    r49539 r49640  
    2020
    2121.about__container {
     22        /* Colors from Twenty Twenty-One, will be removed after 5.6 */
     23        --global--color-green: #d1e4dd;
     24        --global--color-blue: #d1dfe4;
     25        --global--color-purple: #d1d1e4;
     26        --global--color-red: #e4d1d1;
     27        --global--color-orange: #e4dad1;
     28        --global--color-yellow: #eeeadd;
     29
    2230        /* Section backgrounds */
    2331        --background: #fff;
    24         --subtle-background: #f2edd4;
     32        --subtle-background: var(--global--color-yellow);
     33
    2534        /* Main text color */
    26         --text: #322d2b;
    27         --text-light: #f2edd4;
     35        --text: #000;
     36        --text-light: #fff;
     37
    2838        /* Accent colors: used in header, on special classes. */
    29         --accent-1: #ebcd3d; /* Accent background */
    30         --accent-2: #bd7331;
    31         --accent-3: #b04329;
     39        --accent-1: var(--global--color-green); /* Accent background */
     40        --accent-2: var(--text); /* Link color */
     41
    3242        /* 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);
     43        --nav-background: var(--background);
     44        --nav-border: #767676;
     45        --nav-color: #767676;
     46        --nav-current: #000;
    3747}
    3848
    … …  
    105115
    106116.about__container .has-accent-background-color {
    107         background-color: #ebcd3d;
     117        background-color: #d1e4dd;
    108118        background-color: var(--accent-1);
    109119}
    … …  
    114124
    115125.about__container .has-accent-color {
    116         color: #b04329;
    117         color: var(--accent-3);
     126        color: #000;
     127        color: var(--text);
     128        font-weight: bold;
     129}
     130
     131.about__container .has-border {
     132        border: 3px solid currentColor;
    118133}
    119134
    120135.about__container .has-subtle-background-color {
    121         background-color: #f2edd4;
     136        background-color: #eeeadd;
    122137        background-color: var(--subtle-background);
    123         color: #322d2b;
    124         color: var(--text);
     138}
     139
     140.about__container .has-background-image {
     141        background-size: contain;
     142        background-repeat: no-repeat;
     143        background-position: center;
    125144}
    126145
    … …  
    128147
    129148.about__section {
    130         margin: 0;
     149        margin: 1em 0;
    131150}
    132151
    … …  
    137156.about__section + .about__section .column {
    138157        padding-top: 0;
     158}
     159
     160.about__section .column[class*="background-color"],
     161.about__section .column.has-border {
     162        padding-top: 32px;
    139163}
    140164
    … …  
    190214.about__section.has-2-columns,
    191215.about__section.has-3-columns,
    192 .about__section.has-4-columns {
     216.about__section.has-4-columns,
     217.about__section.has-overlap-style {
    193218        display: -ms-grid;
    194219        display: grid;
     220}
     221
     222.about__section.has-gutters {
     223        gap: 16px;
    195224}
    196225
    … …  
    289318.about__section.has-2-columns .is-section-header ~ .column,
    290319.about__section.has-3-columns .is-section-header ~ .column,
    291 .about__section.has-4-columns .is-section-header ~ .column {
     320.about__section.has-4-columns .is-section-header ~ .column,
     321.about__section.has-overlap-style .is-section-header ~ .column {
    292322        -ms-grid-row: 2;
    293323        grid-row-start: 2;
     324}
     325
     326.about__section.has-overlap-style {
     327        -ms-grid-columns: (1fr)[7];
     328        grid-template-columns: repeat(7, 1fr);
     329}
     330
     331.about__section.has-overlap-style .column {
     332        -ms-grid-row: 1;
     333        grid-row-start: 1;
     334}
     335
     336.about__section.has-overlap-style .column:nth-of-type(2n+1) {
     337        -ms-grid-column: 2;
     338        grid-column-start: 2;
     339        -ms-grid-column-span: 3;
     340        grid-column-end: span 3;
     341}
     342
     343.about__section.has-overlap-style .column:nth-of-type(2n) {
     344        -ms-grid-column: 4;
     345        grid-column-start: 4;
     346        -ms-grid-column-span: 3;
     347        grid-column-end: span 3;
     348}
     349
     350.about__section.has-overlap-style .column.is-top-layer {
     351        z-index: 1;
    294352}
    295353
    … …  
    302360        }
    303361
     362        .about__section.has-2-columns.has-gutters .column,
     363        .about__section.has-2-columns.has-gutters .column,
     364        .about__section.has-3-columns.has-gutters .column {
     365                margin-bottom: 16px;
     366        }
     367
     368        .about__section.has-2-columns.has-gutters .column:last-child,
     369        .about__section.has-2-columns.has-gutters .column:last-child,
     370        .about__section.has-3-columns.has-gutters .column:last-child {
     371                margin-bottom: 0;
     372        }
     373
    304374        .about__section.has-3-columns .column:nth-of-type(n) {
    305375                padding-top: 16px;
    … …  
    327397                grid-row-start: 2;
    328398        }
     399
     400        .about__section.has-4-columns .is-section-header {
     401                -ms-grid-column-span: 2;
     402                grid-column-end: span 2;
     403        }
     404
     405        .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n+3),
     406        .about__section.has-4-columns .is-section-header ~ .column:nth-of-type(4n) {
     407                -ms-grid-row: 3;
     408                grid-row-start: 3;
     409        }
     410
     411        .about__section.has-overlap-style {
     412                -ms-grid-columns: 1fr;
     413                grid-template-columns: 1fr;
     414        }
     415
     416        /* At this size, the two columns fully overlap */
     417        .about__section.has-overlap-style .column.column {
     418                -ms-grid-column: 1;
     419                grid-column-start: 1;
     420                -ms-grid-column-span: 1;
     421                grid-column-end: 2;
     422                -ms-grid-row: 1;
     423                grid-row-start: 1;
     424                -ms-grid-row-span: 1;
     425                grid-row-end: 2;
     426        }
    329427}
    330428
    331429@media screen and (max-width: 600px) {
    332430        .about__section.has-2-columns {
    333                 display: flex; /* This is flex, not block, so we can use order below. */
    334                 flex-wrap: wrap;
    335                 align-content: stretch;
     431                display: block;
    336432                padding-bottom: 16px;
     433        }
     434
     435        .about__section.has-2-columns.has-gutters .column {
     436                margin-bottom: 16px;
     437        }
     438
     439        .about__section.has-2-columns.has-gutters .column:last-child {
     440                margin-bottom: 0;
    337441        }
    338442
    … …  
    340444                padding-top: 16px;
    341445                padding-bottom: 16px;
    342         }
    343 
    344         .about__section.has-2-columns .is-edge-to-edge {
    345                 order: -1;
    346446        }
    347447}
    … …  
    353453        }
    354454
     455        .about__section.has-4-columns.has-gutters .column {
     456                margin-bottom: 16px;
     457        }
     458
     459        .about__section.has-4-columns.has-gutters .column:last-child {
     460                margin-bottom: 0;
     461        }
     462
    355463        .about__section.has-4-columns .column:nth-of-type(n) {
    356464                padding-top: 16px;
    … …  
    363471.about__container {
    364472        line-height: 1.4;
     473        color: #000;
     474        color: var(--text);
    365475}
    366476
    … …  
    373483
    374484.about__container h1,
    375 .about__container h2 {
     485.about__container h2,
     486.about__container h3.is-larger-heading {
    376487        margin-top: 0;
    377         font-size: 1.4em;
    378         line-height: 1.4;
     488        margin-bottom: 0.5em;
     489        font-size: 2.9em;
     490        line-height: 1.2;
     491        font-weight: 400;
    379492}
    380493
    … …  
    382495.about__container h2.is-smaller-heading {
    383496        margin-top: 0;
    384         font-size: 1em;
     497        font-size: 1.5em;
    385498}
    386499
    … …  
    391504
    392505.about__section a {
    393         color: #b04329;
    394         color: var(--accent-3);
     506        color: #000;
     507        color: var(--accent-2);
    395508        text-decoration: underline;
    396509}
    … …  
    399512.about__section a:active,
    400513.about__section a:focus {
    401         color: #bd7331;
     514        color: #000;
    402515        color: var(--accent-2);
    403516        text-decoration: none;
    … …  
    454567}
    455568
     569.about__container hr.is-large {
     570        height: 64px;
     571        width: 2px;
     572        margin: 16px auto;
     573        background: currentColor;
     574}
     575
    456576.about__container div.updated,
    457577.about__container div.error,
    … …  
    475595                font-weight: 500;
    476596        }
     597
     598        .about__container h1,
     599        .about__container h2,
     600        .about__container h3.is-larger-heading {
     601                font-size: 2em;
     602        }
    477603}
    478604
    … …  
    480606
    481607.about__header {
    482         padding-top: 8em;
    483608        margin-bottom: 32px;
    484         background-color: #ebcd3d;
     609        padding-top: 3em;
     610        background-color: #d1e4dd;
    485611        background-color: var(--accent-1);
    486         color: #322d2b;
     612        color: #000;
    487613        color: var(--text);
    488614}
    489615
     616.about__header-image {
     617        margin: 0 32px 3em;
     618}
     619
     620.about__header-container {
     621        display: -ms-grid;
     622        display: grid;
     623        -ms-grid-columns: 3fr 1fr;
     624        grid-template-columns: 3fr 1fr;
     625        -ms-grid-rows: auto auto;
     626        grid-template-rows: auto auto;
     627        justify-items: start;
     628}
     629
    490630.about__header-title {
    491         display: flex;
    492         align-items: center;
    493         justify-content: center;
    494         height: 20vh;
    495         max-height: 16em;
    496         padding: 32px;
    497         margin-bottom: 4em;
     631        display: inline-block;
     632        padding: 1em 0;
     633        margin: 0 32px 4em;
    498634        text-align: center;
     635        border-width: 3px 0;
     636        border-style: solid;
     637        border-color: currentColor;
     638        -ms-grid-column: 1;
     639        grid-column: 1;
     640        -ms-grid-row: 1;
     641        grid-row: 1;
    499642}
    500643
    … …  
    502645        margin: 0;
    503646        padding: 0;
    504         font-size: 4em;
     647        font-size: 6em;
    505648        line-height: 1;
    506649        font-weight: 500;
    507650}
    508651
    509 .about__header-title p span {
    510         display: block;
    511         font-size: 2em;
    512 }
    513 
    514652.about__header-text {
    515         display: inline-block;
    516         margin-left: -16px;
    517         padding: 16px 48px;
     653        margin: 0 32px 3em;
     654        max-width: 13em;
    518655        font-size: 1.5em;
    519656        line-height: 1.4;
    520         background: #b04329;
    521         background: var(--accent-3);
    522         color: #f2edd4;
    523         color: var(--text-light);
     657        -ms-grid-column: 1;
     658        grid-column: 1;
     659        -ms-grid-row: 2;
     660        grid-row: 2;
    524661}
    525662
    526663.about__header-text p {
    527664        margin: 0;
     665}
     666
     667.about__header-badge {
     668        -ms-grid-column: 2;
     669        grid-column: 2;
     670        -ms-grid-row: 1;
     671        -ms-grid-row-span: 2;
     672        grid-row: 1 / span 2;
     673        -ms-grid-row-align: center;
     674        align-self: center;
    528675}
    529676
    … …  
    531678        clear: both;
    532679        padding-top: 0;
    533         background: #f2edd4;
     680        background: #fff;
    534681        background: var(--nav-background);
    535         color: #b04329;
     682        color: #767676;
    536683        color: var(--nav-color);
    537         border-bottom: 3px solid #ebcd3d;
     684        border-bottom: 3px solid #767676;
    538685        border-bottom: 3px solid var(--nav-border);
    539686}
    … …  
    553700.about__header-navigation .nav-tab:hover,
    554701.about__header-navigation .nav-tab:active {
    555         background-color: #322d2b;
     702        background-color: #000;
    556703        background-color: var(--text);
    557         color: #f2edd4;
     704        color: #fff;
    558705        color: var(--text-light);
    559706}
    … …  
    561708.about__header-navigation .nav-tab-active {
    562709        margin-bottom: -3px;
     710        color: #000;
     711        color: var(--nav-current);
    563712        border-width: 0 0 6px;
    564         border-color: #b04329;
     713        border-color: #000;
    565714        border-color: var(--nav-current);
    566715}
    … …  
    568717.about__header-navigation .nav-tab-active:hover,
    569718.about__header-navigation .nav-tab-active:active {
    570         background-color: #322d2b;
     719        background-color: #000;
    571720        background-color: var(--text);
    572         color: #f2edd4;
     721        color: #fff;
    573722        color: var(--text-light);
    574         border-color: #b04329;
     723        border-color: #000;
    575724        border-color: var(--nav-current);
    576725}
    … …  
    581730        }
    582731
    583         .about__header-title {
    584                 min-height: 0;
    585                 max-height: none;
    586                 height: auto;
     732        .about__header-container {
     733                display: block;
     734        }
     735
     736        .about__header-title,
     737        .about__header-text,
     738        .about__header-image,
     739        .about__header-badge {
     740                margin-left: 16px;
     741                margin-right: 16px;
     742        }
     743
     744        .about__header-text {
     745                margin-bottom: 1em;
     746        }
     747
     748        .about__header-badge {
     749                margin-bottom: 3em;
    587750        }
    588751
    … …  
    658821        font-weight: 600;
    659822        text-decoration: none;
    660         color: #322d2b;
     823        color: #000;
    661824        color: var(--text);
    662825}

  • trunk/src/wp-admin/freedoms.php

    r48730 r49640  
    2525
    2626        <div class="about__header">
    27                 <div class="about__header-text">
    28                         <?php _e( 'Speed. Search. Security.' ); ?>
     27                <div class="about__header-image">
     28                        <picture>
     29                                <source media="(max-width: 782px)" srcset="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205 109" width="205"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-rule="nonzero" d="M65.901 108.433c2.546-5.254 4.927-9.195 7.143-11.822H1.246v-5.173h71.798c-2.216-2.627-4.597-6.568-7.143-11.822h4.31c5.173 5.993 10.592 10.427 16.257 13.3v2.217c-5.665 2.791-11.084 7.225-16.256 13.3h-4.31z"/><path fill="#000" fill-rule="nonzero" d="M29.345 26.834c-.129 1.365-.633 2.432-1.512 3.2-.879.76-2.048 1.142-3.507 1.142-1.02 0-1.919-.24-2.698-.72-.773-.487-1.371-1.176-1.793-2.066-.422-.891-.641-1.925-.659-3.103v-1.195c0-1.207.214-2.27.642-3.19.427-.92 1.04-1.63 1.836-2.128.803-.498 1.729-.747 2.778-.747 1.412 0 2.549.384 3.41 1.152.861.767 1.362 1.851 1.503 3.252H27.13c-.105-.92-.375-1.582-.809-1.987-.427-.41-1.057-.615-1.89-.615-.966 0-1.71.355-2.232 1.064-.515.703-.779 1.737-.79 3.102v1.134c0 1.383.245 2.437.738 3.164.498.727 1.224 1.09 2.18 1.09.872 0 1.529-.197 1.968-.59.44-.392.718-1.045.835-1.959h2.215zm14.008-1.898c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.803.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.07-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.808.498 1.432 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.27-2.505-.808-3.261-.534-.756-1.292-1.134-2.277-1.134-.96 0-1.714.378-2.258 1.134-.54.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.55.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.267-1.125.534-.75.8-1.846.8-3.287v-.668zM47.368 31V18.203h3.78c1.13 0 2.132.252 3.005.756a5.146 5.146 0 012.039 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.243 2.28-.729 3.199a5.057 5.057 0 01-2.065 2.127c-.89.498-1.913.747-3.068.747h-3.682zm2.223-11.004v9.229h1.45c1.167 0 2.06-.364 2.681-1.09.627-.733.947-1.782.958-3.147v-.712c0-1.388-.302-2.449-.905-3.181-.604-.733-1.48-1.099-2.628-1.099h-1.556zm18.816 5.291h-5.256v3.938h6.144V31h-8.368V18.203h8.306v1.793h-6.082v3.533h5.256v1.758zM81.534 31H79.32V18.203h2.215V31zm11.222-3.296c0-.562-.199-.996-.597-1.3-.393-.305-1.105-.613-2.136-.924-1.031-.31-1.852-.656-2.461-1.037-1.166-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.258-2.549.843-.668 1.936-1.002 3.278-1.002.89 0 1.685.164 2.382.492a3.898 3.898 0 011.643 1.407c.399.603.598 1.274.598 2.013h-2.215c0-.669-.21-1.19-.633-1.565-.416-.38-1.013-.571-1.793-.571-.726 0-1.292.155-1.696.466-.398.31-.598.744-.598 1.3 0 .47.217.862.65 1.178.434.31 1.15.615 2.145.914.996.293 1.796.63 2.4 1.01.603.376 1.046.81 1.327 1.302.281.486.422 1.057.422 1.713 0 1.067-.41 1.916-1.23 2.55-.815.626-1.923.94-3.323.94-.926 0-1.778-.17-2.558-.51-.773-.346-1.376-.82-1.81-1.424-.428-.603-.642-1.306-.642-2.11h2.224c0 .727.24 1.29.72 1.688.481.399 1.17.598 2.066.598.774 0 1.354-.155 1.74-.466.393-.316.59-.732.59-1.248zm14.481-1.459V31h-2.224V18.203h4.896c1.43 0 2.563.372 3.401 1.116.844.745 1.266 1.729 1.266 2.954 0 1.253-.413 2.229-1.239 2.926-.821.697-1.972 1.046-3.454 1.046h-2.646zm0-1.784h2.672c.791 0 1.395-.185 1.811-.554.416-.375.624-.914.624-1.617 0-.691-.211-1.242-.633-1.652-.422-.416-1.002-.63-1.74-.642h-2.734v4.465zm21.303.475c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.802.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.069-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.809.498 1.433 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.269-2.505-.808-3.261-.533-.756-1.292-1.134-2.277-1.134-.96 0-1.713.378-2.258 1.134-.539.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.551.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.268-1.125.533-.75.799-1.846.799-3.287v-.668zm13.718 1.02h-5.255v3.937h6.143V31h-8.367V18.203h8.306v1.793h-6.082v3.533h5.255v1.758zm13.92-5.292h-3.99V31h-2.206V19.996h-3.955v-1.793h10.151v1.793zm8.19 6.073h-2.478V31h-2.224V18.203h4.5c1.477 0 2.616.331 3.419.993.803.662 1.204 1.62 1.204 2.874 0 .856-.208 1.574-.624 2.154-.41.574-.984 1.016-1.723 1.327l2.874 5.335V31h-2.381l-2.567-4.93zm-2.478-1.784h2.285c.75 0 1.336-.187 1.758-.562.421-.381.632-.9.632-1.556 0-.686-.196-1.216-.588-1.59-.387-.376-.967-.57-1.741-.58h-2.346v4.288zm14.561-.017l2.945-6.065h2.461l-4.289 8.086V31h-2.233v-4.71l-4.298-8.087h2.47l2.944 6.065z"/><path stroke="#000" stroke-width="2" d="M2 1h201v46H2z"/></g></svg>' ); ?>" />
     30                                <img alt="<?php _e( 'Code is Poetry' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1210 48"><path fill="#000" d="M65.875 39.875c2.583-5.333 5-9.333 7.25-12H.25v-5.25h72.875c-2.25-2.667-4.667-6.667-7.25-12h4.375c5.25 6.083 10.75 10.583 16.5 13.5v2.25c-5.75 2.833-11.25 7.333-16.5 13.5h-4.375zM1035.34 26.834c-.12 1.365-.63 2.432-1.51 3.2-.88.76-2.04 1.142-3.5 1.142-1.02 0-1.92-.24-2.7-.72-.78-.487-1.37-1.176-1.79-2.066-.43-.891-.65-1.925-.66-3.103v-1.195c0-1.207.21-2.27.64-3.19.43-.92 1.04-1.63 1.83-2.128.81-.498 1.73-.747 2.78-.747 1.41 0 2.55.384 3.41 1.152.86.767 1.36 1.851 1.5 3.252h-2.21c-.11-.92-.37-1.582-.81-1.987-.43-.41-1.06-.615-1.89-.615-.96 0-1.71.355-2.23 1.064-.52.703-.78 1.737-.79 3.102v1.134c0 1.383.24 2.437.74 3.164.49.727 1.22 1.09 2.18 1.09.87 0 1.53-.197 1.97-.59.43-.392.71-1.045.83-1.959h2.21zm14.01-1.898c0 1.253-.21 2.355-.65 3.304-.43.944-1.05 1.67-1.86 2.18-.8.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.8-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.66-3.243v-.72c0-1.249.22-2.35.65-3.306.45-.955 1.07-1.684 1.88-2.188.81-.51 1.73-.765 2.77-.765 1.05 0 1.97.252 2.77.756.81.498 1.44 1.219 1.87 2.162.44.938.67 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.53-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.25 1.134-.54.75-.82 1.813-.83 3.19v.739c0 1.406.27 2.493.82 3.26.55.768 1.31 1.152 2.28 1.152.99 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm6.24 6.732V18.203h3.78c1.13 0 2.13.252 3 .756a5.138 5.138 0 012.04 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.24 2.28-.73 3.199a5.08 5.08 0 01-2.06 2.127c-.89.498-1.92.747-3.07.747h-3.68zm2.22-11.004v9.229h1.45c1.17 0 2.06-.364 2.68-1.09.63-.733.95-1.782.96-3.147v-.712c0-1.388-.3-2.449-.9-3.181-.61-.733-1.48-1.099-2.63-1.099h-1.56zm18.82 5.291h-5.26v3.938h6.14V31h-8.36V18.203h8.3v1.793h-6.08v3.533h5.26v1.758zM1087.53 31h-2.21V18.203h2.21V31zm11.23-3.296c0-.562-.2-.996-.6-1.3-.39-.305-1.11-.613-2.14-.924-1.03-.31-1.85-.656-2.46-1.037-1.16-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.26-2.549.84-.668 1.94-1.002 3.28-1.002.89 0 1.68.164 2.38.492.7.329 1.25.797 1.64 1.407.4.603.6 1.274.6 2.013h-2.21c0-.669-.21-1.19-.64-1.565-.41-.38-1.01-.571-1.79-.571-.73 0-1.29.155-1.7.466-.39.31-.59.744-.59 1.3 0 .47.21.862.65 1.178.43.31 1.15.615 2.14.914 1 .293 1.8.63 2.4 1.01.6.376 1.05.81 1.33 1.302.28.486.42 1.057.42 1.713 0 1.067-.41 1.916-1.23 2.55-.82.626-1.92.94-3.32.94-.93 0-1.78-.17-2.56-.51-.77-.346-1.38-.82-1.81-1.424-.43-.603-.64-1.306-.64-2.11h2.22c0 .727.24 1.29.72 1.688.48.399 1.17.598 2.07.598.77 0 1.35-.155 1.74-.466.39-.316.59-.732.59-1.248zm14.48-1.459V31h-2.23V18.203h4.9c1.43 0 2.56.372 3.4 1.116.84.745 1.27 1.729 1.27 2.954 0 1.253-.42 2.229-1.24 2.926-.82.697-1.97 1.046-3.46 1.046h-2.64zm0-1.784h2.67c.79 0 1.39-.185 1.81-.554.42-.375.62-.914.62-1.617 0-.691-.21-1.242-.63-1.652-.42-.416-1-.63-1.74-.642h-2.73v4.465zm21.3.475c0 1.253-.22 2.355-.65 3.304-.43.944-1.06 1.67-1.86 2.18-.81.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.81-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.67-3.243v-.72c0-1.249.22-2.35.66-3.306.45-.955 1.07-1.684 1.87-2.188.81-.51 1.74-.765 2.78-.765 1.04 0 1.97.252 2.77.756.81.498 1.43 1.219 1.87 2.162.44.938.66 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.54-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.26 1.134-.54.75-.81 1.813-.82 3.19v.739c0 1.406.27 2.493.81 3.26.55.768 1.32 1.152 2.29 1.152.98 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm13.71 1.02h-5.25v3.937h6.14V31h-8.37V18.203h8.31v1.793h-6.08v3.533h5.25v1.758zm13.92-5.292h-3.99V31h-2.2V19.996h-3.96v-1.793h10.15v1.793zm8.19 6.073h-2.47V31h-2.23V18.203h4.5c1.48 0 2.62.331 3.42.993.8.662 1.21 1.62 1.21 2.874 0 .856-.21 1.574-.63 2.154-.41.574-.98 1.016-1.72 1.327l2.87 5.335V31h-2.38l-2.57-4.93zm-2.47-1.784h2.28c.75 0 1.34-.187 1.76-.562.42-.381.63-.9.63-1.556 0-.686-.19-1.216-.59-1.59-.38-.376-.96-.57-1.74-.58h-2.34v4.288zm14.56-.017l2.94-6.065h2.46l-4.29 8.086V31h-2.23v-4.71l-4.3-8.087h2.47l2.95 6.065z"/><path stroke="#000" stroke-width="2" d="M1008 1h201v46h-201z"/></svg>' ); ?>" />
     31                        </picture>
    2932                </div>
    3033
    31                 <div class="about__header-title">
    32                         <p>
    33                                 <?php _e( 'WordPress' ); ?>
    34                                 <span><?php echo $display_version; ?></span>
    35                         </p>
     34                <div class="about__header-container">
     35                        <div class="about__header-title">
     36                                <p>
     37                                        <?php _e( 'WordPress' ); ?>
     38                                        <?php echo $display_version; ?>
     39                                </p>
     40                        </div>
     41
     42                        <div class="about__header-text">
     43                                <?php _e( 'Sharing your stories has never been easier' ); ?>
     44                        </div>
     45                        <div class="about__header-badge">
     46                                <img alt="<?php _e( 'New' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 153 153" width="115"><circle cx="76.5" cy="76.5" r="76.5" fill="#000"/><path fill="#D1CFE4" d="M53.333 86h-2.827L39.769 69.564V86H36.94V64.672h2.828L50.535 81.18V64.67h2.798V86zm26.05-9.858h-9.242V83.7h10.737V86h-13.55V64.672h13.403v2.314h-10.59v6.856h9.243v2.3zm18.596 3.134l.41 2.813.6-2.534 4.219-14.883h2.373l4.116 14.883.586 2.578.454-2.871 3.311-14.59h2.827L111.704 86h-2.563l-4.395-15.542-.337-1.626-.337 1.626L99.517 86h-2.564l-5.156-21.328h2.812l3.37 14.604z"/></svg>' ); ?>" />
     47                        </div>
    3648                </div>
    3749
    … …  
    8395        </div>
    8496
    85         <hr />
    86 
    87         <div class="about__section">
     97        <div class="about__section has-1-column">
    8898                <div class="column">
    8999                        <p>

  • trunk/src/wp-admin/privacy.php

    r49218 r49640  
    1919
    2020        <div class="about__header">
    21                 <div class="about__header-text">
    22                         <?php _e( 'Speed. Search. Security.' ); ?>
     21                <div class="about__header-image">
     22                        <picture>
     23                                <source media="(max-width: 782px)" srcset="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 205 109" width="205"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-rule="nonzero" d="M65.901 108.433c2.546-5.254 4.927-9.195 7.143-11.822H1.246v-5.173h71.798c-2.216-2.627-4.597-6.568-7.143-11.822h4.31c5.173 5.993 10.592 10.427 16.257 13.3v2.217c-5.665 2.791-11.084 7.225-16.256 13.3h-4.31z"/><path fill="#000" fill-rule="nonzero" d="M29.345 26.834c-.129 1.365-.633 2.432-1.512 3.2-.879.76-2.048 1.142-3.507 1.142-1.02 0-1.919-.24-2.698-.72-.773-.487-1.371-1.176-1.793-2.066-.422-.891-.641-1.925-.659-3.103v-1.195c0-1.207.214-2.27.642-3.19.427-.92 1.04-1.63 1.836-2.128.803-.498 1.729-.747 2.778-.747 1.412 0 2.549.384 3.41 1.152.861.767 1.362 1.851 1.503 3.252H27.13c-.105-.92-.375-1.582-.809-1.987-.427-.41-1.057-.615-1.89-.615-.966 0-1.71.355-2.232 1.064-.515.703-.779 1.737-.79 3.102v1.134c0 1.383.245 2.437.738 3.164.498.727 1.224 1.09 2.18 1.09.872 0 1.529-.197 1.968-.59.44-.392.718-1.045.835-1.959h2.215zm14.008-1.898c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.803.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.07-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.808.498 1.432 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.27-2.505-.808-3.261-.534-.756-1.292-1.134-2.277-1.134-.96 0-1.714.378-2.258 1.134-.54.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.55.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.267-1.125.534-.75.8-1.846.8-3.287v-.668zM47.368 31V18.203h3.78c1.13 0 2.132.252 3.005.756a5.146 5.146 0 012.039 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.243 2.28-.729 3.199a5.057 5.057 0 01-2.065 2.127c-.89.498-1.913.747-3.068.747h-3.682zm2.223-11.004v9.229h1.45c1.167 0 2.06-.364 2.681-1.09.627-.733.947-1.782.958-3.147v-.712c0-1.388-.302-2.449-.905-3.181-.604-.733-1.48-1.099-2.628-1.099h-1.556zm18.816 5.291h-5.256v3.938h6.144V31h-8.368V18.203h8.306v1.793h-6.082v3.533h5.256v1.758zM81.534 31H79.32V18.203h2.215V31zm11.222-3.296c0-.562-.199-.996-.597-1.3-.393-.305-1.105-.613-2.136-.924-1.031-.31-1.852-.656-2.461-1.037-1.166-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.258-2.549.843-.668 1.936-1.002 3.278-1.002.89 0 1.685.164 2.382.492a3.898 3.898 0 011.643 1.407c.399.603.598 1.274.598 2.013h-2.215c0-.669-.21-1.19-.633-1.565-.416-.38-1.013-.571-1.793-.571-.726 0-1.292.155-1.696.466-.398.31-.598.744-.598 1.3 0 .47.217.862.65 1.178.434.31 1.15.615 2.145.914.996.293 1.796.63 2.4 1.01.603.376 1.046.81 1.327 1.302.281.486.422 1.057.422 1.713 0 1.067-.41 1.916-1.23 2.55-.815.626-1.923.94-3.323.94-.926 0-1.778-.17-2.558-.51-.773-.346-1.376-.82-1.81-1.424-.428-.603-.642-1.306-.642-2.11h2.224c0 .727.24 1.29.72 1.688.481.399 1.17.598 2.066.598.774 0 1.354-.155 1.74-.466.393-.316.59-.732.59-1.248zm14.481-1.459V31h-2.224V18.203h4.896c1.43 0 2.563.372 3.401 1.116.844.745 1.266 1.729 1.266 2.954 0 1.253-.413 2.229-1.239 2.926-.821.697-1.972 1.046-3.454 1.046h-2.646zm0-1.784h2.672c.791 0 1.395-.185 1.811-.554.416-.375.624-.914.624-1.617 0-.691-.211-1.242-.633-1.652-.422-.416-1.002-.63-1.74-.642h-2.734v4.465zm21.303.475c0 1.253-.217 2.355-.65 3.304-.434.944-1.055 1.67-1.864 2.18-.802.504-1.728.756-2.777.756-1.037 0-1.963-.252-2.777-.756-.809-.51-1.436-1.234-1.881-2.171-.44-.938-.662-2.018-.668-3.243v-.72c0-1.249.22-2.35.659-3.306.445-.955 1.069-1.684 1.872-2.188.809-.51 1.734-.765 2.777-.765 1.043 0 1.966.252 2.769.756.809.498 1.433 1.219 1.872 2.162.44.938.662 2.03.668 3.279v.712zm-2.224-.668c0-1.418-.269-2.505-.808-3.261-.533-.756-1.292-1.134-2.277-1.134-.96 0-1.713.378-2.258 1.134-.539.75-.815 1.813-.827 3.19v.739c0 1.406.273 2.493.818 3.26.551.768 1.312 1.152 2.285 1.152.984 0 1.74-.375 2.268-1.125.533-.75.799-1.846.799-3.287v-.668zm13.718 1.02h-5.255v3.937h6.143V31h-8.367V18.203h8.306v1.793h-6.082v3.533h5.255v1.758zm13.92-5.292h-3.99V31h-2.206V19.996h-3.955v-1.793h10.151v1.793zm8.19 6.073h-2.478V31h-2.224V18.203h4.5c1.477 0 2.616.331 3.419.993.803.662 1.204 1.62 1.204 2.874 0 .856-.208 1.574-.624 2.154-.41.574-.984 1.016-1.723 1.327l2.874 5.335V31h-2.381l-2.567-4.93zm-2.478-1.784h2.285c.75 0 1.336-.187 1.758-.562.421-.381.632-.9.632-1.556 0-.686-.196-1.216-.588-1.59-.387-.376-.967-.57-1.741-.58h-2.346v4.288zm14.561-.017l2.945-6.065h2.461l-4.289 8.086V31h-2.233v-4.71l-4.298-8.087h2.47l2.944 6.065z"/><path stroke="#000" stroke-width="2" d="M2 1h201v46H2z"/></g></svg>' ); ?>" />
     24                                <img alt="<?php _e( 'Code is Poetry' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1210 48"><path fill="#000" d="M65.875 39.875c2.583-5.333 5-9.333 7.25-12H.25v-5.25h72.875c-2.25-2.667-4.667-6.667-7.25-12h4.375c5.25 6.083 10.75 10.583 16.5 13.5v2.25c-5.75 2.833-11.25 7.333-16.5 13.5h-4.375zM1035.34 26.834c-.12 1.365-.63 2.432-1.51 3.2-.88.76-2.04 1.142-3.5 1.142-1.02 0-1.92-.24-2.7-.72-.78-.487-1.37-1.176-1.79-2.066-.43-.891-.65-1.925-.66-3.103v-1.195c0-1.207.21-2.27.64-3.19.43-.92 1.04-1.63 1.83-2.128.81-.498 1.73-.747 2.78-.747 1.41 0 2.55.384 3.41 1.152.86.767 1.36 1.851 1.5 3.252h-2.21c-.11-.92-.37-1.582-.81-1.987-.43-.41-1.06-.615-1.89-.615-.96 0-1.71.355-2.23 1.064-.52.703-.78 1.737-.79 3.102v1.134c0 1.383.24 2.437.74 3.164.49.727 1.22 1.09 2.18 1.09.87 0 1.53-.197 1.97-.59.43-.392.71-1.045.83-1.959h2.21zm14.01-1.898c0 1.253-.21 2.355-.65 3.304-.43.944-1.05 1.67-1.86 2.18-.8.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.8-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.66-3.243v-.72c0-1.249.22-2.35.65-3.306.45-.955 1.07-1.684 1.88-2.188.81-.51 1.73-.765 2.77-.765 1.05 0 1.97.252 2.77.756.81.498 1.44 1.219 1.87 2.162.44.938.67 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.53-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.25 1.134-.54.75-.82 1.813-.83 3.19v.739c0 1.406.27 2.493.82 3.26.55.768 1.31 1.152 2.28 1.152.99 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm6.24 6.732V18.203h3.78c1.13 0 2.13.252 3 .756a5.138 5.138 0 012.04 2.145c.48.925.72 1.986.72 3.181v.642c0 1.213-.24 2.28-.73 3.199a5.08 5.08 0 01-2.06 2.127c-.89.498-1.92.747-3.07.747h-3.68zm2.22-11.004v9.229h1.45c1.17 0 2.06-.364 2.68-1.09.63-.733.95-1.782.96-3.147v-.712c0-1.388-.3-2.449-.9-3.181-.61-.733-1.48-1.099-2.63-1.099h-1.56zm18.82 5.291h-5.26v3.938h6.14V31h-8.36V18.203h8.3v1.793h-6.08v3.533h5.26v1.758zM1087.53 31h-2.21V18.203h2.21V31zm11.23-3.296c0-.562-.2-.996-.6-1.3-.39-.305-1.11-.613-2.14-.924-1.03-.31-1.85-.656-2.46-1.037-1.16-.732-1.75-1.687-1.75-2.865 0-1.031.42-1.88 1.26-2.549.84-.668 1.94-1.002 3.28-1.002.89 0 1.68.164 2.38.492.7.329 1.25.797 1.64 1.407.4.603.6 1.274.6 2.013h-2.21c0-.669-.21-1.19-.64-1.565-.41-.38-1.01-.571-1.79-.571-.73 0-1.29.155-1.7.466-.39.31-.59.744-.59 1.3 0 .47.21.862.65 1.178.43.31 1.15.615 2.14.914 1 .293 1.8.63 2.4 1.01.6.376 1.05.81 1.33 1.302.28.486.42 1.057.42 1.713 0 1.067-.41 1.916-1.23 2.55-.82.626-1.92.94-3.32.94-.93 0-1.78-.17-2.56-.51-.77-.346-1.38-.82-1.81-1.424-.43-.603-.64-1.306-.64-2.11h2.22c0 .727.24 1.29.72 1.688.48.399 1.17.598 2.07.598.77 0 1.35-.155 1.74-.466.39-.316.59-.732.59-1.248zm14.48-1.459V31h-2.23V18.203h4.9c1.43 0 2.56.372 3.4 1.116.84.745 1.27 1.729 1.27 2.954 0 1.253-.42 2.229-1.24 2.926-.82.697-1.97 1.046-3.46 1.046h-2.64zm0-1.784h2.67c.79 0 1.39-.185 1.81-.554.42-.375.62-.914.62-1.617 0-.691-.21-1.242-.63-1.652-.42-.416-1-.63-1.74-.642h-2.73v4.465zm21.3.475c0 1.253-.22 2.355-.65 3.304-.43.944-1.06 1.67-1.86 2.18-.81.504-1.73.756-2.78.756-1.04 0-1.96-.252-2.78-.756-.81-.51-1.43-1.234-1.88-2.171-.44-.938-.66-2.018-.67-3.243v-.72c0-1.249.22-2.35.66-3.306.45-.955 1.07-1.684 1.87-2.188.81-.51 1.74-.765 2.78-.765 1.04 0 1.97.252 2.77.756.81.498 1.43 1.219 1.87 2.162.44.938.66 2.03.67 3.279v.712zm-2.22-.668c0-1.418-.27-2.505-.81-3.261-.54-.756-1.29-1.134-2.28-1.134-.96 0-1.71.378-2.26 1.134-.54.75-.81 1.813-.82 3.19v.739c0 1.406.27 2.493.81 3.26.55.768 1.32 1.152 2.29 1.152.98 0 1.74-.375 2.27-1.125s.8-1.846.8-3.287v-.668zm13.71 1.02h-5.25v3.937h6.14V31h-8.37V18.203h8.31v1.793h-6.08v3.533h5.25v1.758zm13.92-5.292h-3.99V31h-2.2V19.996h-3.96v-1.793h10.15v1.793zm8.19 6.073h-2.47V31h-2.23V18.203h4.5c1.48 0 2.62.331 3.42.993.8.662 1.21 1.62 1.21 2.874 0 .856-.21 1.574-.63 2.154-.41.574-.98 1.016-1.72 1.327l2.87 5.335V31h-2.38l-2.57-4.93zm-2.47-1.784h2.28c.75 0 1.34-.187 1.76-.562.42-.381.63-.9.63-1.556 0-.686-.19-1.216-.59-1.59-.38-.376-.96-.57-1.74-.58h-2.34v4.288zm14.56-.017l2.94-6.065h2.46l-4.29 8.086V31h-2.23v-4.71l-4.3-8.087h2.47l2.95 6.065z"/><path stroke="#000" stroke-width="2" d="M1008 1h201v46h-201z"/></svg>' ); ?>" />
     25                        </picture>
    2326                </div>
    2427
    25                 <div class="about__header-title">
    26                         <p>
    27                                 <?php _e( 'WordPress' ); ?>
    28                                 <span><?php echo $display_version; ?></span>
    29                         </p>
     28                <div class="about__header-container">
     29                        <div class="about__header-title">
     30                                <p>
     31                                        <?php _e( 'WordPress' ); ?>
     32                                        <?php echo $display_version; ?>
     33                                </p>
     34                        </div>
     35
     36                        <div class="about__header-text">
     37                                <?php _e( 'Sharing your stories has never been easier' ); ?>
     38                        </div>
     39                        <div class="about__header-badge">
     40                                <img alt="<?php _e( 'New' ); ?>" src="data:image/svg+xml,<?php echo rawurlencode( '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 153 153" width="115"><circle cx="76.5" cy="76.5" r="76.5" fill="#000"/><path fill="#D1CFE4" d="M53.333 86h-2.827L39.769 69.564V86H36.94V64.672h2.828L50.535 81.18V64.67h2.798V86zm26.05-9.858h-9.242V83.7h10.737V86h-13.55V64.672h13.403v2.314h-10.59v6.856h9.243v2.3zm18.596 3.134l.41 2.813.6-2.534 4.219-14.883h2.373l4.116 14.883.586 2.578.454-2.871 3.311-14.59h2.827L111.704 86h-2.563l-4.395-15.542-.337-1.626-.337 1.626L99.517 86h-2.564l-5.156-21.328h2.812l3.37 14.604z"/></svg>' ); ?>" />
     41                        </div>
    3042                </div>
    3143
Note: See TracChangeset for help on using the changeset viewer.