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, mukeshpanchal27, burhandodhy, crunnells, Ismail-elkorchi, aryaprakasa.


git-svn-id: https://develop.svn.wordpress.org/branches/5.0@43860 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
allancole 2018-11-02 23:52:16 +00:00
parent c4bffce143
commit c2527dfc96
31 changed files with 654 additions and 284 deletions

View File

@ -197,9 +197,15 @@ class TwentyNineteen_SVG_Icons {
'facebook.com',
'fb.me',
),
'feed' => array(
'feed',
),
'google-plus' => array(
'plus.google.com',
),
'mail' => array(
'mailto:',
),
'slideshare' => array(
'slideshare.net',
),

View File

@ -35,12 +35,14 @@ class TwentyNineteen_Walker_Comment extends Walker_Comment {
<?php
$comment_author_link = get_comment_author_link( $comment );
$comment_author_url = get_comment_author_url( $comment );
$comment_author = get_comment_author( $comment );
$avatar = get_avatar( $comment, $args['avatar_size'] );
if ( 0 != $args['avatar_size'] ) {
if ( empty( $comment_author_url ) ) {
echo $avatar;
} else {
echo preg_replace( '/>[^<]+</', sprintf( '>%s<', $avatar ), $comment_author_link );
printf( '<a href="%s" rel="external nofollow" class="url">', $comment_author_url );
echo $avatar;
}
}
@ -56,8 +58,12 @@ class TwentyNineteen_Walker_Comment extends Walker_Comment {
/* translators: %s: comment author link */
printf(
__( '%s <span class="screen-reader-text says">says:</span>', 'twentynineteen' ),
sprintf( '<b class="fn">%s</b>', get_comment_author_link( $comment ) )
sprintf( '<span class="fn">%s</span>', $comment_author )
);
if ( ! empty( $comment_author_url ) ) {
echo '</a>';
}
?>
</div><!-- .comment-author -->

View File

@ -13,7 +13,7 @@
*/
/*
If the current post is protected by a password and
* If the current post is protected by a password and
* the visitor has not yet entered the password we will
* return early without loading the comments.
*/

View File

@ -18,11 +18,15 @@
<footer id="colophon" class="site-footer">
<?php get_template_part( 'template-parts/footer/footer', 'widgets' ); ?>
<div class="site-info">
<?php if ( ! empty( get_bloginfo( 'name' ) ) ) : ?>
<?php $blog_info = get_bloginfo( 'name' ); ?>
<?php if ( ! empty( $blog_info ) ) : ?>
<a class="site-name" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>,
<?php endif; ?>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentynineteen' ) ); ?>" class="imprint">
<?php printf( __( 'Proudly powered by %s', 'twentynineteen' ), 'WordPress' ); ?>.
<?php
/* translators: %s: WordPress. */
printf( esc_html__( 'Proudly powered by %s.', 'twentynineteen' ), 'WordPress' );
?>
</a>
<?php
if ( function_exists( 'the_privacy_policy_link' ) ) {

View File

@ -83,6 +83,9 @@ if ( ! function_exists( 'twentynineteen_setup' ) ) :
)
);
// Add theme support for selective refresh for widgets.
add_theme_support( 'customize-selective-refresh-widgets' );
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );
@ -95,18 +98,21 @@ if ( ! function_exists( 'twentynineteen_setup' ) ) :
// Enqueue editor styles
add_editor_style( 'style-editor.css' );
// Add custom color to the editor color palette
// Editor color palette
add_theme_support(
'editor-color-palette',
'editor-color-palette',
array(
array(
'name' => esc_html__( 'Primary Color', 'twentynineteen' ),
'slug' => 'primary',
'color' => twentynineteen_hsl_hex( absint( get_theme_mod( 'colorscheme_hue', 199 ) ), 100, 33 ),
'color' => twentynineteen_hsl_hex( 'default' === get_theme_mod( 'colorscheme' ) ? 199 : get_theme_mod( 'colorscheme_primary_hue', 199 ), 100, 33 ),
),
)
);
// Add support for responsive embedded content
add_theme_support( 'responsive-embeds' );
}
endif;
add_action( 'after_setup_theme', 'twentynineteen_setup' );
@ -120,7 +126,7 @@ function twentynineteen_widgets_init() {
register_sidebar(
array(
'name' => __( 'Footer 1', 'twentynineteen' ),
'name' => __( 'Footer', 'twentynineteen' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your footer.', 'twentynineteen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
@ -160,12 +166,11 @@ function twentynineteen_scripts() {
if ( has_nav_menu( 'menu-1' ) ) {
wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-navigation.js' ), array(), '1.0', true );
$twentynineteen_l10n['expand'] = __( 'Expand child menu', 'twentynineteen' );
$twentynineteen_l10n['collapse'] = __( 'Collapse child menu', 'twentynineteen' );
$l10n_skip_link_focus_fix['expand'] = __( 'Expand child menu', 'twentynineteen' );
$l10n_skip_link_focus_fix['collapse'] = __( 'Collapse child menu', 'twentynineteen' );
wp_localize_script( 'twentynineteen-skip-link-focus-fix', 'twentynineteenScreenReaderText', $l10n_skip_link_focus_fix );
}
wp_localize_script( 'twentynineteen-skip-link-focus-fix', 'twentynineteenScreenReaderText', $twentynineteen_l10n );
wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) {
@ -181,29 +186,38 @@ add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );
/**
* Enqueue supplemental block editor styles
*/
function twentynineteen_editor_frame_styles() {
function twentynineteen_editor_customizer_styles() {
// Include color patterns
require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
wp_enqueue_style( 'twentynineteen-editor-customizer-styles', get_theme_file_uri( '/style-editor-customizer.css' ), false, '1.0', 'all' );
wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' );
wp_add_inline_style( 'twentynineteen-editor-frame-styles', twentynineteen_custom_colors_css() );
if ( 'custom' === get_theme_mod( 'colorscheme' ) ) {
// Include color patterns
require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
wp_add_inline_style( 'twentynineteen-editor-customizer-styles', twentynineteen_custom_colors_css() );
}
}
add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_frame_styles' );
add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_customizer_styles' );
/**
* Display custom color CSS in customizer and on frontend.
*/
function twentynineteen_colors_css_wrap() {
if ( 'custom' !== get_theme_mod( 'colorscheme' ) && ! is_customize_preview() ) {
// Only include custom colors in customizer or frontend
if ( ( ! is_customize_preview() && is_admin() ) || is_admin() ) {
return;
}
require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
$hue = absint( get_theme_mod( 'colorscheme_hue', 250 ) );
if ( 'default' === get_theme_mod( 'colorscheme', 'default' ) ) {
$primary_color = 199;
} else {
$primary_color = absint( get_theme_mod( 'colorscheme_primary_hue', 199 ) );
}
?>
<style type="text/css" id="custom-theme-colors" <?php echo is_customize_preview() ? 'data-hue="' . $hue . '"' : ''; ?>>
<style type="text/css" id="custom-theme-colors" <?php echo is_customize_preview() ? 'data-hue="' . $primary_color . '"' : ''; ?>>
<?php echo twentynineteen_custom_colors_css(); ?>
</style>
<?php

View File

@ -100,4 +100,5 @@ get_header();
</main><!-- .site-main -->
</section><!-- .content-area -->
<?php get_footer(); ?>
<?php
get_footer();

View File

@ -12,8 +12,11 @@
*/
function twentynineteen_custom_colors_css() {
$default_primary_color = 199;
$primary_color = absint( get_theme_mod( 'colorscheme_hue', $default_primary_color ) );
if ( 'default' === get_theme_mod( 'colorscheme', 'default' ) ) {
$primary_color = 199;
} else {
$primary_color = absint( get_theme_mod( 'colorscheme_primary_hue', 199 ) );
}
/**
* Filter Twenty Nineteen default saturation level.
@ -23,9 +26,14 @@ function twentynineteen_custom_colors_css() {
* @param int $saturation Color saturation level.
*/
$saturation = absint( apply_filters( 'twentynineteen_custom_colors_saturation', 100 ) );
$reduced_saturation = ( .8 * $saturation ) . '%';
$saturation = $saturation . '%';
$saturation = absint( apply_filters( 'twentynineteen_custom_colors_saturation', 100 ) );
$saturation = $saturation . '%';
$lightness = absint( apply_filters( 'twentynineteen_custom_colors_lightness', 33 ) );
$lightness = $lightness . '%';
$lightness_hover = absint( apply_filters( 'twentynineteen_custom_colors_lightness_hover', 23 ) );
$lightness_hover = $lightness_hover . '%';
$theme_css = '
/*
@ -54,7 +62,7 @@ function twentynineteen_custom_colors_css() {
.entry-content > *[class^="wp-block-"].is-style-solid-color,
.entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-background-color,
.entry-content .wp-block-file .wp-block-file__button {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
/*
@ -89,7 +97,7 @@ function twentynineteen_custom_colors_css() {
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content > *[class^="wp-block-"] .has-primary-color,
.entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-color {
color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
/*
@ -99,7 +107,7 @@ function twentynineteen_custom_colors_css() {
.entry-content blockquote,
.entry-content .wp-block-quote:not(.is-large),
.entry-content .wp-block-quote:not(.is-style-large) {
border-left-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
border-left-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
/*
@ -122,11 +130,11 @@ function twentynineteen_custom_colors_css() {
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
border-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
border-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
.gallery-item > div > a:focus {
box-shadow: 0 0 0 2px hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
box-shadow: 0 0 0 2px hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
/* Hover colors */
@ -139,7 +147,7 @@ function twentynineteen_custom_colors_css() {
.comment-reply-link:hover,
#cancel-comment-reply-link:hover,
.widget a:hover {
color: hsl( ' . $primary_color . ', ' . $saturation . ', 23% ); /* base: #005177; */
color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
}
.main-navigation .sub-menu > li > a:hover,
@ -148,7 +156,7 @@ function twentynineteen_custom_colors_css() {
.main-navigation .sub-menu > li > a:focus:after,
.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):hover,
.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):focus {
background: hsl( ' . $primary_color . ', ' . $saturation . ', 23% ); /* base: #005177; */
background: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
}';
$editor_css = '
@ -164,16 +172,16 @@ function twentynineteen_custom_colors_css() {
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color),
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color),
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color) {
color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
.editor-block-list__layout .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
.editor-styles-wrapper .editor-block-list__layout .wp-block-freeform blockquote {
border-left: 2px solid hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
border-left: 2px solid hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
.editor-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color:not(.has-background-color) {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
.editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__button,
@ -181,13 +189,13 @@ function twentynineteen_custom_colors_css() {
.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:active,
.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus,
.editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', 33% ); /* base: #0073a8; */
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
/* Hover colors */
.editor-block-list__layout .editor-block-list__block a:hover,
.editor-block-list__layout .editor-block-list__block a:active {
color: hsl( ' . $primary_color . ', ' . $saturation . ', 23% ); /* base: #005177; */
color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
}
/* Do not overwrite solid color pullquote or cover links */

View File

@ -49,11 +49,11 @@ function twentynineteen_customize_register( $wp_customize ) {
$wp_customize->add_control(
'colorscheme',
array(
'type' => 'radio',
'type' => 'radio',
'label' => __( 'Color Scheme', 'twentynineteen' ),
'choices' => array(
'default' => __( 'Default', 'twentynineteen' ),
'custom' => __( 'Custom', 'twentynineteen' ),
'default' => _x( 'Default', 'color scheme', 'twentynineteen' ),
'custom' => _x( 'Custom', 'color scheme', 'twentynineteen' ),
),
'section' => 'colors',
'priority' => 5,
@ -62,7 +62,7 @@ function twentynineteen_customize_register( $wp_customize ) {
// Add primary color setting and control.
$wp_customize->add_setting(
'colorscheme_hue',
'colorscheme_primary_hue',
array(
'default' => 199,
'transport' => 'postMessage',
@ -73,10 +73,10 @@ function twentynineteen_customize_register( $wp_customize ) {
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'colorscheme_hue',
'colorscheme_primary_hue',
array(
'label' => __( 'Primary Color' ),
'description' => __( 'Changes the Color of the Featured Image overlay, Buttons, Links etc.' ),
'label' => __( 'Primary Color', 'twentynineteen' ),
'description' => __( 'Changes the Color of the Featured Image overlay, Buttons, Links etc.', 'twentynineteen' ),
'section' => 'colors',
'mode' => 'hue',
)

View File

@ -73,14 +73,15 @@ if ( ! function_exists( 'twentynineteen_entry_footer' ) ) :
*/
function twentynineteen_entry_footer() {
// Posted by
twentynineteen_posted_by();
// Posted on
twentynineteen_posted_on();
// Hide category and tag text for pages.
// Hide author, post date, category and tag text for pages.
if ( 'post' === get_post_type() ) {
// Posted by
twentynineteen_posted_by();
// Posted on
twentynineteen_posted_on();
/* translators: used between list items, there is a space after the comma. */
$categories_list = get_the_category_list( esc_html__( ', ', 'twentynineteen' ) );
if ( $categories_list ) {
@ -98,7 +99,7 @@ if ( ! function_exists( 'twentynineteen_entry_footer' ) ) :
if ( $tags_list ) {
/* translators: 1: SVG icon. 2: posted in label, only visible to screen readers. 3: list of tags. */
printf(
'<span class="cat-links">%1$s<span class="screen-reader-text">%2$s </span>%3$s</span>',
'<span class="tags-links">%1$s<span class="screen-reader-text">%2$s </span>%3$s</span>',
twentynineteen_get_icon_svg( 'tag', 16 ),
esc_html__( 'Tags:', 'twentynineteen' ),
$tags_list
@ -154,20 +155,13 @@ if ( ! function_exists( 'twentynineteen_post_thumbnail' ) ) :
else :
?>
<figure class="post-thumbnail">
<a class="post-thumbnail-inner" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
<?php
the_post_thumbnail(
'post-thumbnail',
array(
'alt' => the_title_attribute(
array( 'echo' => false )
),
)
);
?>
</a>
</figure><!-- .post-thumbnail -->
<figure class="post-thumbnail">
<a class="post-thumbnail-inner" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
<?php
the_post_thumbnail( 'post-thumbnail' );
?>
</a>
</figure>
<?php
endif; // End is_singular().

View File

@ -12,7 +12,7 @@
// Only show the color hue control when there's a custom color scheme.
wp.customize( 'colorscheme', function( setting ) {
wp.customize.control( 'colorscheme_hue', function( control ) {
wp.customize.control( 'colorscheme_primary_hue', function( control ) {
var visibility = function() {
if ( 'custom' === setting.get() ) {
control.container.slideDown( 180 );

View File

@ -24,7 +24,7 @@
});
// Primary color.
wp.customize( 'colorscheme_hue', function( value ) {
wp.customize( 'colorscheme_primary_hue', function( value ) {
value.bind( function( to ) {
// Update custom color CSS.

View File

@ -34,7 +34,7 @@
"scripts": {
"build:style": "node-sass style.scss style.css --output-style expanded && postcss -r style.css",
"build:style-editor": "node-sass style-editor.scss style-editor.css --output-style expanded && postcss -r style-editor.css",
"build:style-editor-frame": "node-sass style-editor-frame.scss style-editor-frame.css --output-style expanded && postcss -r style-editor-frame.css",
"build:style-editor-customizer": "node-sass style-editor-customizer.scss style-editor-customizer.css --output-style expanded && postcss -r style-editor-customizer.css",
"build:rtl": "rtlcss style.css style-rtl.css",
"build:print": "node-sass print.scss print.css --output-style expanded && postcss -r print.css",
"build": "run-p \"build:*\"",

View File

@ -2,19 +2,13 @@
.entry-content > *,
.entry-summary > * {
@include postContentMaxWidth();
margin: 32px $size__spacing-unit;
max-width: calc(100vw - (2 * #{ $size__spacing-unit }));
@include media(tablet) {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
}
@include media(desktop) {
max-width: calc(6 * (100vw / 12));
}
/*
// Set top margins for headings
& + h1:before,
@ -123,6 +117,11 @@
max-width: (0.33 * $desktop_width);
}
}
&.aligncenter {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
}
//! Video
@ -194,10 +193,10 @@
li {
color: $color__text-light;
font-family: $font__heading;
font-size: calc(#{$font__size_base} * #{$font__size-lg / 1em} );
font-size: calc(#{$font__size_base} * #{$font__size-ratio});
font-weight: bold;
line-height: $font__line-height-heading;
&:not(.menu-item-has-children) {
padding-bottom: ( .75 * $size__spacing-unit );
}
@ -205,7 +204,7 @@
a {
text-decoration: none;
}
ul {
padding-left: $size__spacing-unit;
}
@ -459,6 +458,11 @@
}
}
&.aligncenter {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
&.has-left-content {
justify-content: center;
@ -497,7 +501,7 @@
line-height: $font__line-height-pre;
margin: 0;
padding: ( $size__spacing-unit * .5 );
text-align: left;
text-align: center;
}
//! Separator
@ -505,6 +509,7 @@
hr {
margin-bottom: (2 * $size__spacing-unit);
margin-top: (2 * $size__spacing-unit);
text-align: left;
&:not(.is-style-dots) {
background-color: $color__text-light;
@ -526,11 +531,16 @@
}
}
&.is-style-dots:before {
color: $color__text-light;
font-size: $font__size-lg;
letter-spacing: $font__size-sm;
padding-left: $font__size-sm;
&.is-style-dots {
@include postContentMaxWidth();
text-align: center;
&:before {
color: $color__text-light;
font-size: $font__size-lg;
letter-spacing: $font__size-sm;
padding-left: $font__size-sm;
}
}
}
@ -588,6 +598,8 @@
code {
font-size: $font__size-md;
white-space: pre-wrap;
word-break: break-word;
}
}
@ -653,12 +665,12 @@
background-color: $color__link;
p,
h1,
h1,
h2,
h3,
h4,
h5,
h6,
h6,
a {
color: $color__background-body;
}

View File

@ -8,10 +8,12 @@
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: calc(0.875 * #{$size__spacing-unit}) 0;
}
.wp-caption-text {
color: $color__text-light;
font-size: $font__size-xs;
font-family: $font__heading;
line-height: $font__line-height-pre;
margin: 0;
padding: ( $size__spacing-unit * .5 );
text-align: center;
}

View File

@ -42,7 +42,7 @@
mix-blend-mode: multiply;
opacity: .8;
z-index: 3;
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
@supports (mix-blend-mode: multiply) {
opacity: 1;
@ -87,4 +87,17 @@
0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge.
}
/* Calculates maximum width for post content */
@mixin postContentMaxWidth() {
max-width: calc(100vw - (2 * #{ $size__spacing-unit }));
@include media(tablet) {
max-width: calc(8 * (100vw / 12));
}
@include media(desktop) {
max-width: calc(6 * (100vw / 12));
}
}
@import "utilities";

View File

@ -1,9 +1,11 @@
.alignleft {
/*rtl:ignore*/
float: left;
margin-right: $size__spacing-unit;
}
.alignright {
/*rtl:ignore*/
float: right;
margin-left: $size__spacing-unit;
}

View File

@ -67,12 +67,9 @@
top: 0.2rem;
}
&:not(:last-child) {
.mobile-submenu-expand,
.desktop-submenu-expand {
margin-right: #{0.5 * $size__spacing-unit};
}
.mobile-submenu-expand,
.desktop-submenu-expand {
margin-right: #{0.5 * $size__spacing-unit};
}
}
@ -127,12 +124,9 @@
}
}
&:not(:last-child) {
.mobile-submenu-expand,
.desktop-submenu-expand {
margin-right: 0;
}
.mobile-submenu-expand,
.desktop-submenu-expand {
margin-right: 0;
}
@include media(tablet) {
@ -206,12 +200,11 @@
.main-menu .menu-item-has-children:focus > .sub-menu,
.main-menu .menu-item-has-children .sub-menu:hover,
.main-menu .menu-item-has-children .sub-menu:focus {
display: table;
margin-top: 0;
opacity: 1;
/* Non-mobile position */
@include media(tablet) {
display: table;
margin-top: 0;
opacity: 1;
position: absolute;
left: 0;
right: auto;

View File

@ -61,7 +61,7 @@
/* Entry header */
.site-featured-image .entry-header {
margin-top: calc( 4 * #{$size__spacing-unit});
margin-bottom: 0;
margin-left: 0;
margin-right: 0;

View File

@ -1,23 +1,26 @@
// Site header
.site-header {
padding: 1em;
&.featured-image {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 90vh;
.site-branding-container {
margin-bottom: auto;
}
}
@include media(tablet) {
margin: 0;
padding: 3rem 0;
&.featured-image {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
margin-bottom: 3rem;
.site-branding-container {
margin-bottom: auto;
}
}
}
}

View File

@ -122,6 +122,31 @@
> .comment:first-child {
margin-top: 0;
}
.pingback {
.comment-body {
color: $color__text-light;
font-family: $font__heading;
font-size: $font__size-xs;
font-weight: 500;
margin-bottom: $size__spacing-unit;
a:not(.comment-edit-link) {
font-weight: bold;
font-size: $font__size-base / (1 * $font__size-ratio);
line-height: 1.5;
padding-right: #{0.5 * $size__spacing-unit};
display: block;
}
.comment-edit-link {
color: $color__text-light;
font-family: $font__heading;
font-weight: 500;
}
}
}
}
.comment-reply {
@ -150,25 +175,22 @@
}
}
&:hover > .comment-body > .comment-meta > .comment-metadata {
> .edit-link-sep,
> .edit-link {
opacity: 1;
}
}
.comment-body {
margin: calc(2 * #{$size__spacing-unit}) 0;
}
.comment-meta {
position: relative;
@include media(tablet) {
display: flex;
}
}
.comment-author {
@include media(tablet) {
display: inline-block;
flex: 0 0 auto;
vertical-align: baseline;
}
@ -231,7 +253,7 @@
.comment-metadata {
@include media(tablet) {
display: inline-block;
flex: 1 0 auto;
margin-left: $size__spacing-unit;
position: relative;
vertical-align: baseline;
@ -261,15 +283,11 @@
.edit-link-sep {
color: $color__text-light;
margin: 0 0.2em;
opacity: 0;
transition: opacity 200ms ease-in-out;
vertical-align: baseline;
}
.edit-link {
color: $color__text-light;
transition: opacity 200ms ease-in-out;
opacity: 0;
svg {
transform: scale(0.8);

View File

@ -28,7 +28,7 @@
li {
color: $color__text-light;
font-family: $font__heading;
font-size: calc(#{$font__size_base} * #{$font__size-lg / 1em} );
font-size: calc(#{$font__size_base} * #{$font__size-ratio});
font-weight: bold;
line-height: $font__line-height-heading;

View File

@ -0,0 +1,5 @@
/*!
Twenty Nineteen Customizer Styles
NOTE: This file is empty by default. It is automatically populated with styles if the user selects a custom primary color in the customzier.
*/

View File

@ -0,0 +1,5 @@
/*!
Twenty Nineteen Customizer Styles
NOTE: This file is empty by default. It is automatically populated with styles if the user selects a custom primary color in the customzier.
*/

View File

@ -1,17 +1,51 @@
/*!
Twenty Nineteen Editor Styles
NOTE: Styling alignment styles require use of [data-align] selectors.
This is not ideal, but it works. Styles using those selectors should be refactored
when Gutenberg supports styling those variations more intuitively.
*/
/** === Includes === */
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
* layers of box-shadow to add the border visually, which will render the border smoother. */
/* Calculates maximum width for post content */
/** === Editor Frame === */
@media screen and (min-width: 600px) {
body .wp-block[data-align="full"] {
width: calc( 100% + 90px);
max-width: calc( 100% + 90px);
}
}
@media only screen and (min-width: 768px) {
body {
overflow-x: hidden;
}
body .editor-writing-flow {
max-width: 80%;
margin: 0 10%;
}
body .editor-post-title__block,
body .editor-default-block-appender,
body .editor-block-list__block {
margin-left: 0;
margin-right: 0;
}
body .wp-block[data-align="wide"] {
width: 100%;
}
body .wp-block[data-align="full"] {
position: relative;
left: calc( -12.5% - 14px);
width: calc( 125% + 116px);
max-width: calc( 125% + 116px);
}
body .wp-block[data-align="right"] {
max-width: 125%;
}
}
/** === Content Width === */
.wp-block {
width: calc(100vw - (2 * 1rem));
max-width: 100%;
}
@media only screen and (min-width: 768px) {
@ -26,6 +60,10 @@ when Gutenberg supports styling those variations more intuitively.
}
}
.wp-block .wp-block {
width: 100%;
}
/** === Base Typography === */
body {
font-size: 22px;
@ -136,6 +174,36 @@ figcaption,
color: #767676;
}
/** === Post Title === */
.editor-post-title__block:before {
background: #767676;
content: "\020";
display: block;
height: 2px;
margin: 1rem 0;
width: 1em;
}
.editor-post-title__block:before {
width: 2.8125em;
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;
position: relative;
top: 0.5em;
}
.editor-post-title__block .editor-post-title__input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 2.8125em;
}
/** === Default Appender === */
.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-size: 22px;
}
/** === Paragraph === */
.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@ -154,37 +222,29 @@ figcaption,
line-height: 1.4;
}
.wp-block-cover.has-left-content {
justify-content: center;
}
.wp-block-cover.has-left-content h2,
.wp-block-cover.has-left-content .wp-block-cover-text {
padding: 1em;
}
.wp-block-cover.has-right-content {
justify-content: center;
}
.wp-block-cover.has-right-content h2,
.wp-block-cover.has-right-content .wp-block-cover-text {
padding: 1em;
}
body[data-type="core/cover"][data-align="left"] h2,
body[data-type="core/cover"][data-align="left"] .wp-block-cover-text,
body[data-type="core/cover"][data-align="right"] h2,
body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
.wp-block[data-type="core/cover"][data-align="left"] h2,
.wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover-text,
.wp-block[data-type="core/cover"][data-align="right"] h2,
.wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
width: 100%;
max-width: 305px;
}
@media only screen and (min-width: 1168px) {
body[data-type="core/cover"][data-align="wide"] h2,
body[data-type="core/cover"][data-align="wide"] .wp-block-cover-text,
body[data-type="core/cover"][data-align="full"] h2,
body[data-type="core/cover"][data-align="full"] .wp-block-cover-text {
.wp-block[data-type="core/cover"][data-align="wide"] h2,
.wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover-text,
.wp-block[data-type="core/cover"][data-align="full"] h2,
.wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover-text {
padding: 0;
width: calc(6 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
@ -292,15 +352,15 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
word-break: break-word;
}
body[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"] p,
body[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"][data-align="left"] p,
body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"][data-align="right"] p {
.wp-block[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
.wp-block[data-type="core/pullquote"] blockquote > .editor-rich-text p,
.wp-block[data-type="core/pullquote"] p,
.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
.wp-block[data-type="core/pullquote"][data-align="left"] p,
.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
.wp-block[data-type="core/pullquote"][data-align="right"] p {
font-size: 1.6875em;
font-style: italic;
line-height: 1.3;
@ -309,57 +369,57 @@ body[data-type="core/pullquote"][data-align="right"] p {
}
@media only screen and (min-width: 768px) {
body[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"] p,
body[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"][data-align="left"] p,
body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"][data-align="right"] p {
.wp-block[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
.wp-block[data-type="core/pullquote"] blockquote > .editor-rich-text p,
.wp-block[data-type="core/pullquote"] p,
.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
.wp-block[data-type="core/pullquote"][data-align="left"] p,
.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
.wp-block[data-type="core/pullquote"][data-align="right"] p {
font-size: 2.25em;
}
}
body[data-type="core/pullquote"] .wp-block-pullquote__citation,
body[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
.wp-block[data-type="core/pullquote"] .wp-block-pullquote__citation,
.wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
.wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.71111em;
line-height: 1.6;
text-transform: none;
}
body[data-type="core/pullquote"] em,
body[data-type="core/pullquote"][data-align="left"] em,
body[data-type="core/pullquote"][data-align="right"] em {
.wp-block[data-type="core/pullquote"] em,
.wp-block[data-type="core/pullquote"][data-align="left"] em,
.wp-block[data-type="core/pullquote"][data-align="right"] em {
font-style: normal;
}
body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit,
body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit {
.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit,
.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit {
max-width: 50%;
}
body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color),
body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color) {
.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color),
.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color) {
padding: 0;
}
body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color,
body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color {
.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color,
.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color {
padding: 1em;
}
body[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"][data-align="left"] p,
body[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
body[data-type="core/pullquote"][data-align="right"] p,
body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
.wp-block[data-type="core/pullquote"][data-align="left"] p,
.wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
.wp-block[data-type="core/pullquote"][data-align="right"] p,
.wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
text-align: left;
}
@ -405,7 +465,8 @@ body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citati
.wp-block-separator.is-style-dots:before {
color: #767676;
font-size: 1.6875em;
letter-spacing: 0.88889em;
letter-spacing: calc(2 * 1rem);
padding-left: calc(2 * 1rem);
}
/** === Latest Posts, Archives, Categories === */
@ -427,7 +488,7 @@ ul.wp-block-archives li,
.wp-block-categories li,
.wp-block-latest-posts li {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 1.6875em;
font-size: calc(22px * 1.125);
font-weight: bold;
line-height: 1.2;
}
@ -492,6 +553,13 @@ ul.wp-block-archives li ul,
/** === Classic Editor === */
/* Properly center-align captions in the classic-editor block */
.wp-caption dd {
color: #767676;
font-size: 0.71111em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
line-height: 1.6;
margin: 0;
padding: 0.5rem;
text-align: left;
text-align: center;
-webkit-margin-start: 0px;
margin-inline-start: 0px;

View File

@ -1,9 +1,5 @@
/*!
Twenty Nineteen Editor Styles
NOTE: Styling alignment styles require use of [data-align] selectors.
This is not ideal, but it works. Styles using those selectors should be refactored
when Gutenberg supports styling those variations more intuitively.
*/
/** === Includes === */
@ -12,10 +8,55 @@ when Gutenberg supports styling those variations more intuitively.
@import "sass/variables-site/colors";
@import "sass/mixins/mixins-master";
/** === Editor Frame === */
body {
// Non-standard media query necessary to override a Gutenberg breakpoint style.
@media screen and (min-width: 600px) {
.wp-block[data-align="full"] {
width: calc( 100% + 90px );
max-width: calc( 100% + 90px );
}
}
@include media(tablet) {
overflow-x: hidden;
.editor-writing-flow {
max-width: 80%;
margin: 0 10%;
}
.editor-post-title__block,
.editor-default-block-appender,
.editor-block-list__block {
margin-left: 0;
margin-right: 0;
}
.wp-block[data-align="wide"] {
width: 100%;
}
.wp-block[data-align="full"] {
position: relative;
left: calc( -12.5% - 14px );
width: calc( 125% + 116px );
max-width: calc( 125% + 116px );
}
.wp-block[data-align="right"] {
max-width: 125%;
}
}
}
/** === Content Width === */
.wp-block {
width: calc(100vw - (2 * #{$size__spacing-unit}));
max-width: 100%;
@include media(tablet) {
width: calc(8 * (100vw / 12));
@ -24,6 +65,10 @@ when Gutenberg supports styling those variations more intuitively.
@include media(desktop) {
width: calc(6 * (100vw / 12 ));
}
.wp-block {
width: 100%;
}
}
/** === Base Typography === */
@ -125,6 +170,33 @@ figcaption,
color: $color__text-light;
}
/** === Post Title === */
.editor-post-title__block {
@include post-section-dash;
&:before {
width: $font__size-xxl;
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;
position: relative;
top: 0.5em;
}
.editor-post-title__input {
font-family: $font__heading;
font-size: $font__size-xxl;
}
}
/** === Default Appender === */
.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
font-family: $font__body;
font-size: $font__size_base;
}
/** === Paragraph === */
.wp-block-paragraph {
@ -151,7 +223,6 @@ figcaption,
}
&.has-left-content {
justify-content: center;
h2,
.wp-block-cover-text {
@ -160,7 +231,6 @@ figcaption,
}
&.has-right-content {
justify-content: center;
h2,
.wp-block-cover-text {
@ -169,8 +239,8 @@ figcaption,
}
}
body[data-type="core/cover"][data-align="left"],
body[data-type="core/cover"][data-align="right"] {
.wp-block[data-type="core/cover"][data-align="left"],
.wp-block[data-type="core/cover"][data-align="right"] {
h2,
.wp-block-cover-text {
@ -179,8 +249,8 @@ body[data-type="core/cover"][data-align="right"] {
}
}
body[data-type="core/cover"][data-align="wide"],
body[data-type="core/cover"][data-align="full"] {
.wp-block[data-type="core/cover"][data-align="wide"],
.wp-block[data-type="core/cover"][data-align="full"] {
@include media(desktop) {
h2,
@ -307,9 +377,9 @@ body[data-type="core/cover"][data-align="full"] {
}
}
body[data-type="core/pullquote"],
body[data-type="core/pullquote"][data-align="left"],
body[data-type="core/pullquote"][data-align="right"] {
.wp-block[data-type="core/pullquote"],
.wp-block[data-type="core/pullquote"][data-align="left"],
.wp-block[data-type="core/pullquote"][data-align="right"] {
blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
blockquote > .editor-rich-text p,
@ -337,8 +407,8 @@ body[data-type="core/pullquote"][data-align="right"] {
}
}
body[data-type="core/pullquote"][data-align="left"],
body[data-type="core/pullquote"][data-align="right"] {
.wp-block[data-type="core/pullquote"][data-align="left"],
.wp-block[data-type="core/pullquote"][data-align="right"] {
.editor-block-list__block-edit {
max-width: 50%;
@ -412,7 +482,8 @@ body[data-type="core/pullquote"][data-align="right"] {
&.is-style-dots:before {
color: $color__text-light;
font-size: $font__size-lg;
letter-spacing: $font__size-sm;
letter-spacing: calc(2 * #{$size__spacing-unit});
padding-left: calc(2 * #{$size__spacing-unit});
}
}
@ -431,7 +502,7 @@ ul.wp-block-archives,
li {
font-family: $font__heading;
font-size: $font__size-lg;
font-size: calc(#{$font__size_base} * #{$font__size-ratio});
font-weight: bold;
line-height: $font__line-height-heading;
@ -498,6 +569,13 @@ ul.wp-block-archives,
/* Properly center-align captions in the classic-editor block */
.wp-caption {
dd {
color: $color__text-light;
font-size: $font__size-xs;
font-family: $font__heading;
line-height: $font__line-height-pre;
margin: 0;
padding: ( $size__spacing-unit * .5 );
text-align: left;
text-align: center;
-webkit-margin-start: 0px;
margin-inline-start: 0px;

View File

@ -56,6 +56,7 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
* layers of box-shadow to add the border visually, which will render the border smoother. */
/* Calculates maximum width for post content */
/* Normalize */
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
@ -958,8 +959,8 @@ body.page .main-navigation {
top: 0.2rem;
}
.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand,
.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand {
.main-navigation .main-menu > li.menu-item-has-children .mobile-submenu-expand,
.main-navigation .main-menu > li.menu-item-has-children .desktop-submenu-expand {
margin-left: 0.5rem;
}
@ -1014,8 +1015,8 @@ body.page .main-navigation {
top: 0;
}
.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand,
.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand {
.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand,
.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand {
margin-left: 0;
}
@ -1082,9 +1083,6 @@ body.page .main-navigation {
.main-navigation .main-menu .menu-item-has-children:focus > .sub-menu,
.main-navigation .main-menu .menu-item-has-children .sub-menu:hover,
.main-navigation .main-menu .menu-item-has-children .sub-menu:focus {
display: table;
margin-top: 0;
opacity: 1;
/* Non-mobile position */
}
@ -1093,6 +1091,9 @@ body.page .main-navigation {
.main-navigation .main-menu .menu-item-has-children:focus > .sub-menu,
.main-navigation .main-menu .menu-item-has-children .sub-menu:hover,
.main-navigation .main-menu .menu-item-has-children .sub-menu:focus {
display: table;
margin-top: 0;
opacity: 1;
position: absolute;
right: 0;
left: auto;
@ -1478,12 +1479,12 @@ body.page .main-navigation {
/* Alignments */
.alignleft {
float: right;
float: left;
margin-left: 1rem;
}
.alignright {
float: left;
float: right;
margin-right: 1rem;
}
@ -1539,21 +1540,26 @@ body.page .main-navigation {
padding: 1em;
}
.site-header.featured-image {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 90vh;
}
.site-header.featured-image .site-branding-container {
margin-bottom: auto;
}
@media only screen and (min-width: 768px) {
.site-header {
margin: 0;
padding: 3rem 0;
}
.site-header.featured-image {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
margin-bottom: 3rem;
}
.site-header.featured-image .site-branding-container {
margin-bottom: auto;
}
}
.site-branding {
@ -1754,6 +1760,7 @@ body.page .main-navigation {
}
.site-header.featured-image .site-featured-image .entry-header {
margin-top: calc( 4 * 1rem);
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
@ -2401,6 +2408,28 @@ body.page .main-navigation {
margin-top: 0;
}
.comment-list .pingback .comment-body {
color: #767676;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.71111em;
font-weight: 500;
margin-bottom: 1rem;
}
.comment-list .pingback .comment-body a:not(.comment-edit-link) {
font-weight: bold;
font-size: 19.55556px;
line-height: 1.5;
padding-left: 0.5rem;
display: block;
}
.comment-list .pingback .comment-body .comment-edit-link {
color: #767676;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: 500;
}
.comment-reply {
right: calc(1rem + 100%);
bottom: 0;
@ -2429,11 +2458,6 @@ body.page .main-navigation {
}
}
.comment:hover > .comment-body > .comment-meta > .comment-metadata > .edit-link-sep,
.comment:hover > .comment-body > .comment-meta > .comment-metadata > .edit-link {
opacity: 1;
}
.comment .comment-body {
margin: calc(2 * 1rem) 0;
}
@ -2442,9 +2466,15 @@ body.page .main-navigation {
position: relative;
}
@media only screen and (min-width: 768px) {
.comment .comment-meta {
display: flex;
}
}
@media only screen and (min-width: 768px) {
.comment .comment-author {
display: inline-block;
flex: 0 0 auto;
vertical-align: baseline;
}
}
@ -2512,7 +2542,7 @@ body.page .main-navigation {
@media only screen and (min-width: 768px) {
.comment .comment-metadata {
display: inline-block;
flex: 1 0 auto;
margin-right: 1rem;
position: relative;
vertical-align: baseline;
@ -2545,15 +2575,11 @@ body.page .main-navigation {
.comment .comment-metadata .edit-link-sep {
color: #767676;
margin: 0 0.2em;
opacity: 0;
transition: opacity 200ms ease-in-out;
vertical-align: baseline;
}
.comment .comment-metadata .edit-link {
color: #767676;
transition: opacity 200ms ease-in-out;
opacity: 0;
}
.comment .comment-metadata .edit-link svg {
@ -2837,7 +2863,7 @@ body.page .main-navigation {
.widget_rss ul li {
color: #767676;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: calc(22px * 1.6875);
font-size: calc(22px * 1.125);
font-weight: bold;
line-height: 1.2;
}
@ -2875,8 +2901,8 @@ body.page .main-navigation {
/* !Block styles */
.entry-content > *,
.entry-summary > * {
margin: 32px 1rem;
max-width: calc(100vw - (2 * 1rem));
margin: 32px 1rem;
/*
// Set top margins for headings
& + h1:before,
@ -2893,7 +2919,6 @@ body.page .main-navigation {
@media only screen and (min-width: 768px) {
.entry-content > *,
.entry-summary > * {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
}
}
@ -2905,6 +2930,13 @@ body.page .main-navigation {
}
}
@media only screen and (min-width: 768px) {
.entry-content > *,
.entry-summary > * {
margin: 32px calc(2 * (100vw / 12));
}
}
.entry-content > * > *:first-child,
.entry-summary > * > *:first-child {
margin-top: 0;
@ -3024,6 +3056,11 @@ body.page .main-navigation {
}
}
.entry-content .wp-block-audio.aligncenter {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
.entry-content .wp-block-video video {
width: 100%;
}
@ -3086,7 +3123,7 @@ body.page .main-navigation {
.entry-content .wp-block-latest-posts li {
color: #767676;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: calc(22px * 1.6875);
font-size: calc(22px * 1.125);
font-weight: bold;
line-height: 1.2;
}
@ -3362,6 +3399,12 @@ body.page .main-navigation {
top: 50%;
}
.entry-content .wp-block-cover-image.aligncenter,
.entry-content .wp-block-cover.aligncenter {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
.entry-content .wp-block-cover-image.has-left-content,
.entry-content .wp-block-cover.has-left-content {
justify-content: center;
@ -3405,13 +3448,14 @@ body.page .main-navigation {
line-height: 1.6;
margin: 0;
padding: 0.5rem;
text-align: right;
text-align: center;
}
.entry-content .wp-block-separator,
.entry-content hr {
margin-bottom: 2rem;
margin-top: 2rem;
text-align: right;
/* Remove duplicate rule-line when a separator
* is followed by an H1, or H2 */
}
@ -3435,6 +3479,26 @@ body.page .main-navigation {
display: none;
}
.entry-content .wp-block-separator.is-style-dots,
.entry-content hr.is-style-dots {
max-width: calc(100vw - (2 * 1rem));
text-align: center;
}
@media only screen and (min-width: 768px) {
.entry-content .wp-block-separator.is-style-dots,
.entry-content hr.is-style-dots {
max-width: calc(8 * (100vw / 12));
}
}
@media only screen and (min-width: 1168px) {
.entry-content .wp-block-separator.is-style-dots,
.entry-content hr.is-style-dots {
max-width: calc(6 * (100vw / 12));
}
}
.entry-content .wp-block-separator.is-style-dots:before,
.entry-content hr.is-style-dots:before {
color: #767676;
@ -3493,6 +3557,8 @@ body.page .main-navigation {
.entry-content .wp-block-code code {
font-size: 1.125em;
white-space: pre-wrap;
word-break: break-word;
}
.entry-content .wp-block-columns .wp-block-column > *:first-child {
@ -3591,11 +3657,13 @@ svg {
margin-left: auto;
}
.wp-caption .wp-caption-text {
margin: calc(0.875 * 1rem) 0;
}
.wp-caption-text {
color: #767676;
font-size: 0.71111em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
line-height: 1.6;
margin: 0;
padding: 0.5rem;
text-align: center;
}

View File

@ -56,6 +56,7 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
* layers of box-shadow to add the border visually, which will render the border smoother. */
/* Calculates maximum width for post content */
/* Normalize */
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
@ -958,8 +959,8 @@ body.page .main-navigation {
top: 0.2rem;
}
.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand,
.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand {
.main-navigation .main-menu > li.menu-item-has-children .mobile-submenu-expand,
.main-navigation .main-menu > li.menu-item-has-children .desktop-submenu-expand {
margin-right: 0.5rem;
}
@ -1014,8 +1015,8 @@ body.page .main-navigation {
top: 0;
}
.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand,
.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand {
.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand,
.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand {
margin-right: 0;
}
@ -1082,9 +1083,6 @@ body.page .main-navigation {
.main-navigation .main-menu .menu-item-has-children:focus > .sub-menu,
.main-navigation .main-menu .menu-item-has-children .sub-menu:hover,
.main-navigation .main-menu .menu-item-has-children .sub-menu:focus {
display: table;
margin-top: 0;
opacity: 1;
/* Non-mobile position */
}
@ -1093,6 +1091,9 @@ body.page .main-navigation {
.main-navigation .main-menu .menu-item-has-children:focus > .sub-menu,
.main-navigation .main-menu .menu-item-has-children .sub-menu:hover,
.main-navigation .main-menu .menu-item-has-children .sub-menu:focus {
display: table;
margin-top: 0;
opacity: 1;
position: absolute;
left: 0;
right: auto;
@ -1478,11 +1479,13 @@ body.page .main-navigation {
/* Alignments */
.alignleft {
/*rtl:ignore*/
float: left;
margin-right: 1rem;
}
.alignright {
/*rtl:ignore*/
float: right;
margin-left: 1rem;
}
@ -1539,21 +1542,26 @@ body.page .main-navigation {
padding: 1em;
}
.site-header.featured-image {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 90vh;
}
.site-header.featured-image .site-branding-container {
margin-bottom: auto;
}
@media only screen and (min-width: 768px) {
.site-header {
margin: 0;
padding: 3rem 0;
}
.site-header.featured-image {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
margin-bottom: 3rem;
}
.site-header.featured-image .site-branding-container {
margin-bottom: auto;
}
}
.site-branding {
@ -1754,6 +1762,7 @@ body.page .main-navigation {
}
.site-header.featured-image .site-featured-image .entry-header {
margin-top: calc( 4 * 1rem);
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
@ -2401,6 +2410,28 @@ body.page .main-navigation {
margin-top: 0;
}
.comment-list .pingback .comment-body {
color: #767676;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.71111em;
font-weight: 500;
margin-bottom: 1rem;
}
.comment-list .pingback .comment-body a:not(.comment-edit-link) {
font-weight: bold;
font-size: 19.55556px;
line-height: 1.5;
padding-right: 0.5rem;
display: block;
}
.comment-list .pingback .comment-body .comment-edit-link {
color: #767676;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: 500;
}
.comment-reply {
left: calc(1rem + 100%);
bottom: 0;
@ -2429,11 +2460,6 @@ body.page .main-navigation {
}
}
.comment:hover > .comment-body > .comment-meta > .comment-metadata > .edit-link-sep,
.comment:hover > .comment-body > .comment-meta > .comment-metadata > .edit-link {
opacity: 1;
}
.comment .comment-body {
margin: calc(2 * 1rem) 0;
}
@ -2442,9 +2468,15 @@ body.page .main-navigation {
position: relative;
}
@media only screen and (min-width: 768px) {
.comment .comment-meta {
display: flex;
}
}
@media only screen and (min-width: 768px) {
.comment .comment-author {
display: inline-block;
flex: 0 0 auto;
vertical-align: baseline;
}
}
@ -2512,7 +2544,7 @@ body.page .main-navigation {
@media only screen and (min-width: 768px) {
.comment .comment-metadata {
display: inline-block;
flex: 1 0 auto;
margin-left: 1rem;
position: relative;
vertical-align: baseline;
@ -2545,15 +2577,11 @@ body.page .main-navigation {
.comment .comment-metadata .edit-link-sep {
color: #767676;
margin: 0 0.2em;
opacity: 0;
transition: opacity 200ms ease-in-out;
vertical-align: baseline;
}
.comment .comment-metadata .edit-link {
color: #767676;
transition: opacity 200ms ease-in-out;
opacity: 0;
}
.comment .comment-metadata .edit-link svg {
@ -2837,7 +2865,7 @@ body.page .main-navigation {
.widget_rss ul li {
color: #767676;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: calc(22px * 1.6875);
font-size: calc(22px * 1.125);
font-weight: bold;
line-height: 1.2;
}
@ -2875,8 +2903,8 @@ body.page .main-navigation {
/* !Block styles */
.entry-content > *,
.entry-summary > * {
margin: 32px 1rem;
max-width: calc(100vw - (2 * 1rem));
margin: 32px 1rem;
/*
// Set top margins for headings
& + h1:before,
@ -2893,7 +2921,6 @@ body.page .main-navigation {
@media only screen and (min-width: 768px) {
.entry-content > *,
.entry-summary > * {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
}
}
@ -2905,6 +2932,13 @@ body.page .main-navigation {
}
}
@media only screen and (min-width: 768px) {
.entry-content > *,
.entry-summary > * {
margin: 32px calc(2 * (100vw / 12));
}
}
.entry-content > * > *:first-child,
.entry-summary > * > *:first-child {
margin-top: 0;
@ -3024,6 +3058,11 @@ body.page .main-navigation {
}
}
.entry-content .wp-block-audio.aligncenter {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
.entry-content .wp-block-video video {
width: 100%;
}
@ -3086,7 +3125,7 @@ body.page .main-navigation {
.entry-content .wp-block-latest-posts li {
color: #767676;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: calc(22px * 1.6875);
font-size: calc(22px * 1.125);
font-weight: bold;
line-height: 1.2;
}
@ -3362,6 +3401,12 @@ body.page .main-navigation {
top: 50%;
}
.entry-content .wp-block-cover-image.aligncenter,
.entry-content .wp-block-cover.aligncenter {
margin: 32px calc(2 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
.entry-content .wp-block-cover-image.has-left-content,
.entry-content .wp-block-cover.has-left-content {
justify-content: center;
@ -3405,13 +3450,14 @@ body.page .main-navigation {
line-height: 1.6;
margin: 0;
padding: 0.5rem;
text-align: left;
text-align: center;
}
.entry-content .wp-block-separator,
.entry-content hr {
margin-bottom: 2rem;
margin-top: 2rem;
text-align: left;
/* Remove duplicate rule-line when a separator
* is followed by an H1, or H2 */
}
@ -3435,6 +3481,26 @@ body.page .main-navigation {
display: none;
}
.entry-content .wp-block-separator.is-style-dots,
.entry-content hr.is-style-dots {
max-width: calc(100vw - (2 * 1rem));
text-align: center;
}
@media only screen and (min-width: 768px) {
.entry-content .wp-block-separator.is-style-dots,
.entry-content hr.is-style-dots {
max-width: calc(8 * (100vw / 12));
}
}
@media only screen and (min-width: 1168px) {
.entry-content .wp-block-separator.is-style-dots,
.entry-content hr.is-style-dots {
max-width: calc(6 * (100vw / 12));
}
}
.entry-content .wp-block-separator.is-style-dots:before,
.entry-content hr.is-style-dots:before {
color: #767676;
@ -3493,6 +3559,8 @@ body.page .main-navigation {
.entry-content .wp-block-code code {
font-size: 1.125em;
white-space: pre-wrap;
word-break: break-word;
}
.entry-content .wp-block-columns .wp-block-column > *:first-child {
@ -3591,11 +3659,13 @@ svg {
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: calc(0.875 * 1rem) 0;
}
.wp-caption-text {
color: #767676;
font-size: 0.71111em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
line-height: 1.6;
margin: 0;
padding: 0.5rem;
text-align: center;
}

View File

@ -15,7 +15,7 @@
<header class="entry-header">
<?php
if ( is_sticky() && is_home() && ! is_paged() ) {
printf( '<span class="sticky-post">%s</span>', __( 'Featured', 'twentynineteen' ) );
printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'twentynineteen' ) );
}
the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
?>

View File

@ -15,7 +15,7 @@
<header class="entry-header">
<?php
if ( is_sticky() && is_home() && ! is_paged() ) {
printf( '<span class="sticky-post">%s</span>', __( 'Featured', 'twentynineteen' ) );
printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'twentynineteen' ) );
}
if ( is_singular() ) :
the_title( '<h1 class="entry-title">', '</h1>' );

View File

@ -12,8 +12,8 @@
<?php if ( has_custom_logo() ) : ?>
<div class="site-logo"><?php the_custom_logo(); ?></div>
<?php endif; ?>
<?php if ( ! empty( get_bloginfo( 'name' ) ) ) : ?>
<?php $blog_info = get_bloginfo( 'name' ); ?>
<?php if ( ! empty( $blog_info ) ) : ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>

View File

@ -15,7 +15,7 @@ if ( (bool) get_the_author_meta( 'description' ) ) : ?>
<p class="author-description">
<?php the_author_meta( 'description' ); ?>
<a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
<?php _e( 'View more posts ', 'twentynineteen' ); ?>
<?php _e( 'View more posts', 'twentynineteen' ); ?>
</a>
</p><!-- .author-description -->
</div><!-- .author-bio -->