WordPress.org
Get WordPress

Make WordPress Core

Changeset 43842


Ignore:
Timestamp:
10/30/2018 02:13:07 AM (6 years ago)
Author:
allancole
Message:

Importing Twenty Nineteen, our new default theme for 2019, set for 5.0.

Let Gutenberg shine with this simple, fast, and powerful theme. Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart.

Location:
branches/5.0/src/wp-content/themes/twentynineteen
Files:
12 added
4 deleted
50 edited

Legend:

Unmodified
Added
Removed

  • branches/5.0/src/wp-content/themes/twentynineteen/404.php

    r43808 r43842  
    77 * @package WordPress
    88 * @subpackage Twenty_Nineteen
     9 * @since 1.0.0
    910 */
    1011
    … …  
    1213?>
    1314
    14     <div id="primary" class="content-area">
     15    <section id="primary" class="content-area">
    1516        <main id="main" class="site-main">
    1617
    17             <section class="error-404 not-found">
     18            <div class="error-404 not-found">
    1819                <header class="page-header">
    1920                    <h1 class="page-title"><?php _e( 'Oops! That page can&rsquo;t be found.', 'twentynineteen' ); ?></h1>
    … …  
    2223                <div class="page-content">
    2324                    <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentynineteen' ); ?></p>
    24 
    2525                    <?php get_search_form(); ?>
    2626                </div><!-- .page-content -->
    27             </section><!-- .error-404 -->
     27            </div><!-- .error-404 -->
    2828
    2929        </main><!-- #main -->
    30     </div><!-- #primary -->
     30    </section><!-- #primary -->
    3131
    3232<?php

  • branches/5.0/src/wp-content/themes/twentynineteen/archive.php

    r43808 r43842  
    77 * @package WordPress
    88 * @subpackage Twenty_Nineteen
     9 * @since 1.0.0
    910 */
    1011
    … …  
    1213?>
    1314
    14     <div id="primary" class="content-area">
     15    <section id="primary" class="content-area">
    1516        <main id="main" class="site-main">
    1617
    … …  
    2021                <?php
    2122                    the_archive_title( '<h1 class="page-title">', '</h1>' );
    22                     the_archive_description( '<div class="page-description">', '</div>' );
     23                    // Remove for now @TODO
     24                    // the_archive_description( '<div class="page-description">', '</div>' );
    2325                ?>
    2426            </header><!-- .page-header -->
    … …  
    3436                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
    3537                 */
    36                 get_template_part( 'template-parts/content/content' );
     38                get_template_part( 'template-parts/content/content', 'excerpt' );
    3739
    3840                // End the loop.
    … …  
    5052
    5153        </main><!-- .site-main -->
    52     </div><!-- .content-area -->
     54    </section><!-- .content-area -->
    5355
    5456<?php

  • branches/5.0/src/wp-content/themes/twentynineteen/classes/class-twentynineteen-svg-icons.php

    r43808 r43842  
    55 * @package WordPress
    66 * @subpackage Twenty_Nineteen
     7 * @since 1.0.0
    78 */
    89
    … …  
    3334        }
    3435        if ( array_key_exists( $icon, $arr ) ) {
    35             $repl = sprintf( '<svg id="%s-icon-%s" class="svg-icon" width="%d" height="%d" aria-hidden="true" role="img" ', $group, $icon, $size, $size );
     36            $repl = sprintf( '<svg class="svg-icon" width="%d" height="%d" aria-hidden="true" role="img" focusable="false" ', $size, $size );
    3637            $svg  = preg_replace( '/^<svg /', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code.
    3738            $svg  = preg_replace( "/([\n\t]+)/", ' ', $svg ); // Remove newlines & tabs.
    … …  
    7172     */
    7273    static $ui_icons = array(
    73         'link'          => /* material-design – link */ '
    74 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     74        'link'                   => /* material-design – link */ '
     75<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    7576    <path d="M0 0h24v24H0z" fill="none"/>
    7677    <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
    7778</svg>',
    7879
    79         'watch'         => /* material-design – watch-later */ '
    80 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     80        'watch'                  => /* material-design – watch-later */ '
     81<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    8182    <defs>
    8283        <path id="a" d="M0 0h24v24H0V0z"/>
    … …  
    8889</svg>',
    8990
    90         'archive'       => /* material-design – folder */ '
    91 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     91        'archive'                => /* material-design – folder */ '
     92<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    9293    <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
    9394    <path d="M0 0h24v24H0z" fill="none"/>
    9495</svg>',
    9596
    96         'tag' => /* material-design – local_offer */ '
    97 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     97        'tag'                    => /* material-design – local_offer */ '
     98<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    9899    <path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/>
    99100    <path d="M0 0h24v24H0z" fill="none"/>
    100101</svg>',
    101102
    102         'comment' => /* material-design – comment */ '
     103        'comment'                => /* material-design – comment */ '
    103104<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    104105    <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/>
    … …  
    106107</svg>',
    107108
    108         'person'        => /* material-design – person */ '
     109        'person'                 => /* material-design – person */ '
    109110<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    110111    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
    … …  
    112113</svg>',
    113114
    114         'edit'          => /* material-design – edit */ '
     115        'edit'                   => /* material-design – edit */ '
    115116<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    116117    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
    … …  
    118119</svg>',
    119120
    120         'chevron_left'  => /* material-design – chevron_left */ '
     121        'chevron_left'           => /* material-design – chevron_left */ '
    121122<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    122123    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
    … …  
    124125</svg>',
    125126
    126         'chevron_right' => /* material-design – chevron_right */ '
    127 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     127        'chevron_right'          => /* material-design – chevron_right */ '
     128<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    128129    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
    129130    <path d="M0 0h24v24H0z" fill="none"/>
    130131</svg>',
    131132
    132         'check'         => /* material-design – check */ '
    133 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     133        'check'                  => /* material-design – check */ '
     134<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    134135    <path d="M0 0h24v24H0z" fill="none"/>
    135136    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
    … …  
    137138
    138139        'arrow_drop_down_circle' => /* material-design – arrow_drop_down_circle */ '
    139 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     140<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    140141    <path d="M0 0h24v24H0z" fill="none"/>
    141142    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"/>
    142143</svg>',
    143144
    144         'keyboard_arrow_down' => /* material-design – keyboard_arrow_down */ '
    145 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     145        'keyboard_arrow_down'    => /* material-design – keyboard_arrow_down */ '
     146<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    146147    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
    147148    <path fill="none" d="M0 0h24v24H0V0z"/>
    148149</svg>',
    149150
    150         'keyboard_arrow_right' => /* material-design – keyboard_arrow_right */ '
    151 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     151        'keyboard_arrow_right'   => /* material-design – keyboard_arrow_right */ '
     152<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    152153    <path d="M10 17l5-5-5-5v10z"/>
    153154    <path fill="none" d="M0 24V0h24v24H0z"/>
     155</svg>',
     156
     157        'keyboard_arrow_left'   => /* material-design – keyboard_arrow_left */ '
     158<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     159    <path d="M14 7l-5 5 5 5V7z"/>
     160    <path fill="none" d="M24 0v24H0V0h24z"/>
    154161</svg>',
    155162

  • branches/5.0/src/wp-content/themes/twentynineteen/classes/class-twentynineteen-walker-comment.php

    r43808 r43842  
    55 * @package WordPress
    66 * @subpackage Twenty_Nineteen
     7 * @since 1.0.0
    78 */
    89
    … …  
    5556                            /* translators: %s: comment author link */
    5657                            printf(
    57                                 __( '%s <span class="screen-reader-text says">says:</span>' ),
     58                                __( '%s <span class="screen-reader-text says">says:</span>', 'twentynineteen' ),
    5859                                sprintf( '<b class="fn">%s</b>', get_comment_author_link( $comment ) )
    5960                            );
    … …  
    7071                        <?php
    7172                            $edit_comment_icon = twentynineteen_get_icon_svg( 'edit', 16 );
    72                             edit_comment_link( __( 'Edit' ), '<span class="edit-link-sep">&mdash;</span> <span class="edit-link">' . $edit_comment_icon, '</span>' );
     73                            edit_comment_link( __( 'Edit', 'twentynineteen' ), '<span class="edit-link-sep">&mdash;</span> <span class="edit-link">' . $edit_comment_icon, '</span>' );
    7374                        ?>
    7475                    </div><!-- .comment-metadata -->
    7576
    7677                    <?php if ( '0' == $comment->comment_approved ) : ?>
    77                     <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p>
     78                    <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'twentynineteen' ); ?></p>
    7879                    <?php endif; ?>
    7980                </footer><!-- .comment-meta -->

  • branches/5.0/src/wp-content/themes/twentynineteen/comments.php

    r43808 r43842  
    1010 * @package WordPress
    1111 * @subpackage Twenty_Nineteen
     12 * @since 1.0.0
    1213 */
    1314
    … …  
    2930            if ( comments_open() ) {
    3031                if ( have_comments() ) {
    31                     echo esc_html_e( 'Join the Conversation', 'twentynineteen' );
     32                    esc_html_e( 'Join the Conversation', 'twentynineteen' );
    3233                } else {
    33                     echo esc_html_e( 'Leave a comment', 'twentynineteen' );
     34                    esc_html_e( 'Leave a comment', 'twentynineteen' );
    3435                }
    3536            } else {
    … …  
    8586        <?php
    8687
    87         // Show comment form at bottom if showing newest comments at the bottom.
    88         if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) :
    89             ?>
    90             <div class="comment-form-flex">
    91                 <span class="screen-reader-text"><?php esc_html_e( 'Leave a comment', 'twentynineteen' ); ?></span>
    92                 <?php twentynineteen_comment_form( 'asc' ); ?>
    93                 <h2 class="comments-title" aria-hidden="true"><?php esc_html_e( 'Leave a comment', 'twentynineteen' ); ?></h2>
    94             </div>
    95             <?php
    96         endif;
    97 
    9888        // Show comment navigation
    9989        if ( have_comments() ) :
    … …  
    10797                )
    10898            );
     99        endif;
     100
     101        // Show comment form at bottom if showing newest comments at the bottom.
     102        if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) :
     103            ?>
     104            <div class="comment-form-flex">
     105                <span class="screen-reader-text"><?php esc_html_e( 'Leave a comment', 'twentynineteen' ); ?></span>
     106                <?php twentynineteen_comment_form( 'asc' ); ?>
     107                <h2 class="comments-title" aria-hidden="true"><?php esc_html_e( 'Leave a comment', 'twentynineteen' ); ?></h2>
     108            </div>
     109            <?php
    109110        endif;
    110111

  • branches/5.0/src/wp-content/themes/twentynineteen/footer.php

    r43808 r43842  
    99 * @package WordPress
    1010 * @subpackage Twenty_Nineteen
     11 * @since 1.0.0
    1112 */
    1213
    … …  
    1617
    1718    <footer id="colophon" class="site-footer">
     19        <?php get_template_part( 'template-parts/footer/footer', 'widgets' ); ?>
    1820        <div class="site-info">
    19             <a class="site-name" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>,
     21            <?php if ( ! empty( get_bloginfo( 'name' ) ) ) : ?>
     22                <a class="site-name" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>,
     23            <?php endif; ?>
    2024            <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentynineteen' ) ); ?>" class="imprint">
    2125                <?php printf( __( 'Proudly powered by %s', 'twentynineteen' ), 'WordPress' ); ?>.

  • branches/5.0/src/wp-content/themes/twentynineteen/functions.php

    r43808 r43842  
    77 * @package WordPress
    88 * @subpackage Twenty_Nineteen
     9 * @since 1.0.0
    910 */
    1011
    … …  
    6869        );
    6970
    70         // Set up the WordPress core custom background feature.
    71         add_theme_support(
    72             'custom-background',
    73             apply_filters(
    74                 'twentynineteen_custom_background_args',
    75                 array(
    76                     'default-color' => 'ffffff',
    77                     'default-image' => '',
    78                 )
    79             )
    80         );
    81 
    8271        /**
    8372         * Add support for core custom logo.
    … …  
    10796        add_editor_style( 'style-editor.css' );
    10897
     98        // Add custom color to the editor color palette
     99        add_theme_support(
     100        'editor-color-palette',
     101            array(
     102                array(
     103                    'name'  => esc_html__( 'Primary Color', 'twentynineteen' ),
     104                    'slug'  => 'primary',
     105                    'color' => twentynineteen_hsl_hex( absint( get_theme_mod( 'colorscheme_hue', 199 ) ), 100, 33 ),
     106                ),
     107            )
     108        );
     109
    109110    }
    110111endif;
    111112add_action( 'after_setup_theme', 'twentynineteen_setup' );
     113
     114/**
     115 * Register widget area.
     116 *
     117 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
     118 */
     119function twentynineteen_widgets_init() {
     120
     121    register_sidebar(
     122        array(
     123            'name'          => __( 'Footer 1', 'twentynineteen' ),
     124            'id'            => 'sidebar-1',
     125            'description'   => __( 'Add widgets here to appear in your footer.', 'twentynineteen' ),
     126            'before_widget' => '<section id="%1$s" class="widget %2$s">',
     127            'after_widget'  => '</section>',
     128            'before_title'  => '<h2 class="widget-title">',
     129            'after_title'   => '</h2>',
     130        )
     131    );
     132
     133}
     134add_action( 'widgets_init', 'twentynineteen_widgets_init' );
    112135
    113136/**
    … …  
    136159    wp_enqueue_script( 'twentynineteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
    137160
     161    if ( has_nav_menu( 'menu-1' ) ) {
     162        wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-navigation.js' ), array(), '1.0', true );
     163        $twentynineteen_l10n['expand']   = __( 'Expand child menu', 'twentynineteen' );
     164        $twentynineteen_l10n['collapse'] = __( 'Collapse child menu', 'twentynineteen' );
     165    }
     166
     167    wp_localize_script( 'twentynineteen-skip-link-focus-fix', 'twentynineteenScreenReaderText', $twentynineteen_l10n );
     168
    138169    wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
    139170
    … …  
    152183 */
    153184function twentynineteen_editor_frame_styles() {
     185
     186    // Include color patterns
     187    require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
     188
    154189    wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' );
    155 }
    156 
     190    wp_add_inline_style( 'twentynineteen-editor-frame-styles', twentynineteen_custom_colors_css() );
     191}
    157192add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_frame_styles' );
    158193
    159194/**
     195 * Display custom color CSS in customizer and on frontend.
     196 */
     197function twentynineteen_colors_css_wrap() {
     198    if ( 'custom' !== get_theme_mod( 'colorscheme' ) && ! is_customize_preview() ) {
     199        return;
     200    }
     201
     202    require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
     203    $hue = absint( get_theme_mod( 'colorscheme_hue', 250 ) );
     204    ?>
     205
     206    <style type="text/css" id="custom-theme-colors" <?php echo is_customize_preview() ? 'data-hue="' . $hue . '"' : ''; ?>>
     207        <?php echo twentynineteen_custom_colors_css(); ?>
     208    </style>
     209<?php
     210}
     211add_action( 'wp_head', 'twentynineteen_colors_css_wrap' );
     212
     213/**
    160214 * SVG Icons class.
    161215 */

  • branches/5.0/src/wp-content/themes/twentynineteen/header.php

    r43808 r43842  
    99 * @package WordPress
    1010 * @subpackage Twenty_Nineteen
     11 * @since 1.0.0
    1112 */
    1213?><!doctype html>
    … …  
    2425
    2526        <header id="masthead" class="<?php echo is_singular() && twentynineteen_can_show_post_thumbnail() ? 'site-header featured-image' : 'site-header'; ?>">
     27
    2628            <div class="site-branding-container">
    2729                <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
    … …  
    2931
    3032            <?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
    31                 <div class="hentry">
     33                <div class="site-featured-image">
    3234                    <?php the_post(); ?>
    33                     <div class="entry-header">
    34                         <?php if ( ! is_page() ) : ?>
    35                         <?php $discussion = twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null; ?>
    36                         <?php endif; ?>
    37                         <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    38                         <?php if ( ! is_page() ) : ?>
    39                         <div class="<?php echo ( ! empty( $discussion ) && count( $discussion->authors ) > 0 ) ? 'entry-meta has-discussion' : 'entry-meta'; ?>">
    40                             <?php twentynineteen_posted_by(); ?>
    41                             <?php twentynineteen_posted_on(); ?>
    42                             <span class="comment-count">
    43                                 <?php
    44                                 if ( ! empty( $discussion ) ) {
    45                                 twentynineteen_discussion_avatars_list( $discussion->authors );}
    46                                 ?>
    47                                 <?php twentynineteen_comment_count(); ?>
    48                             </span>
    49                             <?php
    50                             // Edit post link.
    51                                 edit_post_link(
    52                                     sprintf(
    53                                         wp_kses(
    54                                             /* translators: %s: Name of current post. Only visible to screen readers. */
    55                                             __( 'Edit <span class="screen-reader-text">%s</span>', 'twentynineteen' ),
    56                                             array(
    57                                                 'span' => array(
    58                                                     'class' => array(),
    59                                                 ),
    60                                             )
    61                                         ),
    62                                         get_the_title()
    63                                     ),
    64                                     '<span class="edit-link">' . twentynineteen_get_icon_svg( 'edit', 16 ),
    65                                     '</span>'
    66                                 );
    67                             ?>
    68                         </div><!-- .meta-info -->
    69                         <?php endif; ?>
     35                    <?php $discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null; ?>
     36                    <div class="<?php echo ( ! empty( $discussion ) && count( $discussion->authors ) > 0 ) ? 'entry-header has-discussion' : 'entry-header'; ?>">
     37                        <?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
    7038                    </div><!-- .entry-header -->
    7139                    <?php rewind_posts(); ?>

  • branches/5.0/src/wp-content/themes/twentynineteen/inc/customizer.php

    r43808 r43842  
    55 * @package WordPress
    66 * @subpackage Twenty_Nineteen
     7 * @since 1.0.0
    78 */
    89
    … …  
    3334        );
    3435    }
     36
     37    /**
     38     * Custom colors.
     39     */
     40    $wp_customize->add_setting(
     41        'colorscheme',
     42        array(
     43            'default'           => 'default',
     44            'transport'         => 'postMessage',
     45            'sanitize_callback' => 'twentynineteen_sanitize_color_option',
     46        )
     47    );
     48
     49    $wp_customize->add_control(
     50        'colorscheme',
     51        array(
     52            'type'    => 'radio',
     53            'label'    => __( 'Color Scheme', 'twentynineteen' ),
     54            'choices'  => array(
     55                'default'  => __( 'Default', 'twentynineteen' ),
     56                'custom' => __( 'Custom', 'twentynineteen' ),
     57            ),
     58            'section'  => 'colors',
     59            'priority' => 5,
     60        )
     61    );
     62
     63    // Add primary color setting and control.
     64    $wp_customize->add_setting(
     65        'colorscheme_hue',
     66        array(
     67            'default'           => 199,
     68            'transport'         => 'postMessage',
     69            'sanitize_callback' => 'absint',
     70        )
     71    );
     72
     73    $wp_customize->add_control(
     74        new WP_Customize_Color_Control(
     75            $wp_customize,
     76            'colorscheme_hue',
     77            array(
     78                'label'       => __( 'Primary Color' ),
     79                'description' => __( 'Changes the Color of the Featured Image overlay, Buttons, Links etc.' ),
     80                'section'     => 'colors',
     81                'mode'        => 'hue',
     82            )
     83        )
     84    );
     85
     86    $wp_customize->add_setting(
     87        'image_filter',
     88        array(
     89            'default'           => 'active',
     90            'sanitize_callback' => 'twentynineteen_sanitize_image_filter',
     91            'transport'         => 'postMessage',
     92        )
     93    );
     94
     95    $wp_customize->add_control(
     96        'image_filter',
     97        array(
     98            'label'       => __( 'Featured Image Color Filter', 'twentynineteen' ),
     99            'section'     => 'colors',
     100            'type'        => 'radio',
     101            'description' => __( "Twenty Nineteen adds a color filter to featured images using your site's primary color. If you disable this effect, the theme will use a black filter in individual posts to keep text readable when it appears on top of the featured image.", 'twentynineteen' ) . '<br/><span style="font-style: normal; display: block; margin-top: 16px;">' . __( 'On Featured Images, apply', 'twentynineteen' ) . '</span>',
     102            'choices'     => array(
     103                'active'   => __( 'A color filter', 'twentynineteen' ),
     104                'inactive' => __( 'A black filter', 'twentynineteen' ),
     105            ),
     106        )
     107    );
    35108}
    36109add_action( 'customize_register', 'twentynineteen_customize_register' );
    … …  
    55128
    56129/**
    57  * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
     130 * Bind JS handlers to instantly live-preview changes.
    58131 */
    59132function twentynineteen_customize_preview_js() {
    60     wp_enqueue_script( 'twentynineteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
     133    wp_enqueue_script( 'twentynineteen-customize-preview', get_theme_file_uri( '/js/customize-preview.js' ), array( 'customize-preview' ), '20151215', true );
    61134}
    62135add_action( 'customize_preview_init', 'twentynineteen_customize_preview_js' );
     136
     137/**
     138 * Load dynamic logic for the customizer controls area.
     139 */
     140function twentynineteen_panels_js() {
     141    wp_enqueue_script( 'twentynineteen-customize-controls', get_theme_file_uri( '/js/customize-controls.js' ), array(), '1.0', true );
     142}
     143add_action( 'customize_controls_enqueue_scripts', 'twentynineteen_panels_js' );
     144
     145/**
     146 * Sanitize image filter choice.
     147 *
     148 * @param string $choice Whether image filter is active.
     149 *
     150 * @return string
     151 */
     152function twentynineteen_sanitize_color_option( $choice ) {
     153    $valid = array(
     154        'default',
     155        'custom',
     156    );
     157
     158    if ( in_array( $choice, $valid, true ) ) {
     159        return $choice;
     160    }
     161
     162    return 'default';
     163}
     164/**
     165 * Sanitize image filter choice.
     166 *
     167 * @param string $choice Whether image filter is active.
     168 *
     169 * @return string
     170 */
     171function twentynineteen_sanitize_image_filter( $choice ) {
     172    $valid = array(
     173        'active',
     174        'inactive',
     175    );
     176
     177    if ( in_array( $choice, $valid, true ) ) {
     178        return $choice;
     179    }
     180
     181    return 'active';
     182}

  • branches/5.0/src/wp-content/themes/twentynineteen/inc/icon-functions.php

    r43808 r43842  
    55 * @package WordPress
    66 * @subpackage Twenty_Nineteen
     7 * @since 1.0.0
    78 */
    89

  • branches/5.0/src/wp-content/themes/twentynineteen/inc/template-functions.php

    r43808 r43842  
    55 * @package WordPress
    66 * @subpackage Twenty_Nineteen
     7 * @since 1.0.0
    78 */
    89
    … …  
    3334
    3435/**
     36 * Adds custom class to the array of posts classes.
     37 */
     38function twentynineteen_post_classes( $classes, $class, $post_id ) {
     39    $classes[] = 'entry';
     40
     41    return $classes;
     42}
     43add_filter( 'post_class', 'twentynineteen_post_classes', 10, 3 );
     44
     45
     46/**
    3547 * Add a pingback url auto-discovery header for single posts, pages, or attachments.
    3648 */
    … …  
    6072function twentynineteen_get_the_archive_title() {
    6173    if ( is_category() ) {
    62         $title = esc_html__( 'Category Archives:', 'twentynineteen' );
     74        $title = esc_html__( 'Category Archives: ', 'twentynineteen' ) . '<span class="page-description">' . single_term_title( '', false ) . '</span>';
    6375    } elseif ( is_tag() ) {
    64         $title = esc_html__( 'Tag Archives:', 'twentynineteen' );
     76        $title = esc_html__( 'Tag Archives: ', 'twentynineteen' ) . '<span class="page-description">' . single_term_title( '', false ) . '</span>';
    6577    } elseif ( is_author() ) {
    66         $title = esc_html__( 'Author Archives:', 'twentynineteen' );
     78        $title = esc_html__( 'Author Archives: ', 'twentynineteen' ) . '<span class="page-description">' . get_the_author_meta( 'display_name' ) . '</span>';
    6779    } elseif ( is_year() ) {
    68         $title = esc_html__( 'Yearly Archives:', 'twentynineteen' );
     80        $title = esc_html__( 'Yearly Archives: ', 'twentynineteen' ) . '<span class="page-description">' . get_the_date( _x( 'Y', 'yearly archives date format', 'twentynineteen' ) ) . '</span>';
    6981    } elseif ( is_month() ) {
    70         $title = esc_html__( 'Monthly Archives:', 'twentynineteen' );
     82        $title = esc_html__( 'Monthly Archives: ', 'twentynineteen' ) . '<span class="page-description">' . get_the_date( _x( 'F Y', 'monthly archives date format', 'twentynineteen' ) ) . '</span>';
    7183    } elseif ( is_day() ) {
    72         $title = esc_html__( 'Daily Archives:', 'twentynineteen' );
     84        $title = esc_html__( 'Daily Archives: ', 'twentynineteen' ) . '<span class="page-description">' . get_the_date() . '</span>';
    7385    } elseif ( is_post_type_archive() ) {
    74         $title = esc_html__( 'Post Type Archives:', 'twentynineteen' );
     86        $title = esc_html__( 'Post Type Archives: ', 'twentynineteen' ) . '<span class="page-description">' . post_type_archive_title( '', false ) . '</span>';
    7587    } elseif ( is_tax() ) {
    7688        $tax = get_taxonomy( get_queried_object()->taxonomy );
    77         /* translators: 1: Taxonomy singular name */
    78         $title = sprintf( __( '%s Archives: ' ), $tax->labels->singular_name );
     89        /* translators: %s: Taxonomy singular name */
     90        $title = sprintf( esc_html__( '%s Archives:', 'twentynineteen' ), $tax->labels->singular_name );
    7991    } else {
    8092        $title = esc_html__( 'Archives:', 'twentynineteen' );
    … …  
    8597
    8698/**
    87  * Filters the default archive descriptions.
    88  */
    89 function twentynineteen_get_the_archive_description() {
    90     if ( is_category() || is_tag() || is_tax() ) {
    91         $description = single_term_title( '', false );
    92     } elseif ( is_author() ) {
    93         $description = get_the_author_meta( 'display_name' );
    94     } elseif ( is_post_type_archive() ) {
    95         $description = post_type_archive_title( '', false );
    96     } elseif ( is_year() ) {
    97         $description = get_the_date( _x( 'Y', 'yearly archives date format', 'twentynineteen' ) );
    98     } elseif ( is_month() ) {
    99         $description = get_the_date( _x( 'F Y', 'monthly archives date format', 'twentynineteen' ) );
    100     } elseif ( is_day() ) {
    101         $description = get_the_date();
    102     } else {
    103         $description = null;
    104     }
    105     return $description;
    106 }
    107 add_filter( 'get_the_archive_description', 'twentynineteen_get_the_archive_description' );
    108 
    109 /**
    11099 * Determines if post thumbnail can be displayed.
    111100 */
    112101function twentynineteen_can_show_post_thumbnail() {
    113     return ! post_password_required() && ! is_attachment() && has_post_thumbnail();
     102    return apply_filters( 'twentynineteen_can_show_post_thumbnail', ! post_password_required() && ! is_attachment() && has_post_thumbnail() );
    114103}
    115104
    … …  
    118107 */
    119108function twentynineteen_image_filters_enabled() {
     109    if ( 'inactive' === get_theme_mod( 'image_filter' ) ) {
     110        return false;
     111    }
    120112    return true;
    121113}
    … …  
    155147    $authors    = array();
    156148    $commenters = array();
    157     $user_id    = is_user_logged_in() ? get_current_user_id() : -1;
     149    $user_id    = -1; // is_user_logged_in() ? get_current_user_id() : -1;
    158150    $comments   = get_comments(
    159151        array(
    … …  
    205197
    206198/**
     199 * Add a dropdown icon to top-level menu items.
     200 *
     201 * @param string $output Nav menu item start element.
     202 * @param object $item   Nav menu item.
     203 * @param int    $depth  Depth.
     204 * @param object $args   Nav menu args.
     205 * @return string Nav menu item start element.
    207206 * Add a dropdown icon to top-level menu items
    208207 */
    … …  
    210209
    211210    // Only add class to 'top level' items on the 'primary' menu.
    212     if ( 'menu-1' == $args->theme_location && 0 === $depth ) {
    213 
    214         if ( in_array( 'menu-item-has-children', $item->classes ) ) {
    215             $output .= twentynineteen_get_icon_svg( 'arrow_drop_down_circle', 16 );
    216         }
    217     } else if ( 'menu-1' == $args->theme_location && $depth >= 1 ) {
    218 
    219         if ( in_array( 'menu-item-has-children', $item->classes ) ) {
    220             $output .= twentynineteen_get_icon_svg( 'keyboard_arrow_right', 24 );
    221         }
     211    if ( ! isset( $args->theme_location ) || 'menu-1' !== $args->theme_location ) {
     212        return $output;
     213    }
     214
     215    if ( in_array( 'mobile-parent-nav-menu-item', $item->classes, true ) && isset( $item->original_id ) ) {
     216        // Inject the keyboard_arrow_left SVG inside the parent nav menu item, and let the item link to the parent item.
     217        // @todo Only do this for nested submenus? If on a first-level submenu, then really the link could be "#" since the desire is to remove the target entirely.
     218        $link = sprintf(
     219            '<a class="menu-item-link-return" id="%1$s" href="%2$s" onclick="%3$s" tabindex="-1">%4$s',
     220            esc_attr( "menu-item-link-return-{$item->original_id}" ),
     221            esc_attr( "#menu-item-link-{$item->original_id}" ),
     222            esc_attr( 'event.preventDefault();' ),
     223            twentynineteen_get_icon_svg( 'chevron_left', 24 )
     224        );
     225
     226        $output = preg_replace(
     227            '/<a\s.*?>/',
     228            $link,
     229            $output,
     230            1 // Limit.
     231        );
     232    } elseif ( in_array( 'menu-item-has-children', $item->classes, true ) ) {
     233        // Add an ID to the link element itself to facilitate navigation from submenu back to parent.
     234        $output = preg_replace( '/(?<=<a\s)/', sprintf( ' id="%s" ', esc_attr( "menu-item-link-{$item->ID}" ) ), $output );
     235
     236        // Add SVG icon to parent items.
     237        if ( 0 === $depth ) {
     238            $icon = twentynineteen_get_icon_svg( 'keyboard_arrow_down', 24 );
     239        } else {
     240            $icon = twentynineteen_get_icon_svg( 'chevron_right', 24 );
     241        }
     242
     243        // @todo We might as well just go back to using the SVG element if the link approach is not suitable for no-JS environments.
     244        $link = sprintf(
     245            '<a class="mobile-submenu-expand" href="%s" onclick="%s" tabindex="-1">%s</a>',
     246            esc_attr( "#menu-item-link-return-{$item->ID}" ),
     247            esc_attr( 'event.preventDefault();' ),
     248            $icon
     249        );
     250
     251        $output .= $link;
     252        $output .= "<span class='desktop-submenu-expand'>$icon</span>";
    222253    }
    223254
    … …  
    225256}
    226257add_filter( 'walker_nav_menu_start_el', 'twentynineteen_add_dropdown_icons', 10, 4 );
     258
     259/**
     260 * Create a nav menu item to be displayed on mobile to navigate from submenu back to the parent.
     261 *
     262 * This duplicates each parent nav menu item and makes it the first child of itself.
     263 *
     264 * @param array  $sorted_menu_items Sorted nav menu items.
     265 * @param object $args              Nav menu args.
     266 * @return array Amended nav menu items.
     267 */
     268function twentynineteen_add_mobile_parent_nav_menu_items( $sorted_menu_items, $args ) {
     269    static $pseudo_id = 0;
     270    if ( ! isset( $args->theme_location ) || 'menu-1' !== $args->theme_location ) {
     271        return $sorted_menu_items;
     272    }
     273
     274    $amended_menu_items = array();
     275    foreach ( $sorted_menu_items as $nav_menu_item ) {
     276        $amended_menu_items[] = $nav_menu_item;
     277        if ( in_array( 'menu-item-has-children', $nav_menu_item->classes, true ) ) {
     278            $parent_menu_item                   = clone $nav_menu_item;
     279            $parent_menu_item->original_id      = $nav_menu_item->ID;
     280            $parent_menu_item->ID               = --$pseudo_id;
     281            $parent_menu_item->db_id            = $parent_menu_item->ID;
     282            $parent_menu_item->object_id        = $parent_menu_item->ID;
     283            $parent_menu_item->classes          = array( 'mobile-parent-nav-menu-item' );
     284            $parent_menu_item->menu_item_parent = $nav_menu_item->ID;
     285
     286            $amended_menu_items[] = $parent_menu_item;
     287        }
     288    }
     289
     290    return $amended_menu_items;
     291}
     292add_filter( 'wp_nav_menu_objects', 'twentynineteen_add_mobile_parent_nav_menu_items', 10, 2 );
     293
     294/**
     295 * Convert HSL to HEX colors
     296 */
     297function twentynineteen_hsl_hex( $h, $s, $l, $to_hex = true ) {
     298
     299    $h /= 360;
     300    $s /= 100;
     301    $l /= 100;
     302
     303    $r = $l;
     304    $g = $l;
     305    $b = $l;
     306    $v = ( $l <= 0.5 ) ? ( $l * ( 1.0 + $s ) ) : ( $l + $s - $l * $s );
     307    if ( $v > 0 ) {
     308        $m;
     309        $sv;
     310        $sextant;
     311        $fract;
     312        $vsf;
     313        $mid1;
     314        $mid2;
     315
     316        $m = $l + $l - $v;
     317        $sv = ( $v - $m ) / $v;
     318        $h *= 6.0;
     319        $sextant = floor( $h );
     320        $fract = $h - $sextant;
     321        $vsf = $v * $sv * $fract;
     322        $mid1 = $m + $vsf;
     323        $mid2 = $v - $vsf;
     324
     325        switch ( $sextant ) {
     326            case 0:
     327                $r = $v;
     328                $g = $mid1;
     329                $b = $m;
     330                break;
     331            case 1:
     332                $r = $mid2;
     333                $g = $v;
     334                $b = $m;
     335                break;
     336            case 2:
     337                $r = $m;
     338                $g = $v;
     339                $b = $mid1;
     340                break;
     341            case 3:
     342                $r = $m;
     343                $g = $mid2;
     344                $b = $v;
     345                break;
     346            case 4:
     347                $r = $mid1;
     348                $g = $m;
     349                $b = $v;
     350                break;
     351            case 5:
     352                $r = $v;
     353                $g = $m;
     354                $b = $mid2;
     355                break;
     356        }
     357    }
     358    $r = round( $r * 255, 0 );
     359    $g = round( $g * 255, 0 );
     360    $b = round( $b * 255, 0 );
     361
     362    if ( $to_hex ) {
     363
     364        $r = ( $r < 15 ) ? '0' . dechex( $r ) : dechex( $r );
     365        $g = ( $g < 15 ) ? '0' . dechex( $g ) : dechex( $g );
     366        $b = ( $b < 15 ) ? '0' . dechex( $b ) : dechex( $b );
     367
     368        return "#$r$g$b";
     369
     370    } else {
     371
     372        return "rgb($r, $g, $b)";
     373    }
     374}

  • branches/5.0/src/wp-content/themes/twentynineteen/inc/template-tags.php

    r43808 r43842  
    55 * @package WordPress
    66 * @subpackage Twenty_Nineteen
     7 * @since 1.0.0
    78 */
    89
    … …  
    2627
    2728        printf(
    28             '<span class="posted-on">%1$s<a href="%2$s" rel="bookmark">' . $time_string . '</a></span>',
     29            '<span class="posted-on">%1$s<a href="%2$s" rel="bookmark">%3$s</a></span>',
    2930            twentynineteen_get_icon_svg( 'watch', 16 ),
    3031            esc_url( get_permalink() ),
    … …  
    7576        // Posted by
    7677        twentynineteen_posted_by();
     78
     79        // Posted on
     80        twentynineteen_posted_on();
    7781
    7882        // Hide category and tag text for pages.
    … …  
    186190     */
    187191    function twentynineteen_get_user_avatar_markup( $id_or_email = null ) {
     192
    188193        if ( ! isset( $id_or_email ) ) {
    189194            $id_or_email = get_current_user_id();
    190195        }
    191 
    192         $classes = array( 'comment-author', 'vcard' );
    193196
    194197        return sprintf( '<div class="comment-user-avatar comment-author vcard">%s</div>', get_avatar( $id_or_email, twentynineteen_get_avatar_size() ) );
    … …  
    219222    function twentynineteen_comment_form( $order ) {
    220223        if ( true === $order || strtolower( $order ) === strtolower( get_option( 'comment_order', 'asc' ) ) ) {
     224
    221225            comment_form(
    222226                array(
    223                     'title_reply_before' => twentynineteen_get_user_avatar_markup(),
    224227                    'logged_in_as'       => null,
    225228                    'title_reply'        => null,

  • branches/5.0/src/wp-content/themes/twentynineteen/index.php

    r43808 r43842  
    1212 * @package WordPress
    1313 * @subpackage Twenty_Nineteen
     14 * @since 1.0.0
    1415 */
    1516
    … …  
    1718?>
    1819
    19     <div id="primary" class="content-area">
     20    <section id="primary" class="content-area">
    2021        <main id="main" class="site-main">
    2122
    … …  
    4041?>
    4142        </main><!-- .site-main -->
    42     </div><!-- .content-area -->
     43    </section><!-- .content-area -->
    4344
    4445<?php

  • branches/5.0/src/wp-content/themes/twentynineteen/page.php

    r43808 r43842  
    77 * @package WordPress
    88 * @subpackage Twenty_Nineteen
     9 * @since 1.0.0
    910 */
    1011
    … …  
    1213?>
    1314
    14     <div id="primary" class="content-area">
     15    <section id="primary" class="content-area">
    1516        <main id="main" class="site-main">
    1617
    … …  
    3233
    3334        </main><!-- #main -->
    34     </div><!-- #primary -->
     35    </section><!-- #primary -->
    3536
    3637<?php

  • branches/5.0/src/wp-content/themes/twentynineteen/print.css

    r43808 r43842  
    2020    margin: 2cm;
    2121  }
    22   .hentry .entry-header, .site-footer .site-info {
     22  .entry .entry-header, .site-footer .site-info {
    2323    margin: 0;
    2424  }
    … …  
    9797  .social-navigation,
    9898  .site-branding-container:before,
    99   .hentry .entry-title:before,
     99  .entry .entry-title:before,
    100100  .entry-meta, .entry-footer,
    101101  .author-description:before,

  • branches/5.0/src/wp-content/themes/twentynineteen/print.scss

    r43808 r43842  
    2424  }
    2525
    26   .hentry .entry-header, .site-footer .site-info {
     26  .entry .entry-header, .site-footer .site-info {
    2727    margin: 0;
    2828  }
    … …  
    120120  .social-navigation,
    121121  .site-branding-container:before,
    122   .hentry .entry-title:before,
     122  .entry .entry-title:before,
    123123  .entry-meta, .entry-footer,
    124124  .author-description:before,

  • branches/5.0/src/wp-content/themes/twentynineteen/readme.txt

    r43808 r43842  
    24245. Navigate to Appearance > Customize in your admin panel and customize to taste.
    2525
    26  
     26
    2727## Copyright
    2828
    2929Twenty Nineteen WordPress Theme, Copyright 2018 WordPress.org
    30 Twenty Nineteen is distributed under the terms of the GNU GPL
     30Twenty Nineteen is distributed under the terms of the GNU GPL.
    3131
    3232This program is free software: you can redistribute it and/or modify

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

    r43808 r43842  
    4242
    4343        @include media(tablet) {
    44             margin-left: calc(1 * (100vw / 12));
    45             margin-right: calc(1 * (100vw / 12));
    46             max-width: calc(10 * (100vw / 12));
     44            margin-left: calc(2 * (100vw / 12));
     45            margin-right: calc(2 * (100vw / 12));
     46            max-width: calc(8 * (100vw / 12));
    4747        }
    4848    }
    … …  
    8282            margin-left: calc(2 * #{$size__spacing-unit});
    8383            margin-right: calc(2 * (100vw / 12));
     84        }
     85    }
     86    &.aligncenter {
     87
     88        margin-left: auto;
     89        margin-right: auto;
     90
     91        @include media(desktop) {
     92            margin-left: calc(2 * (100vw / 12));
     93            margin-right: calc(2 * (100vw / 12));
     94            max-width: calc(10 * (100vw / 12));
     95            position: relative;
     96            left: 25%;
     97            transform: translate(-50%);
    8498        }
    8599    }
    … …  
    132146            box-sizing: border-box;
    133147            font-weight: bold;
    134             padding: ($size__spacing-unit * .66) $size__spacing-unit;
     148            text-decoration: none;
     149            padding: ($size__spacing-unit * .76) $size__spacing-unit;
    135150            outline: none;
    136151            color: white;
    … …  
    161176            @include button-all-transition;
    162177            background: transparent;
    163             border: 2px solid $color__background-button;
    164 
    165             &:not(.has-text-color) {
    166                 color: $color__background-button;
    167             }
     178            border: 2px solid currentColor;
     179            color: $color__background-button;
    168180        }
    169181
    170182        &.is-style-outline .wp-block-button__link:hover {
    171             border-color: $color__background-button-hover;
    172183            color: $color__background-button-hover;
    173184        }
    … …  
    187198            font-weight: bold;
    188199            line-height: $font__line-height-heading;
    189 
    190             a:after {
    191                 color: $color__text-light;
    192                 content: ",";
    193             }
    194 
    195             &:last-child a:after {
    196                 color: $color__text-light;
    197                 content: ".";
     200           
     201            &:not(.menu-item-has-children) {
     202                padding-bottom: ( .75 * $size__spacing-unit );
     203            }
     204
     205            a {
     206                text-decoration: none;
     207            }
     208           
     209            ul {
     210                padding-left: $size__spacing-unit;
    198211            }
    199212        }
    … …  
    234247    }
    235248
    236     // !Paragraphs
     249    //! Paragraphs
    237250    .has-drop-cap {
    238251        &:not(:focus):first-letter {
    … …  
    245258    }
    246259
    247     // !Pullquote
     260    //! Pullquote
    248261    .wp-block-pullquote {
    249262        border: none;
    … …  
    251264
    252265        blockquote {
     266            color: $color__text-main;
    253267            border: none;
    254268            padding-bottom: calc(2 * #{$size__spacing-unit});
    … …  
    262276            margin-bottom: 0.5em;
    263277            margin-top: 0.5em;
    264             color: $color__text-main;
    265278
    266279            em {
    … …  
    279292            line-height: 1.6;
    280293            text-transform: none;
    281             color: $color__text-light;
    282294        }
    283295
    … …  
    296308        &.is-style-solid-color {
    297309
     310            background-color: $color__link;
     311
    298312            p {
    299313                font-size: $font__size-lg;
    … …  
    307321            }
    308322
     323            a {
     324                color: $color__background-body;
     325            }
     326
    309327            blockquote {
     328                color: $color__background-body;
    310329                margin: 0 auto;
    311330            }
    312331
    313             blockquote:not(.has-text-color) p,
    314             cite {
    315                 color: white;
    316             }
    317 
    318             &:not(.has-background-color) {
     332            .has-primary-background-color {
    319333                background-color: $color__link;
    320334            }
    … …  
    406420
    407421    //! Cover Image
    408     .wp-block-cover-image {
     422    .wp-block-cover-image,
     423    .wp-block-cover {
    409424
    410425        .wp-block-cover-image-text,
     426        .wp-block-cover-text,
    411427        h2 {
    412428            font-family: $font__heading;
    … …  
    433449        &.aligncenter {
    434450            h2,
    435             .wp-block-cover-image-text {
     451            .wp-block-cover-image-text,
     452            .wp-block-cover-text {
    436453                width: 100%;
    437454                z-index: 1;
    … …  
    447464
    448465            h2,
    449             .wp-block-cover-image-text {
     466            .wp-block-cover-image-text,
     467            .wp-block-cover-text {
    450468                padding: $size__spacing-unit;
    451469            }
    … …  
    456474
    457475            h2,
    458             .wp-block-cover-image-text {
     476            .wp-block-cover-image-text,
     477            .wp-block-cover-text {
    459478                padding: $size__spacing-unit;
    460479            }
    … …  
    629648        }
    630649    }
     650
     651    //! Custom colors
     652    .has-primary-background-color {
     653        background-color: $color__link;
     654
     655        p,
     656        h1,
     657        h2,
     658        h3,
     659        h4,
     660        h5,
     661        h6,
     662        a {
     663            color: $color__background-body;
     664        }
     665    }
    631666}

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss

    r43808 r43842  
    3737
    3838a:focus {
    39     outline: 0;
     39    outline: thin;
     40    outline-style: dotted;
    4041    text-decoration: underline;
    4142}
    … …  
    6263    max-width: 100%;
    6364    position: relative;
    64     &:before {
    65         background-color: $color__background-pre;
    66         border: 1px dashed $color__background-hr;
    67         border-radius: 3px;
    68         content: " ";
    69         display: block;
    70         height: 100%;
    71         left: 0;
    72         position: absolute;
    73         top: 0;
    74         width: 100%;
    75     }
    76 
    77     &:after {
    78         color: $color__text-input;
    79         content: "This image is broken :-/ ( "attr(alt)" )";
    80         display: block;
    81         left: 50%;
    82         position: absolute;
    83         text-align: center;
    84         top: 50%;
    85         transform: translate(-50%, -50%);
    86         width: 100%;
    87     }
    8865}
    8966
    … …  
    9370
    9471blockquote {
    95 
    9672    border-left: 2px solid $color__link;
    9773    margin-left: -($size__spacing-unit * 2);
    98     padding: $size__spacing-unit 0 ($size__spacing-unit * .5) ($size__spacing-unit * 2);
     74    padding: 0 0 0 $size__spacing-unit;
    9975
    10076    > p {

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/forms/_buttons.scss

    r43808 r43842  
    1616    line-height: $font__line-height-heading;
    1717    outline: none;
    18     padding: ( $size__spacing-unit * .66 ) $size__spacing-unit;
     18    padding: ( $size__spacing-unit * .76 ) $size__spacing-unit;
     19    vertical-align: bottom;
    1920
    2021    &:hover {

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/forms/_fields.scss

    r43808 r43842  
    2020    box-sizing: border-box;
    2121    outline: none;
    22     padding: #{.5 * $size__spacing-unit} #{.66 * $size__spacing-unit};
     22    padding: #{.36 * $size__spacing-unit} #{.66 * $size__spacing-unit};
    2323
    2424    &:focus {

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/media/_galleries.scss

    r43808 r43842  
    11.gallery {
    22    display: flex;
     3    flex-flow: row wrap;
     4    justify-content: center;
    35    margin-bottom: calc(1.5 * #{$size__spacing-unit});
    46}
    … …  
    68.gallery-item {
    79    display: inline-block;
    8     margin-right: $size__spacing-unit;
     10    padding-right: $size__spacing-unit;
    911    margin-bottom: $size__spacing-unit;
    1012    text-align: center;
    … …  
    2022
    2123    &:last-of-type {
    22         margin-right: 0;
     24        padding-right: 0;
    2325    }
    2426}

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss

    r43808 r43842  
    4141        background: $color__link;
    4242        mix-blend-mode: multiply;
    43         opacity: 1;
     43        opacity: .8;
    4444        z-index: 3;
     45       
     46        /* Browsers supporting mix-blend-mode don't need opacity < 1 */
     47        @supports (mix-blend-mode: multiply) {
     48            opacity: 1;
     49        }
    4550    }
    4651}

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/navigation/_links.scss

    r43808 r43842  
    1616
    1717    &:focus {
    18         outline: 0;
     18        outline: thin dotted;
    1919        text-decoration: underline;
    2020    }

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/navigation/_navigation.scss

    r43808 r43842  
    77## Menus
    88--------------------------------------------------------------*/
    9 @import "menus";
     9@import "menu-main-navigation";
     10@import "menu-social-navigation";
    1011
    1112/*--------------------------------------------------------------

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/navigation/_next-previous.scss

    r43808 r43842  
    55
    66    margin: calc(3 * 1rem) 0;
     7   
     8    @include media(tablet) {
     9        margin: calc(3 * 1rem) calc(2 * (100vw / 12));
     10        max-width: calc(6 * (100vw / 12));
     11    }
     12   
     13    @include media(desktop) {
     14        margin: calc(3 * 1rem) 0;
     15        max-width: 100%;
     16    }
    717
    818    .nav-links {
    … …  
    1222        display: flex;
    1323        flex-direction: column;
     24       
     25        @include media(tablet) {
     26            margin: 0;
     27        }
    1428
    1529        @include media(desktop) {
    … …  
    7488            @include media(desktop) {
    7589                order: 2;
     90                padding-left: $size__spacing-unit;
    7691            }
    7792
    … …  
    139154
    140155    .nav-links {
    141 
    142156        display: flex;
    143157        flex-direction: row;
     158        margin: 0 $size__spacing-unit;
     159
     160        @include media(desktop) {
     161            margin: 0 calc(2 * (100vw / 12));
     162            max-width: calc(8 * (100vw / 12));
     163        }
    144164    }
    145165
    … …  
    148168        min-width: 50%;
    149169        width: 100%;
     170        font-family: $font__heading;
     171        font-weight: bold;
    150172
    151173        .secondary-text {

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/site/footer/_site-footer.scss

    r43808 r43842  
    11/* Site footer */
    22
    3 .site-footer {
     3#colophon {
    44
    5     color: $color__text-light;
    6 
     5    .widget-area,
    76    .site-info {
    87
    … …  
    1918    }
    2019
    21     a {
     20    .site-info a {
    2221        color: inherit;
    2322
    … …  
    2726        }
    2827    }
     28
     29    .widget-column {
     30        display: flex;
     31        flex-wrap: wrap;
     32        .widget {
     33            width: 100%;
     34            @include media(desktop) {
     35                margin-right: calc(3 * #{$size__spacing-unit});
     36                width: calc(50% - (3 * #{$size__spacing-unit}));
     37            }
     38        }
     39    }
     40
     41    .site-info {
     42        color: $color__text-light;
     43    }
    2944}

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss

    r43808 r43842  
    1818    .entry-meta,
    1919    .entry-title {
    20         color: white;
     20        color: $color__background-body;
    2121    }
    2222
    2323    .main-navigation a,
     24    .main-navigation a + svg,
    2425    .social-navigation a,
    2526    .site-title a,
    26     .hentry a {
    27         color: white;
     27    .site-featured-image a {
     28        color: $color__background-body;
    2829        transition: opacity $link_transition ease-in-out;
    2930
    3031        &:hover,
    31         &:active {
    32             color: white;
     32        &:active,
     33        &:hover + svg,
     34        &:active + svg {
     35            color: $color__background-body;
    3336            opacity: 0.6;
    3437        }
    3538
    36         &:focus {
    37             color: white;
    38         }
    39     }
    40 
    41     // add focus state to social media icons
     39        &:focus,
     40        &:focus + svg {
     41            color: $color__background-body;
     42        }
     43    }
     44
     45    /* add focus state to social media icons */
    4246    .social-navigation a {
    4347        &:focus {
    44             color: white;
     48            color: $color__background-body;
    4549            opacity: 1;
    46             border-bottom: 1px solid white;
     50            border-bottom: 1px solid $color__background-body;
    4751        }
    4852    }
    4953
    5054    .social-navigation svg,
    51     .hentry svg {
     55    .site-featured-image svg {
    5256        /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
    5357        -webkit-filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
    54             filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
    55     }
    56 
    57     /* Post header styles */
    58     .hentry .entry-header {
    59 
     58                filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
     59    }
     60
     61    /* Entry header */
     62
     63    .site-featured-image .entry-header {
     64
     65        margin-bottom: 0;
    6066        margin-left: 0;
    6167        margin-right: 0;
    … …  
    7076
    7177            &:before {
    72                 background: white;
     78                background: $color__background-body;
     79            }
     80        }
     81
     82        /* Entry meta */
     83
     84        .entry-meta {
     85
     86            font-weight: 500;
     87
     88            > span {
     89
     90                margin-right: $size__spacing-unit;
     91                display: inline-block;
     92
     93                &:last-child {
     94                    margin-right: 0;
     95                }
     96            }
     97
     98            a {
     99
     100                @include link-transition;
     101                color: currentColor;
     102
     103                &:hover {
     104                    text-decoration: none;
     105                }
     106            }
     107
     108            .svg-icon {
     109                position: relative;
     110                display: inline-block;
     111                vertical-align: middle;
     112                margin-right: 0.5em;
     113            }
     114
     115            .discussion-avatar-list {
     116                display: none;
     117            }
     118        }
     119
     120        &.has-discussion {
     121
     122            @include media (tablet) {
     123
     124                .entry-meta {
     125                    display: flex;
     126                    position: relative;
     127                }
     128
     129                .entry-title {
     130                    padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
     131                }
     132
     133                .entry-meta .comment-count {
     134                    position: absolute;
     135                    right: 0;
     136                }
     137
     138                .entry-meta .discussion-avatar-list {
     139                    display: block;
     140                    position: absolute;
     141                    bottom: 100%;
     142                }
    73143            }
    74144        }
    … …  
    79149    .custom-logo-link {
    80150
    81         background: white;
    82         box-shadow: 0 0 0 0 rgba(white, 0);
     151        background: $color__background-body;
     152        box-shadow: 0 0 0 0 rgba($color__background-body, 0);
    83153
    84154        &:hover,
    85155        &:active,
    86156        &:focus {
    87             box-shadow: 0 0 0 2px rgba(white, 1);
     157            box-shadow: 0 0 0 2px rgba($color__background-body, 1);
    88158        }
    89159    }
    90160
    91161    /* Make sure important elements are above pseudo elements used for effects. */
    92     .site-branding,
    93     .hentry .entry-header {
     162    .site-branding {
     163        position: relative;
    94164        z-index: 10;
     165    }
     166
     167    .site-featured-image .entry-header {
     168        position: relative;
     169        z-index: 9;
    95170    }
    96171
    … …  
    98173    .site-branding-container:before,
    99174    .site-branding-container:after,
    100     .hentry:before,
    101     .hentry:after,
     175    .site-featured-image:before,
     176    .site-featured-image:after,
    102177    &:after {
    103178        display: block;
    … …  
    118193
    119194    /* First layer: grayscale. */
    120     .site-branding-container:before {
     195    .site-branding-container:before {
    121196        background-position: center;
    122197        background-repeat: no-repeat;
    123198        background-size: cover;
    124         filter: grayscale(100%);
    125199        z-index: 1;
     200
     201        /* When image filters are active, make it grayscale to colorize it blue. */
     202        .image-filters-enabled & {
     203            filter: grayscale(100%);
     204        }
    126205    }
    127206
    128207    /* Second layer: screen. */
    129     .hentry:before {
     208    .image-filters-enabled & .site-featured-image:before {
    130209        background: $color__link;
    131210        mix-blend-mode: screen;
    132211        opacity: 0.1;
    133         z-index: 2;
    134212    }
    135213
    136214    /* Third layer: multiply. */
    137     .hentry:after {
    138         background: $color__link;
     215    /* When image filters are inactive, a black overlay is added. */
     216    .site-featured-image:after {
     217        background: #000;
    139218        mix-blend-mode: multiply;
    140         opacity: 1;
    141         z-index: 3;
     219        opacity: .7;
     220
     221        /* When image filters are active, a blue overlay is added. */
     222        .image-filters-enabled & {
     223            background: $color__link;
     224            opacity: .8;
     225            z-index: 3;
     226
     227            /* Browsers supporting mix-blend-mode don't need opacity < 1 */
     228            @supports (mix-blend-mode: multiply) {
     229                opacity: 1;
     230            }
     231        }
    142232    }
    143233
    144234    /* Fourth layer: overlay. */
    145     .site-branding-container:after {
    146         background: rgba(white, 0.35);
     235    .image-filters-enabled & .site-branding-container:after {
     236        background: rgba(#000, 0.35);
    147237        mix-blend-mode: overlay;
    148238        opacity: 0.5;
    149239        z-index: 4;
     240
     241        /* Browsers supporting mix-blend-mode can have a light overlay */
     242        @supports (mix-blend-mode: overlay) {
     243            background: rgba($color__background-body, 0.35);
     244        }
    150245    }
    151246
    152247    /* Fifth layer: readability overlay */
    153248    &:after {
    154         background: mix($color__link, black, 12%);
    155 
     249        background: #000;
    156250        /**
    157251         * Add a transition to the readability overlay, to add a subtle
    … …  
    159253         */
    160254        transition: opacity 1200ms ease-in-out;
    161 
     255        opacity: 0.7;
    162256        z-index: 5;
    163         opacity: 0.38;
    164 
    165         @include media(tablet) {
    166             opacity: 0.18;
    167         }
    168 
    169         @include media(desktop) {
    170             opacity: 0.1;
    171         }
    172     }
     257
     258        /* When image filters are active, a blue overlay is added. */
     259        .image-filters-enabled & {
     260            background: mix($color__link, black, 12%);
     261            opacity: 0.38;
     262
     263            @include media(tablet) {
     264                opacity: 0.18;
     265            }
     266        }
     267    }
     268
    173269
    174270    ::-moz-selection {
    175         background: rgba(white, 0.17);
     271        background: rgba($color__background-body, 0.17);
    176272    }
    177273
    178274    ::selection {
    179         background: rgba(white, 0.17);
     275        background: rgba($color__background-body, 0.17);
    180276    }
    181277}

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/site/header/_site-header.scss

    r43808 r43842  
    3232    @include media(tablet) {
    3333        margin: 0 calc(2 * (100vw / 12));
    34         max-width: 22em;
    3534    }
    3635}
    … …  
    4746        margin-bottom: 0;
    4847        position: absolute;
    49         right: calc(100% + (0.5 * calc(100vw / 12)));
     48        right: calc(100% + (0.5 * 100vw / 12));
    5049        top: 4px; // Accounts for box-shadow widths
    5150        z-index: 999;
    … …  
    8281
    8382.site-title {
    84 
    8583    margin: auto;
    8684    display: inline;
    87     color: $color__text-main;
     85   
     86
     87    a:link,
     88    a:visited {
     89        color: $color__text-main;
     90    }
    8891
    8992    .featured-image & {
    … …  
    111114        display: inline;
    112115    }
     116
     117    &:not(:empty) + .site-description:not(:empty):before {
     118        content: "\2014";
     119        margin: 0 .2em;
     120    }
    113121}
    114122
    … …  
    121129    font-weight: normal;
    122130    margin: 0;
    123 
    124     &:not(:empty):before {
    125         content: "\2014";
    126         margin: 0 .2em;
    127     }
    128131}

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_archives.scss

    r43808 r43842  
    3434}
    3535
    36 .hfeed .hentry .entry-header {
     36.archive .page-header .page-description {
     37    display: block;
     38    color: $color__text-main;
     39    font-size: 1em;
     40}
     41
     42.hfeed .entry .entry-header {
    3743
    3844    @include media(tablet) {

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

    r43808 r43842  
    1010
    1111    /* Add extra margin when the comments section is located immediately after the
    12      * post itself (this happens on pages). 
     12     * post itself (this happens on pages).
    1313     */
    14     .hentry + & {
     14    .entry + & {
    1515        margin-top: calc(3 * #{$size__spacing-unit});
    1616    }
    1717
    18     .comments-title-wrap,
    1918    .comment-list,
     19    .comment-navigation,
    2020    > .comment-respond,
    2121    .comment-form-flex,
    2222    .no-comments {
    23 
    2423        margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
    2524
    … …  
    3231    .comments-title-wrap {
    3332
    34         align-items: baseline;
    35         display: flex;
    36         justify-content: space-between;
     33        margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
     34
     35        @include media(tablet) {
     36            align-items: baseline;
     37            display: flex;
     38            justify-content: space-between;
     39            margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
     40            max-width: calc(8 * (100vw / 12));
     41        }
    3742
    3843        .comments-title {
    3944            @include post-section-dash;
    4045            margin: 0;
     46
     47            @include media(tablet) {
     48                flex: 1 0 calc(3 * (100vw / 12));
     49            }
     50        }
     51
     52        .discussion-meta {
     53            @include media(tablet) {
     54                flex: 0 0 calc(2 * (100vw / 12));
     55                margin-left: #{$size__spacing-unit};
     56            }
    4157        }
    4258    }
    … …  
    4965
    5066#respond {
    51 
    5267    position: relative;
    5368
    5469    .comment-user-avatar {
    55         display: none;
     70        margin: $size__spacing-unit 0 -#{$size__spacing-unit};
    5671    }
    5772
    … …  
    7590        display: none;
    7691    }
    77 
    78     > #respond {
    79         @include media(desktop) {
    80 
    81             .comment-user-avatar {
    82                 position: absolute;
    83                 display: block;
    84                 top: 0;
    85                 left: 0;
    86 
    87                 .avatar {
    88                     display: block;
    89                 }
    90             }
    91         }
    92     }
    9392}
    9493
    9594.comment-form-flex {
    96 
    9795    display: flex;
    9896    flex-direction: column;
    … …  
    105103
    106104    #respond {
    107 
    108105        order: 2;
     106
    109107        + .comments-title {
    110108            display: block;
    … …  
    114112
    115113.comment-list {
    116 
    117114    list-style: none;
    118115    padding: 0;
    … …  
    126123        margin-top: 0;
    127124    }
    128 
    129125}
    130126
    131127.comment-reply {
    132 
    133128    left: calc(#{$size__spacing-unit} + 100%);
    134129    bottom: 0;
    … …  
    145140
    146141.comment {
    147 
    148142    list-style: none;
    149143    position: relative;
    150144
    151145    @include media(tablet) {
    152 
    153146        padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));
    154147
    … …  
    218211            position: absolute;
    219212            background: lighten( $color__link, 8% );
    220             right: calc(100% + #{$size__spacing-unit * .25});
     213            right: calc(100% - #{$size__spacing-unit * 2.5});
    221214            top: -3px;
    222215            width: 18px;
     216
     217            @include media(tablet) {
     218                right: calc(100% + #{$size__spacing-unit * .75});
     219            }
    223220
    224221            svg {
    … …  
    283280
    284281        .comment-edit-link {
    285 
    286282            position: relative;
    287283            padding-left: $size__spacing-unit;
    … …  
    346342            width: calc(1.5 * #{$size__spacing-unit});
    347343        }
    348 
    349         @include media(tablet) {
    350 
    351         }
    352344    }
    353345}
    354346
    355347.discussion-meta {
    356 
    357     .discussion-avatar-list {
    358         display: inline-block;
    359         margin-right: 8px;
    360     }
    361348
    362349    .discussion-meta-info {

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss

    r43808 r43842  
    2525}
    2626
    27 .hentry {
     27.entry {
    2828
    2929    margin-top: calc(6 * #{$size__spacing-unit});
    … …  
    4040        @include media(tablet) {
    4141            margin: calc(3 * #{ $size__spacing-unit}) calc(2 * (100vw / 12 ) ) $size__spacing-unit;
    42 
    43             .featured-image & {
    44                 margin-bottom: 0;
    45             }
    4642        }
    4743    }
    … …  
    7066
    7167            margin-right: $size__spacing-unit;
     68            display: inline-block;
    7269
    7370            &:last-child {
    … …  
    9693
    9794    .entry-meta {
    98 
    9995        margin: $size__spacing-unit 0;
    100 
    101         &.has-discussion .comment-count {
    102 
    103             @include media(desktop) {
    104                 float: right;
    105                 position: relative;
    106             }
    107 
    108             .discussion-avatar-list {
    109                 display: none;
    110 
    111                 @include media(desktop) {
    112                     bottom: 100%;
    113                     display: block;
    114                     position: absolute;
    115                 }
    116             }
    117         }
    11896    }
    11997
    … …  
    123101
    124102        @include media(tablet) {
    125             margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
     103            margin: $size__spacing-unit calc(2 * (100vw / 12)) calc(3 * #{$size__spacing-unit});
    126104            max-width: calc(8 * (100vw / 12));
    127105        }
    … …  
    163141
    164142            .post-thumbnail-inner {
    165                 @include filter-grayscale;
     143                filter: grayscale(100%);
     144               
     145                &:after {
     146                    background: rgba(#000, 0.35);
     147                    content: "";
     148                    display: block;
     149                    height: 100%;
     150                    opacity: .5;
     151                    pointer-events: none;
     152                    position: absolute;
     153                    top: 0;
     154                    width: 100%;
     155                    z-index: 4;
     156
     157                    @supports (mix-blend-mode: multiply) {
     158                        display: none;
     159                    }
     160                }
    166161            }
    167162
    … …  
    173168                top: 0; left: 0;
    174169                content: "\020";
    175                 display: block;
    176170                pointer-events: none;
    177171            }
    178172
    179173            @include filter-duotone;
    180 
    181         }
    182 
     174           
     175        }
    183176    }
    184177
    185178    .entry-content {
     179
     180        p {
     181            word-wrap: break-word;
     182        }
    186183
    187184        .more-link {
    … …  
    191188
    192189            &:after {
    193                 content: "»";
     190                content: "\02192";
    194191                margin-left: 0.5em;
    195192            }
    … …  
    239236    }
    240237}
     238
     239/* Author description */
     240
     241.author-bio {
     242
     243    margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
     244
     245    @include media(tablet) {
     246        margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
     247        max-width: calc(8 * (100vw / 12));
     248    }
     249
     250    @include media(tablet) {
     251        max-width: calc(6 * (100vw / 12));
     252    }
     253
     254    .author-title {
     255        @include post-section-dash;
     256        display: inline;
     257    }
     258
     259    .author-description {
     260
     261        display: inline;
     262        color: $color__text-light;
     263        font-size: $font__size-md;
     264        line-height: $font__line-height-heading;
     265
     266        .author-link {
     267            display: inline-block;
     268
     269            &:hover {
     270                color: $color__link-hover;
     271                text-decoration: none;
     272            }
     273        }
     274    }
     275}

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss

    r43808 r43842  
    66        max-width: 100%;
    77    }
     8
     9    a {
     10        color: $color__link;
     11
     12        &:hover {
     13            color: $color__link-hover;
     14        }
     15    }
    816}
     17
     18.widget_archive,
     19.widget_nav_menu,
     20.widget_meta,
     21.widget_recent_entries,
     22.widget_rss {
     23
     24    ul {
     25        padding: 0;
     26        list-style: none;
     27
     28        li {
     29            color: $color__text-light;
     30            font-family: $font__heading;
     31            font-size: calc(#{$font__size_base} * #{$font__size-lg / 1em} );
     32            font-weight: bold;
     33            line-height: $font__line-height-heading;
     34
     35            &:not(.menu-item-has-children) {
     36                padding-bottom: ( .75 * $size__spacing-unit );
     37            }
     38
     39            ul {
     40                padding-left: $size__spacing-unit;
     41            }
     42        }
     43
     44        &.sub-menu {
     45            padding-top: ( .75 * $size__spacing-unit );
     46        }
     47    }
     48}
     49
     50.widget_search {
     51
     52    .search-submit {
     53        display: block;
     54        margin-top: $size__spacing-unit;
     55    }
     56}

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/typography/_copy.scss

    r43808 r43842  
    1010blockquote {
    1111
    12     > p {
    13         font-size: $font__size-lg;
    14         font-style: italic;
    15         line-height: $font__line-height-heading;
    16     }
    17 
    1812    cite {
    19         font-size: $font__size-sm;
     13        font-size: $font__size-xs;
    2014        font-style: normal;
    2115        font-family: $font__heading;

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/typography/_headings.scss

    r43808 r43842  
    22.page-description,
    33h2.author-title,
     4.author-description .author-link,
    45.not-found .page-title,
    56.error-404 .page-title,
    … …  
    4142.main-navigation ul.main-menu > li,
    4243.social-navigation,
    43 .author-description p.author-bio,
     44.author-description .author-bio,
    4445.nav-links {
    4546    line-height: 1.25;

  • branches/5.0/src/wp-content/themes/twentynineteen/search.php

    r43808 r43842  
    77 * @package WordPress
    88 * @subpackage Twenty_Nineteen
     9 * @since 1.0.0
    910 */
    1011
    … …  
    2122                    <?php esc_html_e( 'Search results for:', 'twentynineteen' ); ?>
    2223                </h1>
    23                 <div class="page-description">
    24                     <?php echo get_search_query(); ?>
    25                 </div>
     24                <div class="page-description"><?php echo get_search_query(); ?></div>
    2625            </header><!-- .page-header -->
    2726
    … …  
    3635                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
    3736                 */
    38                 get_template_part( 'template-parts/content/content' );
     37                get_template_part( 'template-parts/content/content', 'excerpt' );
    3938
    4039                // End the loop.

  • branches/5.0/src/wp-content/themes/twentynineteen/single.php

    r43808 r43842  
    77 * @package WordPress
    88 * @subpackage Twenty_Nineteen
     9 * @since 1.0.0
    910 */
    1011
    … …  
    1213?>
    1314
    14     <div id="primary" class="content-area">
     15    <section id="primary" class="content-area">
    1516        <main id="main" class="site-main">
    1617
    … …  
    2728                    the_post_navigation(
    2829                        array(
    29                             'prev_text' => _x( '<span class="meta-nav">Published in</span><span class="post-title">%title</span>', 'Parent post link', 'twentynineteen' ),
     30                            'prev_text' => _x( '<span class="meta-nav">Published in</span><br/><span class="post-title">%title</span>', 'Parent post link', 'twentynineteen' ),
    3031                        )
    3132                    );
    … …  
    5354
    5455        </main><!-- #main -->
    55     </div><!-- #primary -->
     56    </section><!-- #primary -->
    5657
    5758<?php get_template_part( 'template-parts/post/post', 'navigation' ); ?>

  • branches/5.0/src/wp-content/themes/twentynineteen/style-editor-frame.css

    r43808 r43842  
    99 * layers of box-shadow to add the border visually, which will render the border smoother. */
    1010/** === Title === */
    11 body.gutenberg-editor-page .gutenberg .editor-post-title__block:before {
     11body.block-editor-page .block-editor .editor-post-title__block:before {
    1212  background: #767676;
    1313  content: "\020";
    … …  
    1818}
    1919
    20 body.gutenberg-editor-page .gutenberg .editor-post-title__block:before {
     20body.block-editor-page .block-editor .editor-post-title__block:before {
    2121  width: 2.8125em;
    2222  margin-top: 0;
    … …  
    2727}
    2828
    29 body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-title__input {
     29body.block-editor-page .block-editor .editor-post-title__block .editor-post-title__input {
    3030  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    3131  font-size: 2.8125em;
    … …  
    3333
    3434/** === Default Appender === */
    35 body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
     35body.block-editor-page .block-editor .editor-default-block-appender__content {
    3636  font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
    3737  font-size: 22px;
    … …  
    4040/** === Off-Center Content === */
    4141@media only screen and (min-width: 768px) {
    42   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow {
     42  body.block-editor-page .block-editor .edit-post-layout .editor-writing-flow {
    4343    max-width: 80%;
    4444    margin: 0 10%;
    4545  }
    46   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-post-title__block,
    47   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-default-block-appender,
    48   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block {
     46  body.block-editor-page .block-editor .edit-post-layout .editor-post-title__block,
     47  body.block-editor-page .block-editor .edit-post-layout .editor-default-block-appender,
     48  body.block-editor-page .block-editor .edit-post-layout .editor-block-list__block {
    4949    margin-left: 0;
    5050    margin-right: 0;
    5151  }
    52   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="full"] {
     52  body.block-editor-page .block-editor .edit-post-layout .editor-block-list__block[data-align="full"] {
    5353    width: calc( 125% + 88px + 28px);
    5454    position: relative;
    5555    left: calc( -12.5% - 46px - 14px);
    5656  }
    57   body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="right"] {
     57  body.block-editor-page .block-editor .edit-post-layout .editor-block-list__block[data-align="right"] {
    5858    max-width: 125%;
    5959  }

  • branches/5.0/src/wp-content/themes/twentynineteen/style-editor-frame.scss

    r43808 r43842  
    1313/** === Title === */
    1414
    15 body.gutenberg-editor-page .gutenberg .editor-post-title__block {
     15body.block-editor-page .block-editor .editor-post-title__block {
    1616    @include post-section-dash;
    1717
    … …  
    3333/** === Default Appender === */
    3434
    35 body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
     35body.block-editor-page .block-editor .editor-default-block-appender__content {
    3636    font-family: $font__body;
    3737    font-size: $font__size_base;
    … …  
    4040/** === Off-Center Content === */
    4141
    42 body.gutenberg-editor-page .gutenberg .edit-post-layout {
     42body.block-editor-page .block-editor .edit-post-layout {
    4343
    4444    @include media(tablet) {

  • branches/5.0/src/wp-content/themes/twentynineteen/style-editor.css

    r43808 r43842  
    117117}
    118118
     119.has-primary-background-color p,
     120.has-primary-background-color h1,
     121.has-primary-background-color h2,
     122.has-primary-background-color h3,
     123.has-primary-background-color h4,
     124.has-primary-background-color h5,
     125.has-primary-background-color h6,
     126.has-primary-background-color a,
     127.has-primary-background-color a:hover {
     128  color: #fff;
     129}
     130
    119131figcaption,
    120132.gallery-caption {
    … …  
    134146}
    135147
    136 /** === Cover Image === */
    137 .wp-block-cover-image h2,
    138 .wp-block-cover-image .wp-block-cover-image-text {
     148/** === Cover === */
     149.wp-block-cover h2,
     150.wp-block-cover .wp-block-cover-text {
    139151  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    140152  font-size: 2.25em;
    … …  
    143155}
    144156
    145 .wp-block-cover-image.has-left-content {
     157.wp-block-cover.has-left-content {
    146158  justify-content: center;
    147159}
    148160
    149 .wp-block-cover-image.has-left-content h2,
    150 .wp-block-cover-image.has-left-content .wp-block-cover-image-text {
     161.wp-block-cover.has-left-content h2,
     162.wp-block-cover.has-left-content .wp-block-cover-text {
    151163  padding: 1em;
    152164}
    153165
    154 .wp-block-cover-image.has-right-content {
     166.wp-block-cover.has-right-content {
    155167  justify-content: center;
    156168}
    157169
    158 .wp-block-cover-image.has-right-content h2,
    159 .wp-block-cover-image.has-right-content .wp-block-cover-image-text {
     170.wp-block-cover.has-right-content h2,
     171.wp-block-cover.has-right-content .wp-block-cover-text {
    160172  padding: 1em;
    161173}
    162174
    163 body[data-type="core/cover-image"][data-align="left"] h2,
    164 body[data-type="core/cover-image"][data-align="left"] .wp-block-cover-image-text,
    165 body[data-type="core/cover-image"][data-align="right"] h2,
    166 body[data-type="core/cover-image"][data-align="right"] .wp-block-cover-image-text {
     175body[data-type="core/cover"][data-align="left"] h2,
     176body[data-type="core/cover"][data-align="left"] .wp-block-cover-text,
     177body[data-type="core/cover"][data-align="right"] h2,
     178body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
    167179  width: 100%;
    168180  max-width: 305px;
    … …  
    170182
    171183@media only screen and (min-width: 1168px) {
    172   body[data-type="core/cover-image"][data-align="wide"] h2,
    173   body[data-type="core/cover-image"][data-align="wide"] .wp-block-cover-image-text,
    174   body[data-type="core/cover-image"][data-align="full"] h2,
    175   body[data-type="core/cover-image"][data-align="full"] .wp-block-cover-image-text {
     184  body[data-type="core/cover"][data-align="wide"] h2,
     185  body[data-type="core/cover"][data-align="wide"] .wp-block-cover-text,
     186  body[data-type="core/cover"][data-align="full"] h2,
     187  body[data-type="core/cover"][data-align="full"] .wp-block-cover-text {
    176188    padding: 0;
    177189    width: calc(6 * (100vw / 12));
    … …  
    196208}
    197209
    198 .wp-block-button .wp-block-button__link:not(.has-background),
    199 .wp-block-button .wp-block-button__link:not(.has-background) {
     210.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    200211  background: #0073aa;
    201212}
    … …  
    205216}
    206217
    207 .wp-block-button.is-style-outline .wp-block-button__link,
    208 .wp-block-button.is-style-outline .wp-block-button__link:hover,
    209 .wp-block-button.is-style-outline .wp-block-button__link:focus,
    210 .wp-block-button.is-style-outline .wp-block-button__link:active {
     218.wp-block-button.is-style-outline, .wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline:active {
    211219  background: transparent;
    212   border-color: #0073aa;
    213 }
    214 
    215 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
    216 .wp-block-button.is-style-outline .wp-block-button__link:hover:not(.has-text-color),
    217 .wp-block-button.is-style-outline .wp-block-button__link:focus:not(.has-text-color),
    218 .wp-block-button.is-style-outline .wp-block-button__link:active:not(.has-text-color) {
     220  color: #0073aa;
     221}
     222
     223.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline:hover .wp-block-button__link, .wp-block-button.is-style-outline:focus .wp-block-button__link, .wp-block-button.is-style-outline:active .wp-block-button__link {
     224  background: transparent;
     225}
     226
     227.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color), .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color) {
    219228  color: #0073aa;
    220229}
    … …  
    269278}
    270279
    271 .wp-block-pullquote.is-style-solid-color blockquote:not(.has-text-color) p,
    272 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation {
    273   color: white;
     280.wp-block-pullquote.is-style-solid-color blockquote:not(.has-text-color) {
     281  color: #fff;
    274282}
    275283
    … …  
    299307  margin-bottom: 0.5em;
    300308  margin-top: 0.5em;
    301   color: #111;
    302309}
    303310
    … …  
    323330  line-height: 1.6;
    324331  text-transform: none;
    325   color: #767676;
    326332}
    327333
    … …  
    345351body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color {
    346352  padding: 1em;
    347 }
    348 
    349 body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color p,
    350 body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
    351 body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color p,
    352 body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation {
    353   color: white;
    354353}
    355354
    … …  
    434433}
    435434
     435ul.wp-block-archives li:not(.menu-item-has-children),
     436.wp-block-categories li:not(.menu-item-has-children),
     437.wp-block-latest-posts li:not(.menu-item-has-children) {
     438  padding-bottom: 0.75rem;
     439}
     440
    436441ul.wp-block-archives li a,
    437442.wp-block-categories li a,
    … …  
    440445}
    441446
    442 ul.wp-block-archives li a:after,
    443 .wp-block-categories li a:after,
    444 .wp-block-latest-posts li a:after {
    445   color: #767676;
    446   content: ",";
    447 }
    448 
    449 ul.wp-block-archives li:last-child a:after,
    450 .wp-block-categories li:last-child a:after,
    451 .wp-block-latest-posts li:last-child a:after {
    452   color: #767676;
    453   content: ".";
     447ul.wp-block-archives li ul,
     448.wp-block-categories li ul,
     449.wp-block-latest-posts li ul {
     450  padding-left: 1rem;
    454451}
    455452
    … …  
    503500.wp-block-freeform {
    504501  /* Add style for galleries in classic-editor block */
     502  /* Add style for galleries in classic-editor block */
     503}
     504
     505.wp-block-freeform blockquote {
     506  border-left: 2px solid #0073aa;
     507}
     508
     509.wp-block-freeform blockquote cite {
     510  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     511  font-size: 0.71111em;
     512  font-style: normal;
     513  line-height: 1.6;
     514  color: #767676;
    505515}
    506516

  • branches/5.0/src/wp-content/themes/twentynineteen/style-editor.scss

    r43808 r43842  
    103103}
    104104
     105.has-primary-background-color {
     106   
     107    p,
     108    h1,
     109    h2,
     110    h3,
     111    h4,
     112    h5,
     113    h6,
     114    a,
     115    a:hover {
     116        color: $color__background-body;
     117    }
     118}
     119
    105120figcaption,
    106121.gallery-caption {
    … …  
    124139}
    125140
    126 /** === Cover Image === */
    127 
    128 .wp-block-cover-image {
     141/** === Cover === */
     142
     143.wp-block-cover {
    129144
    130145    h2,
    131     .wp-block-cover-image-text {
     146    .wp-block-cover-text {
    132147        font-family: $font__heading;
    133148        font-size: $font__size-xl;
    … …  
    140155
    141156        h2,
    142         .wp-block-cover-image-text {
     157        .wp-block-cover-text {
    143158            padding: 1em;
    144159        }
    … …  
    149164
    150165        h2,
    151         .wp-block-cover-image-text {
     166        .wp-block-cover-text {
    152167            padding: 1em;
    153168        }
    … …  
    155170}
    156171
    157 body[data-type="core/cover-image"][data-align="left"],
    158 body[data-type="core/cover-image"][data-align="right"] {
     172body[data-type="core/cover"][data-align="left"],
     173body[data-type="core/cover"][data-align="right"] {
    159174
    160175    h2,
    161     .wp-block-cover-image-text {
     176    .wp-block-cover-text {
    162177        width: 100%;
    163178        max-width: 305px;
    … …  
    165180}
    166181
    167 body[data-type="core/cover-image"][data-align="wide"],
    168 body[data-type="core/cover-image"][data-align="full"] {
     182body[data-type="core/cover"][data-align="wide"],
     183body[data-type="core/cover"][data-align="full"] {
    169184
    170185    @include media(desktop) {
    171186        h2,
    172         .wp-block-cover-image-text {
     187        .wp-block-cover-text {
    173188            padding: 0;
    174189            width: calc(6 * (100vw / 12));
    … …  
    201216    }
    202217
    203     .wp-block-button__link:not(.has-background),
    204     .wp-block-button__link:not(.has-background) {
     218    &:not(.is-style-outline) .wp-block-button__link {
    205219        background: $color__background-button;
    206220    }
    … …  
    210224    }
    211225
    212     &.is-style-outline .wp-block-button__link,
    213     &.is-style-outline .wp-block-button__link:hover,
    214     &.is-style-outline .wp-block-button__link:focus,
    215     &.is-style-outline .wp-block-button__link:active {
     226    &.is-style-outline,
     227    &.is-style-outline:hover,
     228    &.is-style-outline:focus,
     229    &.is-style-outline:active {
    216230        background: transparent;
    217         border-color: $color__background-button;
    218 
    219         &:not(.has-text-color) {
    220             color: $color__background-button;
     231        color: $color__background-button;
     232
     233        .wp-block-button__link {
     234            background: transparent;
     235
     236            &:not(.has-text-color) {
     237                color: $color__background-button;
     238            }
    221239        }
    222240    }
    … …  
    275293        }
    276294
    277         blockquote:not(.has-text-color) p,
    278         .wp-block-pullquote__citation {
    279             color: white;
     295        blockquote:not(.has-text-color) {
     296            color: $color__background-body;
    280297        }
    281298
    … …  
    303320        margin-bottom: 0.5em;
    304321        margin-top: 0.5em;
    305         color: $color__text-main;
    306322
    307323        @include media(tablet) {
    … …  
    315331        line-height: 1.6;
    316332        text-transform: none;
    317         color: $color__text-light;
    318333    }
    319334
    … …  
    335350        .wp-block-pullquote.is-style-solid-color {
    336351            padding: 1em;
    337 
    338             p,
    339             .wp-block-pullquote__citation {
    340                 color: white;
    341             }
    342352        }
    343353    }
    … …  
    426436        line-height: $font__line-height-heading;
    427437
     438        &:not(.menu-item-has-children) {
     439            padding-bottom: ( .75 * $size__spacing-unit );
     440        }
     441
    428442        a {
    429443            text-decoration: none;
    430 
    431             &:after {
    432                 color: $color__text-light;
    433                 content: ",";
    434             }
    435         }
    436 
    437         &:last-child a:after {
    438             color: $color__text-light;
    439             content: ".";
     444        }
     445
     446        ul {
     447            padding-left: $size__spacing-unit;
    440448        }
    441449    }
    … …  
    500508
    501509    /* Add style for galleries in classic-editor block */
     510    blockquote {
     511        border-left: 2px solid $color__link;
     512
     513        cite {
     514            font-family: $font__heading;
     515            font-size: $font__size-xs;
     516            font-style: normal;
     517            line-height: 1.6;
     518            color: $color__text-light;
     519        }
     520    }
     521
     522    /* Add style for galleries in classic-editor block */
    502523    .gallery {
    503524

  • branches/5.0/src/wp-content/themes/twentynineteen/style-rtl.css

    r43808 r43842  
    423423.page-description,
    424424h2.author-title,
     425.author-description .author-link,
    425426.not-found .page-title,
    426427.error-404 .page-title,
    … …  
    462463.main-navigation ul.main-menu > li,
    463464.social-navigation,
    464 .author-description p.author-bio,
     465.author-description .author-bio,
    465466.nav-links {
    466467  line-height: 1.25;
    … …  
    581582}
    582583
    583 blockquote > p {
    584   font-size: 1.6875em;
    585   font-style: italic;
    586   line-height: 1.2;
    587 }
    588 
    589584blockquote cite {
    590   font-size: 0.88889em;
     585  font-size: 0.71111em;
    591586  font-style: normal;
    592587  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    … …  
    667662
    668663a:focus {
    669   outline: 0;
     664  outline: thin;
     665  outline-style: dotted;
    670666  text-decoration: underline;
    671667}
    … …  
    731727}
    732728
    733 img:before {
    734   background-color: #eee;
    735   border: 1px dashed #ccc;
    736   border-radius: 3px;
    737   content: " ";
    738   display: block;
    739   height: 100%;
    740   right: 0;
    741   position: absolute;
    742   top: 0;
    743   width: 100%;
    744 }
    745 
    746 img:after {
    747   color: #666;
    748   content: "This image is broken :-/ ( " attr(alt) " )";
    749   display: block;
    750   right: 50%;
    751   position: absolute;
    752   text-align: center;
    753   top: 50%;
    754   transform: translate(50%, -50%);
    755   width: 100%;
    756 }
    757 
    758729figure {
    759730  margin: 0;
    … …  
    763734  border-right: 2px solid #0073aa;
    764735  margin-right: -2rem;
    765   padding: 1rem 2rem 0.5rem 0;
     736  padding: 0 1rem 0 0;
    766737}
    767738
    … …  
    800771  line-height: 1.2;
    801772  outline: none;
    802   padding: 0.66rem 1rem;
     773  padding: 0.76rem 1rem;
     774  vertical-align: bottom;
    803775}
    804776
    … …  
    853825  box-sizing: border-box;
    854826  outline: none;
    855   padding: 0.5rem 0.66rem;
     827  padding: 0.36rem 0.66rem;
    856828}
    857829
    … …  
    909881
    910882a:focus {
    911   outline: 0;
     883  outline: thin dotted;
    912884  text-decoration: underline;
    913885}
    … …  
    918890/** === Main menu === */
    919891.main-navigation {
    920   display: inline;
     892  display: block;
     893  margin-top: 0.25rem;
    921894  /*
    922895     * :focus-within needs its own selector so other similar
    923896     * selectors don’t get ignored if a browser doesn’t recognize it
    924897     */
    925 }
    926 
    927 @media only screen and (min-width: 768px) {
    928   .main-navigation {
    929     display: block;
    930   }
     898  /* Only show one submenu expand button at a time (desktop vs mobile) */
    931899}
    932900
    … …  
    946914
    947915.main-navigation .main-menu > li {
     916  color: #0073aa;
    948917  display: inline;
     918}
     919
     920@media only screen and (min-width: 768px) {
     921  .main-navigation .main-menu > li {
     922    position: relative;
     923  }
    949924}
    950925
    … …  
    952927  font-weight: 700;
    953928  color: #0073aa;
     929  margin-left: 0.5rem;
    954930}
    955931
    956932.main-navigation .main-menu > li > a + svg {
    957   color: #0073aa;
    958   margin-left: -0.25rem;
    959 }
    960 
    961 .main-navigation .main-menu > li > a:hover {
    962   color: #005177;
    963 }
    964 
     933  margin-left: 0.5rem;
     934}
     935
     936.main-navigation .main-menu > li > a:hover,
    965937.main-navigation .main-menu > li > a:hover + svg {
    966938  color: #005177;
    967939}
    968940
    969 .main-navigation .main-menu > li > a:after {
    970   content: ",";
    971   display: inline;
    972   color: #767676;
    973 }
    974 
    975 .main-navigation .main-menu > li.menu-item-has-children:after {
    976   content: ",";
    977   display: inline;
    978   color: #767676;
     941.main-navigation .main-menu > li.menu-item-has-children {
     942  display: inline-block;
     943}
     944
     945.main-navigation .main-menu > li.menu-item-has-children > a {
     946  margin-left: 0.125rem;
    979947}
    980948
    … …  
    985953}
    986954
    987 .main-navigation .main-menu > li:last-child > a:after {
    988   content: ".";
     955.main-navigation .main-menu > li.menu-item-has-children .mobile-submenu-expand svg,
     956.main-navigation .main-menu > li.menu-item-has-children .desktop-submenu-expand svg {
     957  position: relative;
     958  top: 0.2rem;
     959}
     960
     961.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand,
     962.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand {
     963  margin-left: 0.5rem;
    989964}
    990965
    … …  
    1000975  display: none;
    1001976  float: right;
    1002   width: 100%;
    1003977  position: absolute;
    1004978  opacity: 0;
    1005   right: -999em;
     979  right: -999px;
    1006980  z-index: 99999;
    1007   transition: opacity 0.5s ease-in-out;
    1008981}
    1009982
    1010983@media only screen and (min-width: 768px) {
    1011984  .main-navigation .sub-menu {
     985    width: -webkit-max-content;
     986    width: -moz-max-content;
     987    width: max-content;
    1012988    max-width: calc(3 * (100vw / 12));
    1013989  }
    … …  
    1022998}
    1023999
    1024 .main-navigation .sub-menu > li.menu-item-has-children svg {
     1000.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand,
     1001.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand {
    10251002  position: absolute;
    1026   left: 0.5rem;
    1027   top: 0.65rem;
     1003  width: calc( 24px + 1rem);
     1004  left: 0;
     1005  top: calc( .125 * 1rem);
     1006  bottom: 0;
     1007  color: white;
     1008  line-height: 1;
     1009  padding: calc( .5 * 1rem);
     1010}
     1011
     1012.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand svg,
     1013.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand svg {
     1014  top: 0;
     1015}
     1016
     1017.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand,
     1018.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand {
     1019  margin-left: 0;
    10281020}
    10291021
    … …  
    10341026}
    10351027
    1036 .main-navigation .sub-menu > li > a {
     1028.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand) {
    10371029  color: #fff;
    10381030  display: block;
    10391031  line-height: 1.2;
    1040   padding: calc( .5 * 1rem) 1rem;
    1041 }
    1042 
    1043 .main-navigation .sub-menu > li > a:hover, .main-navigation .sub-menu > li > a:focus {
     1032  padding: calc( .5 * 1rem) 1rem calc( .5 * 1rem) calc( 24px + 1rem);
     1033}
     1034
     1035.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):hover, .main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):focus {
    10441036  background: #005177;
    10451037}
    10461038
    1047 .main-navigation .sub-menu > li > a:hover:after, .main-navigation .sub-menu > li > a:focus:after {
     1039.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):hover:after, .main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):focus:after {
    10481040  background: #005177;
    10491041}
    10501042
    1051 .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu,
    1052 .main-navigation .main-menu .menu-item-has-children .sub-menu:hover {
    1053   display: block;
    1054   right: inherit;
    1055   margin-top: -2px;
     1043.main-navigation .sub-menu > li.mobile-parent-nav-menu-item {
     1044  display: none;
     1045  font-size: 0.88889em;
     1046  font-weight: normal;
     1047}
     1048
     1049.main-navigation .sub-menu > li.mobile-parent-nav-menu-item svg {
     1050  position: relative;
     1051  top: 0.2rem;
     1052  margin-left: calc( .25 * 1rem);
     1053}
     1054
     1055.main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu {
     1056  display: block;
     1057  right: 0;
     1058  margin-top: 0;
    10561059  opacity: 1;
    1057 }
    1058 
    1059 .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu .sub-menu,
    1060 .main-navigation .main-menu .menu-item-has-children .sub-menu:hover .sub-menu {
     1060  width: calc( 100vw - 2rem);
     1061}
     1062
     1063.main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
    10611064  margin-top: inherit;
    10621065  position: relative;
    … …  
    10651068
    10661069@media only screen and (min-width: 768px) {
     1070  .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
     1071    padding-right: 0;
     1072    position: absolute;
     1073    right: 100%;
     1074    width: -webkit-max-content;
     1075    width: -moz-max-content;
     1076    width: max-content;
     1077    top: 0;
     1078  }
     1079}
     1080
     1081.main-navigation .main-menu .menu-item-has-children:hover > .sub-menu,
     1082.main-navigation .main-menu .menu-item-has-children:focus > .sub-menu,
     1083.main-navigation .main-menu .menu-item-has-children .sub-menu:hover,
     1084.main-navigation .main-menu .menu-item-has-children .sub-menu:focus {
     1085  display: table;
     1086  margin-top: 0;
     1087  opacity: 1;
     1088  /* Non-mobile position */
     1089}
     1090
     1091@media only screen and (min-width: 768px) {
     1092  .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu,
     1093  .main-navigation .main-menu .menu-item-has-children:focus > .sub-menu,
     1094  .main-navigation .main-menu .menu-item-has-children .sub-menu:hover,
     1095  .main-navigation .main-menu .menu-item-has-children .sub-menu:focus {
     1096    position: absolute;
     1097    right: 0;
     1098    left: auto;
     1099    top: auto;
     1100    bottom: auto;
     1101    height: auto;
     1102    width: -webkit-max-content;
     1103    width: -moz-max-content;
     1104    width: max-content;
     1105    transform: none;
     1106    animation: fade_in 0.1s forwards;
     1107  }
     1108}
     1109
     1110@media only screen and (min-width: 768px) {
    10671111  .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu .sub-menu,
    1068   .main-navigation .main-menu .menu-item-has-children .sub-menu:hover .sub-menu {
     1112  .main-navigation .main-menu .menu-item-has-children:focus > .sub-menu .sub-menu,
     1113  .main-navigation .main-menu .menu-item-has-children .sub-menu:hover .sub-menu,
     1114  .main-navigation .main-menu .menu-item-has-children .sub-menu:focus .sub-menu {
     1115    margin-top: inherit;
    10691116    padding-right: 0;
    10701117    position: absolute;
    … …  
    10741121}
    10751122
    1076 .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu {
    1077   display: block;
    1078   right: inherit;
    1079   margin-top: -2px;
     1123.main-navigation .main-menu .menu-item-has-children.focus .sub-menu.expanded-true {
     1124  display: table;
     1125  margin-top: 0;
    10801126  opacity: 1;
    1081 }
    1082 
    1083 .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
    1084   margin-top: inherit;
    1085   position: relative;
    1086   padding-right: 1rem;
    1087 }
    1088 
    1089 @media only screen and (min-width: 768px) {
    1090   .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
    1091     padding-right: 0;
    1092     position: absolute;
    1093     right: 100%;
    1094     top: 0;
     1127  padding-right: 0;
     1128  /* Mobile position */
     1129  right: 0;
     1130  top: 0;
     1131  left: 0;
     1132  bottom: 0;
     1133  position: fixed;
     1134  z-index: 100000;
     1135  /* Make sure appears above mobile admin bar */
     1136  width: 100%;
     1137  height: 100%;
     1138  transform: translateX(-100%);
     1139  animation: slide_in_right 0.3s forwards;
     1140}
     1141
     1142.main-navigation .main-menu .menu-item-has-children.focus .sub-menu.expanded-true > .mobile-parent-nav-menu-item {
     1143  display: inline-block;
     1144}
     1145
     1146.main-navigation .desktop-submenu-expand {
     1147  display: none;
     1148}
     1149
     1150@media only screen and (min-width: 768px) {
     1151  .main-navigation .desktop-submenu-expand {
     1152    display: inline-block;
     1153  }
     1154}
     1155
     1156.main-navigation .mobile-submenu-expand {
     1157  display: inline-block;
     1158}
     1159
     1160@media only screen and (min-width: 768px) {
     1161  .main-navigation .mobile-submenu-expand {
     1162    display: none;
     1163  }
     1164}
     1165
     1166/* Menu Animation */
     1167@keyframes slide_in_right {
     1168  100% {
     1169    transform: translateX(0%);
     1170  }
     1171}
     1172
     1173@keyframes fade_in {
     1174  from {
     1175    opacity: 0;
     1176  }
     1177  to {
     1178    opacity: 1;
    10951179  }
    10961180}
    … …  
    11591243}
    11601244
     1245@media only screen and (min-width: 768px) {
     1246  .post-navigation {
     1247    margin: calc(3 * 1rem) calc(2 * (100vw / 12));
     1248    max-width: calc(6 * (100vw / 12));
     1249  }
     1250}
     1251
     1252@media only screen and (min-width: 1168px) {
     1253  .post-navigation {
     1254    margin: calc(3 * 1rem) 0;
     1255    max-width: 100%;
     1256  }
     1257}
     1258
    11611259.post-navigation .nav-links {
    11621260  margin: 0 1rem;
    … …  
    11641262  display: flex;
    11651263  flex-direction: column;
     1264}
     1265
     1266@media only screen and (min-width: 768px) {
     1267  .post-navigation .nav-links {
     1268    margin: 0;
     1269  }
    11661270}
    11671271
    … …  
    12321336  .post-navigation .nav-links .nav-next {
    12331337    order: 2;
     1338    padding-right: 1rem;
    12341339  }
    12351340}
    … …  
    12801385  display: flex;
    12811386  flex-direction: row;
     1387  margin: 0 1rem;
     1388}
     1389
     1390@media only screen and (min-width: 1168px) {
     1391  .comment-navigation .nav-links {
     1392    margin: 0 calc(2 * (100vw / 12));
     1393    max-width: calc(8 * (100vw / 12));
     1394  }
    12821395}
    12831396
    … …  
    12861399  min-width: 50%;
    12871400  width: 100%;
     1401  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     1402  font-weight: bold;
    12881403}
    12891404
    … …  
    14501565  .site-branding {
    14511566    margin: 0 calc(2 * (100vw / 12));
    1452     max-width: 22em;
    14531567  }
    14541568}
    … …  
    14641578    margin-bottom: 0;
    14651579    position: absolute;
    1466     left: calc(100% + (0.5 * calc(100vw / 12)));
     1580    left: calc(100% + (0.5 * 100vw / 12));
    14671581    top: 4px;
    14681582    z-index: 999;
    … …  
    14991613  margin: auto;
    15001614  display: inline;
     1615  /* When there is no description set, make sure navigation appears below title. */
     1616}
     1617
     1618.site-title a:link,
     1619.site-title a:visited {
    15011620  color: #111;
    1502   /* When there is no description set, make sure navigation appears below title. */
    15031621}
    15041622
    … …  
    15291647    display: inline;
    15301648  }
     1649}
     1650
     1651.site-title:not(:empty) + .site-description:not(:empty):before {
     1652  content: "\2014";
     1653  margin: 0 .2em;
    15311654}
    15321655
    … …  
    15361659  font-weight: normal;
    15371660  margin: 0;
    1538 }
    1539 
    1540 .site-description:not(:empty):before {
    1541   content: "\2014";
    1542   margin: 0 .2em;
    15431661}
    15441662
    … …  
    15491667  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    15501668  /* Set white text color when featured image is set. */
    1551   /* Post header styles */
     1669  /* add focus state to social media icons */
     1670  /* Entry header */
    15521671  /* Custom Logo Link */
    15531672  /* Make sure important elements are above pseudo elements used for effects. */
    … …  
    15621681  /* Second layer: screen. */
    15631682  /* Third layer: multiply. */
     1683  /* When image filters are inactive, a black overlay is added. */
    15641684  /* Fourth layer: overlay. */
    15651685  /* Fifth layer: readability overlay */
    … …  
    15741694.site-header.featured-image .entry-meta,
    15751695.site-header.featured-image .entry-title {
    1576   color: white;
     1696  color: #fff;
    15771697}
    15781698
    15791699.site-header.featured-image .main-navigation a,
     1700.site-header.featured-image .main-navigation a + svg,
    15801701.site-header.featured-image .social-navigation a,
    15811702.site-header.featured-image .site-title a,
    1582 .site-header.featured-image .hentry a {
    1583   color: white;
     1703.site-header.featured-image .site-featured-image a {
     1704  color: #fff;
    15841705  transition: opacity 110ms ease-in-out;
    15851706}
    15861707
    15871708.site-header.featured-image .main-navigation a:hover, .site-header.featured-image .main-navigation a:active,
     1709.site-header.featured-image .main-navigation a:hover + svg,
     1710.site-header.featured-image .main-navigation a:active + svg,
     1711.site-header.featured-image .main-navigation a + svg:hover,
     1712.site-header.featured-image .main-navigation a + svg:active,
     1713.site-header.featured-image .main-navigation a + svg:hover + svg,
     1714.site-header.featured-image .main-navigation a + svg:active + svg,
    15881715.site-header.featured-image .social-navigation a:hover,
    15891716.site-header.featured-image .social-navigation a:active,
     1717.site-header.featured-image .social-navigation a:hover + svg,
     1718.site-header.featured-image .social-navigation a:active + svg,
    15901719.site-header.featured-image .site-title a:hover,
    15911720.site-header.featured-image .site-title a:active,
    1592 .site-header.featured-image .hentry a:hover,
    1593 .site-header.featured-image .hentry a:active {
    1594   color: white;
     1721.site-header.featured-image .site-title a:hover + svg,
     1722.site-header.featured-image .site-title a:active + svg,
     1723.site-header.featured-image .site-featured-image a:hover,
     1724.site-header.featured-image .site-featured-image a:active,
     1725.site-header.featured-image .site-featured-image a:hover + svg,
     1726.site-header.featured-image .site-featured-image a:active + svg {
     1727  color: #fff;
    15951728  opacity: 0.6;
    15961729}
    15971730
    15981731.site-header.featured-image .main-navigation a:focus,
     1732.site-header.featured-image .main-navigation a:focus + svg,
     1733.site-header.featured-image .main-navigation a + svg:focus,
     1734.site-header.featured-image .main-navigation a + svg:focus + svg,
    15991735.site-header.featured-image .social-navigation a:focus,
     1736.site-header.featured-image .social-navigation a:focus + svg,
    16001737.site-header.featured-image .site-title a:focus,
    1601 .site-header.featured-image .hentry a:focus {
    1602   color: white;
     1738.site-header.featured-image .site-title a:focus + svg,
     1739.site-header.featured-image .site-featured-image a:focus,
     1740.site-header.featured-image .site-featured-image a:focus + svg {
     1741  color: #fff;
    16031742}
    16041743
    16051744.site-header.featured-image .social-navigation a:focus {
    1606   color: white;
     1745  color: #fff;
    16071746  opacity: 1;
    1608   border-bottom: 1px solid white;
     1747  border-bottom: 1px solid #fff;
    16091748}
    16101749
    16111750.site-header.featured-image .social-navigation svg,
    1612 .site-header.featured-image .hentry svg {
     1751.site-header.featured-image .site-featured-image svg {
    16131752  /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
    16141753  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    16151754}
    16161755
    1617 .site-header.featured-image .hentry .entry-header {
     1756.site-header.featured-image .site-featured-image .entry-header {
     1757  margin-bottom: 0;
    16181758  margin-right: 0;
    16191759  margin-left: 0;
    1620 }
    1621 
    1622 @media only screen and (min-width: 768px) {
    1623   .site-header.featured-image .hentry .entry-header {
     1760  /* Entry meta */
     1761}
     1762
     1763@media only screen and (min-width: 768px) {
     1764  .site-header.featured-image .site-featured-image .entry-header {
    16241765    margin-right: calc(2 * (100vw / 12));
    16251766    margin-left: calc(2 * (100vw / 12));
    … …  
    16271768}
    16281769
    1629 .site-header.featured-image .hentry .entry-header .entry-title:before {
    1630   background: white;
     1770.site-header.featured-image .site-featured-image .entry-header .entry-title:before {
     1771  background: #fff;
     1772}
     1773
     1774.site-header.featured-image .site-featured-image .entry-header .entry-meta {
     1775  font-weight: 500;
     1776}
     1777
     1778.site-header.featured-image .site-featured-image .entry-header .entry-meta > span {
     1779  margin-left: 1rem;
     1780  display: inline-block;
     1781}
     1782
     1783.site-header.featured-image .site-featured-image .entry-header .entry-meta > span:last-child {
     1784  margin-left: 0;
     1785}
     1786
     1787.site-header.featured-image .site-featured-image .entry-header .entry-meta a {
     1788  transition: color 110ms ease-in-out;
     1789  color: currentColor;
     1790}
     1791
     1792.site-header.featured-image .site-featured-image .entry-header .entry-meta a:hover {
     1793  text-decoration: none;
     1794}
     1795
     1796.site-header.featured-image .site-featured-image .entry-header .entry-meta .svg-icon {
     1797  position: relative;
     1798  display: inline-block;
     1799  vertical-align: middle;
     1800  margin-left: 0.5em;
     1801}
     1802
     1803.site-header.featured-image .site-featured-image .entry-header .entry-meta .discussion-avatar-list {
     1804  display: none;
     1805}
     1806
     1807@media only screen and (min-width: 768px) {
     1808  .site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-meta {
     1809    display: flex;
     1810    position: relative;
     1811  }
     1812  .site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-title {
     1813    padding-left: calc(1 * (100vw / 12) + 1rem);
     1814  }
     1815  .site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-meta .comment-count {
     1816    position: absolute;
     1817    left: 0;
     1818  }
     1819  .site-header.featured-image .site-featured-image .entry-header.has-discussion .entry-meta .discussion-avatar-list {
     1820    display: block;
     1821    position: absolute;
     1822    bottom: 100%;
     1823  }
    16311824}
    16321825
    16331826.site-header.featured-image .custom-logo-link {
    1634   background: white;
     1827  background: #fff;
    16351828  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    16361829}
    … …  
    16401833}
    16411834
    1642 .site-header.featured-image .site-branding,
    1643 .site-header.featured-image .hentry .entry-header {
     1835.site-header.featured-image .site-branding {
     1836  position: relative;
    16441837  z-index: 10;
     1838}
     1839
     1840.site-header.featured-image .site-featured-image .entry-header {
     1841  position: relative;
     1842  z-index: 9;
    16451843}
    16461844
    16471845.site-header.featured-image .site-branding-container:before,
    16481846.site-header.featured-image .site-branding-container:after,
    1649 .site-header.featured-image .hentry:before,
    1650 .site-header.featured-image .hentry:after, .site-header.featured-image:after {
     1847.site-header.featured-image .site-featured-image:before,
     1848.site-header.featured-image .site-featured-image:after, .site-header.featured-image:after {
    16511849  display: block;
    16521850  position: absolute;
    … …  
    16621860  background-repeat: no-repeat;
    16631861  background-size: cover;
     1862  z-index: 1;
     1863  /* When image filters are active, make it grayscale to colorize it blue. */
     1864}
     1865
     1866.image-filters-enabled .site-header.featured-image .site-branding-container:before {
    16641867  filter: grayscale(100%);
    1665   z-index: 1;
    1666 }
    1667 
    1668 .site-header.featured-image .hentry:before {
     1868}
     1869
     1870.image-filters-enabled .site-header.featured-image .site-featured-image:before {
    16691871  background: #0073aa;
    16701872  mix-blend-mode: screen;
    16711873  opacity: 0.1;
    1672   z-index: 2;
    1673 }
    1674 
    1675 .site-header.featured-image .hentry:after {
     1874}
     1875
     1876.site-header.featured-image .site-featured-image:after {
     1877  background: #000;
     1878  mix-blend-mode: multiply;
     1879  opacity: .7;
     1880  /* When image filters are active, a blue overlay is added. */
     1881}
     1882
     1883.image-filters-enabled .site-header.featured-image .site-featured-image:after {
    16761884  background: #0073aa;
    1677   mix-blend-mode: multiply;
    1678   opacity: 1;
     1885  opacity: .8;
    16791886  z-index: 3;
    1680 }
    1681 
    1682 .site-header.featured-image .site-branding-container:after {
    1683   background: rgba(255, 255, 255, 0.35);
     1887  /* Browsers supporting mix-blend-mode don't need opacity < 1 */
     1888}
     1889
     1890@supports (mix-blend-mode: multiply) {
     1891  .image-filters-enabled .site-header.featured-image .site-featured-image:after {
     1892    opacity: 1;
     1893  }
     1894}
     1895
     1896.image-filters-enabled .site-header.featured-image .site-branding-container:after {
     1897  background: rgba(0, 0, 0, 0.35);
    16841898  mix-blend-mode: overlay;
    16851899  opacity: 0.5;
    16861900  z-index: 4;
     1901  /* Browsers supporting mix-blend-mode can have a light overlay */
     1902}
     1903
     1904@supports (mix-blend-mode: overlay) {
     1905  .image-filters-enabled .site-header.featured-image .site-branding-container:after {
     1906    background: rgba(255, 255, 255, 0.35);
     1907  }
    16871908}
    16881909
    16891910.site-header.featured-image:after {
    1690   background: #000e14;
     1911  background: #000;
    16911912  /**
    16921913         * Add a transition to the readability overlay, to add a subtle
    … …  
    16941915         */
    16951916  transition: opacity 1200ms ease-in-out;
     1917  opacity: 0.7;
    16961918  z-index: 5;
     1919  /* When image filters are active, a blue overlay is added. */
     1920}
     1921
     1922.image-filters-enabled .site-header.featured-image:after {
     1923  background: #000e14;
    16971924  opacity: 0.38;
    16981925}
    16991926
    17001927@media only screen and (min-width: 768px) {
    1701   .site-header.featured-image:after {
     1928  .image-filters-enabled .site-header.featured-image:after {
    17021929    opacity: 0.18;
    1703   }
    1704 }
    1705 
    1706 @media only screen and (min-width: 1168px) {
    1707   .site-header.featured-image:after {
    1708     opacity: 0.1;
    17091930  }
    17101931}
    … …  
    17471968}
    17481969
    1749 .hentry {
     1970.entry {
    17501971  margin-top: calc(6 * 1rem);
    17511972}
    17521973
    1753 .hentry:first-of-type {
     1974.entry:first-of-type {
    17541975  margin-top: 0;
    17551976}
    17561977
    1757 .hentry .entry-header {
     1978.entry .entry-header {
    17581979  margin: calc(3 * 1rem) 1rem 1rem;
    17591980  position: relative;
    … …  
    17611982
    17621983@media only screen and (min-width: 768px) {
    1763   .hentry .entry-header {
     1984  .entry .entry-header {
    17641985    margin: calc(3 * 1rem) calc(2 * (100vw / 12 )) 1rem;
    17651986  }
    1766   .featured-image .hentry .entry-header {
    1767     margin-bottom: 0;
    1768   }
    1769 }
    1770 
    1771 .hentry .entry-title {
     1987}
     1988
     1989.entry .entry-title {
    17721990  margin: 0;
    17731991}
    17741992
    1775 .hentry .entry-title:before {
     1993.entry .entry-title:before {
    17761994  background: #767676;
    17771995  content: "\020";
    … …  
    17822000}
    17832001
    1784 .hentry .entry-title a {
     2002.entry .entry-title a {
    17852003  color: inherit;
    17862004}
    17872005
    1788 .hentry .entry-title a:hover {
     2006.entry .entry-title a:hover {
    17892007  color: #4a4a4a;
    17902008}
    17912009
    1792 .hentry .entry-meta,
    1793 .hentry .entry-footer {
     2010.entry .entry-meta,
     2011.entry .entry-footer {
    17942012  color: #767676;
    17952013  font-weight: 500;
    17962014}
    17972015
    1798 .hentry .entry-meta > span,
    1799 .hentry .entry-footer > span {
     2016.entry .entry-meta > span,
     2017.entry .entry-footer > span {
    18002018  margin-left: 1rem;
    1801 }
    1802 
    1803 .hentry .entry-meta > span:last-child,
    1804 .hentry .entry-footer > span:last-child {
     2019  display: inline-block;
     2020}
     2021
     2022.entry .entry-meta > span:last-child,
     2023.entry .entry-footer > span:last-child {
    18052024  margin-left: 0;
    18062025}
    18072026
    1808 .hentry .entry-meta a,
    1809 .hentry .entry-footer a {
     2027.entry .entry-meta a,
     2028.entry .entry-footer a {
    18102029  transition: color 110ms ease-in-out;
    18112030  color: currentColor;
    18122031}
    18132032
    1814 .hentry .entry-meta a:hover,
    1815 .hentry .entry-footer a:hover {
     2033.entry .entry-meta a:hover,
     2034.entry .entry-footer a:hover {
    18162035  text-decoration: none;
    18172036  color: #0073aa;
    18182037}
    18192038
    1820 .hentry .entry-meta .svg-icon,
    1821 .hentry .entry-footer .svg-icon {
     2039.entry .entry-meta .svg-icon,
     2040.entry .entry-footer .svg-icon {
    18222041  position: relative;
    18232042  display: inline-block;
    … …  
    18262045}
    18272046
    1828 .hentry .entry-meta {
     2047.entry .entry-meta {
    18292048  margin: 1rem 0;
    18302049}
    18312050
    1832 @media only screen and (min-width: 1168px) {
    1833   .hentry .entry-meta.has-discussion .comment-count {
    1834     float: left;
    1835     position: relative;
    1836   }
    1837 }
    1838 
    1839 .hentry .entry-meta.has-discussion .comment-count .discussion-avatar-list {
    1840   display: none;
    1841 }
    1842 
    1843 @media only screen and (min-width: 1168px) {
    1844   .hentry .entry-meta.has-discussion .comment-count .discussion-avatar-list {
    1845     bottom: 100%;
    1846     display: block;
    1847     position: absolute;
    1848   }
    1849 }
    1850 
    1851 .hentry .entry-footer {
     2051.entry .entry-footer {
    18522052  margin: calc(2 * 1rem) 1rem 1rem;
    18532053}
    18542054
    18552055@media only screen and (min-width: 768px) {
    1856   .hentry .entry-footer {
    1857     margin: calc(3 * 1rem) calc(2 * (100vw / 12));
     2056  .entry .entry-footer {
     2057    margin: 1rem calc(2 * (100vw / 12)) calc(3 * 1rem);
    18582058    max-width: calc(8 * (100vw / 12));
    18592059  }
    … …  
    18612061
    18622062@media only screen and (min-width: 768px) {
    1863   .hentry .entry-footer {
     2063  .entry .entry-footer {
    18642064    max-width: calc(6 * (100vw / 12));
    18652065  }
    18662066}
    18672067
    1868 .hentry .post-thumbnail {
     2068.entry .post-thumbnail {
    18692069  margin: 1rem;
    18702070}
    18712071
    18722072@media only screen and (min-width: 768px) {
    1873   .hentry .post-thumbnail {
     2073  .entry .post-thumbnail {
    18742074    margin: 1rem calc(2 * (100vw / 12));
    18752075  }
    18762076}
    18772077
    1878 .hentry .post-thumbnail:focus {
     2078.entry .post-thumbnail:focus {
    18792079  outline: none;
    18802080}
    18812081
    1882 .hentry .post-thumbnail .post-thumbnail-inner {
    1883   display: block;
    1884 }
    1885 
    1886 .hentry .post-thumbnail .post-thumbnail-inner img {
     2082.entry .post-thumbnail .post-thumbnail-inner {
     2083  display: block;
     2084}
     2085
     2086.entry .post-thumbnail .post-thumbnail-inner img {
    18872087  position: relative;
    18882088  display: block;
    … …  
    18902090}
    18912091
    1892 .image-filters-enabled .hentry .post-thumbnail {
     2092.image-filters-enabled .entry .post-thumbnail {
    18932093  position: relative;
    18942094  display: block;
    18952095}
    18962096
    1897 .image-filters-enabled .hentry .post-thumbnail .post-thumbnail-inner {
    1898   position: relative;
     2097.image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner {
    18992098  filter: grayscale(100%);
    1900   z-index: 1;
    1901 }
    1902 
    1903 .image-filters-enabled .hentry .post-thumbnail .post-thumbnail-inner:after {
    1904   display: block;
     2099}
     2100
     2101.image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner:after {
     2102  background: rgba(0, 0, 0, 0.35);
     2103  content: "";
     2104  display: block;
     2105  height: 100%;
     2106  opacity: .5;
     2107  pointer-events: none;
     2108  position: absolute;
     2109  top: 0;
    19052110  width: 100%;
    1906   height: 100%;
    1907   z-index: 10;
    1908 }
    1909 
    1910 .image-filters-enabled .hentry .post-thumbnail:before, .image-filters-enabled .hentry .post-thumbnail:after {
     2111  z-index: 4;
     2112}
     2113
     2114@supports (mix-blend-mode: multiply) {
     2115  .image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner:after {
     2116    display: none;
     2117  }
     2118}
     2119
     2120.image-filters-enabled .entry .post-thumbnail:before, .image-filters-enabled .entry .post-thumbnail:after {
    19112121  position: absolute;
    19122122  display: block;
    … …  
    19162126  right: 0;
    19172127  content: "\020";
    1918   display: block;
    19192128  pointer-events: none;
    19202129}
    19212130
    1922 .image-filters-enabled .hentry .post-thumbnail:before {
     2131.image-filters-enabled .entry .post-thumbnail:before {
    19232132  background: #0073aa;
    19242133  mix-blend-mode: screen;
    … …  
    19272136}
    19282137
    1929 .image-filters-enabled .hentry .post-thumbnail:after {
     2138.image-filters-enabled .entry .post-thumbnail:after {
    19302139  background: #0073aa;
    19312140  mix-blend-mode: multiply;
    1932   opacity: 1;
     2141  opacity: .8;
    19332142  z-index: 3;
    1934 }
    1935 
    1936 .hentry .entry-content .more-link {
     2143  /* Browsers supporting mix-blend-mode don't need opacity < 1 */
     2144}
     2145
     2146@supports (mix-blend-mode: multiply) {
     2147  .image-filters-enabled .entry .post-thumbnail:after {
     2148    opacity: 1;
     2149  }
     2150}
     2151
     2152.entry .entry-content p {
     2153  word-wrap: break-word;
     2154}
     2155
     2156.entry .entry-content .more-link {
    19372157  transition: color 110ms ease-in-out;
    19382158  display: inline;
    … …  
    19402160}
    19412161
    1942 .hentry .entry-content .more-link:after {
    1943   content: "»";
     2162.entry .entry-content .more-link:after {
     2163  content: "\02192";
    19442164  margin-right: 0.5em;
    19452165}
    19462166
    1947 .hentry .entry-content .more-link:hover {
     2167.entry .entry-content .more-link:hover {
    19482168  color: #0073aa;
    19492169  text-decoration: none;
    19502170}
    19512171
    1952 .hentry .entry-content a {
     2172.entry .entry-content a {
    19532173  text-decoration: underline;
    19542174}
    19552175
    1956 .hentry .entry-content a:hover {
     2176.entry .entry-content a:hover {
    19572177  text-decoration: none;
    19582178}
    19592179
    1960 .hentry .entry-content > iframe[style] {
     2180.entry .entry-content > iframe[style] {
    19612181  margin: 32px 1rem !important;
    19622182  max-width: calc(100vw - (2 * 1rem)) !important;
    … …  
    19642184
    19652185@media only screen and (min-width: 768px) {
    1966   .hentry .entry-content > iframe[style] {
     2186  .entry .entry-content > iframe[style] {
    19672187    margin: 32px calc(2 * (100vw / 12)) !important;
    19682188    max-width: calc(8 * (100vw / 12)) !important;
    … …  
    19712191
    19722192@media only screen and (min-width: 1168px) {
    1973   .hentry .entry-content > iframe[style] {
     2193  .entry .entry-content > iframe[style] {
    19742194    max-width: calc(6 * (100vw / 12)) !important;
    19752195  }
    19762196}
    19772197
    1978 .hentry .entry-content .wp-audio-shortcode {
     2198.entry .entry-content .wp-audio-shortcode {
    19792199  max-width: calc(100vw - (2 * 1rem));
    19802200}
    19812201
    19822202@media only screen and (min-width: 768px) {
    1983   .hentry .entry-content .wp-audio-shortcode {
     2203  .entry .entry-content .wp-audio-shortcode {
    19842204    max-width: calc(8 * (100vw / 12));
    19852205  }
    … …  
    19872207
    19882208@media only screen and (min-width: 1168px) {
    1989   .hentry .entry-content .wp-audio-shortcode {
     2209  .entry .entry-content .wp-audio-shortcode {
    19902210    max-width: calc(6 * (100vw / 12));
    19912211  }
     2212}
     2213
     2214/* Author description */
     2215.author-bio {
     2216  margin: calc(2 * 1rem) 1rem 1rem;
     2217}
     2218
     2219@media only screen and (min-width: 768px) {
     2220  .author-bio {
     2221    margin: calc(3 * 1rem) calc(2 * (100vw / 12));
     2222    max-width: calc(8 * (100vw / 12));
     2223  }
     2224}
     2225
     2226@media only screen and (min-width: 768px) {
     2227  .author-bio {
     2228    max-width: calc(6 * (100vw / 12));
     2229  }
     2230}
     2231
     2232.author-bio .author-title {
     2233  display: inline;
     2234}
     2235
     2236.author-bio .author-title:before {
     2237  background: #767676;
     2238  content: "\020";
     2239  display: block;
     2240  height: 2px;
     2241  margin: 1rem 0;
     2242  width: 1em;
     2243}
     2244
     2245.author-bio .author-description {
     2246  display: inline;
     2247  color: #767676;
     2248  font-size: 1.125em;
     2249  line-height: 1.2;
     2250}
     2251
     2252.author-bio .author-description .author-link {
     2253  display: inline-block;
     2254}
     2255
     2256.author-bio .author-description .author-link:hover {
     2257  color: #005177;
     2258  text-decoration: none;
    19922259}
    19932260
    … …  
    20052272.comments-area {
    20062273  /* Add extra margin when the comments section is located immediately after the
    2007      * post itself (this happens on pages). 
     2274     * post itself (this happens on pages).
    20082275     */
    20092276}
    20102277
    2011 .hentry + .comments-area {
     2278.entry + .comments-area {
    20122279  margin-top: calc(3 * 1rem);
    20132280}
    20142281
    2015 .comments-area .comments-title-wrap,
    20162282.comments-area .comment-list,
     2283.comments-area .comment-navigation,
    20172284.comments-area > .comment-respond,
    20182285.comments-area .comment-form-flex,
    … …  
    20222289
    20232290@media only screen and (min-width: 768px) {
    2024   .comments-area .comments-title-wrap,
    20252291  .comments-area .comment-list,
     2292  .comments-area .comment-navigation,
    20262293  .comments-area > .comment-respond,
    20272294  .comments-area .comment-form-flex,
    … …  
    20332300
    20342301.comments-area .comments-title-wrap {
    2035   align-items: baseline;
    2036   display: flex;
    2037   justify-content: space-between;
     2302  margin: calc(2 * 1rem) 1rem;
     2303}
     2304
     2305@media only screen and (min-width: 768px) {
     2306  .comments-area .comments-title-wrap {
     2307    align-items: baseline;
     2308    display: flex;
     2309    justify-content: space-between;
     2310    margin: calc(3 * 1rem) calc(2 * (100vw / 12));
     2311    max-width: calc(8 * (100vw / 12));
     2312  }
    20382313}
    20392314
    … …  
    20512326}
    20522327
     2328@media only screen and (min-width: 768px) {
     2329  .comments-area .comments-title-wrap .comments-title {
     2330    flex: 1 0 calc(3 * (100vw / 12));
     2331  }
     2332}
     2333
     2334@media only screen and (min-width: 768px) {
     2335  .comments-area .comments-title-wrap .discussion-meta {
     2336    flex: 0 0 calc(2 * (100vw / 12));
     2337    margin-right: 1rem;
     2338  }
     2339}
     2340
    20532341#comment {
    20542342  max-width: 100%;
    … …  
    20612349
    20622350#respond .comment-user-avatar {
    2063   display: none;
     2351  margin: 1rem 0 -1rem;
    20642352}
    20652353
    … …  
    20792367#comments > .comments-title:last-child {
    20802368  display: none;
    2081 }
    2082 
    2083 @media only screen and (min-width: 1168px) {
    2084   #comments > #respond .comment-user-avatar {
    2085     position: absolute;
    2086     display: block;
    2087     top: 0;
    2088     right: 0;
    2089   }
    2090   #comments > #respond .comment-user-avatar .avatar {
    2091     display: block;
    2092   }
    20932369}
    20942370
    … …  
    22162492  position: absolute;
    22172493  background: #008fd3;
    2218   left: calc(100% + 0.25rem);
     2494  left: calc(100% - 2.5rem);
    22192495  top: -3px;
    22202496  width: 18px;
     2497}
     2498
     2499@media only screen and (min-width: 768px) {
     2500  .comment .comment-author .post-author-badge {
     2501    left: calc(100% + 0.75rem);
     2502  }
    22212503}
    22222504
    … …  
    23412623  height: calc(1.5 * 1rem);
    23422624  width: calc(1.5 * 1rem);
    2343 }
    2344 
    2345 .discussion-meta .discussion-avatar-list {
    2346   display: inline-block;
    2347   margin-left: 8px;
    23482625}
    23492626
    … …  
    24402717}
    24412718
    2442 @media only screen and (min-width: 768px) {
    2443   .hfeed .hentry .entry-header {
     2719.archive .page-header .page-description {
     2720  display: block;
     2721  color: #111;
     2722  font-size: 1em;
     2723}
     2724
     2725@media only screen and (min-width: 768px) {
     2726  .hfeed .entry .entry-header {
    24442727    margin: calc(3 * 1rem) calc(2 * (100vw / 12)) calc(1rem / 2);
    24452728  }
    … …  
    24742757--------------------------------------------------------------*/
    24752758/* Site footer */
    2476 .site-footer {
    2477   color: #767676;
    2478 }
    2479 
    2480 .site-footer .site-info {
     2759#colophon .widget-area,
     2760#colophon .site-info {
    24812761  margin: calc(2 * 1rem) 1rem;
    24822762}
    24832763
    24842764@media only screen and (min-width: 768px) {
    2485   .site-footer .site-info {
     2765  #colophon .widget-area,
     2766  #colophon .site-info {
    24862767    margin: calc(3 * 1rem) calc(2 * (100vw / 12));
    24872768    max-width: calc(8 * (100vw / 12));
    … …  
    24892770}
    24902771
    2491 .site-footer .site-info .imprint {
     2772#colophon .widget-area .imprint,
     2773#colophon .site-info .imprint {
    24922774  margin-left: 1rem;
    24932775}
    24942776
    2495 .site-footer a {
     2777#colophon .site-info a {
    24962778  color: inherit;
    24972779}
    24982780
    2499 .site-footer a:hover {
     2781#colophon .site-info a:hover {
    25002782  text-decoration: none;
    25012783  color: #0073aa;
     2784}
     2785
     2786#colophon .widget-column {
     2787  display: flex;
     2788  flex-wrap: wrap;
     2789}
     2790
     2791#colophon .widget-column .widget {
     2792  width: 100%;
     2793}
     2794
     2795@media only screen and (min-width: 1168px) {
     2796  #colophon .widget-column .widget {
     2797    margin-left: calc(3 * 1rem);
     2798    width: calc(50% - (3 * 1rem));
     2799  }
     2800}
     2801
     2802#colophon .site-info {
     2803  color: #767676;
    25022804}
    25032805
    … …  
    25102812.widget select {
    25112813  max-width: 100%;
     2814}
     2815
     2816.widget a {
     2817  color: #0073aa;
     2818}
     2819
     2820.widget a:hover {
     2821  color: #005177;
     2822}
     2823
     2824.widget_archive ul,
     2825.widget_nav_menu ul,
     2826.widget_meta ul,
     2827.widget_recent_entries ul,
     2828.widget_rss ul {
     2829  padding: 0;
     2830  list-style: none;
     2831}
     2832
     2833.widget_archive ul li,
     2834.widget_nav_menu ul li,
     2835.widget_meta ul li,
     2836.widget_recent_entries ul li,
     2837.widget_rss ul li {
     2838  color: #767676;
     2839  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     2840  font-size: calc(22px * 1.6875);
     2841  font-weight: bold;
     2842  line-height: 1.2;
     2843}
     2844
     2845.widget_archive ul li:not(.menu-item-has-children),
     2846.widget_nav_menu ul li:not(.menu-item-has-children),
     2847.widget_meta ul li:not(.menu-item-has-children),
     2848.widget_recent_entries ul li:not(.menu-item-has-children),
     2849.widget_rss ul li:not(.menu-item-has-children) {
     2850  padding-bottom: 0.75rem;
     2851}
     2852
     2853.widget_archive ul li ul,
     2854.widget_nav_menu ul li ul,
     2855.widget_meta ul li ul,
     2856.widget_recent_entries ul li ul,
     2857.widget_rss ul li ul {
     2858  padding-right: 1rem;
     2859}
     2860
     2861.widget_archive ul.sub-menu,
     2862.widget_nav_menu ul.sub-menu,
     2863.widget_meta ul.sub-menu,
     2864.widget_recent_entries ul.sub-menu,
     2865.widget_rss ul.sub-menu {
     2866  padding-top: 0.75rem;
     2867}
     2868
     2869.widget_search .search-submit {
     2870  display: block;
     2871  margin-top: 1rem;
    25122872}
    25132873
    … …  
    25652925  .entry-content > *.alignwide,
    25662926  .entry-summary > *.alignwide {
    2567     margin-right: calc(1 * (100vw / 12));
    2568     margin-left: calc(1 * (100vw / 12));
    2569     max-width: calc(10 * (100vw / 12));
     2927    margin-right: calc(2 * (100vw / 12));
     2928    margin-left: calc(2 * (100vw / 12));
     2929    max-width: calc(8 * (100vw / 12));
    25702930  }
    25712931}
    … …  
    26172977    margin-right: calc(2 * 1rem);
    26182978    margin-left: calc(2 * (100vw / 12));
     2979  }
     2980}
     2981
     2982.entry-content > *.aligncenter,
     2983.entry-summary > *.aligncenter {
     2984  margin-right: auto;
     2985  margin-left: auto;
     2986}
     2987
     2988@media only screen and (min-width: 1168px) {
     2989  .entry-content > *.aligncenter,
     2990  .entry-summary > *.aligncenter {
     2991    margin-right: calc(2 * (100vw / 12));
     2992    margin-left: calc(2 * (100vw / 12));
     2993    max-width: calc(10 * (100vw / 12));
     2994    position: relative;
     2995    right: 25%;
     2996    transform: translate(50%);
    26192997  }
    26202998}
    … …  
    26603038  box-sizing: border-box;
    26613039  font-weight: bold;
    2662   padding: 0.66rem 1rem;
     3040  text-decoration: none;
     3041  padding: 0.76rem 1rem;
    26633042  outline: none;
    26643043  color: white;
    … …  
    26883067  transition: all 150ms ease-in-out;
    26893068  background: transparent;
    2690   border: 2px solid #0073aa;
    2691 }
    2692 
    2693 .entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
    2694 .entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus:not(.has-text-color),
    2695 .entry-content .wp-block-button.is-style-outline .wp-block-button__link:active:not(.has-text-color) {
     3069  border: 2px solid currentColor;
    26963070  color: #0073aa;
    26973071}
    26983072
    26993073.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
    2700   border-color: #111;
    27013074  color: #111;
    27023075}
    … …  
    27193092}
    27203093
    2721 .entry-content .wp-block-archives li a:after,
    2722 .entry-content .wp-block-categories li a:after,
    2723 .entry-content .wp-block-latest-posts li a:after {
    2724   color: #767676;
    2725   content: ",";
    2726 }
    2727 
    2728 .entry-content .wp-block-archives li:last-child a:after,
    2729 .entry-content .wp-block-categories li:last-child a:after,
    2730 .entry-content .wp-block-latest-posts li:last-child a:after {
    2731   color: #767676;
    2732   content: ".";
     3094.entry-content .wp-block-archives li:not(.menu-item-has-children),
     3095.entry-content .wp-block-categories li:not(.menu-item-has-children),
     3096.entry-content .wp-block-latest-posts li:not(.menu-item-has-children) {
     3097  padding-bottom: 0.75rem;
     3098}
     3099
     3100.entry-content .wp-block-archives li a,
     3101.entry-content .wp-block-categories li a,
     3102.entry-content .wp-block-latest-posts li a {
     3103  text-decoration: none;
     3104}
     3105
     3106.entry-content .wp-block-archives li ul,
     3107.entry-content .wp-block-categories li ul,
     3108.entry-content .wp-block-latest-posts li ul {
     3109  padding-right: 1rem;
    27333110}
    27343111
    … …  
    27773154
    27783155.entry-content .wp-block-pullquote blockquote {
     3156  color: #111;
    27793157  border: none;
    27803158  padding-bottom: calc(2 * 1rem);
    … …  
    27883166  margin-bottom: 0.5em;
    27893167  margin-top: 0.5em;
    2790   color: #111;
    27913168}
    27923169
    … …  
    28073184  line-height: 1.6;
    28083185  text-transform: none;
    2809   color: #767676;
    28103186}
    28113187
    … …  
    28213197}
    28223198
     3199.entry-content .wp-block-pullquote.is-style-solid-color {
     3200  background-color: #0073aa;
     3201}
     3202
    28233203.entry-content .wp-block-pullquote.is-style-solid-color p {
    28243204  font-size: 1.6875em;
    … …  
    28343214}
    28353215
     3216.entry-content .wp-block-pullquote.is-style-solid-color a {
     3217  color: #fff;
     3218}
     3219
    28363220.entry-content .wp-block-pullquote.is-style-solid-color blockquote {
     3221  color: #fff;
    28373222  margin: 0 auto;
    28383223}
    28393224
    2840 .entry-content .wp-block-pullquote.is-style-solid-color blockquote:not(.has-text-color) p,
    2841 .entry-content .wp-block-pullquote.is-style-solid-color cite {
    2842   color: white;
    2843 }
    2844 
    2845 .entry-content .wp-block-pullquote.is-style-solid-color:not(.has-background-color) {
     3225.entry-content .wp-block-pullquote.is-style-solid-color .has-primary-background-color {
    28463226  background-color: #0073aa;
    28473227}
    … …  
    29223302
    29233303.entry-content .wp-block-cover-image .wp-block-cover-image-text,
    2924 .entry-content .wp-block-cover-image h2 {
     3304.entry-content .wp-block-cover-image .wp-block-cover-text,
     3305.entry-content .wp-block-cover-image h2,
     3306.entry-content .wp-block-cover .wp-block-cover-image-text,
     3307.entry-content .wp-block-cover .wp-block-cover-text,
     3308.entry-content .wp-block-cover h2 {
    29253309  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    29263310  font-size: 1.6875em;
    … …  
    29323316@media only screen and (min-width: 768px) {
    29333317  .entry-content .wp-block-cover-image .wp-block-cover-image-text,
    2934   .entry-content .wp-block-cover-image h2 {
     3318  .entry-content .wp-block-cover-image .wp-block-cover-text,
     3319  .entry-content .wp-block-cover-image h2,
     3320  .entry-content .wp-block-cover .wp-block-cover-image-text,
     3321  .entry-content .wp-block-cover .wp-block-cover-text,
     3322  .entry-content .wp-block-cover h2 {
    29353323    font-size: 2.25em;
    29363324    width: calc(8 * (100vw / 12));
    … …  
    29413329@media only screen and (min-width: 1168px) {
    29423330  .entry-content .wp-block-cover-image .wp-block-cover-image-text,
    2943   .entry-content .wp-block-cover-image h2 {
     3331  .entry-content .wp-block-cover-image .wp-block-cover-text,
     3332  .entry-content .wp-block-cover-image h2,
     3333  .entry-content .wp-block-cover .wp-block-cover-image-text,
     3334  .entry-content .wp-block-cover .wp-block-cover-text,
     3335  .entry-content .wp-block-cover h2 {
    29443336    width: calc(6 * (100vw / 12 ));
    29453337    max-width: calc(6 * (100vw / 12 ));
    … …  
    29483340
    29493341.entry-content .wp-block-cover-image.alignleft h2,
    2950 .entry-content .wp-block-cover-image.alignleft .wp-block-cover-image-text, .entry-content .wp-block-cover-image.alignright h2,
    2951 .entry-content .wp-block-cover-image.alignright .wp-block-cover-image-text, .entry-content .wp-block-cover-image.aligncenter h2,
    2952 .entry-content .wp-block-cover-image.aligncenter .wp-block-cover-image-text {
     3342.entry-content .wp-block-cover-image.alignleft .wp-block-cover-image-text,
     3343.entry-content .wp-block-cover-image.alignleft .wp-block-cover-text, .entry-content .wp-block-cover-image.alignright h2,
     3344.entry-content .wp-block-cover-image.alignright .wp-block-cover-image-text,
     3345.entry-content .wp-block-cover-image.alignright .wp-block-cover-text, .entry-content .wp-block-cover-image.aligncenter h2,
     3346.entry-content .wp-block-cover-image.aligncenter .wp-block-cover-image-text,
     3347.entry-content .wp-block-cover-image.aligncenter .wp-block-cover-text,
     3348.entry-content .wp-block-cover.alignleft h2,
     3349.entry-content .wp-block-cover.alignleft .wp-block-cover-image-text,
     3350.entry-content .wp-block-cover.alignleft .wp-block-cover-text,
     3351.entry-content .wp-block-cover.alignright h2,
     3352.entry-content .wp-block-cover.alignright .wp-block-cover-image-text,
     3353.entry-content .wp-block-cover.alignright .wp-block-cover-text,
     3354.entry-content .wp-block-cover.aligncenter h2,
     3355.entry-content .wp-block-cover.aligncenter .wp-block-cover-image-text,
     3356.entry-content .wp-block-cover.aligncenter .wp-block-cover-text {
    29533357  width: 100%;
    29543358  z-index: 1;
    … …  
    29593363}
    29603364
    2961 .entry-content .wp-block-cover-image.has-left-content {
     3365.entry-content .wp-block-cover-image.has-left-content,
     3366.entry-content .wp-block-cover.has-left-content {
    29623367  justify-content: center;
    29633368}
    29643369
    29653370.entry-content .wp-block-cover-image.has-left-content h2,
    2966 .entry-content .wp-block-cover-image.has-left-content .wp-block-cover-image-text {
     3371.entry-content .wp-block-cover-image.has-left-content .wp-block-cover-image-text,
     3372.entry-content .wp-block-cover-image.has-left-content .wp-block-cover-text,
     3373.entry-content .wp-block-cover.has-left-content h2,
     3374.entry-content .wp-block-cover.has-left-content .wp-block-cover-image-text,
     3375.entry-content .wp-block-cover.has-left-content .wp-block-cover-text {
    29673376  padding: 1rem;
    29683377}
    29693378
    2970 .entry-content .wp-block-cover-image.has-right-content {
     3379.entry-content .wp-block-cover-image.has-right-content,
     3380.entry-content .wp-block-cover.has-right-content {
    29713381  justify-content: center;
    29723382}
    29733383
    29743384.entry-content .wp-block-cover-image.has-right-content h2,
    2975 .entry-content .wp-block-cover-image.has-right-content .wp-block-cover-image-text {
     3385.entry-content .wp-block-cover-image.has-right-content .wp-block-cover-image-text,
     3386.entry-content .wp-block-cover-image.has-right-content .wp-block-cover-text,
     3387.entry-content .wp-block-cover.has-right-content h2,
     3388.entry-content .wp-block-cover.has-right-content .wp-block-cover-image-text,
     3389.entry-content .wp-block-cover.has-right-content .wp-block-cover-text {
    29763390  padding: 1rem;
    29773391}
    … …  
    31173531}
    31183532
     3533.entry-content .has-primary-background-color {
     3534  background-color: #0073aa;
     3535}
     3536
     3537.entry-content .has-primary-background-color p,
     3538.entry-content .has-primary-background-color h1,
     3539.entry-content .has-primary-background-color h2,
     3540.entry-content .has-primary-background-color h3,
     3541.entry-content .has-primary-background-color h4,
     3542.entry-content .has-primary-background-color h5,
     3543.entry-content .has-primary-background-color h6,
     3544.entry-content .has-primary-background-color a {
     3545  color: #fff;
     3546}
     3547
    31193548/* Media */
    31203549.page-content .wp-smiley,
    … …  
    31763605.gallery {
    31773606  display: flex;
     3607  flex-flow: row wrap;
     3608  justify-content: center;
    31783609  margin-bottom: calc(1.5 * 1rem);
    31793610}
    … …  
    31813612.gallery-item {
    31823613  display: inline-block;
    3183   margin-left: 1rem;
     3614  padding-left: 1rem;
    31843615  margin-bottom: 1rem;
    31853616  text-align: center;
    … …  
    32213652
    32223653.gallery-item:last-of-type {
    3223   margin-left: 0;
     3654  padding-left: 0;
    32243655}
    32253656

  • branches/5.0/src/wp-content/themes/twentynineteen/style.css

    r43808 r43842  
    423423.page-description,
    424424h2.author-title,
     425.author-description .author-link,
    425426.not-found .page-title,
    426427.error-404 .page-title,
    … …  
    462463.main-navigation ul.main-menu > li,
    463464.social-navigation,
    464 .author-description p.author-bio,
     465.author-description .author-bio,
    465466.nav-links {
    466467  line-height: 1.25;
    … …  
    581582}
    582583
    583 blockquote > p {
    584   font-size: 1.6875em;
    585   font-style: italic;
    586   line-height: 1.2;
    587 }
    588 
    589584blockquote cite {
    590   font-size: 0.88889em;
     585  font-size: 0.71111em;
    591586  font-style: normal;
    592587  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    … …  
    667662
    668663a:focus {
    669   outline: 0;
     664  outline: thin;
     665  outline-style: dotted;
    670666  text-decoration: underline;
    671667}
    … …  
    731727}
    732728
    733 img:before {
    734   background-color: #eee;
    735   border: 1px dashed #ccc;
    736   border-radius: 3px;
    737   content: " ";
    738   display: block;
    739   height: 100%;
    740   left: 0;
    741   position: absolute;
    742   top: 0;
    743   width: 100%;
    744 }
    745 
    746 img:after {
    747   color: #666;
    748   content: "This image is broken :-/ ( " attr(alt) " )";
    749   display: block;
    750   left: 50%;
    751   position: absolute;
    752   text-align: center;
    753   top: 50%;
    754   transform: translate(-50%, -50%);
    755   width: 100%;
    756 }
    757 
    758729figure {
    759730  margin: 0;
    … …  
    763734  border-left: 2px solid #0073aa;
    764735  margin-left: -2rem;
    765   padding: 1rem 0 0.5rem 2rem;
     736  padding: 0 0 0 1rem;
    766737}
    767738
    … …  
    800771  line-height: 1.2;
    801772  outline: none;
    802   padding: 0.66rem 1rem;
     773  padding: 0.76rem 1rem;
     774  vertical-align: bottom;
    803775}
    804776
    … …  
    853825  box-sizing: border-box;
    854826  outline: none;
    855   padding: 0.5rem 0.66rem;
     827  padding: 0.36rem 0.66rem;
    856828}
    857829
    … …  
    909881
    910882a:focus {
    911   outline: 0;
     883  outline: thin dotted;
    912884  text-decoration: underline;
    913885}
    … …  
    918890/** === Main menu === */
    919891.main-navigation {
    920   display: inline;
     892  display: block;
     893  margin-top: 0.25rem;
    921894  /*
    922895     * :focus-within needs its own selector so other similar
    923896     * selectors don’t get ignored if a browser doesn’t recognize it
    924897     */
    925 }
    926 
    927 @media only screen and (min-width: 768px) {
    928   .main-navigation {
    929     display: block;
    930   }
     898  /* Only show one submenu expand button at a time (desktop vs mobile) */
    931899}
    932900
    … …  
    946914
    947915.main-navigation .main-menu > li {
     916  color: #0073aa;
    948917  display: inline;
     918}
     919
     920@media only screen and (min-width: 768px) {
     921  .main-navigation .main-menu > li {
     922    position: relative;
     923  }
    949924}
    950925
    … …  
    952927  font-weight: 700;
    953928  color: #0073aa;
     929  margin-right: 0.5rem;
    954930}
    955931
    956932.main-navigation .main-menu > li > a + svg {
    957   color: #0073aa;
    958   margin-right: -0.25rem;
    959 }
    960 
    961 .main-navigation .main-menu > li > a:hover {
    962   color: #005177;
    963 }
    964 
     933  margin-right: 0.5rem;
     934}
     935
     936.main-navigation .main-menu > li > a:hover,
    965937.main-navigation .main-menu > li > a:hover + svg {
    966938  color: #005177;
    967939}
    968940
    969 .main-navigation .main-menu > li > a:after {
    970   content: ",";
    971   display: inline;
    972   color: #767676;
    973 }
    974 
    975 .main-navigation .main-menu > li.menu-item-has-children:after {
    976   content: ",";
    977   display: inline;
    978   color: #767676;
     941.main-navigation .main-menu > li.menu-item-has-children {
     942  display: inline-block;
     943}
     944
     945.main-navigation .main-menu > li.menu-item-has-children > a {
     946  margin-right: 0.125rem;
    979947}
    980948
    … …  
    985953}
    986954
    987 .main-navigation .main-menu > li:last-child > a:after {
    988   content: ".";
     955.main-navigation .main-menu > li.menu-item-has-children .mobile-submenu-expand svg,
     956.main-navigation .main-menu > li.menu-item-has-children .desktop-submenu-expand svg {
     957  position: relative;
     958  top: 0.2rem;
     959}
     960
     961.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand,
     962.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand {
     963  margin-right: 0.5rem;
    989964}
    990965
    … …  
    1000975  display: none;
    1001976  float: left;
    1002   width: 100%;
    1003977  position: absolute;
    1004978  opacity: 0;
    1005   left: -999em;
     979  left: -999px;
    1006980  z-index: 99999;
    1007   transition: opacity 0.5s ease-in-out;
    1008981}
    1009982
    1010983@media only screen and (min-width: 768px) {
    1011984  .main-navigation .sub-menu {
     985    width: -webkit-max-content;
     986    width: -moz-max-content;
     987    width: max-content;
    1012988    max-width: calc(3 * (100vw / 12));
    1013989  }
    … …  
    1022998}
    1023999
    1024 .main-navigation .sub-menu > li.menu-item-has-children svg {
     1000.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand,
     1001.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand {
    10251002  position: absolute;
    1026   right: 0.5rem;
    1027   top: 0.65rem;
     1003  width: calc( 24px + 1rem);
     1004  right: 0;
     1005  top: calc( .125 * 1rem);
     1006  bottom: 0;
     1007  color: white;
     1008  line-height: 1;
     1009  padding: calc( .5 * 1rem);
     1010}
     1011
     1012.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand svg,
     1013.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand svg {
     1014  top: 0;
     1015}
     1016
     1017.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand,
     1018.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand {
     1019  margin-right: 0;
    10281020}
    10291021
    … …  
    10341026}
    10351027
    1036 .main-navigation .sub-menu > li > a {
     1028.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand) {
    10371029  color: #fff;
    10381030  display: block;
    10391031  line-height: 1.2;
    1040   padding: calc( .5 * 1rem) 1rem;
    1041 }
    1042 
    1043 .main-navigation .sub-menu > li > a:hover, .main-navigation .sub-menu > li > a:focus {
     1032  padding: calc( .5 * 1rem) calc( 24px + 1rem) calc( .5 * 1rem) 1rem;
     1033}
     1034
     1035.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):hover, .main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):focus {
    10441036  background: #005177;
    10451037}
    10461038
    1047 .main-navigation .sub-menu > li > a:hover:after, .main-navigation .sub-menu > li > a:focus:after {
     1039.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):hover:after, .main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):focus:after {
    10481040  background: #005177;
    10491041}
    10501042
    1051 .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu,
    1052 .main-navigation .main-menu .menu-item-has-children .sub-menu:hover {
    1053   display: block;
    1054   left: inherit;
    1055   margin-top: -2px;
     1043.main-navigation .sub-menu > li.mobile-parent-nav-menu-item {
     1044  display: none;
     1045  font-size: 0.88889em;
     1046  font-weight: normal;
     1047}
     1048
     1049.main-navigation .sub-menu > li.mobile-parent-nav-menu-item svg {
     1050  position: relative;
     1051  top: 0.2rem;
     1052  margin-right: calc( .25 * 1rem);
     1053}
     1054
     1055.main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu {
     1056  display: block;
     1057  left: 0;
     1058  margin-top: 0;
    10561059  opacity: 1;
    1057 }
    1058 
    1059 .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu .sub-menu,
    1060 .main-navigation .main-menu .menu-item-has-children .sub-menu:hover .sub-menu {
     1060  width: calc( 100vw - 2rem);
     1061}
     1062
     1063.main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
    10611064  margin-top: inherit;
    10621065  position: relative;
    … …  
    10651068
    10661069@media only screen and (min-width: 768px) {
     1070  .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
     1071    padding-left: 0;
     1072    position: absolute;
     1073    left: 100%;
     1074    width: -webkit-max-content;
     1075    width: -moz-max-content;
     1076    width: max-content;
     1077    top: 0;
     1078  }
     1079}
     1080
     1081.main-navigation .main-menu .menu-item-has-children:hover > .sub-menu,
     1082.main-navigation .main-menu .menu-item-has-children:focus > .sub-menu,
     1083.main-navigation .main-menu .menu-item-has-children .sub-menu:hover,
     1084.main-navigation .main-menu .menu-item-has-children .sub-menu:focus {
     1085  display: table;
     1086  margin-top: 0;
     1087  opacity: 1;
     1088  /* Non-mobile position */
     1089}
     1090
     1091@media only screen and (min-width: 768px) {
     1092  .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu,
     1093  .main-navigation .main-menu .menu-item-has-children:focus > .sub-menu,
     1094  .main-navigation .main-menu .menu-item-has-children .sub-menu:hover,
     1095  .main-navigation .main-menu .menu-item-has-children .sub-menu:focus {
     1096    position: absolute;
     1097    left: 0;
     1098    right: auto;
     1099    top: auto;
     1100    bottom: auto;
     1101    height: auto;
     1102    width: -webkit-max-content;
     1103    width: -moz-max-content;
     1104    width: max-content;
     1105    transform: none;
     1106    animation: fade_in 0.1s forwards;
     1107  }
     1108}
     1109
     1110@media only screen and (min-width: 768px) {
    10671111  .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu .sub-menu,
    1068   .main-navigation .main-menu .menu-item-has-children .sub-menu:hover .sub-menu {
     1112  .main-navigation .main-menu .menu-item-has-children:focus > .sub-menu .sub-menu,
     1113  .main-navigation .main-menu .menu-item-has-children .sub-menu:hover .sub-menu,
     1114  .main-navigation .main-menu .menu-item-has-children .sub-menu:focus .sub-menu {
     1115    margin-top: inherit;
    10691116    padding-left: 0;
    10701117    position: absolute;
    … …  
    10741121}
    10751122
    1076 .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu {
    1077   display: block;
    1078   left: inherit;
    1079   margin-top: -2px;
     1123.main-navigation .main-menu .menu-item-has-children.focus .sub-menu.expanded-true {
     1124  display: table;
     1125  margin-top: 0;
    10801126  opacity: 1;
    1081 }
    1082 
    1083 .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
    1084   margin-top: inherit;
    1085   position: relative;
    1086   padding-left: 1rem;
    1087 }
    1088 
    1089 @media only screen and (min-width: 768px) {
    1090   .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu {
    1091     padding-left: 0;
    1092     position: absolute;
    1093     left: 100%;
    1094     top: 0;
     1127  padding-left: 0;
     1128  /* Mobile position */
     1129  left: 0;
     1130  top: 0;
     1131  right: 0;
     1132  bottom: 0;
     1133  position: fixed;
     1134  z-index: 100000;
     1135  /* Make sure appears above mobile admin bar */
     1136  width: 100%;
     1137  height: 100%;
     1138  transform: translateX(100%);
     1139  animation: slide_in_right 0.3s forwards;
     1140}
     1141
     1142.main-navigation .main-menu .menu-item-has-children.focus .sub-menu.expanded-true > .mobile-parent-nav-menu-item {
     1143  display: inline-block;
     1144}
     1145
     1146.main-navigation .desktop-submenu-expand {
     1147  display: none;
     1148}
     1149
     1150@media only screen and (min-width: 768px) {
     1151  .main-navigation .desktop-submenu-expand {
     1152    display: inline-block;
     1153  }
     1154}
     1155
     1156.main-navigation .mobile-submenu-expand {
     1157  display: inline-block;
     1158}
     1159
     1160@media only screen and (min-width: 768px) {
     1161  .main-navigation .mobile-submenu-expand {
     1162    display: none;
     1163  }
     1164}
     1165
     1166/* Menu Animation */
     1167@keyframes slide_in_right {
     1168  100% {
     1169    transform: translateX(0%);
     1170  }
     1171}
     1172
     1173@keyframes fade_in {
     1174  from {
     1175    opacity: 0;
     1176  }
     1177  to {
     1178    opacity: 1;
    10951179  }
    10961180}
    … …  
    11591243}
    11601244
     1245@media only screen and (min-width: 768px) {
     1246  .post-navigation {
     1247    margin: calc(3 * 1rem) calc(2 * (100vw / 12));
     1248    max-width: calc(6 * (100vw / 12));
     1249  }
     1250}
     1251
     1252@media only screen and (min-width: 1168px) {
     1253  .post-navigation {
     1254    margin: calc(3 * 1rem) 0;
     1255    max-width: 100%;
     1256  }
     1257}
     1258
    11611259.post-navigation .nav-links {
    11621260  margin: 0 1rem;
    … …  
    11641262  display: flex;
    11651263  flex-direction: column;
     1264}
     1265