Get WordPress

Make WordPress Core

Changeset 49320

Timestamp:
10/27/2020 01:58:37 AM (4 years ago)
Author:
desrosj
Message:

Twenty Twenty-One: Import the latest changes for 5.6 beta 2.

For a full list of changes since beta 1, see ​https://github.com/WordPress/twentytwentyone/compare/9e34dca...e580895.

Props poena, melchoyce, luminuu, aristath, justinahinon, jffng, ryelle, kishanjasani, rolfsiebers.
See #51526.

Location:
trunk/src/wp-content/themes/twentytwentyone
Files:
1 added
1 deleted
15 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

    r49247 r49320  
    3131}
    3232
    33 /* OS dark theme preference */
    34 @media (prefers-color-scheme: dark) {
    35     html.respect-color-scheme-preference body {
    36         background-color: #28303d;
    37     }
    38     @media (prefers-color-scheme: dark){
    39         html.respect-color-scheme-preference body{
    40         background-color: #28303d;
    41         }
    42     }
    43 }
    44 
    4533/* Button extends */
    4634.wp-block-button__link {
    … …  
    481469.wp-block-code code {
    482470    font-size: 1rem;
     471
     472
    483473}
    484474
    … …  
    489479    border-width: 0.1rem;
    490480    padding: 20px;
     481
    491482}
    492483
    … …  
    15521543}
    15531544
     1545
     1546
     1547
     1548
     1549
     1550
    15541551.wp-block-pullquote {
    15551552    padding: 40px 0;
    1556     margin-left: 0;
    1557     margin-right: 0;
    15581553    text-align: center;
    15591554    border-width: 3px;
    … …  
    16171612
    16181613.wp-block-pullquote.is-style-solid-color {
     1614
     1615
    16191616    padding: 50px;
    16201617    border-width: 3px;
    … …  
    20122009    background-color: #39414d;
    20132010    color: #d1e4dd;
     2011
     2012
     2013
     2014
     2015
     2016
     2017
     2018
    20142019}
    20152020
    … …  
    22292234}
    22302235
     2236
     2237
     2238
     2239
    22312240pre.wp-block-verse {
    22322241    padding: 0;

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css

    r49247 r49320  
    1111Version: 1.0.0
    1212License: GNU General Public License v2 or later
    13 License URI: LICENSE
     13License URI:
    1414Text Domain: twentytwentyone
    1515Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
    … …  
    123123}
    124124
    125 /* OS dark theme preference */
    126 @media (prefers-color-scheme: dark) {
    127     html.respect-color-scheme-preference body {
    128         background-color: #28303d;
    129     }
    130     @media (prefers-color-scheme: dark){
    131         html.respect-color-scheme-preference body{
    132         background-color: #28303d;
    133         }
    134     }
    135 }
    136 
    137125/* Button extends */
    138126.site .button {
    … …  
    18011789}
    18021790
     1791
     1792
     1793
     1794
     1795
     1796
    18031797select {
    18041798    border: 3px solid #39414d;
    … …  
    19971991}
    19981992
     1993
     1994
     1995
     1996
     1997
     1998
     1999
     2000
     2001
     2002
     2003
     2004
     2005
     2006
     2007
     2008
     2009
     2010
     2011
     2012
     2013
     2014
     2015
     2016
     2017
     2018
     2019
     2020
     2021
     2022
     2023
     2024
     2025
     2026
    19992027img {
    20002028    display: block;
    … …  
    20772105
    20782106pre {
    2079     white-space: pre-wrap;
     2107    white-space: pre;
     2108    overflow-x: auto;
    20802109}
    20812110
    … …  
    22252254.wp-block-code code {
    22262255    font-size: 1rem;
    2227     overflow: auto;
     2256    white-space: pre;
     2257    overflow-x: auto;
     2258    display: block;
    22282259}
    22292260
    … …  
    22692300}
    22702301
     2302
     2303
     2304
     2305
    22712306@media only screen and (min-width: 652px) {
    2272     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column {
    2273         flex-grow: 1;
    2274     }
    22752307    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    22762308        margin-left: -50px;
    … …  
    34903522        margin-left: 10px;
    34913523    }
     3524
     3525
     3526
     3527
     3528
    34923529}
    34933530
    … …  
    40234060}
    40244061
     4062
     4063
     4064
     4065
     4066
     4067
     4068
     4069
    40254070.wp-block-search .wp-block-search__label {
    40264071    font-size: 1.125rem;
    … …  
    40374082    margin-right: -3px;
    40384083    padding: 10px;
     4084
    40394085}
    40404086
    … …  
    42794325.wp-calendar-nav .wp-calendar-nav-next {
    42804326    float: right;
     4327
     4328
     4329
     4330
     4331
    42814332}
    42824333
    … …  
    48854936
    48864937.page-links .post-page-numbers {
     4938
    48874939    margin-left: 13px;
    48884940    margin-right: 13px;
    4889     padding: 10px 0;
     4941    min-width: 44px;
     4942    min-height: 44px;
    48904943}
    48914944
    … …  
    49605013}
    49615014
    4962 .entry-content .more-link:hover {
    4963     text-decoration: none;
    4964 }
    4965 
    49665015.entry-content > iframe[style] {
    49675016    margin: 30px 0 !important;
    … …  
    49815030    font-size: 1rem;
    49825031    display: block;
     5032
     5033
     5034
     5035
    49835036}
    49845037
    … …  
    52375290.blog .format-video .entry-content {
    52385291    margin-top: 60px;
     5292
     5293
     5294
     5295
     5296
     5297
     5298
     5299
     5300
    52395301}
    52405302
    … …  
    56955757    padding-bottom: 25px;
    56965758    background-color: #d1e4dd;
    5697     overflow-x: hidden;
    5698     overflow-y: auto;
    56995759    transition: all .15s ease-in-out;
    57005760    transform: translateY(30px);
    … …  
    57055765        height: 100vh;
    57065766        z-index: 499;
     5767
     5768
    57075769        border: 2px solid transparent;
    57085770    }
    … …  
    57645826        display: none;
    57655827    }
    5766     .primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
     5828    .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
    57675829        display: none;
    57685830    }
    … …  
    58545916}
    58555917
    5856 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus {
    5857     display: flex;
    5858 }
    5859 
    5860 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus {
    5861     display: none;
    5862 }
    5863 
    58645918.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    58655919    position: relative;
    … …  
    61236177}
    61246178
     6179
     6180
     6181
     6182
     6183
    61256184.navigation .nav-links .nav-next a,
    61266185.navigation .nav-links .nav-previous a {
    … …  
    62706329}
    62716330
    6272 @media (prefers-color-scheme: dark){
    6273     .pagination .nav-links > *{
    6274     color: #f0f0f0;
    6275     }
    6276 }
    6277 
    62786331.comments-pagination .nav-links > * {
    62796332    color: #28303d;
    … …  
    62856338}
    62866339
    6287 @media (prefers-color-scheme: dark){
    6288     .comments-pagination .nav-links > *{
    6289     color: #f0f0f0;
    6290     }
    6291 }
    6292 
    62936340.pagination .nav-links > *.current {
    62946341    border-bottom: 1px solid #28303d;
    … …  
    63686415}
    63696416
    6370 @media only screen and (min-width: 822px) {
     6417@media only screen and (min-width: 2px) {
    63716418    .widget-area {
    63726419        display: grid;
     6420
     6421
     6422
     6423
     6424
     6425
     6426
    63736427        grid-template-columns: repeat(3, 1fr);
    6374         column-gap: 50px;
    63756428    }
    63766429}
    … …  
    67386791    max-width: none;
    67396792}
     6793
     6794
     6795
     6796
     6797
     6798
     6799
     6800
     6801
     6802
     6803
     6804
     6805
     6806
     6807
     6808
     6809
     6810
     6811
     6812
     6813
     6814
     6815
     6816
     6817
     6818
     6819
     6820
     6821
     6822
     6823
     6824
     6825
     6826
     6827
     6828
     6829
     6830
     6831
     6832
    67406833/*# sourceMappingURL=ie.css.map */

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

    r49247 r49320  
    209209}
    210210
    211 /* OS dark theme preference */
    212 @media (prefers-color-scheme: dark) {
    213     html.respect-color-scheme-preference {
    214         --global--color-background: var(--global--color-dark-gray);
    215         --global--color-primary: var(--global--color-light-gray);
    216         --global--color-secondary: var(--global--color-light-gray);
    217         --button--color-text: var(--global--color-background);
    218         --button--color-text-hover: var(--global--color-secondary);
    219         --button--color-text-active: var(--global--color-secondary);
    220         --button--color-background: var(--global--color-secondary);
    221         --button--color-background-active: var(--global--color-background);
    222     }
    223     html.respect-color-scheme-preference body {
    224         background-color: var(--global--color-background);
    225     }
    226 }
    227 
    228211/* Button extends */
    229212.wp-block-button__link, .wp-block-file .wp-block-file__button, .wp-block-search .wp-block-search__button {
    … …  
    527510.wp-block-code code {
    528511    font-size: var(--global--font-size-xs);
     512
     513
    529514}
    530515
    … …  
    535520    border-width: 0.1rem;
    536521    padding: var(--global--spacing-unit);
     522
    537523}
    538524
    … …  
    11081094}
    11091095
     1096
     1097
     1098
     1099
     1100
     1101
    11101102.wp-block-pullquote {
    11111103    padding: calc(2 * var(--global--spacing-unit)) 0;
    1112     margin-left: 0;
    1113     margin-right: 0;
    11141104    text-align: center;
    11151105    border-width: var(--pullquote--border-width);
    … …  
    11571147
    11581148.wp-block-pullquote.is-style-solid-color {
     1149
     1150
    11591151    padding: calc(2.5 * var(--global--spacing-unit));
    11601152    border-width: var(--pullquote--border-width);
    … …  
    14621454    background-color: var(--button--color-background);
    14631455    color: var(--button--color-text);
     1456
     1457
     1458
     1459
     1460
     1461
     1462
     1463
    14641464}
    14651465
    … …  
    16191619}
    16201620
     1621
     1622
     1623
     1624
    16211625pre.wp-block-verse {
    16221626    padding: 0;

  • trunk/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js

    r49216 r49320  
    4646            // Modify the body class depending on whether this is a dark background or not.
    4747            if ( isDark ) {
    48                 if ( ! document.body.classList.contains( 'is-background-dark' ) ) {
    49                     document.body.classList.add( 'is-background-dark' );
     48                if ( ! document.body.classList.contains( 's-background-dark' ) ) {
     49                    document.body.classList.add( 's-background-dark' );
    5050                }
    5151            } else {
    52                 document.body.classList.remove( 'is-background-dark' );
     52                document.body.classList.remove( 's-background-dark' );
    5353            }
    5454

  • trunk/src/wp-content/themes/twentytwentyone/assets/js/polyfills.js

    r49216 r49320  
    11/**
    2  * File primary-navigation.js.
     2 * File p.js.
    33 *
    4  * Required to open and close the mobile navigation.
     4 * .
    55 */
    66

  • trunk/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js

    r49250 r49320  
    4040 */
    4141function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
    42     // Close submenu that was opened from a hover action.
    43     // We'll return early in this case to avoid changing the aria-expanded attribute.
    44     if ( el.parentNode.classList.contains( 'hover' ) ) {
    45         el.parentNode.classList.remove( 'hover' );
    46         return;
    47     }
    48 
    4942    // Close other expanded items.
    5043    el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
    … …  
    131124        document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {
    132125            li.addEventListener( 'mouseenter', function() {
    133                 if ( 'false' === this.querySelector( '.sub-menu-toggle' ).getAttribute( 'aria-expanded' ) ) {
    134                     this.classList.add( 'hover' );
    135                 }
     126                this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' );
    136127            } );
    137128            li.addEventListener( 'mouseleave', function() {
    138                 this.classList.remove( 'hover' );
     129                this.' );
    139130            } );
    140131        } );

  • trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php

    r49247 r49320  
    121121            wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
    122122        }
    123 
    124         $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true ); // @phpstan-ignore-line. Passing true instead of default value of false to get_theme_mod.
    125         if ( $should_respect_color_scheme && self::get_relative_luminance_from_hex( $background_color ) > 127 ) {
    126             // Add dark mode variable overrides.
    127             wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', '@media (prefers-color-scheme: dark) { :root .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); } }' );
    128         }
    129123    }
    130124
    … …  
    176170        $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
    177171        if ( 127 > self::get_relative_luminance_from_hex( $background_color ) ) {
    178             $classes[] = 'is-background-dark';
     172            $classes[] = 's-background-dark';
    179173        } else {
    180             $classes[] = 'is-background-light';
     174            $classes[] = 's-background-light';
    181175        }
    182176

  • trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php

    r49247 r49320  
    147147                )
    148148            );
    149 
    150             $wp_customize->add_setting(
    151                 'respect_user_color_preference',
    152                 array(
    153                     'capability'        => 'edit_theme_options',
    154                     'default'           => true,
    155                     'sanitize_callback' => function( $value ) {
    156                         return (bool) $value;
    157                     },
    158                 )
    159             );
    160 
    161             $wp_customize->add_control(
    162                 'respect_user_color_preference',
    163                 array(
    164                     'type'            => 'checkbox',
    165                     'section'         => 'colors',
    166                     'label'           => esc_html__( 'Respect visitor\'s device dark mode settings', 'twentytwentyone' ),
    167                     'description'     => __( 'Dark mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text.', 'twentytwentyone' ),
    168                     'active_callback' => function( $value ) {
    169                         return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
    170                     },
    171                 )
    172             );
    173149        }
    174150

  • trunk/src/wp-content/themes/twentytwentyone/comments.php

    r49247 r49320  
    3333        <h2 class="comments-title">
    3434            <?php if ( '1' === $twenty_twenty_one_comment_count ) : ?>
    35                 <?php esc_html_e( '1 Reply', 'twentytwentyone' ); ?>
     35                <?php esc_html_e( '1 ', 'twentytwentyone' ); ?>
    3636            <?php else : ?>
    3737                <?php
    3838                printf(
    3939                    /* translators: %s: comment count number. */
    40                     esc_html( _nx( '%s Reply', '%s Replies', $twenty_twenty_one_comment_count, 'comments title', 'twentytwentyone' ) ),
     40                    esc_html( _nx( '%s s', $twenty_twenty_one_comment_count, 'comments title', 'twentytwentyone' ) ),
    4141                    esc_html( number_format_i18n( $twenty_twenty_one_comment_count ) )
    4242                );
    … …  
    8686        array(
    8787            'logged_in_as'       => null,
    88             'title_reply'        => esc_html__( 'Leave a reply', 'twentytwentyone' ),
     88            'title_reply'        => esc_html__( 'Leave a ', 'twentytwentyone' ),
    8989            'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
    9090            'title_reply_after'  => '</h2>',

  • trunk/src/wp-content/themes/twentytwentyone/functions.php

    r49247 r49320  
    337337
    338338        // Add support for custom units.
     339
    339340        add_theme_support( 'custom-units' );
    340341    }
    … …  
    416417    }
    417418
     419
     420
     421
     422
     423
     424
     425
     426
    418427    // Main navigation scripts.
    419428    if ( has_nav_menu( 'primary' ) ) {
    420         wp_register_script(
    421             'twenty-twenty-one-ie11-polyfills',
    422             get_template_directory_uri() . '/assets/js/polyfills.js',
    423             array(),
    424             wp_get_theme()->get( 'Version' ),
    425             true
    426         );
    427429        wp_enqueue_script(
    428430            'twenty-twenty-one-primary-navigation-script',
    … …  
    433435        );
    434436    }
     437
     438
     439
     440
     441
     442
     443
     444
     445
    435446}
    436447add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );
    … …  
    543554add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' );
    544555
    545 
    546556/**
    547557 * Enqueue scripts for the customizer.
    … …  
    560570        true
    561571    );
    562 
    563     wp_enqueue_script(
    564         'twentytwentyone-customize-controls',
    565         get_theme_file_uri( '/assets/js/customize.js' ),
    566         array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ),
    567         wp_get_theme()->get( 'Version' ),
    568         true
    569     );
    570 
    571     wp_localize_script(
    572         'twentytwentyone-customize-controls',
    573         'backgroundColorNotice',
    574         array(
    575             'message' => esc_html__( 'You currently have dark mode enabled on your device. Changing the color picker will allow you to preview light mode.', 'twentytwentyone' ),
    576         )
    577     );
    578572}
    579573add_action( 'customize_controls_enqueue_scripts', 'twentytwentyone_customize_controls_enqueue_scripts' );
    … …  
    587581 */
    588582function twentytwentyone_the_html_classes() {
    589     $background_color            = get_theme_mod( 'background_color', 'D1E4DD' );
    590     $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true );
    591     if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
    592         echo 'class="respect-color-scheme-preference"';
    593     }
    594 }
     583    $classes = apply_filters( 'twentytwentyone_html_classes', '' );
     584    if ( ! $classes ) {
     585        return;
     586    }
     587    echo 'class="' . esc_attr( $classes ) . '"';
     588}
     589
     590/**
     591 * Add "is-IE" class to body if the user is on Internet Explorer.
     592 *
     593 * @since 1.0.0
     594 *
     595 * @return void
     596 */
     597function twentytwentyone_add_ie_class() {
     598    ?>
     599    <script>
     600    if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) {
     601        document.body.classList.add( 'is-IE' );
     602    }
     603    </script>
     604    <?php
     605}
     606add_action( 'wp_footer', 'twentytwentyone_add_ie_class' );

  • trunk/src/wp-content/themes/twentytwentyone/inc/template-functions.php

    r49247 r49320  
    225225function twenty_twenty_one_continue_reading_link() {
    226226    if ( ! is_admin() ) {
    227         return '<div class="more-link-container"><a class="more-link" href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></div>';
     227        return '<div class="more-link-container"><a class="more-link" href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></div>';
    228228    }
    229229}

  • trunk/src/wp-content/themes/twentytwentyone/inc/template-tags.php

    r49247 r49320  
    106106                    printf(
    107107                        /* translators: %s: list of categories. */
    108                         '<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . '. </span>',
     108                        '<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . ' </span>',
    109109                        $categories_list // phpcs:ignore WordPress.Security.EscapeOutput
    110110                    );
    … …  
    116116                    printf(
    117117                        /* translators: %s: list of tags. */
    118                         '<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '.</span>',
     118                        '<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '</span>',
    119119                        $tags_list // phpcs:ignore WordPress.Security.EscapeOutput
    120120                    );

  • trunk/src/wp-content/themes/twentytwentyone/searchform.php

    r49216 r49320  
    1919$twentytwentyone_unique_id = wp_unique_id( 'search-form-' );
    2020
    21 $twentytwentyone_aria_label = ! empty( $args['label'] ) ? 'aria-label="' . esc_attr( $args['label'] ) . '"' : '';
     21$twentytwentyone_aria_label = ! empty( $args['label'] ) . '"' : '';
    2222?>
    2323<form role="search" <?php echo $twentytwentyone_aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?> method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">

  • trunk/src/wp-content/themes/twentytwentyone/style-rtl.css

    r49247 r49320  
    1111Version: 1.0.0
    1212License: GNU General Public License v2 or later
    13 License URI: LICENSE
     13License URI:
    1414Text Domain: twentytwentyone
    1515Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
    … …  
    301301}
    302302
    303 /* OS dark theme preference */
    304 @media (prefers-color-scheme: dark) {
    305     html.respect-color-scheme-preference {
    306         --global--color-background: var(--global--color-dark-gray);
    307         --global--color-primary: var(--global--color-light-gray);
    308         --global--color-secondary: var(--global--color-light-gray);
    309         --button--color-text: var(--global--color-background);
    310         --button--color-text-hover: var(--global--color-secondary);
    311         --button--color-text-active: var(--global--color-secondary);
    312         --button--color-background: var(--global--color-secondary);
    313         --button--color-background-active: var(--global--color-background);
    314     }
    315     html.respect-color-scheme-preference body {
    316         background-color: var(--global--color-background);
    317     }
    318 }
    319 
    320303/* Button extends */
    321304.site .button,
    … …  
    12321215}
    12331216
     1217
     1218
     1219
     1220
     1221
    12341222select {
    12351223    border: var(--form--border-width) solid var(--form--border-color);
    … …  
    14131401}
    14141402
     1403
     1404
     1405
     1406
     1407
     1408
     1409
     1410
     1411
     1412
     1413
     1414
     1415
     1416
     1417
     1418
     1419
     1420
     1421
     1422
     1423
     1424
     1425
     1426
     1427
     1428
     1429
     1430
     1431
    14151432img {
    14161433    display: block;
    … …  
    14791496
    14801497pre {
    1481     white-space: pre-wrap;
     1498    white-space: pre;
     1499    overflow-x: auto;
    14821500}
    14831501
    … …  
    15771595.wp-block-code code {
    15781596    font-size: var(--global--font-size-xs);
    1579     overflow: auto;
     1597    white-space: pre;
     1598    overflow-x: auto;
     1599    display: block;
    15801600}
    15811601
    … …  
    16211641}
    16221642
     1643
     1644
     1645
     1646
    16231647@media only screen and (min-width: 652px) {
    1624     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column {
    1625         flex-grow: 1;
    1626     }
    16271648    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    16281649        margin-right: calc(-2 * var(--global--spacing-horizontal));
    … …  
    24392460        margin-right: calc(0.4 * var(--global--spacing-horizontal));
    24402461    }
     2462
     2463
     2464
     2465
     2466
    24412467}
    24422468
    … …  
    28052831}
    28062832
     2833
     2834
     2835
     2836
     2837
     2838
     2839
     2840
    28072841.wp-block-search .wp-block-search__label {
    28082842    font-size: var(--form--font-size);
    … …  
    28192853    margin-left: calc(-1 * var(--button--border-width));
    28202854    padding: var(--form--spacing-unit);
     2855
    28212856}
    28222857
    … …  
    30033038}
    30043039
     3040
     3041
     3042
     3043
     3044
    30053045.wp-block-verse {
    30063046    font-family: var(--entry-content--font-family);
    … …  
    34343474
    34353475.page-links .post-page-numbers {
     3476
    34363477    margin-right: calc(0.66 * var(--global--spacing-unit));
    34373478    margin-left: calc(0.66 * var(--global--spacing-unit));
    3438     padding: calc(0.33 * var(--global--spacing-vertical)) 0;
     3479    min-width: 44px;
     3480    min-height: 44px;
    34393481}
    34403482
    … …  
    34893531}
    34903532
    3491 .entry-content .more-link:hover {
    3492     text-decoration: none;
    3493 }
    3494 
    34953533.entry-content > iframe[style] {
    34963534    margin: var(--global--spacing-vertical) 0 !important;
    … …  
    35103548    font-size: var(--global--font-size-xs);
    35113549    display: block;
     3550
     3551
     3552
     3553
    35123554}
    35133555
    … …  
    36713713.blog .format-video .entry-content {
    36723714    margin-top: calc(2 * var(--global--spacing-vertical));
     3715
     3716
     3717
     3718
     3719
     3720
     3721
     3722
     3723
    36733724}
    36743725
    … …  
    40594110    padding-bottom: var(--global--spacing-horizontal);
    40604111    background-color: var(--global--color-background);
    4061     overflow-x: hidden;
    4062     overflow-y: auto;
    40634112    transition: all .15s ease-in-out;
    40644113    transform: translateY(var(--global--spacing-vertical));
    … …  
    40694118        height: 100vh;
    40704119        z-index: 499;
     4120
     4121
    40714122        border: 2px solid transparent;
    40724123    }
    … …  
    41284179        display: none;
    41294180    }
    4130     .primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
     4181    .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
    41314182        display: none;
    41324183    }
    … …  
    42184269}
    42194270
    4220 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus {
    4221     display: flex;
    4222 }
    4223 
    4224 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus {
    4225     display: none;
    4226 }
    4227 
    42284271.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    42294272    position: relative;
    … …  
    44714514}
    44724515
     4516
     4517
     4518
     4519
     4520
    44734521.navigation .nav-links .nav-next a,
    44744522.navigation .nav-links .nav-previous a {
    … …  
    46664714}
    46674715
    4668 @media only screen and (min-width: 822px) {
     4716@media only screen and (min-width: 2px) {
    46694717    .widget-area {
    46704718        display: grid;
     4719
     4720
     4721
     4722
     4723
     4724
     4725
    46714726        grid-template-columns: repeat(3, 1fr);
    4672         column-gap: calc(2 * var(--global--spacing-horizontal));
    46734727    }
    46744728}
    … …  
    49745028    max-width: none;
    49755029}
     5030
     5031
     5032
     5033
     5034
     5035
     5036
     5037
     5038
     5039
     5040
     5041
     5042
     5043
     5044
     5045
     5046
     5047
     5048
     5049
     5050
     5051
     5052
     5053
     5054
     5055
     5056
     5057
     5058
     5059
     5060
     5061
     5062
     5063
     5064
     5065
     5066
     5067
     5068
     5069

  • trunk/src/wp-content/themes/twentytwentyone/style.css

    r49247 r49320  
    1111Version: 1.0.0
    1212License: GNU General Public License v2 or later
    13 License URI: LICENSE
     13License URI:
    1414Text Domain: twentytwentyone
    1515Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
    … …  
    301301}
    302302
    303 /* OS dark theme preference */
    304 @media (prefers-color-scheme: dark) {
    305     html.respect-color-scheme-preference {
    306         --global--color-background: var(--global--color-dark-gray);
    307         --global--color-primary: var(--global--color-light-gray);
    308         --global--color-secondary: var(--global--color-light-gray);
    309         --button--color-text: var(--global--color-background);
    310         --button--color-text-hover: var(--global--color-secondary);
    311         --button--color-text-active: var(--global--color-secondary);
    312         --button--color-background: var(--global--color-secondary);
    313         --button--color-background-active: var(--global--color-background);
    314     }
    315     html.respect-color-scheme-preference body {
    316         background-color: var(--global--color-background);
    317     }
    318 }
    319 
    320303/* Button extends */
    321304.site .button,
    … …  
    12361219}
    12371220
     1221
     1222
     1223
     1224
     1225
     1226
    12381227select {
    12391228    border: var(--form--border-width) solid var(--form--border-color);
    … …  
    14171406}
    14181407
     1408
     1409
     1410
     1411
     1412
     1413
     1414
     1415
     1416
     1417
     1418
     1419
     1420
     1421
     1422
     1423
     1424
     1425
     1426
     1427
     1428
     1429
     1430
     1431
     1432
     1433
     1434
     1435
     1436
    14191437img {
    14201438    display: block;
    … …  
    14831501
    14841502pre {
    1485     white-space: pre-wrap;
     1503    white-space: pre;
     1504    overflow-x: auto;
    14861505}
    14871506
    … …  
    15811600.wp-block-code code {
    15821601    font-size: var(--global--font-size-xs);
    1583     overflow: auto;
     1602    white-space: pre;
     1603    overflow-x: auto;
     1604    display: block;
    15841605}
    15851606
    … …  
    16251646}
    16261647
     1648
     1649
     1650
     1651
    16271652@media only screen and (min-width: 652px) {
    1628     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column {
    1629         flex-grow: 1;
    1630     }
    16311653    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    16321654        margin-left: calc(-2 * var(--global--spacing-horizontal));
    … …  
    24432465        margin-left: calc(0.4 * var(--global--spacing-horizontal));
    24442466    }
     2467
     2468
     2469
     2470
     2471
    24452472}
    24462473
    … …  
    28092836}
    28102837
     2838
     2839
     2840
     2841
     2842
     2843
     2844
     2845
    28112846.wp-block-search .wp-block-search__label {
    28122847    font-size: var(--form--font-size);
    … …  
    28232858    margin-right: calc(-1 * var(--button--border-width));
    28242859    padding: var(--form--spacing-unit);
     2860
    28252861}
    28262862
    … …  
    30073043}
    30083044
     3045
     3046
     3047
     3048
     3049
    30093050.wp-block-verse {
    30103051    font-family: var(--entry-content--font-family);
    … …  
    34433484
    34443485.page-links .post-page-numbers {
     3486
    34453487    margin-left: calc(0.66 * var(--global--spacing-unit));
    34463488    margin-right: calc(0.66 * var(--global--spacing-unit));
    3447     padding: calc(0.33 * var(--global--spacing-vertical)) 0;
     3489    min-width: 44px;
     3490    min-height: 44px;
    34483491}
    34493492
    … …  
    34983541}
    34993542
    3500 .entry-content .more-link:hover {
    3501     text-decoration: none;
    3502 }
    3503 
    35043543.entry-content > iframe[style] {
    35053544    margin: var(--global--spacing-vertical) 0 !important;
    … …  
    35193558    font-size: var(--global--font-size-xs);
    35203559    display: block;
     3560
     3561
     3562
     3563
    35213564}
    35223565
    … …  
    36803723.blog .format-video .entry-content {
    36813724    margin-top: calc(2 * var(--global--spacing-vertical));
     3725
     3726
     3727
     3728
     3729
     3730
     3731
     3732
     3733
    36823734}
    36833735
    … …  
    40684120    padding-bottom: var(--global--spacing-horizontal);
    40694121    background-color: var(--global--color-background);
    4070     overflow-x: hidden;
    4071     overflow-y: auto;
    40724122    transition: all .15s ease-in-out;
    40734123    transform: translateY(var(--global--spacing-vertical));
    … …  
    40784128        height: 100vh;
    40794129        z-index: 499;
     4130
     4131
    40804132        border: 2px solid transparent;
    40814133    }
    … …  
    41374189        display: none;
    41384190    }
    4139     .primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
     4191    .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
    41404192        display: none;
    41414193    }
    … …  
    42274279}
    42284280
    4229 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus {
    4230     display: flex;
    4231 }
    4232 
    4233 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus {
    4234     display: none;
    4235 }
    4236 
    42374281.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    42384282    position: relative;
    … …  
    44804524}
    44814525
     4526
     4527
     4528
     4529
     4530
    44824531.navigation .nav-links .nav-next a,
    44834532.navigation .nav-links .nav-previous a {
    … …  
    46754724}
    46764725
    4677 @media only screen and (min-width: 822px) {
     4726@media only screen and (min-width: 2px) {
    46784727    .widget-area {
    46794728        display: grid;
     4729
     4730
     4731
     4732
     4733
     4734
     4735
    46804736        grid-template-columns: repeat(3, 1fr);
    4681         column-gap: calc(2 * var(--global--spacing-horizontal));
    46824737    }
    46834738}
    … …  
    49845039}
    49855040
     5041
     5042
     5043
     5044
     5045
     5046
     5047
     5048
     5049
     5050
     5051
     5052
     5053
     5054
     5055
     5056
     5057
     5058
     5059
     5060
     5061
     5062
     5063
     5064
     5065
     5066
     5067
     5068
     5069
     5070
     5071
     5072
     5073
     5074
     5075
     5076
     5077
     5078
     5079
     5080
    49865081/*# sourceMappingURL=style.css.map */
Note: See TracChangeset for help on using the changeset viewer.