From f2517bad92a287870b31a21ce4296c74cd0bafae Mon Sep 17 00:00:00 2001 From: allancole Date: Mon, 12 Nov 2018 23:19:13 +0000 Subject: [PATCH] Updating Twenty Nineteen, our new default theme for 2019, set for 5.0. This update applies the following changes: - Improve menu UI to support keyboard, click and touch interactions - Improve variable scoping and js performance in menu interaction javascript - Improve custom-colors for selected text, buttons and menu hover styles - Improve margins structure for more consistency between editor and frontend - Improve discussion avatars for simpler wording and better performance - Improve fonts in list widgets and list blocks - Improve comment responsive spacing and avatar display - Improve various block styles to make them consistent between the editor and frontend - Add tabbed browsing support for ie11 - Add backwards compatibility support for older versions of WordPress - Add fallback styles for older versions of WP where Gutenberg is activated and then deactivated (backwards compatibility) - Add `sizes` attribute for featured images to improve responsive performance - Add focus-within polyfill - Add a footer menu for secondary page links - Fix editor styles to prevent conflicts with plugins that add meta boxes to the editor - Fix columns block issues on small screens - Fix empty-space font text cursor issue in Gutenberg editor - Fix RTL floating styles so that left/right floats are honored - Fix cover image block margins/padding - Fix invalid rgba style - Fix php warning when returning attributes - Fix gallery widget margins to improve gallery grids - Fix .entry-content selectors to prevent shortcodes, plugins and other unknown content from breaking the layout - Remove translation escaping to follow code standards in previous default themes - Remove custom color output in the fronten header when default color is selected - Remove fly-out sub-sub-sub-menu behavior on desktop to prevent sub-menus from falling off the screen - General code clean up and coding standards improvements 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, @tlxo, @themeroots, @whizbangik, @yingles, @youthkee, @brentswisher, @smy315, @ahmadawais, @desi-developer. git-svn-id: https://develop.svn.wordpress.org/branches/5.0@43892 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentynineteen/archive.php | 7 +- .../class-twentynineteen-svg-icons.php | 159 +- .../class-twentynineteen-walker-comment.php | 11 +- .../themes/twentynineteen/comments.php | 20 +- .../fonts/NonBreakingSpaceOverride.woff | Bin 0 -> 1212 bytes .../fonts/NonBreakingSpaceOverride.woff2 | Bin 0 -> 764 bytes .../themes/twentynineteen/footer.php | 15 +- .../themes/twentynineteen/functions.php | 47 +- .../themes/twentynineteen/header.php | 5 +- .../themes/twentynineteen/image.php | 4 +- .../themes/twentynineteen/inc/back-compat.php | 76 + .../twentynineteen/inc/color-patterns.php | 69 +- .../twentynineteen/inc/template-functions.php | 145 +- .../twentynineteen/inc/template-tags.php | 38 +- .../themes/twentynineteen/index.php | 35 +- .../twentynineteen/js/customize-preview.js | 16 +- .../themes/twentynineteen/js/priority-menu.js | 128 + .../js/touch-keyboard-navigation.js | 277 +++ .../twentynineteen/js/touch-navigation.js | 163 -- .../themes/twentynineteen/package-lock.json | 52 +- .../themes/twentynineteen/package.json | 7 +- .../themes/twentynineteen/postcss.config.js | 10 +- .../themes/twentynineteen/readme.txt | 15 +- .../twentynineteen/sass/blocks/_blocks.scss | 351 +-- .../sass/elements/_elements.scss | 17 +- .../twentynineteen/sass/elements/_tables.scss | 8 +- .../twentynineteen/sass/media/_captions.scss | 13 + .../twentynineteen/sass/media/_galleries.scss | 8 +- .../sass/mixins/_mixins-master.scss | 129 +- .../sass/mixins/_utilities.scss | 7 + .../sass/modules/_alignments.scss | 12 + .../navigation/_menu-footer-navigation.scss | 22 + .../navigation/_menu-main-navigation.scss | 388 ++- .../sass/navigation/_navigation.scss | 1 + .../sass/navigation/_next-previous.scss | 42 +- .../sass/site/footer/_site-footer.scss | 4 +- .../site/header/_site-featured-image.scss | 192 +- .../sass/site/header/_site-header.scss | 8 +- .../sass/site/primary/_archives.scss | 7 +- .../sass/site/primary/_comments.scss | 81 +- .../sass/site/primary/_posts-and-pages.scss | 63 +- .../sass/site/secondary/_widgets.scss | 44 +- .../twentynineteen/sass/typography/_copy.scss | 13 +- .../sass/typography/_headings.scss | 54 +- .../sass/typography/_typography.scss | 2 + .../sass/variables-site/_fonts.scss | 2 +- .../sass/variables-site/_structure.scss | 5 +- .../themes/twentynineteen/search.php | 2 +- .../themes/twentynineteen/single.php | 2 - .../style-editor-customizer.css | 94 +- .../style-editor-customizer.scss | 14 +- .../twentynineteen/style-editor-frame.css | 60 - .../twentynineteen/style-editor-frame.scss | 67 - .../themes/twentynineteen/style-editor.css | 217 +- .../themes/twentynineteen/style-editor.scss | 184 +- .../themes/twentynineteen/style-rtl.css | 2135 ++++++++++++----- .../themes/twentynineteen/style.css | 2079 +++++++++++----- .../template-parts/content/content-none.php | 6 +- .../template-parts/content/content-page.php | 2 +- .../template-parts/content/content-single.php | 2 +- .../template-parts/content/content.php | 2 +- .../template-parts/header/site-branding.php | 1 + .../template-parts/post/discussion-meta.php | 18 +- 63 files changed, 5237 insertions(+), 2420 deletions(-) create mode 100755 src/wp-content/themes/twentynineteen/fonts/NonBreakingSpaceOverride.woff create mode 100755 src/wp-content/themes/twentynineteen/fonts/NonBreakingSpaceOverride.woff2 create mode 100644 src/wp-content/themes/twentynineteen/inc/back-compat.php create mode 100644 src/wp-content/themes/twentynineteen/js/priority-menu.js create mode 100644 src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js delete mode 100644 src/wp-content/themes/twentynineteen/js/touch-navigation.js create mode 100755 src/wp-content/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss delete mode 100644 src/wp-content/themes/twentynineteen/style-editor-frame.css delete mode 100644 src/wp-content/themes/twentynineteen/style-editor-frame.scss diff --git a/src/wp-content/themes/twentynineteen/archive.php b/src/wp-content/themes/twentynineteen/archive.php index df8b24fb7c..3d2273e43e 100644 --- a/src/wp-content/themes/twentynineteen/archive.php +++ b/src/wp-content/themes/twentynineteen/archive.php @@ -45,13 +45,12 @@ get_header(); // If no content, include the "No posts found" template. else : - get_template_part( 'template-parts/content', 'none' ); + get_template_part( 'template-parts/content/content', 'none' ); endif; ?> - - - + + /* material-design – link */ ' - - + + ', 'watch' => /* material-design – watch-later */ ' - + - + - + ', 'archive' => /* material-design – folder */ ' - - + + ', 'tag' => /* material-design – local_offer */ ' - - + + ', 'comment' => /* material-design – comment */ ' - - + + ', 'person' => /* material-design – person */ ' - - + + ', 'edit' => /* material-design – edit */ ' - - + + ', 'chevron_left' => /* material-design – chevron_left */ ' - - + + ', 'chevron_right' => /* material-design – chevron_right */ ' - - + + ', 'check' => /* material-design – check */ ' - - + + ', 'arrow_drop_down_circle' => /* material-design – arrow_drop_down_circle */ ' - - + + ', 'keyboard_arrow_down' => /* material-design – keyboard_arrow_down */ ' - - + + ', 'keyboard_arrow_right' => /* material-design – keyboard_arrow_right */ ' - - + + ', 'keyboard_arrow_left' => /* material-design – keyboard_arrow_left */ ' - - + + +', + + 'arrow_drop_down_ellipsis' => /* custom – arrow_drop_down_ellipsis */ ' + + + + + ', ); @@ -203,6 +211,9 @@ class TwentyNineteen_SVG_Icons { 'google-plus' => array( 'plus.google.com', ), + 'lastfm' => array( + 'last.fm', + ), 'mail' => array( 'mailto:', ), @@ -229,213 +240,217 @@ class TwentyNineteen_SVG_Icons { static $social_icons = array( '500px' => ' - + ', 'amazon' => ' - + ', 'apple' => ' - + ', 'bandcamp' => ' - + ', 'behance' => ' - + ', 'chain' => ' - + ', 'codepen' => ' - + ', 'deviantart' => ' - + ', 'digg' => ' - + ', 'dribbble' => ' - + ', 'dropbox' => ' - + ', 'etsy' => ' - + ', 'facebook' => ' - + ', 'feed' => ' - + ', 'flickr' => ' - + ', 'foursquare' => ' - + ', 'goodreads' => ' - + ', 'google-plus' => ' - + ', 'google' => ' - + ', 'github' => ' - + ', 'instagram' => ' - + +', + + 'lastfm' => ' + + ', 'linkedin' => ' - + ', 'mail' => ' - + ', 'meetup' => ' - + ', 'medium' => ' - + ', 'pinterest' => ' - + ', 'pocket' => ' - + ', 'reddit' => ' - + ', 'skype' => ' - + ', 'slideshare' => ' - + ', 'snapchat' => ' - + ', 'soundcloud' => ' - + ', 'spotify' => ' - + ', 'stumbleupon' => ' - + ', 'tumblr' => ' - + ', 'twitch' => ' - + ', 'twitter' => ' - + ', 'vimeo' => ' - + ', 'vk' => ' - + ', 'wordpress' => ' - + ', 'yelp' => ' - + ', 'youtube' => ' - + ', ); diff --git a/src/wp-content/themes/twentynineteen/classes/class-twentynineteen-walker-comment.php b/src/wp-content/themes/twentynineteen/classes/class-twentynineteen-walker-comment.php index 5d94fd7dac..b39185e45e 100644 --- a/src/wp-content/themes/twentynineteen/classes/class-twentynineteen-walker-comment.php +++ b/src/wp-content/themes/twentynineteen/classes/class-twentynineteen-walker-comment.php @@ -55,8 +55,8 @@ class TwentyNineteen_Walker_Comment extends Walker_Comment { printf( '', twentynineteen_get_icon_svg( 'check', 24 ) ); } - /* translators: %s: comment author link */ printf( + /* translators: %s: comment author link */ __( '%s says:', 'twentynineteen' ), sprintf( '%s', $comment_author ) ); @@ -69,9 +69,12 @@ class TwentyNineteen_Walker_Comment extends Walker_Comment {
- -
-
+

responses ) { /* translators: %s: post title */ printf( _x( 'One reply on “%s”', 'comments title', 'twentynineteen' ), get_the_title() ); } else { @@ -44,11 +44,11 @@ if ( post_password_required() ) { _nx( '%1$s reply on “%2$s”', '%1$s replies on “%2$s”', - $comments_number, + $discussion->responses, 'comments title', 'twentynineteen' ), - number_format_i18n( $comments_number ), + number_format_i18n( $discussion->responses ), get_the_title() ); } @@ -102,9 +102,9 @@ if ( post_password_required() ) { if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) : ?>
- + - +

- +

;WSUMGC%2OCB)lnP;n=##B{&aV~J@rvw8@o&V=a1wEc44fmlfqCp+FCPG`4RN~= zs8ej^rWBb_4q&9OLwYPyuriBFgbKvbauCNbfGLsYi;+&xArA=Ya$EIEPZOr1nw=>3 zM)0@woHkEKB;xcs2Lu<3NaKohSxz3RMJccl*vw1}q}eG*XN2m3xq(PXmkIOGxmXR# z^|c%jfLWGMmWFiAh(8E`f2iu!n#i*i$e-qdG%*NNs8?oLZkh<)kJg5Ax*qB)iF0|A zDO4&&!Q8p&&vlhczpM{wMvh=xdgR5JnzkFIuQA-dC-xF~Xf8iy%Tb zyyht?6|f)oqf0z1Tr(@7W3Www=NrzUC~+ahqLXx{9D8BkeaMz>&KaTqz+%jmCq8u2sE`pMgX>k=?G}*|4)P-jFM0(6h+@d z)KwIf_Y{>ERfJU?Aj~gwOh0`q28^V;Py+y}SH{NrH@Q+Z64MiAT^hU2&q}hg^ANka zj1pX0T?bFfaSh`L4-A2MBloe}8{5z#LBg-(8CH`Q{yLzd_#7&>$F zk<^HL@M8aY&&`ob8J`TRd8%Yv?qi(&KuS3AtvageOt#w2pLpWV3v3R2B^j=~*{=CE zI;otuM|F6{>hG6lG6I|0>-oQV^(t;n=1+IHH|D699X{Um(ZCY>=jvy-*_rC08#Upb z0Xi^}WgDmh^xC{AlLc=+=p>eg1Ec+`9e6vdLX; z1wj%IA(+Yc@#cB+eRw|n>({ePlbHH`PI40pbqDe7B@54B5h z>RQltsvERy&inB6&-eDCZomN3>A=#^=QEgy#}SJt+ID}A7+bXmdG9fXPN)v4s8q>vs zZ60`OOyzjQ($q_t_k~>MTXUvYzuL*z0a{=QB-HntZ#iG!NiiOJZ~ykTiX;sJ4J?i0 zGLAU2JSx6iK!WTqOjcb@C`qf$fNSy#JCb%~e8YeRI8OYA}~`h0OlV>Hqx10pbqJ*AuRT(u;IRC~ZguHm$K!>f)Z z1V-cIbf~dxVNy+iegKee3z*U+oF#vF-O)-x*Fg}Z;I6^asAga!$CVhHXxr~3isbZY zT7;mPgfxftWt4N1MA|||xi58yaF)n9u!s@Wcu@u&XoBqO*r-ZAn(;XZEFPpH%J86t zB-~V#WxhiIYly295i+p0yJaLYfB~H~k(71YOjpLLvaYi+tpgLalC50dtb!#1G0x^} z{f5-7CPeOF$w8NGB(e2{aYae`5i7{H#)>;SBA$LDgs6U&GI!;(t$`ZY$73Fmz}BAS zJ}0=<&zYfNip?`46-m-J& ' ); } ?> + + +

diff --git a/src/wp-content/themes/twentynineteen/functions.php b/src/wp-content/themes/twentynineteen/functions.php index b6cd2acfed..ca792cf32b 100644 --- a/src/wp-content/themes/twentynineteen/functions.php +++ b/src/wp-content/themes/twentynineteen/functions.php @@ -9,6 +9,14 @@ * @since 1.0.0 */ +/** + * Twenty Nineteen only works in WordPress 4.7 or later. + */ +if ( version_compare( $GLOBALS['wp_version'], '4.7', '<' ) ) { + require get_template_directory() . '/inc/back-compat.php'; + return; +} + if ( ! function_exists( 'twentynineteen_setup' ) ) : /** * Sets up theme defaults and registers support for various WordPress features. @@ -48,7 +56,8 @@ if ( ! function_exists( 'twentynineteen_setup' ) ) : // This theme uses wp_nav_menu() in two locations. register_nav_menus( array( - 'menu-1' => esc_html__( 'Primary', 'twentynineteen' ), + 'menu-1' => __( 'Primary', 'twentynineteen' ), + 'footer' => __( 'Footer Menu', 'twentynineteen' ), 'social' => __( 'Social Links Menu', 'twentynineteen' ), ) ); @@ -86,31 +95,31 @@ 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 support for Block Styles. add_theme_support( 'wp-block-styles' ); // Add support for full and wide align images. add_theme_support( 'align-wide' ); - // Add support for editor styles + // Add support for editor styles. add_theme_support( 'editor-styles' ); - // Enqueue editor styles + // Enqueue editor styles. add_editor_style( 'style-editor.css' ); - // Editor color palette + // Editor color palette. add_theme_support( 'editor-color-palette', array( array( - 'name' => esc_html__( 'Primary Color', 'twentynineteen' ), + 'name' => __( 'Primary Color', 'twentynineteen' ), 'slug' => 'primary', '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 support for responsive embedded content. add_theme_support( 'responsive-embeds' ); } @@ -144,7 +153,7 @@ add_action( 'widgets_init', 'twentynineteen_widgets_init' ); * * Priority 0 to make it available to lower priority callbacks. * - * @global int $content_width + * @global int $content_width Content width. */ function twentynineteen_content_width() { // This variable is intended to be overruled from themes. @@ -165,18 +174,12 @@ function twentynineteen_scripts() { wp_enqueue_script( 'twentynineteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true ); if ( has_nav_menu( 'menu-1' ) ) { - wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-navigation.js' ), array(), '1.0', true ); - $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_enqueue_script( 'twentynineteen-priority-menu', get_theme_file_uri( '/js/priority-menu.js' ), array(), '1.0', true ); + wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-keyboard-navigation.js' ), array(), '1.0', true ); } 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() ) { - wp_add_inline_style( 'twentynineteen-style', twentynineteen_header_featured_image_css() ); - } - if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } @@ -184,7 +187,7 @@ function twentynineteen_scripts() { add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' ); /** - * Enqueue supplemental block editor styles + * Enqueue supplemental block editor styles. */ function twentynineteen_editor_customizer_styles() { @@ -192,7 +195,7 @@ function twentynineteen_editor_customizer_styles() { if ( 'custom' === get_theme_mod( 'colorscheme' ) ) { // Include color patterns - require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) ); + require_once get_parent_theme_file_path( '/inc/color-patterns.php' ); wp_add_inline_style( 'twentynineteen-editor-customizer-styles', twentynineteen_custom_colors_css() ); } } @@ -203,12 +206,12 @@ add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_customizer_sty */ function twentynineteen_colors_css_wrap() { - // Only include custom colors in customizer or frontend - if ( ( ! is_customize_preview() && is_admin() ) || is_admin() ) { + // Only include custom colors in customizer or frontend. + if ( ( ! is_customize_preview() && 'default' === get_theme_mod( 'colorscheme', 'default' ) ) || is_admin() ) { return; } - require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) ); + require_once get_parent_theme_file_path( '/inc/color-patterns.php' ); if ( 'default' === get_theme_mod( 'colorscheme', 'default' ) ) { $primary_color = 199; @@ -220,7 +223,7 @@ function twentynineteen_colors_css_wrap() { ->
- +
@@ -31,9 +31,10 @@
+ -
+
diff --git a/src/wp-content/themes/twentynineteen/image.php b/src/wp-content/themes/twentynineteen/image.php index cd92d8adb1..c668d35416 100644 --- a/src/wp-content/themes/twentynineteen/image.php +++ b/src/wp-content/themes/twentynineteen/image.php @@ -66,8 +66,8 @@ get_header(); $metadata = wp_get_attachment_metadata(); if ( $metadata ) { printf( - '%1$s %3$s × %4$s', - esc_html_x( 'Full size', 'Used before full size attachment link.', 'twentynineteen' ), + '%1$s%3$s × %4$s', + _x( 'Full size', 'Used before full size attachment link.', 'twentynineteen' ), esc_url( wp_get_attachment_url() ), absint( $metadata['width'] ), absint( $metadata['height'] ) diff --git a/src/wp-content/themes/twentynineteen/inc/back-compat.php b/src/wp-content/themes/twentynineteen/inc/back-compat.php new file mode 100644 index 0000000000..fd82198756 --- /dev/null +++ b/src/wp-content/themes/twentynineteen/inc/back-compat.php @@ -0,0 +1,76 @@ +

%s

', $message ); +} + +/** + * Prevents the Customizer from being loaded on WordPress versions prior to 4.7. + * + * @since Twenty Nineteen 1.0.0 + * + * @global string $wp_version WordPress version. + */ +function twentynineteen_customize() { + wp_die( + sprintf( + __( 'Twenty Nineteen requires at least WordPress version 4.7. You are running version %s. Please upgrade and try again.', 'twentynineteen' ), + $GLOBALS['wp_version'] + ), + '', + array( + 'back_link' => true, + ) + ); +} +add_action( 'load-customize.php', 'twentynineteen_customize' ); + +/** + * Prevents the Theme Preview from being loaded on WordPress versions prior to 4.7. + * + * @since Twenty Nineteen 1.0.0 + * + * @global string $wp_version WordPress version. + */ +function twentynineteen_preview() { + if ( isset( $_GET['preview'] ) ) { + wp_die( sprintf( __( 'Twenty Nineteen requires at least WordPress version 4.7. You are running version %s. Please upgrade and try again.', 'twentynineteen' ), $GLOBALS['wp_version'] ) ); + } +} +add_action( 'template_redirect', 'twentynineteen_preview' ); diff --git a/src/wp-content/themes/twentynineteen/inc/color-patterns.php b/src/wp-content/themes/twentynineteen/inc/color-patterns.php index 5b3d2f0e52..e2f4e982c1 100644 --- a/src/wp-content/themes/twentynineteen/inc/color-patterns.php +++ b/src/wp-content/themes/twentynineteen/inc/color-patterns.php @@ -26,14 +26,17 @@ function twentynineteen_custom_colors_css() { * @param int $saturation Color saturation level. */ - $saturation = absint( apply_filters( 'twentynineteen_custom_colors_saturation', 100 ) ); - $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 = 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 . '%'; + $lightness_hover = absint( apply_filters( 'twentynineteen_custom_colors_lightness_hover', 23 ) ); + $lightness_hover = $lightness_hover . '%'; + + $lightness_selection = absint( apply_filters( 'twentynineteen_custom_colors_lightness_selection', 90 ) ); + $lightness_selection = $lightness_selection . '%'; $theme_css = ' /* @@ -54,14 +57,14 @@ function twentynineteen_custom_colors_css() { .image-filters-enabled .entry .post-thumbnail:after, .main-navigation .sub-menu, .sticky-post, - .entry-content .wp-block-button .wp-block-button__link, - .button, button, input[type="button"], input[type="reset"], input[type="submit"], - .entry-content > .has-primary-background-color, - .entry-content > *[class^="wp-block-"].has-primary-background-color, - .entry-content > *[class^="wp-block-"] .has-primary-background-color, - .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 { + .entry .entry-content .wp-block-button .wp-block-button__link, + .entry .button, button, input[type="button"], input[type="reset"], input[type="submit"], + .entry .entry-content > .has-primary-background-color, + .entry .entry-content > *[class^="wp-block-"].has-primary-background-color, + .entry .entry-content > *[class^="wp-block-"] .has-primary-background-color, + .entry .entry-content > *[class^="wp-block-"].is-style-solid-color, + .entry .entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-background-color, + .entry .entry-content .wp-block-file .wp-block-file__button { background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ } @@ -87,16 +90,15 @@ function twentynineteen_custom_colors_css() { .entry .entry-footer a:hover, .entry .entry-content .more-link:hover, .main-navigation .main-menu > li > a + svg, - .comment-navigation .nav-previous a:hover, - .comment-navigation .nav-next a:hover, + .comment .comment-metadata > a:hover, .comment .comment-metadata .comment-edit-link:hover, #colophon .site-info a:hover, .widget a, - .entry-content .wp-block-button.is-style-outline .wp-block-button__link, - .entry-content .wp-block-button.is-style-outline .wp-block-button__link, - .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 { + .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link, + .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link, + .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link, + .entry .entry-content > *[class^="wp-block-"] .has-primary-color, + .entry .entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-color { color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ } @@ -104,9 +106,10 @@ function twentynineteen_custom_colors_css() { * Set left border color for: * wp block quote */ - .entry-content blockquote, - .entry-content .wp-block-quote:not(.is-large), - .entry-content .wp-block-quote:not(.is-style-large) { + blockquote, + .entry .entry-content blockquote, + .entry .entry-content .wp-block-quote:not(.is-large), + .entry .entry-content .wp-block-quote:not(.is-style-large) { border-left-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ } @@ -145,6 +148,8 @@ function twentynineteen_custom_colors_css() { .author-bio .author-description .author-link:hover, .comment .comment-author .fn a:hover, .comment-reply-link:hover, + .comment-navigation .nav-previous a:hover, + .comment-navigation .nav-next a:hover, #cancel-comment-reply-link:hover, .widget a:hover { color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */ @@ -154,9 +159,19 @@ function twentynineteen_custom_colors_css() { .main-navigation .sub-menu > li > a:focus, .main-navigation .sub-menu > li > a:hover:after, .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 . ', ' . $lightness_hover . ' ); /* base: #005177; */ + .main-navigation .sub-menu > li > .menu-item-link-return:hover, + .main-navigation .sub-menu > li > .menu-item-link-return:focus, + .main-navigation .sub-menu > li > a:not(.submenu-expand):hover, + .main-navigation .sub-menu > li > a:not(.submenu-expand):focus { + background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */ + } + + /* Text selection colors */ + ::selection { + background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_selection . ' ); /* base: #005177; */ + } + ::-moz-selection { + background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_selection . ' ); /* base: #005177; */ }'; $editor_css = ' diff --git a/src/wp-content/themes/twentynineteen/inc/template-functions.php b/src/wp-content/themes/twentynineteen/inc/template-functions.php index 40d1a592be..7ed60f8f49 100644 --- a/src/wp-content/themes/twentynineteen/inc/template-functions.php +++ b/src/wp-content/themes/twentynineteen/inc/template-functions.php @@ -71,25 +71,25 @@ add_filter( 'comment_form_defaults', 'twentynineteen_comment_form_defaults' ); */ function twentynineteen_get_the_archive_title() { if ( is_category() ) { - $title = esc_html__( 'Category Archives: ', 'twentynineteen' ) . '' . single_term_title( '', false ) . ''; + $title = __( 'Category Archives: ', 'twentynineteen' ) . '' . single_term_title( '', false ) . ''; } elseif ( is_tag() ) { - $title = esc_html__( 'Tag Archives: ', 'twentynineteen' ) . '' . single_term_title( '', false ) . ''; + $title = __( 'Tag Archives: ', 'twentynineteen' ) . '' . single_term_title( '', false ) . ''; } elseif ( is_author() ) { - $title = esc_html__( 'Author Archives: ', 'twentynineteen' ) . '' . get_the_author_meta( 'display_name' ) . ''; + $title = __( 'Author Archives: ', 'twentynineteen' ) . '' . get_the_author_meta( 'display_name' ) . ''; } elseif ( is_year() ) { - $title = esc_html__( 'Yearly Archives: ', 'twentynineteen' ) . '' . get_the_date( _x( 'Y', 'yearly archives date format', 'twentynineteen' ) ) . ''; + $title = __( 'Yearly Archives: ', 'twentynineteen' ) . '' . get_the_date( _x( 'Y', 'yearly archives date format', 'twentynineteen' ) ) . ''; } elseif ( is_month() ) { - $title = esc_html__( 'Monthly Archives: ', 'twentynineteen' ) . '' . get_the_date( _x( 'F Y', 'monthly archives date format', 'twentynineteen' ) ) . ''; + $title = __( 'Monthly Archives: ', 'twentynineteen' ) . '' . get_the_date( _x( 'F Y', 'monthly archives date format', 'twentynineteen' ) ) . ''; } elseif ( is_day() ) { - $title = esc_html__( 'Daily Archives: ', 'twentynineteen' ) . '' . get_the_date() . ''; + $title = __( 'Daily Archives: ', 'twentynineteen' ) . '' . get_the_date() . ''; } elseif ( is_post_type_archive() ) { - $title = esc_html__( 'Post Type Archives: ', 'twentynineteen' ) . '' . post_type_archive_title( '', false ) . ''; + $title = __( 'Post Type Archives: ', 'twentynineteen' ) . '' . post_type_archive_title( '', false ) . ''; } elseif ( is_tax() ) { $tax = get_taxonomy( get_queried_object()->taxonomy ); /* translators: %s: Taxonomy singular name */ $title = sprintf( esc_html__( '%s Archives:', 'twentynineteen' ), $tax->labels->singular_name ); } else { - $title = esc_html__( 'Archives:', 'twentynineteen' ); + $title = __( 'Archives:', 'twentynineteen' ); } return $title; } @@ -112,6 +112,28 @@ function twentynineteen_image_filters_enabled() { return true; } +/** + * Add custom sizes attribute to responsive image functionality for post thumbnails. + * + * @origin Twenty Nineteen 1.0 + * + * @param array $attr Attributes for the image markup. + * @return string Value for use in post thumbnail 'sizes' attribute. + */ +function twentynineteen_post_thumbnail_sizes_attr( $attr ) { + + if ( is_admin() ) { + return $attr; + } + + if ( ! is_singular() ) { + $attr['sizes'] = '(max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw / 12)), (min-width: 53rem) calc(6 * (100vw / 12)), 100vw'; + } + + return $attr; +} +add_filter( 'wp_get_attachment_image_attributes', 'twentynineteen_post_thumbnail_sizes_attr', 10, 1 ); + /** * Returns the size for avatars used in the theme. */ @@ -140,40 +162,74 @@ function twentynineteen_is_comment_by_post_author( $comment = null ) { */ function twentynineteen_get_discussion_data() { static $discussion, $post_id; + $current_post_id = get_the_ID(); - if ( $current_post_id === $post_id ) { /* If we have discussion information for post ID, return cached object */ - return $discussion; + if ( $current_post_id === $post_id ) { + return $discussion; /* If we have discussion information for post ID, return cached object */ + } else { + $post_id = $current_post_id; } - $authors = array(); - $commenters = array(); - $user_id = -1; // is_user_logged_in() ? get_current_user_id() : -1; - $comments = get_comments( + + $comments = get_comments( array( 'post_id' => $current_post_id, 'orderby' => 'comment_date_gmt', 'order' => get_option( 'comment_order', 'asc' ), /* Respect comment order from Settings » Discussion. */ 'status' => 'approve', + 'number' => 20, /* Only retrieve the last 20 comments, as the end goal is just 6 unique authors */ ) ); + + $authors = array(); foreach ( $comments as $comment ) { - $comment_user_id = (int) $comment->user_id; - if ( $comment_user_id !== $user_id ) { - $authors[] = ( $comment_user_id > 0 ) ? $comment_user_id : $comment->comment_author_email; - $commenters[] = $comment->comment_author_email; - } + $authors[] = ( (int) $comment->user_id > 0 ) ? (int) $comment->user_id : $comment->comment_author_email; } + $authors = array_unique( $authors ); - $responses = count( $commenters ); - $commenters = array_unique( $commenters ); - $post_id = $current_post_id; $discussion = (object) array( - 'authors' => array_slice( $authors, 0, 6 ), /* Unique authors commenting on post (a subset of), excluding current user. */ - 'commenters' => count( $commenters ), /* Number of commenters involved in discussion, excluding current user. */ - 'responses' => $responses, /* Number of responses, excluding responses from current user. */ + 'authors' => array_slice( $authors, 0, 6 ), /* Six unique authors commenting on the post. */ + 'responses' => get_comments_number( $current_post_id ), /* Number of responses. */ ); + return $discussion; } +/** + * Add an extra menu to our nav for our priority+ navigation to use + * + * @param object $nav_menu Nav menu. + * @param object $args Nav menu args. + * @return string More link for hidden menu items. + */ +function twentynineteen_add_ellipses_to_nav( $nav_menu, $args ) { + + if ( 'menu-1' === $args->theme_location ) : + + $nav_menu .= '
'; + $nav_menu .= ''; + $nav_menu .= '
'; + + endif; + + return $nav_menu; +} +add_filter( 'wp_nav_menu', 'twentynineteen_add_ellipses_to_nav', 10, 2 ); + /** * WCAG 2.0 Attributes for Dropdown Menus * @@ -216,40 +272,35 @@ function twentynineteen_add_dropdown_icons( $output, $item, $depth, $args ) { // Inject the keyboard_arrow_left SVG inside the parent nav menu item, and let the item link to the parent item. // @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. $link = sprintf( - '%4$s', - esc_attr( "menu-item-link-return-{$item->original_id}" ), - esc_attr( "#menu-item-link-{$item->original_id}" ), - esc_attr( 'event.preventDefault();' ), + '%s', twentynineteen_get_icon_svg( 'chevron_left', 24 ) ); + // replace opening with $output = preg_replace( '//', $link, $output, 1 // Limit. ); - } elseif ( in_array( 'menu-item-has-children', $item->classes, true ) ) { - // Add an ID to the link element itself to facilitate navigation from submenu back to parent. - $output = preg_replace( '/(?<=ID}" ) ), $output ); - // Add SVG icon to parent items. - if ( 0 === $depth ) { - $icon = twentynineteen_get_icon_svg( 'keyboard_arrow_down', 24 ); - } else { - $icon = twentynineteen_get_icon_svg( 'chevron_right', 24 ); - } - - // @todo We might as well just go back to using the SVG element if the link approach is not suitable for no-JS environments. - $link = sprintf( - '%s', - esc_attr( "#menu-item-link-return-{$item->ID}" ), - esc_attr( 'event.preventDefault();' ), - $icon + // replace closing with + $output = preg_replace( + '##i', + '', + $output, + 1 // Limit. ); - $output .= $link; - $output .= "$icon"; + } elseif ( in_array( 'menu-item-has-children', $item->classes, true ) ) { + + // Add SVG icon to parent items. + $icon = twentynineteen_get_icon_svg( 'keyboard_arrow_down', 24 ); + + $output .= sprintf( + '%s', + $icon + ); } return $output; diff --git a/src/wp-content/themes/twentynineteen/inc/template-tags.php b/src/wp-content/themes/twentynineteen/inc/template-tags.php index aa80543658..2740efeeac 100644 --- a/src/wp-content/themes/twentynineteen/inc/template-tags.php +++ b/src/wp-content/themes/twentynineteen/inc/template-tags.php @@ -43,7 +43,7 @@ if ( ! function_exists( 'twentynineteen_posted_by' ) ) : '%1$s%2$s%4$s', /* translators: 1: SVG icon. 2: post author, only visible to screen readers. 3: author link. */ twentynineteen_get_icon_svg( 'person', 16 ), - esc_html__( 'Posted by', 'twentynineteen' ), + __( 'Posted by', 'twentynineteen' ), esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), esc_html( get_the_author() ) ); @@ -83,25 +83,25 @@ if ( ! function_exists( 'twentynineteen_entry_footer' ) ) : twentynineteen_posted_on(); /* translators: used between list items, there is a space after the comma. */ - $categories_list = get_the_category_list( esc_html__( ', ', 'twentynineteen' ) ); + $categories_list = get_the_category_list( __( ', ', 'twentynineteen' ) ); if ( $categories_list ) { /* translators: 1: SVG icon. 2: posted in label, only visible to screen readers. 3: list of categories. */ printf( '%1$s%2$s%3$s', twentynineteen_get_icon_svg( 'archive', 16 ), - esc_html__( 'Posted in', 'twentynineteen' ), + __( 'Posted in', 'twentynineteen' ), $categories_list ); // WPCS: XSS OK. } /* translators: used between list items, there is a space after the comma. */ - $tags_list = get_the_tag_list( '', esc_html__( ', ', 'twentynineteen' ) ); + $tags_list = get_the_tag_list( '', __( ', ', 'twentynineteen' ) ); if ( $tags_list ) { /* translators: 1: SVG icon. 2: posted in label, only visible to screen readers. 3: list of tags. */ printf( '%1$s%2$s %3$s', twentynineteen_get_icon_svg( 'tag', 16 ), - esc_html__( 'Tags:', 'twentynineteen' ), + __( 'Tags:', 'twentynineteen' ), $tags_list ); // WPCS: XSS OK. } @@ -168,16 +168,6 @@ if ( ! function_exists( 'twentynineteen_post_thumbnail' ) ) : } endif; -if ( ! function_exists( 'twentynineteen_header_featured_image_css' ) ) : - /** - * Returns the CSS for the header featured image background. - */ - function twentynineteen_header_featured_image_css() { - $img_url = get_the_post_thumbnail_url( get_the_ID(), 'post-thumbnail' ); - return sprintf( 'body.singular .site-header.featured-image .site-branding-container:before { background-image: url(%s); }', esc_url( $img_url ) ); - } -endif; - if ( ! function_exists( 'twentynineteen_comment_avatar' ) ) : /** * Returns the HTML markup to generate a user avatar. @@ -197,15 +187,17 @@ if ( ! function_exists( 'twentynineteen_discussion_avatars_list' ) ) : * Displays a list of avatars involved in a discussion for a given post. */ function twentynineteen_discussion_avatars_list( $comment_authors ) { - if ( ! empty( $comment_authors ) ) { - $out = array( '
    ' ); - foreach ( $comment_authors as $id_or_email ) { - $out[] = sprintf( '
  1. %s
    2. ', twentynineteen_get_user_avatar_markup( $id_or_email ) ); - } - $out[] = '
'; - echo implode( "\n", $out ); + if ( empty( $comment_authors ) ) { + return; } - return null; + echo '
    ', "\n"; + foreach ( $comment_authors as $id_or_email ) { + printf( + "
  1. %s
    2. \n", + twentynineteen_get_user_avatar_markup( $id_or_email ) + ); + } + echo '
', "\n"; } endif; diff --git a/src/wp-content/themes/twentynineteen/index.php b/src/wp-content/themes/twentynineteen/index.php index 8bb217053f..d7d984c00f 100644 --- a/src/wp-content/themes/twentynineteen/index.php +++ b/src/wp-content/themes/twentynineteen/index.php @@ -20,25 +20,26 @@ get_header();
- + ?> +
diff --git a/src/wp-content/themes/twentynineteen/js/customize-preview.js b/src/wp-content/themes/twentynineteen/js/customize-preview.js index c9ae2b9c2c..fc3efcb99a 100644 --- a/src/wp-content/themes/twentynineteen/js/customize-preview.js +++ b/src/wp-content/themes/twentynineteen/js/customize-preview.js @@ -11,15 +11,23 @@ // Default color. wp.customize( 'colorscheme', function( value ) { value.bind( function( to ) { - // Update custom color CSS. var style = $( '#custom-theme-colors' ), hue = style.data( 'hue' ), - css = style.html(); + css = style.html(), + color; + + if( to === 'custom' ){ + //If a "custom" color option is selected, use the currently set colorscheme_primary_hue + color = wp.customize.get().colorscheme_primary_hue; + } else { + //If the "default" option is selected, get the default primary_hue + color = 199; + } // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. - css = css.split( hue + ',' ).join( to + ',' ); - style.html( css ).data( 'hue', to ); + css = css.split( hue + ',' ).join( color + ',' ); + style.html( css ).data( 'hue', color ); }); }); diff --git a/src/wp-content/themes/twentynineteen/js/priority-menu.js b/src/wp-content/themes/twentynineteen/js/priority-menu.js new file mode 100644 index 0000000000..6698fd7ef3 --- /dev/null +++ b/src/wp-content/themes/twentynineteen/js/priority-menu.js @@ -0,0 +1,128 @@ +(function() { + /** + * Prepends an element to a container. + * + * @param {Element} container + * @param {Element} element + */ + function prependElement(container, element) { + if (container.firstChild.nextSibling) { + return container.insertBefore(element, container.firstChild.nextSibling); + } else { + return container.appendChild(element); + } + } + + /** + * Shows an element by adding a hidden className. + * + * @param {Element} element + */ + function showElement(element) { + // classList.remove is not supported in IE11 + element.className = element.className.replace('is-hidden', ''); + } + + /** + * Hides an element by removing the hidden className. + * + * @param {Element} element + */ + function hideElement(element) { + // classList.add is not supported in IE11 + if (!element.classList.contains('is-hidden')) { + element.className += ' is-hidden'; + } + } + + /** + * Toggles the element visibility. + * + * @param {Element} element + */ + function toggleElementVisibility(element) { + if (element.classList.contains('is-hidden')) { + showElement(element); + } else { + hideElement(element); + } + } + + var navContainer = document.querySelector('.main-navigation'); + // Adds the necessary UI to operate the menu. + var toggleButton = document.querySelector('.main-navigation .main-menu-more-toggle'); + var visibleList = document.querySelector('.main-navigation .main-menu[id]'); + var hiddenList = document.querySelector('.main-navigation .hidden-links'); + var breaks = []; + + /** + * Returns the currently available space in the menu container. + * + * @returns {number} Available space + */ + function getAvailableSpace() { + return toggleButton.classList.contains('hidden') ? navContainer.offsetWidth : navContainer.offsetWidth - toggleButton.offsetWidth - 50; + } + + /** + * Returns whether the current menu is overflowing or not. + * + * @returns {boolean} Is overflowing + */ + function isOverflowingNavivation() { + return visibleList.offsetWidth > getAvailableSpace(); + } + + /** + * Refreshes the list item from the menu depending on the menu size + */ + function updateNavigationMenu() { + + if (isOverflowingNavivation()) { + // Record the width of the list + breaks.push(visibleList.offsetWidth); + // Move item to the hidden list + prependElement(hiddenList, visibleList.lastChild); + // Show the toggle button + showElement(toggleButton); + } else { + // There is space for another item in the nav + if (getAvailableSpace() > breaks[breaks.length - 1]) { + // Move the item to the visible list + visibleList.appendChild(hiddenList.firstChild.nextSibling); + breaks.pop(); + } + + // Hide the dropdown btn if hidden list is empty + if (breaks.length < 2) { + hideElement(toggleButton); + hideElement(hiddenList); + } + } + + // Recur if the visible list is still overflowing the nav + if (isOverflowingNavivation()) { + updateNavigationMenu(); + } + } + + // Event listeners + // Run our sub-menu function as soon as the document is `ready` + document.addEventListener( 'DOMContentLoaded', function() { + updateNavigationMenu(); + }); + + window.addEventListener('load', function() { + updateNavigationMenu(); + }); + + window.addEventListener('resize', function() { + updateNavigationMenu(); + }); + + toggleButton.addEventListener('click', function() { + toggleElementVisibility(hiddenList); + }); + + updateNavigationMenu(); +})(); diff --git a/src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js b/src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js new file mode 100644 index 0000000000..36b3649eaa --- /dev/null +++ b/src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js @@ -0,0 +1,277 @@ +/** + * Touch & Keyboard navigation. + * + * Contains handlers for touch devices and keyboard navigation. + */ + +(function() { + + // Debounce + function debounce(func, wait, immediate) { + 'use strict'; + + var timeout; + wait = (typeof wait !== 'undefined') ? wait : 20; + immediate = (typeof immediate !== 'undefined') ? immediate : true; + + return function() { + + var context = this, args = arguments; + var later = function() { + timeout = null; + + if (!immediate) { + func.apply(context, args); + } + }; + + var callNow = immediate && !timeout; + + clearTimeout(timeout); + timeout = setTimeout(later, wait); + + if (callNow) { + func.apply(context, args); + } + }; + } + + // Add Class + function addClass(el, cls) { + if ( ! el.className.match( '(?:^|\\s)' + cls + '(?!\\S)') ) { + el.className += ' ' + cls; + } + } + + // Delete Class + function deleteClass(el, cls) { + el.className = el.className.replace( new RegExp( '(?:^|\\s)' + cls + '(?!\\S)' ),'' ); + } + + // Has Class? + function hasClass(el, cls) { + + if ( el.className.match( '(?:^|\\s)' + cls + '(?!\\S)' ) ) { + return true; + } + } + + // Toggle Aria Expanded state for screenreaders + function toggleAriaExpandedState( ariaItem ) { + 'use strict'; + + var ariaState = ariaItem.getAttribute('aria-expanded'); + + if ( ariaState === 'true' ) { + ariaState = 'false'; + } else { + ariaState = 'true'; + } + + ariaItem.setAttribute('aria-expanded', ariaState); + } + + // Open sub-menu + function openSubMenu( currentSubMenu ) { + 'use strict'; + + // Update classes + // classList.add is not supported in IE11 + currentSubMenu.parentElement.className += ' off-canvas'; + currentSubMenu.parentElement.lastElementChild.className += ' expanded-true'; + + // Update aria-expanded state + toggleAriaExpandedState( currentSubMenu.previousSibling ); + } + + // Close sub-menu + function closeSubMenu( currentSubMenu ) { + 'use strict'; + + var menuItem = getCurrentParent( currentSubMenu, '.menu-item' ); // this.parentNode + var menuItemAria = menuItem.querySelector('a[aria-expanded]'); + var subMenu = currentSubMenu.closest('.sub-menu'); + + // If this is in a sub-sub-menu, go back to parent sub-menu + if ( getCurrentParent( currentSubMenu, 'ul' ).classList.contains( 'sub-menu' ) ) { + + // Update classes + // classList.remove is not supported in IE11 + menuItem.className = menuItem.className.replace( 'off-canvas', '' ); + subMenu.className = subMenu.className.replace( 'expanded-true', '' ); + + // Update aria-expanded and :focus states + toggleAriaExpandedState( menuItemAria ); + + // Or else close all sub-menus + } else { + + // Update classes + // classList.remove is not supported in IE11 + menuItem.className = menuItem.className.replace( 'off-canvas', '' ); + menuItem.lastElementChild.className = menuItem.lastElementChild.className.replace( 'expanded-true', '' ); + + // Update aria-expanded and :focus states + toggleAriaExpandedState( menuItemAria ); + } + } + + // Find first ancestor of an element by selector + function getCurrentParent( child, selector, stopSelector ) { + + var currentParent = null; + + while ( child ) { + + if ( child.matches(selector) ) { + + currentParent = child; + break; + + } else if ( stopSelector && child.matches(stopSelector) ) { + + break; + } + + child = child.parentElement; + } + + return currentParent; + } + + // Remove all off-canvas states + function removeAllFocusStates() { + 'use strict'; + + var getFocusedElements = document.querySelectorAll(':hover, :focus, :focus-within'); + var i; + + for ( i = 0; i < getFocusedElements.length; i++) { + getFocusedElements[i].blur(); + } + } + + // Matches polyfill for IE11 + if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector; + } + + // Toggle `focus` class to allow sub-menu access on touch screens. + function toggleSubmenuDisplay() { + + document.addEventListener('touchstart', function(event) { + + if ( event.target.matches('a') ) { + + var url = event.target.getAttribute( 'href' ) ? event.target.getAttribute( 'href' ) : ''; + + // If there’s a link, go to it on touchend + if ( '#' !== url && '' !== url ) { + window.location = url; + + // Open submenu if url is # + } else if ( '#' === url && event.target.nextSibling.matches('.submenu-expand') ) { + + openSubMenu( event.target ); + + // Prevent default touch events + } else { + + event.preventDefault(); + } + } + + // Check if .submenu-expand is touched + if ( event.target.matches('.submenu-expand') ) { + openSubMenu(event.target); + + // Check if child of .submenu-expand is touched + } else if ( null != getCurrentParent( event.target, '.submenu-expand' ) && getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) { + openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) ); + + // Check if .menu-item-link-return is touched + } else if ( event.target.matches('.menu-item-link-return') ) { + closeSubMenu( event.target ); + + // Check if child of .menu-item-link-return is touched + } else if ( null != getCurrentParent( event.target, '.menu-item-link-return' ) && getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) { + closeSubMenu( event.target ); + } + + // Prevent default mouse/focus events + removeAllFocusStates(); + + }, false); + + document.addEventListener('touchend', function(event) { + + var mainNav = getCurrentParent( event.target, '.main-navigation' ); + + if ( null != mainNav && hasClass( mainNav, '.main-navigation' ) ) { + // Prevent default mouse events + event.preventDefault(); + } + + // Prevent default mouse events + event.preventDefault(); + + // Prevent default mouse/focus events + removeAllFocusStates(); + + }, false); + + document.addEventListener('focus', function(event) { + + if ( event.target.matches('.main-navigation > div > ul > li > a') ) { + + // Remove Focuse elements in sibling div + var currentDiv = getCurrentParent( event.target, 'div' ); + var currentDivSibling = currentDiv.previousElementSibling === null ? currentDiv.nextElementSibling : currentDiv.previousElementSibling; + var focusedElement = currentDivSibling.querySelector( '.is-focused' ); + var focusedClass = 'is-focused'; + var prevLi = event.target.parentNode.previousElementSibling; + var nextLi = event.target.parentNode.nextElementSibling; + + if ( null !== focusedElement && null !== hasClass( focusedElement, focusedClass ) ) { + deleteClass( focusedElement, focusedClass ); + } + + // Add .is-focused class to top-level ul + if ( event.target.parentNode.querySelector( '.main-navigation ul ul') ) { + addClass( event.target.parentNode, focusedClass ); + } + + // Check for previous li + if ( prevLi && hasClass( prevLi, focusedClass ) ) { + deleteClass( prevLi, focusedClass ); + } + + // Check for next li + if ( nextLi && hasClass( nextLi, focusedClass ) ) { + deleteClass( nextLi, focusedClass ); + } + } + }, true); + } + + // Run our sub-menu function as soon as the document is `ready` + document.addEventListener( 'DOMContentLoaded', function() { + toggleSubmenuDisplay(); + }); + // Annnnnd also every time the window resizes + var isResizing = false; + window.addEventListener( 'resize', + debounce( function() { + if ( isResizing ) { + return; + } + + isResizing = true; + setTimeout( function() { + toggleSubmenuDisplay(); + isResizing = false; + }, 150 ); + } ) + ); + +})(); diff --git a/src/wp-content/themes/twentynineteen/js/touch-navigation.js b/src/wp-content/themes/twentynineteen/js/touch-navigation.js deleted file mode 100644 index 08893821ce..0000000000 --- a/src/wp-content/themes/twentynineteen/js/touch-navigation.js +++ /dev/null @@ -1,163 +0,0 @@ -/** - * Touch navigation. - * - * Contains handlers for navigation on Touch devices. - */ - -(function() { - - // Toggle Aria Expanded state for screenreaders - function toggleAriaExpandedState( menuItems ) { - 'use strict'; - - var getMenuItem = menuItems; - var i; - - for (i = 0; i < getMenuItem.length; i++) { - - var state = getMenuItem[i].getAttribute('aria-expanded'); - - if (state === 'true') { - state = 'false'; - } else { - state = 'true'; - } - - getMenuItem[i].setAttribute('aria-expanded', state); - } - } - - // Toggle `focus` class to allow submenu access on tablets. - function toggleSubmenuTouchScreen() { - 'use strict'; - - var siteNavigation = document.querySelector('.main-navigation > div > ul'); - var subMenuExpand = document.querySelectorAll('.mobile-submenu-expand'); - var subMenuReturn = document.querySelectorAll('.menu-item-link-return'); - var parentMenuLink = siteNavigation.querySelectorAll('.menu-item-has-children a[aria-expanded]'); - var i; - var o; - var u; - - // Check for submenus and bail if none exist - if ( ! siteNavigation || ! siteNavigation.children ) { - return; - } - - function openSubMenu( currentSubmenu ) { - - currentSubmenu.addEventListener('touchend', function() { - - var menuItem = currentSubmenu.closest('.menu-item'); // this.parentNode - var menuItemAria = menuItem.querySelectorAll('a[aria-expanded]'); - - menuItem.classList.add('focus'); - menuItem.lastElementChild.classList.add('expanded-true'); - - toggleAriaExpandedState( menuItemAria ); - - // Disable focus when using touchdevices - siteNavigation.blur(); - }); - } - - function closeSubMenu( currentSubmenu ) { - - currentSubmenu.addEventListener('touchend', function() { - - var menuItem = currentSubmenu.closest('.menu-item'); // this.parentNode - var nearestSubMenu = currentSubmenu.closest('.sub-menu'); - - // If this is in a sub-sub-menu, go back to parent sub-menu - if ( currentSubmenu.closest('ul').classList.contains('sub-menu') ) { - - nearestSubMenu.classList.remove('expanded-true'); - toggleAriaExpandedState( currentSubmenu.closest('.menu-item').querySelectorAll('a[aria-expanded]') ); - - // Or else close all sub-menus - } else { - - menuItem.classList.remove('focus'); - menuItem.lastElementChild.classList.remove('expanded-true'); - toggleAriaExpandedState( currentSubmenu.closest('.menu-item').querySelectorAll('a[aria-expanded]') ); - } - - // Disable :focus when using touchdevices - siteNavigation.blur(); - }); - } - - // Open submenus on touch - for ( i = 0; i < subMenuExpand.length; i++) { - subMenuExpand[i].addEventListener('touchstart', openSubMenu( subMenuExpand[i] ) ); - } - - // Close sub-menus or sub-sub-menus on touch - for ( o = 0; o < subMenuReturn.length; o++) { - subMenuReturn[o].addEventListener('touchstart', closeSubMenu( subMenuReturn[o] ) ); - } - - // Prevent :focus-within on menu-item links when using touch devices - for ( u = 0; u < parentMenuLink.length; u++) { - parentMenuLink[u].addEventListener('touchstart', function( event ) { - - // Stop link behavior - event.preventDefault(); - - // Go to link without openning submenu - window.location = this.getAttribute('href'); - - }); - } - } - - // Debounce - function debounce(func, wait, immediate) { - 'use strict'; - - var timeout; - wait = (typeof wait !== 'undefined') ? wait : 20; - immediate = (typeof immediate !== 'undefined') ? immediate : true; - - return function() { - - var context = this, args = arguments; - var later = function() { - timeout = null; - - if (!immediate) { - func.apply(context, args); - } - }; - - var callNow = immediate && !timeout; - - clearTimeout(timeout); - timeout = setTimeout(later, wait); - - if (callNow) { - func.apply(context, args); - } - }; - } - - // Run our functions once the window has loaded fully - window.addEventListener('load', function() { - toggleSubmenuTouchScreen(); - }); - - // Annnnnd also every time the window resizes - var isResizing = false; - window.addEventListener('resize', debounce( function() { - if (isResizing) { - return; - } - - isResizing = true; - setTimeout( function() { - toggleSubmenuTouchScreen(); - isResizing = false; - }, 150 ); - })); - -})(); diff --git a/src/wp-content/themes/twentynineteen/package-lock.json b/src/wp-content/themes/twentynineteen/package-lock.json index 0cce13fd9d..f213f690af 100644 --- a/src/wp-content/themes/twentynineteen/package-lock.json +++ b/src/wp-content/themes/twentynineteen/package-lock.json @@ -1182,9 +1182,9 @@ "dev": true }, "fast-glob": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.2.tgz", - "integrity": "sha512-TR6zxCKftDQnUAPvkrCWdBgDq/gbqx8A3ApnBrR5rMvpp6+KMJI0Igw7fkWPgeVK0uhRXTXdvO3O+YP0CaUX2g==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.3.tgz", + "integrity": "sha512-NiX+JXjnx43RzvVFwRWfPKo4U+1BrK5pJPsHQdKMlLoFHrrGktXglQhHliSihWAq+m1z6fHk3uwGHrtRbS9vLA==", "dev": true, "requires": { "@mrmlnc/readdir-enhanced": "^2.2.1", @@ -2656,9 +2656,9 @@ } }, "merge2": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.2.tgz", - "integrity": "sha512-bgM8twH86rWni21thii6WCMQMRMmwqqdW3sGWi9IipnVAszdLXRjwDwAnyrVXo6DuP3AjRMMttZKUB48QWIFGg==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz", + "integrity": "sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==", "dev": true }, "micromatch": { @@ -3160,7 +3160,7 @@ }, "p-is-promise": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=", "dev": true }, @@ -3295,9 +3295,9 @@ } }, "postcss-cli": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-6.0.0.tgz", - "integrity": "sha512-7DuxMn1Wj6dJKbjKpZXOdAc5nl5NfPXiJbg0m/+tdObPvgk1xv4+lZgNKD3jL/kCrDRPf1jgFlmq1cHh8lBR2w==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-6.0.1.tgz", + "integrity": "sha512-M9GiEMzXVMlI4ln8e+mdeHT+qvoHVZdlN06hj5/EhrRZWDr+J1sniPeGJ4nghknl+du3Oj2UoqqhgpKKhiZ9+w==", "dev": true, "requires": { "chalk": "^2.1.0", @@ -3308,7 +3308,7 @@ "globby": "^8.0.0", "postcss": "^7.0.0", "postcss-load-config": "^2.0.0", - "postcss-reporter": "^5.0.0", + "postcss-reporter": "^6.0.0", "pretty-hrtime": "^1.0.3", "read-cache": "^1.0.0", "yargs": "^12.0.1" @@ -3449,6 +3449,15 @@ } } }, + "postcss-focus-within": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz", + "integrity": "sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==", + "dev": true, + "requires": { + "postcss": "^7.0.2" + } + }, "postcss-load-config": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz", @@ -3460,28 +3469,15 @@ } }, "postcss-reporter": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-5.0.0.tgz", - "integrity": "sha512-rBkDbaHAu5uywbCR2XE8a25tats3xSOsGNx6mppK6Q9kSFGKc/FyAzfci+fWM2l+K402p1D0pNcfDGxeje5IKg==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.0.tgz", + "integrity": "sha512-5xQXm1UPWuFObjbtyQzWvQaupru8yFcFi4HUlm6OPo1o2bUszYASuqRJ7bVArb3svGCdbYtqdMBKrqR1Aoy+tw==", "dev": true, "requires": { "chalk": "^2.0.1", "lodash": "^4.17.4", "log-symbols": "^2.0.0", - "postcss": "^6.0.8" - }, - "dependencies": { - "postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "dev": true, - "requires": { - "chalk": "^2.4.1", - "source-map": "^0.6.1", - "supports-color": "^5.4.0" - } - } + "postcss": "^7.0.2" } }, "postcss-value-parser": { diff --git a/src/wp-content/themes/twentynineteen/package.json b/src/wp-content/themes/twentynineteen/package.json index 80fe1eeaea..96d6ab60d7 100644 --- a/src/wp-content/themes/twentynineteen/package.json +++ b/src/wp-content/themes/twentynineteen/package.json @@ -11,9 +11,10 @@ "autoprefixer": "^9.1.5", "chokidar-cli": "^1.2.1", "node-sass": "^4.9.3", - "postcss-cli": "^6.0.0", - "rtlcss": "^2.4.0", - "npm-run-all": "^4.1.3" + "npm-run-all": "^4.1.3", + "postcss-cli": "^6.0.1", + "postcss-focus-within": "^3.0.0", + "rtlcss": "^2.4.0" }, "rtlcssConfig": { "options": { diff --git a/src/wp-content/themes/twentynineteen/postcss.config.js b/src/wp-content/themes/twentynineteen/postcss.config.js index 8802e43deb..354d911430 100644 --- a/src/wp-content/themes/twentynineteen/postcss.config.js +++ b/src/wp-content/themes/twentynineteen/postcss.config.js @@ -1,5 +1,13 @@ +var postcssFocusWithin = require('postcss-focus-within'); + module.exports = { plugins: { autoprefixer: {} } -}; \ No newline at end of file +}; + +module.exports = { + plugins: [ + postcssFocusWithin(/* pluginOptions */) + ] +}; diff --git a/src/wp-content/themes/twentynineteen/readme.txt b/src/wp-content/themes/twentynineteen/readme.txt index 722cb19c89..b691f00daa 100644 --- a/src/wp-content/themes/twentynineteen/readme.txt +++ b/src/wp-content/themes/twentynineteen/readme.txt @@ -2,15 +2,14 @@ [![Build Status](https://travis-ci.org/WordPress/twentynineteen.svg?branch=master)](https://travis-ci.org/WordPress/twentynineteen) -**Contributors:** the WordPress team -**Requires at least:** WordPress 4.9.6 -**Tested up to:** WordPress 4.9.8 -**Version:** 1.0 -**License:** GPLv2 or later -**License URI:** http://www.gnu.org/licenses/gpl-2.0.html +**Contributors:** the WordPress team +**Requires at least:** WordPress 4.9.6 +**Tested up to:** WordPress 4.9.8 +**Version:** 1.0 +**License:** GPLv2 or later +**License URI:** http://www.gnu.org/licenses/gpl-2.0.html **Tags:** one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready - ## Description Twenty Nineteen is a Gutenberg-ready theme for WordPress. @@ -23,7 +22,6 @@ Twenty Nineteen is a Gutenberg-ready theme for WordPress. 4. Go to https://codex.wordpress.org/Twenty_Nineteen for a guide on how to customize this theme. 5. Navigate to Appearance > Customize in your admin panel and customize to taste. - ## Copyright Twenty Nineteen WordPress Theme, Copyright 2018 WordPress.org @@ -60,6 +58,7 @@ Source: https://pexels.com/xxxxxxxxxx ## Changelog ### X.X + * Released: XX-XX-XXXX Initial release diff --git a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss b/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss index 4848fe287b..7386d36666 100644 --- a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss +++ b/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss @@ -1,25 +1,15 @@ /* !Block styles */ -.entry-content > *, -.entry-summary > * { +.entry .entry-content > *, +.entry .entry-summary > * { + margin: 32px 0; + max-width: 100%; + @include postContentMaxWidth(); - margin: 32px $size__spacing-unit; - @include media(tablet) { - margin: 32px calc(2 * (100vw / 12)); + margin: 32px 0; } -/* - // Set top margins for headings - & + h1:before, - & + h2:before, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: calc(4 * #{ $size__spacing-unit}); - } -*/ > *:first-child { margin-top: 0; @@ -30,32 +20,44 @@ } &.alignwide { - margin-left: auto; margin-right: auto; + clear: both; @include media(tablet) { - margin-left: calc(2 * (100vw / 12)); - margin-right: calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + width: 100%; + max-width: 100%; } } &.alignfull { - margin-top: calc(2 * #{$size__spacing-unit}); - margin-right: 0; - margin-bottom: calc(2 * #{$size__spacing-unit}); - margin-left: 0; - max-width: 100%; + position: relative; + left: -#{$size__spacing-unit }; + width: calc( 100% + (2 * #{$size__spacing-unit})); + max-width: calc( 100% + (2 * #{$size__spacing-unit})); + clear: both; + + @include media(tablet) { + margin-top: calc(2 * #{$size__spacing-unit}); + margin-bottom: calc(2 * #{$size__spacing-unit}); + left: calc( -12.5% - 75px ); + width: calc( 125% + 150px ); + max-width: calc( 125% + 150px ); + } } &.alignleft { + /*rtl:ignore*/ float: left; max-width: calc(5 * (100vw / 12)); margin-top: 0; + margin-left: 0; + /*rtl:ignore*/ + margin-right: $size__spacing-unit; @include media(tablet) { max-width: calc(4 * (100vw / 12)); + /*rtl:ignore*/ margin-right: calc(2 * #{$size__spacing-unit}); } @@ -65,35 +67,63 @@ } &.alignright { + /*rtl:ignore*/ float: right; max-width: calc(5 * (100vw / 12)); margin-top: 0; + margin-right: 0; + /*rtl:ignore*/ margin-left: $size__spacing-unit; - margin-right: $size__spacing-unit; @include media(tablet) { max-width: calc(4 * (100vw / 12)); + margin-right: 0; + /*rtl:ignore*/ margin-left: calc(2 * #{$size__spacing-unit}); - margin-right: calc(2 * (100vw / 12)); } } &.aligncenter { - margin-left: auto; margin-right: auto; - @include media(desktop) { - margin-left: calc(2 * (100vw / 12)); - margin-right: calc(2 * (100vw / 12)); - max-width: calc(10 * (100vw / 12)); - position: relative; - left: 25%; - transform: translate(-50%); + @include postContentMaxWidth(); + + @include media(tablet) { + margin-left: 0; + margin-right: 0; } } } -.entry-content { +/* + * Unset nested content selector styles + * - Prevents layout styles from cascading too deeply + * - helps with plugin compatibility + */ +.entry .entry-content, +.entry .entry-summary { + + .entry-content, + .entry-summary, + .entry { + margin: inherit; + max-width: inherit; + padding: inherit; + + @include media(tablet) { + margin: inherit; + max-width: inherit; + padding: inherit; + } + } +} + +.entry .entry-content { + + //! Paragraphs + p.has-background { + padding: 20px 30px; + } //! Audio .wp-block-audio { @@ -107,7 +137,7 @@ &.alignleft audio, &.alignright audio { - max-width: (0.5 * $mobile_width); + max-width: (0.33 * $mobile_width); @include media(tablet) { max-width: (0.5 * $tablet_width); @@ -151,14 +181,12 @@ outline: none; &:hover { + background: $color__background-button-hover; cursor: pointer; } - &:hover, &:focus { - background: $color__background-button-hover; - } - &:focus { + background: $color__background-button-hover; outline: thin dotted; outline-offset: -4px; } @@ -196,21 +224,34 @@ font-size: calc(#{$font__size_base} * #{$font__size-ratio}); font-weight: bold; line-height: $font__line-height-heading; + padding-bottom: ( .75 * $size__spacing-unit ); - &:not(.menu-item-has-children) { - padding-bottom: ( .75 * $size__spacing-unit ); + &.menu-item-has-children, + &:last-child { + padding-bottom: 0; } a { text-decoration: none; } - - ul { - padding-left: $size__spacing-unit; - } } } + //! Latest categories + .wp-block-categories { + + ul { + padding-top: ( .75 * $size__spacing-unit ); + } + + li ul { + list-style: none; + padding-left: 0; + } + + @include nestedSubMenuPadding(); + } + //! Latest posts grid view .wp-block-latest-posts.is-grid { li { @@ -264,7 +305,8 @@ blockquote { color: $color__text-main; border: none; - padding-bottom: calc(2 * #{$size__spacing-unit}); + margin-top: calc(4 * #{ $size__spacing-unit}); + margin-bottom: calc(4.33 * #{ $size__spacing-unit}); margin-right: 0; } @@ -287,13 +329,20 @@ cite { display: inline-block; font-family: $font__heading; - font-size: $font__size-xs; line-height: 1.6; text-transform: none; + color: $color__text-light; + + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * #{$font__size-ratio})); } &.alignleft, &.alignright { + width: 100%; padding: 0; blockquote { @@ -305,8 +354,14 @@ } &.is-style-solid-color { - background-color: $color__link; + padding-left: 0; + padding-right: 0; + + @include media(tablet) { + padding-left: 10%; + padding-right: 10%; + } p { font-size: $font__size-lg; @@ -323,27 +378,31 @@ color: $color__background-body; } + cite { + color: inherit; + } + blockquote { + max-width: calc(100% - (2 * #{$size__spacing-unit})); color: $color__background-body; - margin: 0 auto; + padding-left: 0; + margin-left: $size__spacing-unit; + + @include media(tablet) { + margin-left: 0; + margin-right: 0; + } } .has-primary-background-color { background-color: $color__link; } - &.alignleft, - &.alignright { - padding: $size__spacing-unit $size__spacing-unit 0; - - blockquote { - padding: 0 0 calc( 1.5 * #{$size__spacing-unit} ); - margin-left: 0; - margin-top: 0; - } + &.alignfull { @include media(tablet) { - padding: calc( 2 * #{$size__spacing-unit} ) calc( 2 * #{$size__spacing-unit} ) $size__spacing-unit; + padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit})); + padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit})); } } } @@ -366,13 +425,17 @@ } cite { - font-size: $font__size-xs; + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * #{$font__size-ratio})); } &.is-large, &.is-style-large { - padding: $size__spacing-unit 0 ($size__spacing-unit) ($size__spacing-unit * 2); margin: $size__spacing-unit 0; + padding: 0; border-left: none; p { @@ -383,13 +446,16 @@ cite, footer { - font-size: $font__size-xs; + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * #{$font__size-ratio})); } @include media(tablet) { - - margin: $size__spacing-unit calc(2 * (100vw / 12)); - max-width: calc(6 * (100vw / 12)); + margin: $size__spacing-unit 0; + padding: $size__spacing-unit 0; p { font-size: $font__size-lg; @@ -412,14 +478,24 @@ &.alignfull img { width: 100vw; - margin-left: auto; - margin-right: auto; + + @include media(tablet) { + margin-left: auto; + margin-right: auto; + } } } //! Cover Image .wp-block-cover-image, .wp-block-cover { + position: relative; + min-height: 430px; + padding: $size__spacing-unit; + + @include media(tablet) { + padding: $size__spacing-unit 10%; + } .wp-block-cover-image-text, .wp-block-cover-text, @@ -427,24 +503,16 @@ font-family: $font__heading; font-size: $font__size-lg; font-weight: bold; - - width: calc(100vw - (2 * #{ $size__spacing-unit })); - max-width: calc(100vw - (2 * #{ $size__spacing-unit })); + line-height: 1.25; + padding: 0; + color: #fff; @include media(tablet) { font-size: $font__size-xl; - width: calc(8 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); - } - - @include media(desktop) { - width: calc(6 * (100vw / 12 )); - max-width: calc(6 * (100vw / 12 )); + max-width: 100%; } } - &.alignleft, - &.alignright, &.aligncenter { h2, .wp-block-cover-image-text, @@ -458,36 +526,41 @@ } } - &.aligncenter { - margin: 32px calc(2 * (100vw / 12)); - max-width: calc(6 * (100vw / 12)); + &.alignleft, + &.alignright { + width: 100%; } - &.has-left-content { - justify-content: center; + &.alignfull { - h2, .wp-block-cover-image-text, - .wp-block-cover-text { - padding: $size__spacing-unit; + .wp-block-cover-text, + h2 { + @include postContentMaxWidth(); } - } - &.has-right-content { - justify-content: center; + @include media(tablet) { + padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit})); + padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit})); - h2, - .wp-block-cover-image-text, - .wp-block-cover-text { - padding: $size__spacing-unit; + .wp-block-cover-image-text, + .wp-block-cover-text, + h2 { + padding: 0; + } } } } //! Galleries - .wp-block-gallery .blocks-gallery-image:last-child, - .wp-block-gallery .blocks-gallery-item:last-child { - margin-bottom: 16px; + .wp-block-gallery { + list-style-type: none; + padding-left: 0; + + .blocks-gallery-image:last-child, + .blocks-gallery-item:last-child { + margin-bottom: 16px; + } } //! Captions @@ -507,18 +580,33 @@ //! Separator .wp-block-separator, hr { + background-color: $color__text-light; + border: 0; + height: 2px; margin-bottom: (2 * $size__spacing-unit); margin-top: (2 * $size__spacing-unit); + max-width: 2.25em; text-align: left; - &:not(.is-style-dots) { - background-color: $color__text-light; - border: 0; - height: 2px; + &.is-style-wide { + max-width: 100%; + @include postContentMaxWidth(); } - &:not(.is-style-wide):not(.is-style-dots) { - max-width: 2.25em; + &.is-style-dots { + max-width: 100%; + @include postContentMaxWidth(); + background-color: inherit; + border: inherit; + height: inherit; + text-align: center; + + &:before { + color: $color__text-light; + font-size: $font__size-lg; + letter-spacing: $font__size-sm; + padding-left: $font__size-sm; + } } /* Remove duplicate rule-line when a separator @@ -530,18 +618,6 @@ display: none; } } - - &.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; - } - } } //! Twitter Embed @@ -552,7 +628,8 @@ //! Table .wp-block-table { - td, th { + th, + td { border-color: $color__text-light; } } @@ -569,8 +646,10 @@ font-size: $font__size-base; font-family: $font__heading; line-height: $font__line-height-heading; + text-decoration: none; font-weight: bold; padding: ($size__spacing-unit * .75) $size__spacing-unit; + color: #fff; @include media(desktop) { font-size: $font__size-base; @@ -578,18 +657,20 @@ } &:hover { + background: $color__background-button-hover; cursor: pointer; } - &:hover, &:focus { - background: $color__background-button-hover; - } - &:focus { + background: $color__background-button-hover; outline: thin dotted; outline-offset: -4px; } } + + * + .wp-block-file__button { + margin-left: ($size__spacing-unit * .75); + } } //! Code @@ -606,22 +687,24 @@ //! Columns .wp-block-columns { - .wp-block-column > * { + @include media(tablet) { + .wp-block-column > * { - &:first-child { - margin-top: 0; + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } - &:last-child { - margin-bottom: 0; - } - } + &[class*='has-'] > * { + margin-right: $size__spacing-unit; - &[class*='has-'] > * { - margin-right: $size__spacing-unit; - - &:last-child { - margin-right: 0; + &:last-child { + margin-right: 0; + } } } } diff --git a/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss b/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss index 63cf04ff73..af6fcf16b3 100644 --- a/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss +++ b/src/wp-content/themes/twentynineteen/sass/elements/_elements.scss @@ -3,10 +3,11 @@ html { } ::-moz-selection { - background: $color__background_selection; + background-color: $color__background_selection; } + ::selection { - background: $color__background_selection; + background-color: $color__background_selection; } *, @@ -16,7 +17,7 @@ html { } body { - background: $color__background-body; + background-color: $color__background-body; } a { @@ -41,12 +42,18 @@ a:focus { text-decoration: underline; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { clear: both; margin: $size__spacing-unit 0; } -h1:not(.site-title), h2 { +h1:not(.site-title), +h2 { @include post-section-dash; } diff --git a/src/wp-content/themes/twentynineteen/sass/elements/_tables.scss b/src/wp-content/themes/twentynineteen/sass/elements/_tables.scss index 7fffea3c9a..2b4521d49e 100644 --- a/src/wp-content/themes/twentynineteen/sass/elements/_tables.scss +++ b/src/wp-content/themes/twentynineteen/sass/elements/_tables.scss @@ -1,8 +1,12 @@ table { margin: 0 0 $size__spacing-unit; + border-collapse: collapse; width: 100%; - td, th { - border-color: $color__text-light; + td, + th { + padding: 0.5em; + border: 1px solid $color__text-light; + word-break: break-all; } } diff --git a/src/wp-content/themes/twentynineteen/sass/media/_captions.scss b/src/wp-content/themes/twentynineteen/sass/media/_captions.scss index 8bd7749bf5..4a9c5c7832 100644 --- a/src/wp-content/themes/twentynineteen/sass/media/_captions.scss +++ b/src/wp-content/themes/twentynineteen/sass/media/_captions.scss @@ -1,5 +1,18 @@ .wp-caption { margin-bottom: calc(1.5 * #{$size__spacing-unit}); + + &.aligncenter { + + @include media(tablet) { + position: relative; + left: calc( #{$size__site-tablet-content} / 2 ); + transform: translateX( -50% ); + } + + @include media(desktop) { + left: calc( #{$size__site-desktop-content} / 2 ); + } + } } .wp-caption img[class*="wp-image-"] { diff --git a/src/wp-content/themes/twentynineteen/sass/media/_galleries.scss b/src/wp-content/themes/twentynineteen/sass/media/_galleries.scss index 7d2db33b29..56ca8095e5 100644 --- a/src/wp-content/themes/twentynineteen/sass/media/_galleries.scss +++ b/src/wp-content/themes/twentynineteen/sass/media/_galleries.scss @@ -7,7 +7,7 @@ .gallery-item { display: inline-block; - padding-right: $size__spacing-unit; + margin-right: $size__spacing-unit; margin-bottom: $size__spacing-unit; text-align: center; vertical-align: top; @@ -16,7 +16,11 @@ // Loops to enumerate the classes for gallery columns. @for $i from 2 through 9 { .gallery-columns-#{$i} & { - max-width: calc( ( 12 / #{$i} ) * (100% / 12) ); + max-width: calc( ( 12 / #{$i} ) * (100% / 12) - ( #{$size__spacing-unit} * #{($i - 1) / $i} ) ); + + &:nth-of-type(#{$i}n+#{$i}) { + margin-right: 0; + } } } diff --git a/src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss b/src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss index 25e46adfd5..5228ff0761 100644 --- a/src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss +++ b/src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss @@ -87,16 +87,139 @@ 0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge. } +/* Fallback for non-latin fonts */ + +@mixin non-latin-fonts( $wrapper_classname: '.site' ) { + + /* Arabic */ + html[lang="ar"] #{$wrapper_classname} *, + html[lang="ary"] #{$wrapper_classname} *, + html[lang="azb"] #{$wrapper_classname} *, + html[lang="ckb"] #{$wrapper_classname} *, + html[lang="fa-IR"] #{$wrapper_classname} *, + html[lang="haz"] #{$wrapper_classname} *, + html[lang="ps"] #{$wrapper_classname} * { + font-family: Tahoma, Arial, sans-serif !important; + } + + /* Cyrillic */ + html[lang="be"] #{$wrapper_classname} *, + html[lang="bg-BG"] #{$wrapper_classname} *, + html[lang="kk"] #{$wrapper_classname} *, + html[lang="mk-MK"] #{$wrapper_classname} *, + html[lang="mn"] #{$wrapper_classname} *, + html[lang="ru-RU"] #{$wrapper_classname} *, + html[lang="sah"] #{$wrapper_classname} *, + html[lang="sr-RS"] #{$wrapper_classname} *, + html[lang="tt-RU"] #{$wrapper_classname} *, + html[lang="uk"] #{$wrapper_classname} * { + font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif !important; + } + + /* Chinese (Hong Kong) */ + html[lang="zh-HK"] #{$wrapper_classname} * { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; + } + + /* Chinese (Taiwan) */ + html[lang="zh-TW"] #{$wrapper_classname} * { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; + } + + /* Chinese (China) */ + html[lang="zh-CN"] #{$wrapper_classname} * { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; + } + + /* Devanagari */ + html[lang="bn-BD"] #{$wrapper_classname} *, + html[lang="hi-IN"] #{$wrapper_classname} *, + html[lang="mr"] #{$wrapper_classname} *, + html[lang="ne-NP"] #{$wrapper_classname} * { + font-family: Arial, sans-serif !important; + } + + /* Greek */ + html[lang="el"] #{$wrapper_classname} * { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; + } + + /* Gujarati */ + html[lang="gu"] #{$wrapper_classname} * { + font-family: Arial, sans-serif !important; + } + + /* Hebrew */ + html[lang="he-IL"] #{$wrapper_classname} * { + font-family: 'Arial Hebrew', Arial, sans-serif !important; + } + + /* Japanese */ + html[lang="ja"] #{$wrapper_classname} * { + font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important; + } + + /* Korean */ + html[lang="ko-KR"] #{$wrapper_classname} * { + font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans-serif !important; + } + + /* Thai */ + html[lang="th"] #{$wrapper_classname} * { + font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif !important; + } + + /* Vietnamese */ + html[lang="vi"] #{$wrapper_classname} * { + font-family: 'Libre Franklin', sans-serif !important; + } +} + /* 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)); + max-width: $size__site-tablet-content; } @include media(desktop) { - max-width: calc(6 * (100vw / 12)); + max-width: $size__site-desktop-content; + } +} + +/* Nested sub-menu padding: 10 levels deep */ +@mixin nestedSubMenuPadding() { + + ul li > a:before { + font-family: $font__body; + font-weight: normal; + } + ul > li > a:before { + content: "\2013\00a0"; + } + ul ul li > a:before { + content: "\2013\00a0\2013\00a0"; + } + ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; + } + ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + ul ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; } } diff --git a/src/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss b/src/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss index 4a81e192ab..c753fe2785 100644 --- a/src/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss +++ b/src/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss @@ -1,10 +1,17 @@ @mixin media( $res ) { + @if mobile == $res { + @media only screen and (min-width: $mobile_width) { + @content; + } + } + @if tablet == $res { @media only screen and (min-width: $tablet_width) { @content; } } + @if desktop == $res { @media only screen and (min-width: $desktop_width) { @content; diff --git a/src/wp-content/themes/twentynineteen/sass/modules/_alignments.scss b/src/wp-content/themes/twentynineteen/sass/modules/_alignments.scss index d2491474bf..2fb584add6 100644 --- a/src/wp-content/themes/twentynineteen/sass/modules/_alignments.scss +++ b/src/wp-content/themes/twentynineteen/sass/modules/_alignments.scss @@ -1,13 +1,25 @@ .alignleft { /*rtl:ignore*/ float: left; + /*rtl:ignore*/ margin-right: $size__spacing-unit; + + @include media(tablet) { + /*rtl:ignore*/ + margin-right: calc(2 * #{$size__spacing-unit}); + } } .alignright { /*rtl:ignore*/ float: right; + /*rtl:ignore*/ margin-left: $size__spacing-unit; + + @include media(tablet) { + /*rtl:ignore*/ + margin-left: calc(2 * #{$size__spacing-unit}); + } } .aligncenter { diff --git a/src/wp-content/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss b/src/wp-content/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss new file mode 100755 index 0000000000..afe6971773 --- /dev/null +++ b/src/wp-content/themes/twentynineteen/sass/navigation/_menu-footer-navigation.scss @@ -0,0 +1,22 @@ +/** === Footer menu === */ + +.footer-navigation { + + display: inline; + + & > div { + display: inline; + } + + .footer-menu { + + display: inline; + padding-left: 0; + + li { + display: inline; + margin-right: 1rem; + } + } + +} \ No newline at end of file diff --git a/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss b/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss index b949534894..3e285324f5 100644 --- a/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss +++ b/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss @@ -15,7 +15,7 @@ .main-menu { - display: inline; + display: inline-block; margin: 0; padding: 0; @@ -23,10 +23,7 @@ color: $color__link; display: inline; - - @include media(tablet) { - position: relative; - } + position: relative; > a { @@ -47,6 +44,11 @@ &.menu-item-has-children { display: inline-block; + position: inherit; + + @include media(tablet) { + position: relative; + } > a { margin-right: #{0.125 * $size__spacing-unit}; @@ -61,55 +63,76 @@ } } - .mobile-submenu-expand svg, - .desktop-submenu-expand svg { - position: relative; - top: 0.2rem; - } - - .mobile-submenu-expand, - .desktop-submenu-expand { + .submenu-expand { + display: inline-block; margin-right: #{0.5 * $size__spacing-unit}; + + /* Priority+ Menu */ + &.main-menu-more-toggle { + + position: relative; + height: 24px; + line-height: $font__line-height-heading; + width: 24px; + padding: 0; + margin-left: #{0.5 * $size__spacing-unit}; + + svg { + height: 24px; + width: 24px; + top: #{-0.125 * $size__spacing-unit}; + vertical-align: text-bottom; + } + } + + svg { + position: relative; + top: 0.2rem; + } } } - &:last-child > a { + &:last-child > a, + &:last-child.menu-item-has-children .submenu-expand { margin-right: 0; } } + + .is-hidden { + display: none; + } } .sub-menu { - background: $color__link; + background-color: $color__link; color: $color__background-body; list-style: none; padding-left: 0; display: none; - float: left; position: absolute; opacity: 0; left: -999px; z-index: 99999; @include media(tablet) { - width: max-content; - max-width: calc(3 * (100vw / 12)); + width: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; } > li { - clear: both; display: block; float: none; position: relative; - word-break: break-word; &.menu-item-has-children { - .mobile-submenu-expand, - .desktop-submenu-expand { + .submenu-expand { + display: inline-block; position: absolute; width: calc( 24px + #{$size__spacing-unit} ); right: 0; @@ -124,12 +147,12 @@ } } - .mobile-submenu-expand, - .desktop-submenu-expand { + .submenu-expand { margin-right: 0; } @include media(tablet) { + .menu-item-has-children > a { &:after { @@ -139,11 +162,14 @@ } } - > a:not(.mobile-submenu-expand) { + > a, + > .menu-item-link-return { + color: $color__background-body; display: block; line-height: $font__line-height-heading; padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit; + white-space: nowrap; &:hover, &:focus { @@ -156,6 +182,7 @@ } &.mobile-parent-nav-menu-item { + display: none; font-size: $font__size-sm; font-weight: normal; @@ -170,39 +197,24 @@ } /* + * Sub-menu styles + * * :focus-within needs its own selector so other similar * selectors don’t get ignored if a browser doesn’t recognize it */ - .main-menu .menu-item-has-children:focus-within > .sub-menu { + .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { + display: block; left: 0; margin-top: 0; opacity: 1; - width: calc( 100vw - #{$size__spacing-unit * 2}); + width: auto; + min-width: 100%; - .sub-menu { - margin-top: inherit; - position: relative; - padding-left: $size__spacing-unit; - - @include media(tablet) { - padding-left: 0; - position: absolute; - left: 100%; - width: max-content; - top: 0; - } - } - } - - .main-menu .menu-item-has-children:hover > .sub-menu, - .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 { /* Non-mobile position */ @include media(tablet) { - display: table; + display: block; margin-top: 0; opacity: 1; position: absolute; @@ -211,67 +223,249 @@ top: auto; bottom: auto; height: auto; - width: max-content; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; transform: none; - animation: fade_in 0.1s forwards; + } + + &.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; + + @include media(tablet) { + right: 0; + left: auto; + display: block; + width: max-content; + } + } + + .submenu-expand { + display: none; } .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + + /* Non-mobile position */ + @include media(tablet) { + float: none; + max-width: 100%; + } + } + + /* Nested sub-menu padding: 10 levels deep */ + .sub-menu li > a:before { + font-family: $font__body; + font-weight: normal; + } + .sub-menu > li > a:before { + content: "\2013\00a0"; + } + .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + } + + .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, + .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, + .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { + + display: block; + left: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + + + /* Non-mobile position */ + @include media(tablet) { + display: block; + float: none; + margin-top: 0; + opacity: 1; + position: absolute; + left: 0; + right: auto; + top: auto; + bottom: auto; + height: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + transform: none; + } + + &.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; @include media(tablet) { - margin-top: inherit; - padding-left: 0; - position: absolute; - left: 100%; - top: 0; + right: 0; + left: auto; + display: table; + width: max-content; + } + } + + .submenu-expand { + display: none; + } + + .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + + /* Non-mobile position */ + @include media(tablet) { + float: none; + max-width: 100%; + } + } + + /* Nested sub-menu padding: 10 levels deep */ + .sub-menu li > a:before { + font-family: $font__body; + font-weight: normal; + } + .sub-menu > li > a:before { + content: "\2013\00a0"; + } + .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; + } + } + + /** + * Full-screen touch device styles + */ + .main-menu .menu-item-has-children.off-canvas .sub-menu { + + animation: fade_in 0.1s forwards; + + .submenu-expand .svg-icon { + transform: rotate(270deg); + } + + .sub-menu { + opacity: 0; + position: absolute; + z-index: 0; + transform: translateX(-100%); + } + + li:hover, + li:focus, + li > a:hover, + li > a:focus { + background-color: transparent; + } + + &.expanded-true { + + display: table; + margin-top: 0; + opacity: 1; + padding-left: 0; + + /* Mobile position */ + left: 0; + top: 0; + right: 0; + bottom: 0; + position: fixed; + z-index: 100000; /* Make sure appears above mobile admin bar */ + width: 100vw; + height: 100vh; + max-width: 100vw; + transform: translateX(+100%); + animation: slide_in_right 0.3s forwards; + + > .mobile-parent-nav-menu-item { + display: block; + } + + /* Prevent menu from being blocked by admin bar */ + .admin-bar & { + top: 46px; + height: calc( 100vh - 46px ); + + .sub-menu.expanded-true { + top: 0; + } + + /* WP core breakpoint */ + @media only screen and ( min-width: 782px ) { + top: 32px; + height: calc( 100vh - 32px ); + + .sub-menu.expanded-true { + top: 0; + } + } } } } - - .main-menu .menu-item-has-children.focus .sub-menu.expanded-true { - - display: table; - margin-top: 0; - opacity: 1; - padding-left: 0; - - /* Mobile position */ - left: 0; - top: 0; - right: 0; - bottom: 0; - position: fixed; - z-index: 100000; /* Make sure appears above mobile admin bar */ - width: 100%; - height: 100%; - transform: translateX(+100%); - animation: slide_in_right 0.3s forwards; - - > .mobile-parent-nav-menu-item { - display: inline-block; - } - } - - /* Only show one submenu expand button at a time (desktop vs mobile) */ - .desktop-submenu-expand { - display: none; - - @include media(tablet) { - display: inline-block; - } - } - - .mobile-submenu-expand { - display: inline-block; - - @include media(tablet) { - display: none; - } - } - } -/* Menu Animation */ +/* Menu animation */ @keyframes slide_in_right { 100% { diff --git a/src/wp-content/themes/twentynineteen/sass/navigation/_navigation.scss b/src/wp-content/themes/twentynineteen/sass/navigation/_navigation.scss index 83fe0bc2c2..a4cf51540a 100644 --- a/src/wp-content/themes/twentynineteen/sass/navigation/_navigation.scss +++ b/src/wp-content/themes/twentynineteen/sass/navigation/_navigation.scss @@ -8,6 +8,7 @@ --------------------------------------------------------------*/ @import "menu-main-navigation"; @import "menu-social-navigation"; +@import "menu-footer-navigation"; /*-------------------------------------------------------------- ## Next / Previous diff --git a/src/wp-content/themes/twentynineteen/sass/navigation/_next-previous.scss b/src/wp-content/themes/twentynineteen/sass/navigation/_next-previous.scss index 74b1901caf..28a164d0c0 100644 --- a/src/wp-content/themes/twentynineteen/sass/navigation/_next-previous.scss +++ b/src/wp-content/themes/twentynineteen/sass/navigation/_next-previous.scss @@ -4,12 +4,12 @@ .post-navigation { margin: calc(3 * 1rem) 0; - + @include media(tablet) { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); + margin: calc(3 * 1rem) $size__site-margins; max-width: calc(6 * (100vw / 12)); } - + @include media(desktop) { margin: calc(3 * 1rem) 0; max-width: 100%; @@ -21,15 +21,15 @@ max-width: 100%; display: flex; flex-direction: column; - + @include media(tablet) { margin: 0; } @include media(desktop) { flex-direction: row; - margin: 0 calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + margin: 0 $size__site-margins; + max-width: $size__site-desktop-content; } a { @@ -123,6 +123,21 @@ } } + a:focus { + text-decoration: underline; + outline-offset: -1px; + + &.prev, + &.next { + text-decoration: none; + + .nav-prev-text, + .nav-next-text { + text-decoration: underline; + } + } + } + .nav-next-text, .nav-prev-text { display: none; @@ -130,7 +145,7 @@ @include media(tablet) { - margin-left: calc(2 * (100vw / 12) ); + margin-left: $size__site-margins; padding: 0; .prev, @@ -155,12 +170,6 @@ .nav-links { display: flex; flex-direction: row; - margin: 0 $size__spacing-unit; - - @include media(desktop) { - margin: 0 calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); - } } .nav-previous, @@ -184,13 +193,6 @@ margin: 0 -0.35em; top: -1px; } - - a { - - &:hover { - color: $color__link; - } - } } .nav-next { diff --git a/src/wp-content/themes/twentynineteen/sass/site/footer/_site-footer.scss b/src/wp-content/themes/twentynineteen/sass/site/footer/_site-footer.scss index d8f07dc7bf..b627f2994f 100644 --- a/src/wp-content/themes/twentynineteen/sass/site/footer/_site-footer.scss +++ b/src/wp-content/themes/twentynineteen/sass/site/footer/_site-footer.scss @@ -4,12 +4,10 @@ .widget-area, .site-info { - margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; @include media(tablet) { - margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; } .imprint { diff --git a/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss b/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss index 0f4a53083b..45ed4182c3 100644 --- a/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss +++ b/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss @@ -2,11 +2,14 @@ .site-header.featured-image { + /* Hide overflow for overflowing featured image */ + overflow: hidden; + /* Need relative positioning to properly align layers. */ position: relative; /* Add text shadow to text, to increase readability. */ - text-shadow: 0 1px 2px rgba(black, 0.35); + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); /* Set white text color when featured image is set. */ .site-branding .site-title, @@ -54,91 +57,122 @@ .social-navigation svg, .site-featured-image svg { /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ - -webkit-filter: drop-shadow(0 1px 2px rgba(black, 0.35) ); - filter: drop-shadow(0 1px 2px rgba(black, 0.35) ); + -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); } /* Entry header */ + .site-featured-image { - .site-featured-image .entry-header { - margin-top: calc( 4 * #{$size__spacing-unit}); - margin-bottom: 0; - margin-left: 0; - margin-right: 0; + /* First layer: grayscale. */ + .post-thumbnail img { + height: auto; + left: 50%; + max-width: 1000%; + min-height: 100%; + min-width: 100vw; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%); + width: auto; + z-index: 1; - @include media (tablet) { + @supports ( object-fit: cover ) { + height: 100%; + left: 0; + object-fit: cover; + top: 0; + transform: none; + width: 100%; + } - margin-left: calc(2 * (100vw / 12)); - margin-right: calc(2 * (100vw / 12)); - } - - .entry-title { - - &:before { - background: $color__background-body; + /* When image filters are active, make it grayscale to colorize it blue. */ + .image-filters-enabled & { + filter: grayscale(100%); } } - /* Entry meta */ + .entry-header { - .entry-meta { - - font-weight: 500; - - > span { - - margin-right: $size__spacing-unit; - display: inline-block; - - &:last-child { - margin-right: 0; - } - } - - a { - - @include link-transition; - color: currentColor; - - &:hover { - text-decoration: none; - } - } - - .svg-icon { - position: relative; - display: inline-block; - vertical-align: middle; - margin-right: 0.5em; - } - - .discussion-avatar-list { - display: none; - } - } - - &.has-discussion { + margin-top: calc( 4 * #{$size__spacing-unit}); + margin-bottom: 0; + margin-left: 0; + margin-right: 0; @include media (tablet) { - .entry-meta { - display: flex; + margin-left: $size__site-margins; + margin-right: $size__site-margins; + } + + .entry-title { + + &:before { + background: $color__background-body; + } + } + + /* Entry meta */ + + .entry-meta { + + font-weight: 500; + + > span { + + margin-right: $size__spacing-unit; + display: inline-block; + + &:last-child { + margin-right: 0; + } + } + + a { + + @include link-transition; + color: currentColor; + + &:hover { + text-decoration: none; + } + } + + .svg-icon { position: relative; + display: inline-block; + vertical-align: middle; + margin-right: 0.5em; } - .entry-title { - padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit}); + .discussion-avatar-list { + display: none; } + } - .entry-meta .comment-count { - position: absolute; - right: 0; - } + &.has-discussion { - .entry-meta .discussion-avatar-list { - display: block; - position: absolute; - bottom: 100%; + @include media (tablet) { + + .entry-meta { + display: flex; + position: relative; + } + + .entry-title { + padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit}); + } + + .entry-meta .comment-count { + position: absolute; + right: 0; + } + + .entry-meta .discussion-avatar-list { + display: block; + position: absolute; + bottom: 100%; + } } } } @@ -170,7 +204,6 @@ } /* Set up image filter layer positioning */ - .site-branding-container:before, .site-branding-container:after, .site-featured-image:before, .site-featured-image:after, @@ -184,26 +217,13 @@ } /* Background & Effects */ - /* Shared background settings between pseudo elements. See .site-branding-container */ + /* Shared background settings between pseudo elements. */ background-position: center; background-repeat: no-repeat; background-size: cover; /* The intensity of each blend mode is controlled via layer opacity. */ - /* First layer: grayscale. */ - .site-branding-container:before { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - z-index: 1; - - /* When image filters are active, make it grayscale to colorize it blue. */ - .image-filters-enabled & { - filter: grayscale(100%); - } - } - /* Second layer: screen. */ .image-filters-enabled & .site-featured-image:before { background: $color__link; @@ -212,8 +232,8 @@ } /* Third layer: multiply. */ - /* When image filters are inactive, a black overlay is added. */ - .site-featured-image:after { + /* When image filters are inactive, a black overlay is added. */ + .site-featured-image:after { background: #000; mix-blend-mode: multiply; opacity: .7; @@ -233,7 +253,7 @@ /* Fourth layer: overlay. */ .image-filters-enabled & .site-branding-container:after { - background: rgba(#000, 0.35); + background: rgba(0, 0, 0, 0.35); mix-blend-mode: overlay; opacity: 0.5; z-index: 4; @@ -252,7 +272,7 @@ * but smooth effect when resizing the screen. */ transition: opacity 1200ms ease-in-out; - opacity: 0.7; + opacity: 0.7; z-index: 5; /* When image filters are active, a blue overlay is added. */ diff --git a/src/wp-content/themes/twentynineteen/sass/site/header/_site-header.scss b/src/wp-content/themes/twentynineteen/sass/site/header/_site-header.scss index ff23e8222f..cf03e52128 100644 --- a/src/wp-content/themes/twentynineteen/sass/site/header/_site-header.scss +++ b/src/wp-content/themes/twentynineteen/sass/site/header/_site-header.scss @@ -33,7 +33,7 @@ position: relative; @include media(tablet) { - margin: 0 calc(2 * (100vw / 12)); + margin: 0 $size__site-margins; } } @@ -48,7 +48,7 @@ @include media(tablet) { margin-bottom: 0; position: absolute; - right: calc(100% + (0.5 * 100vw / 12)); + right: calc(100% + (1.25 * #{$size__spacing-unit})); top: 4px; // Accounts for box-shadow widths z-index: 999; } @@ -56,7 +56,7 @@ .custom-logo-link { border-radius: 100%; box-sizing: content-box; - box-shadow: 0 0 0 0 rgba(black, 0); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); display: block; width: 32px; height: 32px; @@ -70,7 +70,7 @@ &:hover, &:active, &:focus { - box-shadow: 0 0 0 2px rgba(black, 1); + box-shadow: 0 0 0 2px rgba(0, 0, 0, 1); } @include media(tablet) { diff --git a/src/wp-content/themes/twentynineteen/sass/site/primary/_archives.scss b/src/wp-content/themes/twentynineteen/sass/site/primary/_archives.scss index faf955d873..e6e5f45894 100644 --- a/src/wp-content/themes/twentynineteen/sass/site/primary/_archives.scss +++ b/src/wp-content/themes/twentynineteen/sass/site/primary/_archives.scss @@ -5,8 +5,7 @@ margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit}); @include media(tablet) { - margin: 0 calc(2 * (100vw / 12)) calc(3 * #{$size__spacing-unit}); - max-width: calc(8 * (100vw / 12)); + margin: 0 $size__site-margins $size__site-margins; } .page-title { @@ -42,7 +41,7 @@ .hfeed .entry .entry-header { @include media(tablet) { - margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12)) calc(#{ $size__spacing-unit } / 2); + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2); } } @@ -56,7 +55,7 @@ margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit}; @include media(tablet) { - margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12)) calc(#{ $size__spacing-unit } / 2); + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2); } } diff --git a/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss b/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss index 01369b197d..03fc4d34b6 100644 --- a/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss +++ b/src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss @@ -7,6 +7,22 @@ } .comments-area { + margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; + @include postContentMaxWidth(); + + @include media(tablet) { + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; + } + + & > * { + margin-top: calc(2 * #{$size__spacing-unit}); + margin-bottom: calc(2 * #{$size__spacing-unit}); + + @include media(tablet) { + margin-top: calc(3 * #{$size__spacing-unit}); + margin-bottom: calc(3 * #{$size__spacing-unit}); + } + } /* Add extra margin when the comments section is located immediately after the * post itself (this happens on pages). @@ -15,29 +31,12 @@ margin-top: calc(3 * #{$size__spacing-unit}); } - .comment-list, - .comment-navigation, - > .comment-respond, - .comment-form-flex, - .no-comments { - margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; - - @include media(tablet) { - margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12)); - max-width: calc(6 * (100vw / 12)); - } - } - .comments-title-wrap { - margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; - @include media(tablet) { align-items: baseline; display: flex; justify-content: space-between; - margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); } .comments-title { @@ -123,13 +122,15 @@ margin-top: 0; } - .pingback { + .pingback, + .trackback { .comment-body { color: $color__text-light; font-family: $font__heading; font-size: $font__size-xs; font-weight: 500; + margin-top: $size__spacing-unit; margin-bottom: $size__spacing-unit; a:not(.comment-edit-link) { @@ -150,9 +151,6 @@ } .comment-reply { - left: calc(#{$size__spacing-unit} + 100%); - bottom: 0; - position: absolute; #respond + & { display: none; @@ -170,30 +168,27 @@ @include media(tablet) { padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 ))); + &.depth-1, .children { padding-left: 0; } + + &.depth-1 { + margin-left: calc(3.25 * #{$size__spacing-unit}); + } } .comment-body { - margin: calc(2 * #{$size__spacing-unit}) 0; + margin: calc(2 * #{$size__spacing-unit}) 0 0; } + .comment-meta { position: relative; - - @include media(tablet) { - display: flex; - } } .comment-author { - @include media(tablet) { - flex: 0 0 auto; - vertical-align: baseline; - } - .avatar { float: left; margin-right: $size__spacing-unit; @@ -212,11 +207,6 @@ position: relative; display: block; - @include media(tablet) { - display: inline-block; - vertical-align: baseline; - } - a { color: inherit; @@ -252,16 +242,9 @@ .comment-metadata { - @include media(tablet) { - flex: 1 0 auto; - margin-left: $size__spacing-unit; - position: relative; - vertical-align: baseline; - } - > a, .comment-edit-link { - display: inline-block; + display: inline; font-weight: 500; color: $color__text-light; vertical-align: baseline; @@ -271,7 +254,7 @@ } &:hover { - color: $color__text-hover; + color: $color__link-hover; text-decoration: none; } } @@ -312,6 +295,10 @@ margin: $size__spacing-unit 0; + @include media(desktop) { + padding-right: $size__spacing-unit; + } + > *:first-child { margin-top: 0; } @@ -320,6 +307,10 @@ margin-bottom: 0; } + blockquote { + margin-left: 0; + } + a { text-decoration: underline; diff --git a/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss b/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss index b5a031bcde..203d033f08 100644 --- a/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss +++ b/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss @@ -38,7 +38,7 @@ position: relative; @include media(tablet) { - margin: calc(3 * #{ $size__spacing-unit}) calc(2 * (100vw / 12 ) ) $size__spacing-unit; + margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit; } } @@ -100,12 +100,12 @@ margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit; @include media(tablet) { - margin: $size__spacing-unit calc(2 * (100vw / 12)) calc(3 * #{$size__spacing-unit}); - max-width: calc(8 * (100vw / 12)); + margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit}); + max-width: $size__site-tablet-content; } @include media(tablet) { - max-width: calc(6 * (100vw / 12)); + max-width: $size__site-desktop-content; } } @@ -114,7 +114,7 @@ margin: $size__spacing-unit; @include media(tablet) { - margin: $size__spacing-unit calc(2 * (100vw / 12)); + margin: $size__spacing-unit $size__site-margins; } &:focus { @@ -130,7 +130,6 @@ width: 100%; } } - } .image-filters-enabled & { @@ -141,9 +140,9 @@ .post-thumbnail-inner { filter: grayscale(100%); - + &:after { - background: rgba(#000, 0.35); + background: rgba(0, 0, 0, 0.35); content: ""; display: block; height: 100%; @@ -160,7 +159,8 @@ } } - &:before, &:after { + &:before, + &:after, { position: absolute; display: block; width: 100%; @@ -171,7 +171,19 @@ } @include filter-duotone; - + + } + } + + .entry-content, + .entry-summary { + max-width: calc(100% - (2 * #{ $size__spacing-unit })); + margin: 0 $size__spacing-unit; + + @include media(tablet) { + max-width: 80%; + margin: 0 10%; + padding: 0 60px; } } @@ -208,29 +220,34 @@ // Overwrite iframe embeds that have inline styles. > iframe[style] { - margin: 32px $size__spacing-unit !important; - max-width: calc(100vw - (2 * #{ $size__spacing-unit })) !important; + margin: 32px 0 !important; + max-width: 100% !important; @include media(tablet) { - margin: 32px calc(2 * (100vw / 12)) !important; - max-width: calc(8 * (100vw / 12)) !important; + max-width: $size__site-tablet-content !important; } @include media(desktop) { - max-width: calc(6 * (100vw / 12)) !important; + max-width: $size__site-desktop-content !important; } } + // Page links + .page-links a { + margin: calc(0.5 * #{$size__spacing-unit}); + text-decoration: none; + } + // Classic editor audio embeds. .wp-audio-shortcode { max-width: calc(100vw - (2 * #{ $size__spacing-unit })); @include media(tablet) { - max-width: calc(8 * (100vw / 12)); + max-width: $size__site-tablet-content; } @include media(desktop) { - max-width: calc(6 * (100vw / 12)); + max-width: $size__site-desktop-content; } } } @@ -239,16 +256,16 @@ /* Author description */ .author-bio { - margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit; - @include media(tablet) { - margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); - } + @include postContentMaxWidth(); @include media(tablet) { - max-width: calc(6 * (100vw / 12)); + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; + } + + @include media(desktop) { + margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; } .author-title { diff --git a/src/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss b/src/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss index 3590c95b94..5f20a4c7d5 100644 --- a/src/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss +++ b/src/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss @@ -16,8 +16,11 @@ } .widget_archive, -.widget_nav_menu, +.widget_categories, .widget_meta, +.widget_nav_menu, +.widget_pages, +.widget_recent_comments, .widget_recent_entries, .widget_rss { @@ -29,28 +32,43 @@ color: $color__text-light; font-family: $font__heading; font-size: calc(#{$font__size_base} * #{$font__size-ratio}); - font-weight: bold; + font-weight: 700; line-height: $font__line-height-heading; - - &:not(.menu-item-has-children) { - padding-bottom: ( .75 * $size__spacing-unit ); - } - - ul { - padding-left: $size__spacing-unit; - } + margin-top: #{0.5 * $size__spacing-unit}; + margin-bottom: #{0.5 * $size__spacing-unit}; } - &.sub-menu { - padding-top: ( .75 * $size__spacing-unit ); - } + @include nestedSubMenuPadding(); } } +.widget_tag_cloud { + + .tagcloud { + font-family: $font__heading; + font-weight: 700; + } +} + + .widget_search { .search-submit { display: block; margin-top: $size__spacing-unit; } +} + +.widget_calendar .calendar_wrap { + text-align: center; + font-family: $font__heading; + + table td, + table th { + border: none; + } + + a { + text-decoration: underline; + } } \ No newline at end of file diff --git a/src/wp-content/themes/twentynineteen/sass/typography/_copy.scss b/src/wp-content/themes/twentynineteen/sass/typography/_copy.scss index 9ed01cc5fd..10b9d8ceb1 100644 --- a/src/wp-content/themes/twentynineteen/sass/typography/_copy.scss +++ b/src/wp-content/themes/twentynineteen/sass/typography/_copy.scss @@ -3,7 +3,10 @@ p { -moz-osx-font-smoothing: grayscale; } -dfn, cite, em, i { +dfn, +cite, +em, +i { font-style: italic; } @@ -23,7 +26,10 @@ pre { overflow: auto; } -code, kbd, tt, var { +code, +kbd, +tt, +var { font-size: $font__size-sm; font-family: $font__code; } @@ -33,7 +39,8 @@ abbr, acronym { cursor: help; } -mark, ins { +mark, +ins { background: #fff9c0; text-decoration: none; } diff --git a/src/wp-content/themes/twentynineteen/sass/typography/_headings.scss b/src/wp-content/themes/twentynineteen/sass/typography/_headings.scss index 2309407e60..620e117876 100644 --- a/src/wp-content/themes/twentynineteen/sass/typography/_headings.scss +++ b/src/wp-content/themes/twentynineteen/sass/typography/_headings.scss @@ -1,6 +1,35 @@ +.author-description .author-link, +.comment-metadata, +.comment-reply-link, +.comments-title, +.comment-author .fn, +.discussion-meta-info, +.entry-meta, +.entry-footer, +.main-navigation, +.no-comments, +.not-found .page-title, +.error-404 .page-title, +.post-navigation .post-title, +.page-links, +.page-description, +.pagination .nav-links, +.sticky-post, +.site-title, +.site-info, +#cancel-comment-reply-link, +img:after, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: $font__heading; +} + .main-navigation, .page-description, -h2.author-title, .author-description .author-link, .not-found .page-title, .error-404 .page-title, @@ -10,8 +39,12 @@ h2.author-title, .comment-author .fn, .no-comments, .site-title, -h1, h2, h3, h4, h5, h6 { - font-family: $font__heading; +h1, +h2, +h3, +h4, +h5, +h6 { font-weight: 700; letter-spacing: -0.02em; line-height: $font__line-height-heading; @@ -19,21 +52,6 @@ h1, h2, h3, h4, h5, h6 { -moz-osx-font-smoothing: grayscale; } -.site-info, -.page-description, -.post-navigation .post-title, -.comment-metadata, -.discussion-meta-info, -.entry-meta, -.entry-footer, -.comment-reply-link, -#cancel-comment-reply-link, -img:after, -.page-links, -.sticky-post { - font-family: $font__heading; -} - .page-title { font-family: $font__body; } diff --git a/src/wp-content/themes/twentynineteen/sass/typography/_typography.scss b/src/wp-content/themes/twentynineteen/sass/typography/_typography.scss index 565cdd5a6d..9763628a77 100644 --- a/src/wp-content/themes/twentynineteen/sass/typography/_typography.scss +++ b/src/wp-content/themes/twentynineteen/sass/typography/_typography.scss @@ -30,3 +30,5 @@ textarea { @import "headings"; @import "copy"; + +@include non-latin-fonts(); diff --git a/src/wp-content/themes/twentynineteen/sass/variables-site/_fonts.scss b/src/wp-content/themes/twentynineteen/sass/variables-site/_fonts.scss index 0b7bfa3e8d..01f3929eac 100644 --- a/src/wp-content/themes/twentynineteen/sass/variables-site/_fonts.scss +++ b/src/wp-content/themes/twentynineteen/sass/variables-site/_fonts.scss @@ -20,4 +20,4 @@ $font__size-xxxl: 1em * (3 * $font__size-ratio); $font__line-height-body: 1.8; $font__line-height-pre: 1.6; $font__line-height-heading: 1.2; -$font__line-height-double: 2 * $font__line-height-heading; +$font__line-height-double: 2 * $font__line-height-heading; \ No newline at end of file diff --git a/src/wp-content/themes/twentynineteen/sass/variables-site/_structure.scss b/src/wp-content/themes/twentynineteen/sass/variables-site/_structure.scss index 3819ae6b61..dc62145b50 100644 --- a/src/wp-content/themes/twentynineteen/sass/variables-site/_structure.scss +++ b/src/wp-content/themes/twentynineteen/sass/variables-site/_structure.scss @@ -3,10 +3,13 @@ $size__spacing-unit: 1rem; $size__site-main: 100%; $size__site-sidebar: 25%; +$size__site-margins: calc(10% + 60px); +$size__site-tablet-content: calc(8 * (100vw / 12) - 28px); +$size__site-desktop-content: calc(6 * (100vw / 12) - 28px); // Responsive widths. -$mobile_width: 380px; +$mobile_width: 600px; $tablet_width: 768px; $desktop_width: 1168px; $wide_width: 1379px; diff --git a/src/wp-content/themes/twentynineteen/search.php b/src/wp-content/themes/twentynineteen/search.php index 0f6c35a247..fc00c52820 100644 --- a/src/wp-content/themes/twentynineteen/search.php +++ b/src/wp-content/themes/twentynineteen/search.php @@ -19,7 +19,7 @@ get_header();

- +

diff --git a/src/wp-content/themes/twentynineteen/single.php b/src/wp-content/themes/twentynineteen/single.php index 05d0f77657..2e367523be 100644 --- a/src/wp-content/themes/twentynineteen/single.php +++ b/src/wp-content/themes/twentynineteen/single.php @@ -55,7 +55,5 @@ get_header(); - - .editor-block-list__layout, + body .editor-post-title { + padding-left: 0; + padding-right: 0; + } + body .editor-writing-flow { + padding-top: 50px; + overflow: hidden; + } body .wp-block[data-align="full"] { - width: calc( 100% + 90px); - max-width: calc( 100% + 90px); + position: relative; + left: 45px; } } @media only screen and (min-width: 768px) { - body { - overflow-x: hidden; + body :not(.editor-inner-blocks) > .editor-block-list__layout, + body .editor-post-title { + padding-left: 46px; + padding-right: 46px; } - body .editor-writing-flow { + body .editor-block-list__layout, + body .editor-post-title { max-width: 80%; margin: 0 10%; } @@ -67,7 +100,8 @@ Twenty Nineteen Editor Styles /** === Base Typography === */ body { font-size: 22px; - font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-family: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + line-height: 1.8; color: #111; } @@ -196,6 +230,7 @@ figcaption, .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; + font-weight: 700; } /** === Default Appender === */ @@ -204,6 +239,11 @@ figcaption, font-size: 22px; } +/** === Heading === */ +.wp-block-heading strong { + font-weight: bolder; +} + /** === 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; @@ -217,27 +257,56 @@ figcaption, .wp-block-cover h2, .wp-block-cover .wp-block-cover-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 2.25em; + font-size: 1.6875em; font-weight: bold; line-height: 1.4; + padding-left: 1rem; + padding-right: 1rem; } -.wp-block-cover.has-left-content h2, -.wp-block-cover.has-left-content .wp-block-cover-text { - padding: 1em; +.wp-block-cover h2 strong, +.wp-block-cover .wp-block-cover-text strong { + font-weight: bolder; } -.wp-block-cover.has-right-content h2, -.wp-block-cover.has-right-content .wp-block-cover-text { - padding: 1em; +@media only screen and (min-width: 768px) { + .wp-block-cover h2, + .wp-block-cover .wp-block-cover-text { + margin-left: auto; + margin-right: auto; + padding: 0; + } } -.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 { +@media only screen and (min-width: 768px) { + .wp-block-cover { + padding-left: 10%; + padding-right: 10%; + } + .wp-block-cover h2, + .wp-block-cover .wp-block-cover-text { + font-size: 2.25em; + } +} + +.wp-block[data-type="core/cover"][data-align="left"] .editor-block-list__block-edit, +.wp-block[data-type="core/cover"][data-align="right"] .editor-block-list__block-edit { + width: calc(4 * (100vw / 12)); +} + +.wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover, +.wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { width: 100%; - max-width: 305px; + max-width: 100%; +} + +@media only screen and (min-width: 768px) { + .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 { + max-width: calc(8 * (100vw / 12)); + } } @media only screen and (min-width: 1168px) { @@ -245,12 +314,17 @@ figcaption, .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)); } } +@media only screen and (min-width: 768px) { + .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover { + padding-left: calc(10% + 64px); + padding-right: calc(10% + 64px); + } +} + /** === Gallery === */ .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption, @@ -318,22 +392,28 @@ figcaption, /** === Pullquote === */ .wp-block-pullquote { border: none; + color: #000; +} + +.wp-block-pullquote blockquote { + margin-top: calc(3 * 1rem); + margin-bottom: calc(3.33 * 1rem); + hyphens: auto; + word-break: break-word; +} + +.wp-block-pullquote:not(.is-style-solid-color) .wp-block-pullquote__citation { + color: #767676; } .wp-block-pullquote.is-style-solid-color blockquote { - width: calc(100vw - (2 * 1rem)); - max-width: 80%; + width: calc(100% - (2 * 1rem)); + max-width: calc( 100% - (2 * 1rem)); } @media only screen and (min-width: 768px) { .wp-block-pullquote.is-style-solid-color blockquote { - width: calc(8 * (100vw / 12)); - } -} - -@media only screen and (min-width: 1168px) { - .wp-block-pullquote.is-style-solid-color blockquote { - width: calc(6 * (100vw / 12)); + max-width: 80%; } } @@ -345,13 +425,6 @@ figcaption, background-color: #0073aa; } -.wp-block-pullquote blockquote { - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - word-break: break-word; -} - .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, @@ -399,6 +472,7 @@ figcaption, .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 { + width: calc(4 * (100vw / 12)); max-width: 50%; } @@ -423,6 +497,12 @@ figcaption, text-align: left; } +@media only screen and (min-width: 768px) { + .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote blockquote { + max-width: calc(80% - 128px); + } +} + /** === File === */ .wp-block-file { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; @@ -487,16 +567,20 @@ ul.wp-block-archives ul, ul.wp-block-archives li, .wp-block-categories li, .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.125); font-weight: bold; line-height: 1.2; + padding-bottom: 0.75rem; } -ul.wp-block-archives li:not(.menu-item-has-children), -.wp-block-categories li:not(.menu-item-has-children), -.wp-block-latest-posts li:not(.menu-item-has-children) { - padding-bottom: 0.75rem; +ul.wp-block-archives li.menu-item-has-children, ul.wp-block-archives li:last-child, +.wp-block-categories li.menu-item-has-children, +.wp-block-categories li:last-child, +.wp-block-latest-posts li.menu-item-has-children, +.wp-block-latest-posts li:last-child { + padding-bottom: 0; } ul.wp-block-archives li a, @@ -511,6 +595,57 @@ ul.wp-block-archives li ul, padding-left: 1rem; } +.wp-block-categories ul { + padding-top: 0.75rem; +} + +.wp-block-categories ul ul li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; +} + +.wp-block-categories ul ul > li > a:before { + content: "\2013\00a0"; +} + +.wp-block-categories ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.wp-block-categories ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.wp-block-categories ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.wp-block-categories ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.wp-block-categories ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.wp-block-categories ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.wp-block-categories ul ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.wp-block-categories ul ul ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.wp-block-categories li ul { + list-style: none; + padding-left: 0; + margin-bottom: -0.75rem; +} + /** === Latest Posts grid view === */ .wp-block-latest-posts.is-grid li { border-top: 2px solid #ccc; diff --git a/src/wp-content/themes/twentynineteen/style-editor.scss b/src/wp-content/themes/twentynineteen/style-editor.scss index 473da694e0..3be21502c1 100644 --- a/src/wp-content/themes/twentynineteen/style-editor.scss +++ b/src/wp-content/themes/twentynineteen/style-editor.scss @@ -8,22 +8,58 @@ Twenty Nineteen Editor Styles @import "sass/variables-site/colors"; @import "sass/mixins/mixins-master"; +/* + * Chrome renders extra-wide   characters for the Hoefler Text font. + * This results in a jumping cursor when typing in both the Classic and block + * editors. The following font-face override fixes the issue by manually inserting + * a custom font that includes just a Hoefler Text space replacement for that + * character instead. + */ +@font-face { + font-family: 'NonBreakingSpaceOverride'; + src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format('woff2'), + url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format('woff'); + +} + /** === 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: 100%; + } + + @include media(mobile) { + padding-top: 0; + + :not(.editor-inner-blocks) > .editor-block-list__layout, // Target only the top level layout element, or nested blocks will also be affected. + .editor-post-title { + padding-left: 0; + padding-right: 0; + } + + .editor-writing-flow { + padding-top: 50px; + overflow: hidden; + } + .wp-block[data-align="full"] { - width: calc( 100% + 90px ); - max-width: calc( 100% + 90px ); + position: relative; + left: 45px; } } @include media(tablet) { - overflow-x: hidden; - .editor-writing-flow { + :not(.editor-inner-blocks) > .editor-block-list__layout, // Target only the top level layout element, or nested blocks will also be affected. + .editor-post-title { + padding-left: 46px; + padding-right: 46px; + } + + .editor-block-list__layout, + .editor-post-title { max-width: 80%; margin: 0 10%; } @@ -66,6 +102,7 @@ body { width: calc(6 * (100vw / 12 )); } + // Only the top level blocks need specific widths, therefore override for every nested block. .wp-block { width: 100%; } @@ -75,7 +112,8 @@ body { body { font-size: $font__size_base; - font-family: $font__body; + font-family: 'NonBreakingSpaceOverride', $font__body; + line-height: $font__line-height-body; color: $color__text-main; } @@ -147,15 +185,15 @@ a { } } -.has-primary-background-color { - +.has-primary-background-color { + p, - h1, + h1, h2, h3, h4, h5, - h6, + h6, a, a:hover { color: $color__background-body; @@ -187,6 +225,7 @@ figcaption, .editor-post-title__input { font-family: $font__heading; font-size: $font__size-xxl; + font-weight: 700; } } @@ -197,6 +236,13 @@ figcaption, font-size: $font__size_base; } +/** === Heading === */ + +.wp-block-heading { + strong { + font-weight: bolder; + } +} /** === Paragraph === */ .wp-block-paragraph { @@ -217,24 +263,30 @@ figcaption, h2, .wp-block-cover-text { font-family: $font__heading; - font-size: $font__size-xl; + font-size: $font__size-lg; font-weight: bold; line-height: 1.4; - } + padding-left: $size__spacing-unit; + padding-right: $size__spacing-unit; - &.has-left-content { + strong { + font-weight: bolder; + } - h2, - .wp-block-cover-text { - padding: 1em; + @include media(tablet) { + margin-left: auto; + margin-right: auto; + padding: 0; } } - &.has-right-content { + @include media(tablet) { + padding-left: 10%; + padding-right: 10%; h2, .wp-block-cover-text { - padding: 1em; + font-size: $font__size-xl; } } } @@ -242,26 +294,47 @@ figcaption, .wp-block[data-type="core/cover"][data-align="left"], .wp-block[data-type="core/cover"][data-align="right"] { - h2, - .wp-block-cover-text { + .editor-block-list__block-edit { + width: calc(4 * (100vw / 12)); + } + + .wp-block-cover { width: 100%; - max-width: 305px; + max-width: 100%; } } .wp-block[data-type="core/cover"][data-align="wide"], .wp-block[data-type="core/cover"][data-align="full"] { - @include media(desktop) { + @include media(tablet) { + + h2, + .wp-block-cover-text { + max-width: calc(8 * (100vw / 12)); + } + } + + @include media(desktop) { + h2, .wp-block-cover-text { - padding: 0; - width: calc(6 * (100vw / 12)); max-width: calc(6 * (100vw / 12)); } } } +.wp-block[data-type="core/cover"][data-align="full"] { + + @include media(tablet) { + + .wp-block-cover { + padding-left: calc(10% + 64px); + padding-right: calc(10% + 64px); + } + } +} + /** === Gallery === */ .wp-block-gallery { @@ -346,19 +419,27 @@ figcaption, .wp-block-pullquote { border: none; + color: #000; + + blockquote { + margin-top: calc(3 * #{ $size__spacing-unit}); + margin-bottom: calc(3.33 * #{ $size__spacing-unit}); + hyphens: auto; + word-break: break-word; + } + + &:not(.is-style-solid-color) .wp-block-pullquote__citation { + color: $color__text-light; + } &.is-style-solid-color { blockquote { - width: calc(100vw - (2 * #{ $size__spacing-unit})); - max-width: 80%; + width: calc(100% - (2 * #{ $size__spacing-unit})); + max-width: calc( 100% - (2 * #{ $size__spacing-unit})); @include media(tablet) { - width: calc(8 * (100vw / 12)); - } - - @include media(desktop) { - width: calc(6 * (100vw / 12)); + max-width: 80%; } } @@ -370,11 +451,6 @@ figcaption, background-color: $color__link; } } - - blockquote { - hyphens: auto; - word-break: break-word; - } } .wp-block[data-type="core/pullquote"], @@ -411,6 +487,7 @@ figcaption, .wp-block[data-type="core/pullquote"][data-align="right"] { .editor-block-list__block-edit { + width: calc(4 * (100vw / 12)); max-width: 50%; .wp-block-pullquote:not(.is-style-solid-color) { @@ -430,6 +507,17 @@ figcaption, } } +.wp-block[data-type="core/pullquote"][data-align="full"] { + + @include media(tablet) { + + .wp-block-pullquote blockquote { + max-width: calc(80% - 128px); + } + } +} + + /** === File === */ .wp-block-file { @@ -501,13 +589,16 @@ ul.wp-block-archives, } li { + color: $color__text-light; font-family: $font__heading; font-size: calc(#{$font__size_base} * #{$font__size-ratio}); font-weight: bold; line-height: $font__line-height-heading; + padding-bottom: ( .75 * $size__spacing-unit ); - &:not(.menu-item-has-children) { - padding-bottom: ( .75 * $size__spacing-unit ); + &.menu-item-has-children, + &:last-child { + padding-bottom: 0; } a { @@ -520,6 +611,21 @@ ul.wp-block-archives, } } +.wp-block-categories { + + ul { + padding-top: ( .75 * $size__spacing-unit ); + @include nestedSubMenuPadding(); + } + + li ul { + list-style: none; + padding-left: 0; + margin-bottom: ( -.75 * $size__spacing-unit ); + } + +} + /** === Latest Posts grid view === */ .wp-block-latest-posts.is-grid { li { diff --git a/src/wp-content/themes/twentynineteen/style-rtl.css b/src/wp-content/themes/twentynineteen/style-rtl.css index a713023cca..3f3605891f 100644 --- a/src/wp-content/themes/twentynineteen/style-rtl.css +++ b/src/wp-content/themes/twentynineteen/style-rtl.css @@ -56,7 +56,9 @@ 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. */ +/* Fallback for non-latin fonts */ /* Calculates maximum width for post content */ +/* Nested sub-menu padding: 10 levels deep */ /* Normalize */ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document @@ -134,8 +136,7 @@ abbr[title] { /* 1 */ text-decoration: underline; /* 2 */ - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; /* 2 */ } @@ -420,9 +421,38 @@ textarea { text-rendering: optimizeLegibility; } +.author-description .author-link, +.comment-metadata, +.comment-reply-link, +.comments-title, +.comment-author .fn, +.discussion-meta-info, +.entry-meta, +.entry-footer, +.main-navigation, +.no-comments, +.not-found .page-title, +.error-404 .page-title, +.post-navigation .post-title, +.page-links, +.page-description, +.pagination .nav-links, +.sticky-post, +.site-title, +.site-info, +#cancel-comment-reply-link, +img:after, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +} + .main-navigation, .page-description, -h2.author-title, .author-description .author-link, .not-found .page-title, .error-404 .page-title, @@ -432,8 +462,12 @@ h2.author-title, .comment-author .fn, .no-comments, .site-title, -h1, h2, h3, h4, h5, h6 { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +h1, +h2, +h3, +h4, +h5, +h6 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; @@ -441,21 +475,6 @@ h1, h2, h3, h4, h5, h6 { -moz-osx-font-smoothing: grayscale; } -.site-info, -.page-description, -.post-navigation .post-title, -.comment-metadata, -.discussion-meta-info, -.entry-meta, -.entry-footer, -.comment-reply-link, -#cancel-comment-reply-link, -img:after, -.page-links, -.sticky-post { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -} - .page-title { font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; } @@ -558,18 +577,14 @@ h6 { .error-404 .page-title, .comments-title, blockquote { - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; + hyphens: auto; word-break: break-word; } /* Do not hyphenate entry title on tablet view and bigger. */ @media only screen and (min-width: 768px) { .entry-title { - -webkit-hyphens: none; - -ms-hyphens: none; - hyphens: none; + hyphens: none; } } @@ -578,7 +593,10 @@ p { -moz-osx-font-smoothing: grayscale; } -dfn, cite, em, i { +dfn, +cite, +em, +i { font-style: italic; } @@ -595,7 +613,10 @@ pre { overflow: auto; } -code, kbd, tt, var { +code, +kbd, +tt, +var { font-size: 0.88889em; font-family: Menlo, monaco, Consolas, Lucida Console, monospace; } @@ -605,7 +626,8 @@ abbr, acronym { cursor: help; } -mark, ins { +mark, +ins { background: #fff9c0; text-decoration: none; } @@ -626,17 +648,100 @@ a:focus { text-decoration: underline; } +/* Arabic */ +html[lang="ar"] .site *, +html[lang="ary"] .site *, +html[lang="azb"] .site *, +html[lang="ckb"] .site *, +html[lang="fa-IR"] .site *, +html[lang="haz"] .site *, +html[lang="ps"] .site * { + font-family: Tahoma, Arial, sans-serif !important; +} + +/* Cyrillic */ +html[lang="be"] .site *, +html[lang="bg-BG"] .site *, +html[lang="kk"] .site *, +html[lang="mk-MK"] .site *, +html[lang="mn"] .site *, +html[lang="ru-RU"] .site *, +html[lang="sah"] .site *, +html[lang="sr-RS"] .site *, +html[lang="tt-RU"] .site *, +html[lang="uk"] .site * { + font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif !important; +} + +/* Chinese (Hong Kong) */ +html[lang="zh-HK"] .site * { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; +} + +/* Chinese (Taiwan) */ +html[lang="zh-TW"] .site * { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; +} + +/* Chinese (China) */ +html[lang="zh-CN"] .site * { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; +} + +/* Devanagari */ +html[lang="bn-BD"] .site *, +html[lang="hi-IN"] .site *, +html[lang="mr"] .site *, +html[lang="ne-NP"] .site * { + font-family: Arial, sans-serif !important; +} + +/* Greek */ +html[lang="el"] .site * { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; +} + +/* Gujarati */ +html[lang="gu"] .site * { + font-family: Arial, sans-serif !important; +} + +/* Hebrew */ +html[lang="he-IL"] .site * { + font-family: 'Arial Hebrew', Arial, sans-serif !important; +} + +/* Japanese */ +html[lang="ja"] .site * { + font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important; +} + +/* Korean */ +html[lang="ko-KR"] .site * { + font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans-serif !important; +} + +/* Thai */ +html[lang="th"] .site * { + font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif !important; +} + +/* Vietnamese */ +html[lang="vi"] .site * { + font-family: 'Libre Franklin', sans-serif !important; +} + /* Elements */ html { box-sizing: border-box; } ::-moz-selection { - background: #bfdcea; + background-color: #bfdcea; } ::selection { - background: #bfdcea; + background-color: #bfdcea; } *, @@ -646,7 +751,7 @@ html { } body { - background: #fff; + background-color: #fff; } a { @@ -667,12 +772,18 @@ a:focus { text-decoration: underline; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { clear: both; margin: 1rem 0; } -h1:not(.site-title):before, h2:before { +h1:not(.site-title):before, +h2:before { background: #767676; content: "\020"; display: block; @@ -747,11 +858,15 @@ blockquote cite { table { margin: 0 0 1rem; + border-collapse: collapse; width: 100%; } -table td, table th { - border-color: #767676; +table td, +table th { + padding: 0.5em; + border: 1px solid #767676; + word-break: break-all; } /* Forms */ @@ -893,10 +1008,14 @@ a:focus { display: block; margin-top: 0.25rem; /* + * Sub-menu styles + * * :focus-within needs its own selector so other similar * selectors don’t get ignored if a browser doesn’t recognize it */ - /* Only show one submenu expand button at a time (desktop vs mobile) */ + /** + * Full-screen touch device styles + */ } body.page .main-navigation { @@ -908,7 +1027,7 @@ body.page .main-navigation { } .main-navigation .main-menu { - display: inline; + display: inline-block; margin: 0; padding: 0; } @@ -916,12 +1035,7 @@ body.page .main-navigation { .main-navigation .main-menu > li { color: #0073aa; display: inline; -} - -@media only screen and (min-width: 768px) { - .main-navigation .main-menu > li { - position: relative; - } + position: relative; } .main-navigation .main-menu > li > a { @@ -941,6 +1055,13 @@ body.page .main-navigation { .main-navigation .main-menu > li.menu-item-has-children { display: inline-block; + position: inherit; +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu > li.menu-item-has-children { + position: relative; + } } .main-navigation .main-menu > li.menu-item-has-children > a { @@ -953,28 +1074,48 @@ body.page .main-navigation { display: none; } -.main-navigation .main-menu > li.menu-item-has-children .mobile-submenu-expand svg, -.main-navigation .main-menu > li.menu-item-has-children .desktop-submenu-expand svg { +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand { + display: inline-block; + margin-left: 0.5rem; + /* Priority+ Menu */ +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand.main-menu-more-toggle { + position: relative; + height: 24px; + line-height: 1.2; + width: 24px; + padding: 0; + margin-right: 0.5rem; +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand.main-menu-more-toggle svg { + height: 24px; + width: 24px; + top: -0.125rem; + vertical-align: text-bottom; +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand svg { position: relative; top: 0.2rem; } -.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; -} - -.main-navigation .main-menu > li:last-child > a { +.main-navigation .main-menu > li:last-child > a, +.main-navigation .main-menu > li:last-child.menu-item-has-children .submenu-expand { margin-left: 0; } +.main-navigation .main-menu .is-hidden { + display: none; +} + .main-navigation .sub-menu { - background: #0073aa; + background-color: #0073aa; color: #fff; list-style: none; padding-right: 0; display: none; - float: right; position: absolute; opacity: 0; right: -999px; @@ -983,23 +1124,21 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .main-navigation .sub-menu { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - max-width: calc(3 * (100vw / 12)); + width: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; } } .main-navigation .sub-menu > li { - clear: both; display: block; float: none; position: relative; - word-break: break-word; } -.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand, -.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand { +.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand { + display: inline-block; position: absolute; width: calc( 24px + 1rem); left: 0; @@ -1010,13 +1149,11 @@ body.page .main-navigation { padding: calc( .5 * 1rem); } -.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand svg, -.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand svg { +.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand svg { top: 0; } -.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand, -.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand { +.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand { margin-left: 0; } @@ -1026,18 +1163,24 @@ body.page .main-navigation { } } -.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand) { +.main-navigation .sub-menu > li > a, +.main-navigation .sub-menu > li > .menu-item-link-return { color: #fff; display: block; line-height: 1.2; padding: calc( .5 * 1rem) 1rem calc( .5 * 1rem) calc( 24px + 1rem); + white-space: nowrap; } -.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):hover, .main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):focus { +.main-navigation .sub-menu > li > a:hover, .main-navigation .sub-menu > li > a:focus, +.main-navigation .sub-menu > li > .menu-item-link-return:hover, +.main-navigation .sub-menu > li > .menu-item-link-return:focus { background: #005177; } -.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):hover:after, .main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):focus:after { +.main-navigation .sub-menu > li > a:hover:after, .main-navigation .sub-menu > li > a:focus:after, +.main-navigation .sub-menu > li > .menu-item-link-return:hover:after, +.main-navigation .sub-menu > li > .menu-item-link-return:focus:after { background: #005177; } @@ -1053,45 +1196,31 @@ body.page .main-navigation { margin-left: calc( .25 * 1rem); } -.main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu { +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu { display: block; right: 0; margin-top: 0; opacity: 1; - width: calc( 100vw - 2rem); -} - -.main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu { - margin-top: inherit; - position: relative; - padding-right: 1rem; -} - -@media only screen and (min-width: 768px) { - .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu { - padding-right: 0; - position: absolute; - right: 100%; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - top: 0; - } -} - -.main-navigation .main-menu .menu-item-has-children:hover > .sub-menu, -.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 { + width: auto; + min-width: 100%; /* Non-mobile position */ + /* Nested sub-menu padding: 10 levels deep */ +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { + display: block; + right: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + /* Non-mobile position */ + /* Nested sub-menu padding: 10 levels deep */ } @media only screen and (min-width: 768px) { - .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu, - .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; + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu { + display: block; margin-top: 0; opacity: 1; position: absolute; @@ -1100,28 +1229,343 @@ body.page .main-navigation { top: auto; bottom: auto; height: auto; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; transform: none; - animation: fade_in 0.1s forwards; } + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { + display: block; + margin-top: 0; + opacity: 1; + position: absolute; + right: 0; + left: auto; + top: auto; + bottom: auto; + height: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + transform: none; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links { + right: 0; + width: 100%; + display: table; + position: absolute; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links { + right: 0; + width: 100%; + display: table; + position: absolute; } @media only screen and (min-width: 768px) { - .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu .sub-menu, - .main-navigation .main-menu .menu-item-has-children:focus > .sub-menu .sub-menu, - .main-navigation .main-menu .menu-item-has-children .sub-menu:hover .sub-menu, - .main-navigation .main-menu .menu-item-has-children .sub-menu:focus .sub-menu { - margin-top: inherit; - padding-right: 0; - position: absolute; - right: 100%; - top: 0; + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links { + left: 0; + right: auto; + display: block; + width: max-content; + } + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links { + left: 0; + right: auto; + display: block; + width: max-content; } } -.main-navigation .main-menu .menu-item-has-children.focus .sub-menu.expanded-true { +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .submenu-expand { + display: none; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand { + display: none; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + right: 0; + opacity: 1; + /* Non-mobile position */ +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + right: 0; + opacity: 1; + /* Non-mobile position */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu { + float: none; + max-width: 100%; + } + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu { + float: none; + max-width: 100%; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu > li > a:before { + content: "\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a:before { + content: "\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { + display: block; + right: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + /* Non-mobile position */ + /* Nested sub-menu padding: 10 levels deep */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, + .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { + display: block; + float: none; + margin-top: 0; + opacity: 1; + position: absolute; + right: 0; + left: auto; + top: auto; + bottom: auto; + height: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + transform: none; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu.hidden-links, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu.hidden-links, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu.hidden-links { + right: 0; + width: 100%; + display: table; + position: absolute; +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu.hidden-links, + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu.hidden-links, + .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu.hidden-links { + left: 0; + right: auto; + display: table; + width: max-content; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .submenu-expand, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .submenu-expand, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .submenu-expand { + display: none; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + right: 0; + opacity: 1; + /* Non-mobile position */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu, + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu, + .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu { + float: none; + max-width: 100%; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu > li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu > li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu > li > a:before { + content: "\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu { + animation: fade_in 0.1s forwards; +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu .submenu-expand .svg-icon { + transform: rotate(-270deg); +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu .sub-menu { + opacity: 0; + position: absolute; + z-index: 0; + transform: translateX(100%); +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li:hover, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li:focus, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li > a:hover, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li > a:focus { + background-color: transparent; +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true { display: table; margin-top: 0; opacity: 1; @@ -1134,37 +1578,39 @@ body.page .main-navigation { position: fixed; z-index: 100000; /* Make sure appears above mobile admin bar */ - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; + max-width: 100vw; transform: translateX(-100%); animation: slide_in_right 0.3s forwards; + /* Prevent menu from being blocked by admin bar */ } -.main-navigation .main-menu .menu-item-has-children.focus .sub-menu.expanded-true > .mobile-parent-nav-menu-item { - display: inline-block; +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true > .mobile-parent-nav-menu-item { + display: block; } -.main-navigation .desktop-submenu-expand { - display: none; +.admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true { + top: 46px; + height: calc( 100vh - 46px); + /* WP core breakpoint */ } -@media only screen and (min-width: 768px) { - .main-navigation .desktop-submenu-expand { - display: inline-block; +.admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true .sub-menu.expanded-true { + top: 0; +} + +@media only screen and (min-width: 782px) { + .admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true { + top: 32px; + height: calc( 100vh - 32px); + } + .admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true .sub-menu.expanded-true { + top: 0; } } -.main-navigation .mobile-submenu-expand { - display: inline-block; -} - -@media only screen and (min-width: 768px) { - .main-navigation .mobile-submenu-expand { - display: none; - } -} - -/* Menu Animation */ +/* Menu animation */ @keyframes slide_in_right { 100% { transform: translateX(0%); @@ -1235,6 +1681,25 @@ body.page .main-navigation { transform: rotate(45deg); } +/** === Footer menu === */ +.footer-navigation { + display: inline; +} + +.footer-navigation > div { + display: inline; +} + +.footer-navigation .footer-menu { + display: inline; + padding-right: 0; +} + +.footer-navigation .footer-menu li { + display: inline; + margin-left: 1rem; +} + /*-------------------------------------------------------------- ## Next / Previous --------------------------------------------------------------*/ @@ -1245,7 +1710,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .post-navigation { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); + margin: calc(3 * 1rem) calc(10% + 60px); max-width: calc(6 * (100vw / 12)); } } @@ -1273,17 +1738,14 @@ body.page .main-navigation { @media only screen and (min-width: 1168px) { .post-navigation .nav-links { flex-direction: row; - margin: 0 calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + margin: 0 calc(10% + 60px); + max-width: calc(6 * (100vw / 12) - 28px); } } .post-navigation .nav-links a .meta-nav { color: #767676; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + user-select: none; } .post-navigation .nav-links a .meta-nav:before, .post-navigation .nav-links a .meta-nav:after { @@ -1295,9 +1757,7 @@ body.page .main-navigation { } .post-navigation .nav-links a .post-title { - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; + hyphens: auto; } .post-navigation .nav-links a:hover { @@ -1362,6 +1822,21 @@ body.page .main-navigation { padding-left: 0; } +.pagination .nav-links a:focus { + text-decoration: underline; + outline-offset: -1px; +} + +.pagination .nav-links a:focus.prev, .pagination .nav-links a:focus.next { + text-decoration: none; +} + +.pagination .nav-links a:focus.prev .nav-prev-text, +.pagination .nav-links a:focus.prev .nav-next-text, .pagination .nav-links a:focus.next .nav-prev-text, +.pagination .nav-links a:focus.next .nav-next-text { + text-decoration: underline; +} + .pagination .nav-links .nav-next-text, .pagination .nav-links .nav-prev-text { display: none; @@ -1369,7 +1844,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .pagination .nav-links { - margin-right: calc(2 * (100vw / 12)); + margin-right: calc(10% + 60px); padding: 0; } .pagination .nav-links .prev > *, @@ -1385,14 +1860,6 @@ body.page .main-navigation { .comment-navigation .nav-links { display: flex; flex-direction: row; - margin: 0 1rem; -} - -@media only screen and (min-width: 1168px) { - .comment-navigation .nav-links { - margin: 0 calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); - } } .comment-navigation .nav-previous, @@ -1423,11 +1890,6 @@ body.page .main-navigation { top: -1px; } -.comment-navigation .nav-previous a:hover, -.comment-navigation .nav-next a:hover { - color: #0073aa; -} - .comment-navigation .nav-next { text-align: left; } @@ -1437,8 +1899,7 @@ body.page .main-navigation { .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); + clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; @@ -1454,8 +1915,7 @@ body.page .main-navigation { border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; - -webkit-clip-path: none; - clip-path: none; + clip-path: none; color: #21759b; display: block; font-size: 14px; @@ -1480,12 +1940,24 @@ body.page .main-navigation { /* Alignments */ .alignleft { float: left; - margin-left: 1rem; + margin-right: 1rem; +} + +@media only screen and (min-width: 768px) { + .alignleft { + margin-right: calc(2 * 1rem); + } } .alignright { float: right; - margin-right: 1rem; + margin-left: 1rem; +} + +@media only screen and (min-width: 768px) { + .alignright { + margin-left: calc(2 * 1rem); + } } .aligncenter { @@ -1569,7 +2041,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .site-branding { - margin: 0 calc(2 * (100vw / 12)); + margin: 0 calc(10% + 60px); } } @@ -1583,7 +2055,7 @@ body.page .main-navigation { .site-logo { margin-bottom: 0; position: absolute; - left: calc(100% + (0.5 * 100vw / 12)); + left: calc(100% + (1.25 * 1rem)); top: 4px; z-index: 999; } @@ -1667,6 +2139,8 @@ body.page .main-navigation { } .site-header.featured-image { + /* Hide overflow for overflowing featured image */ + overflow: hidden; /* Need relative positioning to properly align layers. */ position: relative; /* Add text shadow to text, to increase readability. */ @@ -1678,12 +2152,11 @@ body.page .main-navigation { /* Make sure important elements are above pseudo elements used for effects. */ /* Set up image filter layer positioning */ /* Background & Effects */ - /* Shared background settings between pseudo elements. See .site-branding-container */ + /* Shared background settings between pseudo elements. */ background-position: center; background-repeat: no-repeat; background-size: cover; /* The intensity of each blend mode is controlled via layer opacity. */ - /* First layer: grayscale. */ /* Second layer: screen. */ /* Third layer: multiply. */ /* When image filters are inactive, a black overlay is added. */ @@ -1756,9 +2229,43 @@ body.page .main-navigation { .site-header.featured-image .social-navigation svg, .site-header.featured-image .site-featured-image svg { /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ + -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); } +.site-header.featured-image .site-featured-image { + /* First layer: grayscale. */ +} + +.site-header.featured-image .site-featured-image .post-thumbnail img { + height: auto; + right: 50%; + max-width: 1000%; + min-height: 100%; + min-width: 100vw; + position: absolute; + top: 50%; + transform: translateX(50%) translateY(-50%); + width: auto; + z-index: 1; + /* When image filters are active, make it grayscale to colorize it blue. */ +} + +@supports (object-fit: cover) { + .site-header.featured-image .site-featured-image .post-thumbnail img { + height: 100%; + right: 0; + object-fit: cover; + top: 0; + transform: none; + width: 100%; + } +} + +.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img { + filter: grayscale(100%); +} + .site-header.featured-image .site-featured-image .entry-header { margin-top: calc( 4 * 1rem); margin-bottom: 0; @@ -1769,8 +2276,8 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .site-header.featured-image .site-featured-image .entry-header { - margin-right: calc(2 * (100vw / 12)); - margin-left: calc(2 * (100vw / 12)); + margin-right: calc(10% + 60px); + margin-left: calc(10% + 60px); } } @@ -1849,7 +2356,6 @@ body.page .main-navigation { z-index: 9; } -.site-header.featured-image .site-branding-container:before, .site-header.featured-image .site-branding-container:after, .site-header.featured-image .site-featured-image:before, .site-header.featured-image .site-featured-image:after, .site-header.featured-image:after { @@ -1862,18 +2368,6 @@ body.page .main-navigation { height: 100%; } -.site-header.featured-image .site-branding-container:before { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - z-index: 1; - /* When image filters are active, make it grayscale to colorize it blue. */ -} - -.image-filters-enabled .site-header.featured-image .site-branding-container:before { - filter: grayscale(100%); -} - .image-filters-enabled .site-header.featured-image .site-featured-image:before { background: #0073aa; mix-blend-mode: screen; @@ -1989,7 +2483,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry .entry-header { - margin: calc(3 * 1rem) calc(2 * (100vw / 12 )) 1rem; + margin: calc(3 * 1rem) calc(10% + 60px) 1rem; } } @@ -2061,14 +2555,14 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry .entry-footer { - margin: 1rem calc(2 * (100vw / 12)) calc(3 * 1rem); - max-width: calc(8 * (100vw / 12)); + margin: 1rem calc(10% + 60px) calc(3 * 1rem); + max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 768px) { .entry .entry-footer { - max-width: calc(6 * (100vw / 12)); + max-width: calc(6 * (100vw / 12) - 28px); } } @@ -2078,7 +2572,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry .post-thumbnail { - margin: 1rem calc(2 * (100vw / 12)); + margin: 1rem calc(10% + 60px); } } @@ -2156,6 +2650,21 @@ body.page .main-navigation { } } +.entry .entry-content, +.entry .entry-summary { + max-width: calc(100% - (2 * 1rem)); + margin: 0 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content, + .entry .entry-summary { + max-width: 80%; + margin: 0 10%; + padding: 0 60px; + } +} + .entry .entry-content p { word-wrap: break-word; } @@ -2185,36 +2694,40 @@ body.page .main-navigation { } .entry .entry-content > iframe[style] { - margin: 32px 1rem !important; - max-width: calc(100vw - (2 * 1rem)) !important; + margin: 32px 0 !important; + max-width: 100% !important; } @media only screen and (min-width: 768px) { .entry .entry-content > iframe[style] { - margin: 32px calc(2 * (100vw / 12)) !important; - max-width: calc(8 * (100vw / 12)) !important; + max-width: calc(8 * (100vw / 12) - 28px) !important; } } @media only screen and (min-width: 1168px) { .entry .entry-content > iframe[style] { - max-width: calc(6 * (100vw / 12)) !important; + max-width: calc(6 * (100vw / 12) - 28px) !important; } } +.entry .entry-content .page-links a { + margin: calc(0.5 * 1rem); + text-decoration: none; +} + .entry .entry-content .wp-audio-shortcode { max-width: calc(100vw - (2 * 1rem)); } @media only screen and (min-width: 768px) { .entry .entry-content .wp-audio-shortcode { - max-width: calc(8 * (100vw / 12)); + max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 1168px) { .entry .entry-content .wp-audio-shortcode { - max-width: calc(6 * (100vw / 12)); + max-width: calc(6 * (100vw / 12) - 28px); } } @@ -2225,14 +2738,25 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .author-bio { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .author-bio { + max-width: calc(6 * (100vw / 12) - 28px); } } @media only screen and (min-width: 768px) { .author-bio { - max-width: calc(6 * (100vw / 12)); + margin: calc(3 * 1rem) calc(10% + 60px); + } +} + +@media only screen and (min-width: 1168px) { + .author-bio { + margin: calc(3 * 1rem) calc(10% + 60px); } } @@ -2277,36 +2801,44 @@ body.page .main-navigation { } .comments-area { + margin: calc(2 * 1rem) 1rem; /* Add extra margin when the comments section is located immediately after the * post itself (this happens on pages). */ } -.entry + .comments-area { - margin-top: calc(3 * 1rem); -} - -.comments-area .comment-list, -.comments-area .comment-navigation, -.comments-area > .comment-respond, -.comments-area .comment-form-flex, -.comments-area .no-comments { - margin: calc(2 * 1rem) 1rem; -} - @media only screen and (min-width: 768px) { - .comments-area .comment-list, - .comments-area .comment-navigation, - .comments-area > .comment-respond, - .comments-area .comment-form-flex, - .comments-area .no-comments { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); - max-width: calc(6 * (100vw / 12)); + .comments-area { + max-width: calc(8 * (100vw / 12) - 28px); } } -.comments-area .comments-title-wrap { - margin: calc(2 * 1rem) 1rem; +@media only screen and (min-width: 1168px) { + .comments-area { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 768px) { + .comments-area { + margin: calc(3 * 1rem) calc(10% + 60px); + } +} + +.comments-area > * { + margin-top: calc(2 * 1rem); + margin-bottom: calc(2 * 1rem); +} + +@media only screen and (min-width: 768px) { + .comments-area > * { + margin-top: calc(3 * 1rem); + margin-bottom: calc(3 * 1rem); + } +} + +.entry + .comments-area { + margin-top: calc(3 * 1rem); } @media only screen and (min-width: 768px) { @@ -2314,8 +2846,6 @@ body.page .main-navigation { align-items: baseline; display: flex; justify-content: space-between; - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); } } @@ -2408,15 +2938,18 @@ body.page .main-navigation { margin-top: 0; } -.comment-list .pingback .comment-body { +.comment-list .pingback .comment-body, +.comment-list .trackback .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-top: 1rem; margin-bottom: 1rem; } -.comment-list .pingback .comment-body a:not(.comment-edit-link) { +.comment-list .pingback .comment-body a:not(.comment-edit-link), +.comment-list .trackback .comment-body a:not(.comment-edit-link) { font-weight: bold; font-size: 19.55556px; line-height: 1.5; @@ -2424,18 +2957,13 @@ body.page .main-navigation { display: block; } -.comment-list .pingback .comment-body .comment-edit-link { +.comment-list .pingback .comment-body .comment-edit-link, +.comment-list .trackback .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; - position: absolute; -} - #respond + .comment-reply { display: none; } @@ -2453,32 +2981,23 @@ body.page .main-navigation { .comment { padding-right: calc(.5 * (1rem + calc(100vw / 12 ))); } + .comment.depth-1, .comment .children { padding-right: 0; } + .comment.depth-1 { + margin-right: calc(3.25 * 1rem); + } } .comment .comment-body { - margin: calc(2 * 1rem) 0; + margin: calc(2 * 1rem) 0 0; } .comment .comment-meta { position: relative; } -@media only screen and (min-width: 768px) { - .comment .comment-meta { - display: flex; - } -} - -@media only screen and (min-width: 768px) { - .comment .comment-author { - flex: 0 0 auto; - vertical-align: baseline; - } -} - .comment .comment-author .avatar { float: right; margin-left: 1rem; @@ -2500,13 +3019,6 @@ body.page .main-navigation { display: block; } -@media only screen and (min-width: 768px) { - .comment .comment-author .fn { - display: inline-block; - vertical-align: baseline; - } -} - .comment .comment-author .fn a { color: inherit; } @@ -2540,18 +3052,9 @@ body.page .main-navigation { transform: scale(0.875); } -@media only screen and (min-width: 768px) { - .comment .comment-metadata { - flex: 1 0 auto; - margin-right: 1rem; - position: relative; - vertical-align: baseline; - } -} - .comment .comment-metadata > a, .comment .comment-metadata .comment-edit-link { - display: inline-block; + display: inline; font-weight: 500; color: #767676; vertical-align: baseline; @@ -2564,7 +3067,7 @@ body.page .main-navigation { .comment .comment-metadata > a:hover, .comment .comment-metadata .comment-edit-link:hover { - color: #4a4a4a; + color: #005177; text-decoration: none; } @@ -2603,6 +3106,12 @@ body.page .main-navigation { margin: 1rem 0; } +@media only screen and (min-width: 1168px) { + .comment .comment-content { + padding-left: 1rem; + } +} + .comment .comment-content > *:first-child { margin-top: 0; } @@ -2611,6 +3120,10 @@ body.page .main-navigation { margin-bottom: 0; } +.comment .comment-content blockquote { + margin-right: 0; +} + .comment .comment-content a { text-decoration: underline; } @@ -2702,8 +3215,7 @@ body.page .main-navigation { .archive .page-header, .search .page-header, .error404 .page-header { - margin: 0 calc(2 * (100vw / 12)) calc(3 * 1rem); - max-width: calc(8 * (100vw / 12)); + margin: 0 calc(10% + 60px) calc(10% + 60px); } } @@ -2750,7 +3262,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .hfeed .entry .entry-header { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)) calc(1rem / 2); + margin: calc(3 * 1rem) calc(10% + 60px) calc(1rem / 2); } } @@ -2763,7 +3275,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .error-404.not-found .page-content, .no-results.not-found .page-content { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)) calc(1rem / 2); + margin: calc(3 * 1rem) calc(10% + 60px) calc(1rem / 2); } } @@ -2790,8 +3302,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { #colophon .widget-area, #colophon .site-info { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + margin: calc(3 * 1rem) calc(10% + 60px); } } @@ -2848,8 +3359,11 @@ body.page .main-navigation { } .widget_archive ul, -.widget_nav_menu ul, +.widget_categories ul, .widget_meta ul, +.widget_nav_menu ul, +.widget_pages ul, +.widget_recent_comments ul, .widget_recent_entries ul, .widget_rss ul { padding: 0; @@ -2857,39 +3371,136 @@ body.page .main-navigation { } .widget_archive ul li, -.widget_nav_menu ul li, +.widget_categories ul li, .widget_meta ul li, +.widget_nav_menu ul li, +.widget_pages ul li, +.widget_recent_comments ul li, .widget_recent_entries ul li, .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.125); - font-weight: bold; + font-weight: 700; line-height: 1.2; + margin-top: 0.5rem; + margin-bottom: 0.5rem; } -.widget_archive ul li:not(.menu-item-has-children), -.widget_nav_menu ul li:not(.menu-item-has-children), -.widget_meta ul li:not(.menu-item-has-children), -.widget_recent_entries ul li:not(.menu-item-has-children), -.widget_rss ul li:not(.menu-item-has-children) { - padding-bottom: 0.75rem; +.widget_archive ul ul li > a:before, +.widget_categories ul ul li > a:before, +.widget_meta ul ul li > a:before, +.widget_nav_menu ul ul li > a:before, +.widget_pages ul ul li > a:before, +.widget_recent_comments ul ul li > a:before, +.widget_recent_entries ul ul li > a:before, +.widget_rss ul ul li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; } -.widget_archive ul li ul, -.widget_nav_menu ul li ul, -.widget_meta ul li ul, -.widget_recent_entries ul li ul, -.widget_rss ul li ul { - padding-right: 1rem; +.widget_archive ul ul > li > a:before, +.widget_categories ul ul > li > a:before, +.widget_meta ul ul > li > a:before, +.widget_nav_menu ul ul > li > a:before, +.widget_pages ul ul > li > a:before, +.widget_recent_comments ul ul > li > a:before, +.widget_recent_entries ul ul > li > a:before, +.widget_rss ul ul > li > a:before { + content: "\2013\00a0"; } -.widget_archive ul.sub-menu, -.widget_nav_menu ul.sub-menu, -.widget_meta ul.sub-menu, -.widget_recent_entries ul.sub-menu, -.widget_rss ul.sub-menu { - padding-top: 0.75rem; +.widget_archive ul ul ul li > a:before, +.widget_categories ul ul ul li > a:before, +.widget_meta ul ul ul li > a:before, +.widget_nav_menu ul ul ul li > a:before, +.widget_pages ul ul ul li > a:before, +.widget_recent_comments ul ul ul li > a:before, +.widget_recent_entries ul ul ul li > a:before, +.widget_rss ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul li > a:before, +.widget_categories ul ul ul ul li > a:before, +.widget_meta ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul li > a:before, +.widget_pages ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul li > a:before, +.widget_rss ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_tag_cloud .tagcloud { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-weight: 700; } .widget_search .search-submit { @@ -2897,175 +3508,234 @@ body.page .main-navigation { margin-top: 1rem; } +.widget_calendar .calendar_wrap { + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +} + +.widget_calendar .calendar_wrap table td, +.widget_calendar .calendar_wrap table th { + border: none; +} + +.widget_calendar .calendar_wrap a { + text-decoration: underline; +} + /* Blocks */ /* !Block styles */ -.entry-content > *, -.entry-summary > * { - max-width: calc(100vw - (2 * 1rem)); - margin: 32px 1rem; - /* - // Set top margins for headings - & + h1:before, - & + h2:before, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: calc(4 * 1rem); - } -*/ -} - -@media only screen and (min-width: 768px) { - .entry-content > *, - .entry-summary > * { - max-width: calc(8 * (100vw / 12)); - } -} - -@media only screen and (min-width: 1168px) { - .entry-content > *, - .entry-summary > * { - max-width: calc(6 * (100vw / 12)); - } -} - -@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; -} - -.entry-content > * > *:last-child, -.entry-summary > * > *:last-child { - margin-bottom: 0; -} - -.entry-content > *.alignwide, -.entry-summary > *.alignwide { - margin-right: auto; - margin-left: auto; -} - -@media only screen and (min-width: 768px) { - .entry-content > *.alignwide, - .entry-summary > *.alignwide { - margin-right: calc(2 * (100vw / 12)); - margin-left: calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); - } -} - -.entry-content > *.alignfull, -.entry-summary > *.alignfull { - margin-top: calc(2 * 1rem); - margin-left: 0; - margin-bottom: calc(2 * 1rem); - margin-right: 0; +.entry .entry-content > *, +.entry .entry-summary > * { + margin: 32px 0; max-width: 100%; } -.entry-content > *.alignleft, -.entry-summary > *.alignleft { - float: right; - max-width: calc(5 * (100vw / 12)); - margin-top: 0; -} - @media only screen and (min-width: 768px) { - .entry-content > *.alignleft, - .entry-summary > *.alignleft { - max-width: calc(4 * (100vw / 12)); - margin-left: calc(2 * 1rem); + .entry .entry-content > *, + .entry .entry-summary > * { + max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 1168px) { - .entry-content > *.alignleft, - .entry-summary > *.alignleft { + .entry .entry-content > *, + .entry .entry-summary > * { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *, + .entry .entry-summary > * { + margin: 32px 0; + } +} + +.entry .entry-content > * > *:first-child, +.entry .entry-summary > * > *:first-child { + margin-top: 0; +} + +.entry .entry-content > * > *:last-child, +.entry .entry-summary > * > *:last-child { + margin-bottom: 0; +} + +.entry .entry-content > *.alignwide, +.entry .entry-summary > *.alignwide { + margin-right: auto; + margin-left: auto; + clear: both; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.alignwide, + .entry .entry-summary > *.alignwide { + width: 100%; + max-width: 100%; + } +} + +.entry .entry-content > *.alignfull, +.entry .entry-summary > *.alignfull { + position: relative; + right: -1rem; + width: calc( 100% + (2 * 1rem)); + max-width: calc( 100% + (2 * 1rem)); + clear: both; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.alignfull, + .entry .entry-summary > *.alignfull { + margin-top: calc(2 * 1rem); + margin-bottom: calc(2 * 1rem); + right: calc( -12.5% - 75px); + width: calc( 125% + 150px); + max-width: calc( 125% + 150px); + } +} + +.entry .entry-content > *.alignleft, +.entry .entry-summary > *.alignleft { + float: left; + max-width: calc(5 * (100vw / 12)); + margin-top: 0; + margin-right: 0; + margin-right: 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.alignleft, + .entry .entry-summary > *.alignleft { + max-width: calc(4 * (100vw / 12)); + margin-right: calc(2 * 1rem); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content > *.alignleft, + .entry .entry-summary > *.alignleft { max-width: calc(3 * (100vw / 12)); } } -.entry-content > *.alignright, -.entry-summary > *.alignright { - float: left; +.entry .entry-content > *.alignright, +.entry .entry-summary > *.alignright { + float: right; max-width: calc(5 * (100vw / 12)); margin-top: 0; - margin-right: 1rem; + margin-left: 0; margin-left: 1rem; } @media only screen and (min-width: 768px) { - .entry-content > *.alignright, - .entry-summary > *.alignright { + .entry .entry-content > *.alignright, + .entry .entry-summary > *.alignright { max-width: calc(4 * (100vw / 12)); - margin-right: calc(2 * 1rem); - margin-left: calc(2 * (100vw / 12)); + margin-left: 0; + margin-left: calc(2 * 1rem); } } -.entry-content > *.aligncenter, -.entry-summary > *.aligncenter { +.entry .entry-content > *.aligncenter, +.entry .entry-summary > *.aligncenter { margin-right: auto; margin-left: auto; } -@media only screen and (min-width: 1168px) { - .entry-content > *.aligncenter, - .entry-summary > *.aligncenter { - margin-right: calc(2 * (100vw / 12)); - margin-left: calc(2 * (100vw / 12)); - max-width: calc(10 * (100vw / 12)); - position: relative; - right: 25%; - transform: translate(50%); +@media only screen and (min-width: 768px) { + .entry .entry-content > *.aligncenter, + .entry .entry-summary > *.aligncenter { + max-width: calc(8 * (100vw / 12) - 28px); } } -.entry-content .wp-block-audio { - width: 100%; -} - -.entry-content .wp-block-audio audio { - width: 100%; -} - -.entry-content .wp-block-audio.alignleft audio, -.entry-content .wp-block-audio.alignright audio { - max-width: 190px; +@media only screen and (min-width: 1168px) { + .entry .entry-content > *.aligncenter, + .entry .entry-summary > *.aligncenter { + max-width: calc(6 * (100vw / 12) - 28px); + } } @media only screen and (min-width: 768px) { - .entry-content .wp-block-audio.alignleft audio, - .entry-content .wp-block-audio.alignright audio { + .entry .entry-content > *.aligncenter, + .entry .entry-summary > *.aligncenter { + margin-right: 0; + margin-left: 0; + } +} + +/* + * Unset nested content selector styles + * - Prevents layout styles from cascading too deeply + * - helps with plugin compatibility + */ +.entry .entry-content .entry-content, +.entry .entry-content .entry-summary, +.entry .entry-content .entry, +.entry .entry-summary .entry-content, +.entry .entry-summary .entry-summary, +.entry .entry-summary .entry { + margin: inherit; + max-width: inherit; + padding: inherit; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .entry-content, + .entry .entry-content .entry-summary, + .entry .entry-content .entry, + .entry .entry-summary .entry-content, + .entry .entry-summary .entry-summary, + .entry .entry-summary .entry { + margin: inherit; + max-width: inherit; + padding: inherit; + } +} + +.entry .entry-content p.has-background { + padding: 20px 30px; +} + +.entry .entry-content .wp-block-audio { + width: 100%; +} + +.entry .entry-content .wp-block-audio audio { + width: 100%; +} + +.entry .entry-content .wp-block-audio.alignleft audio, +.entry .entry-content .wp-block-audio.alignright audio { + max-width: 198px; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-audio.alignleft audio, + .entry .entry-content .wp-block-audio.alignright audio { max-width: 384px; } } @media only screen and (min-width: 1379px) { - .entry-content .wp-block-audio.alignleft audio, - .entry-content .wp-block-audio.alignright audio { + .entry .entry-content .wp-block-audio.alignleft audio, + .entry .entry-content .wp-block-audio.alignright audio { max-width: 385.44px; } } -.entry-content .wp-block-audio.aligncenter { +.entry .entry-content .wp-block-audio.aligncenter { margin: 32px calc(2 * (100vw / 12)); max-width: calc(6 * (100vw / 12)); } -.entry-content .wp-block-video video { +.entry .entry-content .wp-block-video video { width: 100%; } -.entry-content .wp-block-button .wp-block-button__link { +.entry .entry-content .wp-block-button .wp-block-button__link { transition: background 150ms ease-in-out; border: none; background: #0073aa; @@ -3081,102 +3751,147 @@ body.page .main-navigation { outline: none; } -.entry-content .wp-block-button .wp-block-button__link:hover { +.entry .entry-content .wp-block-button .wp-block-button__link:hover { + background: #111; cursor: pointer; } -.entry-content .wp-block-button .wp-block-button__link:hover, .entry-content .wp-block-button .wp-block-button__link:focus { +.entry .entry-content .wp-block-button .wp-block-button__link:focus { background: #111; -} - -.entry-content .wp-block-button .wp-block-button__link:focus { outline: thin dotted; outline-offset: -4px; } -.entry-content .wp-block-button:not(.is-style-squared) .wp-block-button__link { +.entry .entry-content .wp-block-button:not(.is-style-squared) .wp-block-button__link { border-radius: 5px; } -.entry-content .wp-block-button.is-style-outline .wp-block-button__link, -.entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus, -.entry-content .wp-block-button.is-style-outline .wp-block-button__link:active { +.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link, +.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus, +.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:active { transition: all 150ms ease-in-out; background: transparent; border: 2px solid currentColor; color: #0073aa; } -.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { +.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { color: #111; } -.entry-content .wp-block-archives, -.entry-content .wp-block-categories, -.entry-content .wp-block-latest-posts { +.entry .entry-content .wp-block-archives, +.entry .entry-content .wp-block-categories, +.entry .entry-content .wp-block-latest-posts { padding: 0; list-style: none; } -.entry-content .wp-block-archives li, -.entry-content .wp-block-categories li, -.entry-content .wp-block-latest-posts li { +.entry .entry-content .wp-block-archives li, +.entry .entry-content .wp-block-categories li, +.entry .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.125); font-weight: bold; line-height: 1.2; -} - -.entry-content .wp-block-archives li:not(.menu-item-has-children), -.entry-content .wp-block-categories li:not(.menu-item-has-children), -.entry-content .wp-block-latest-posts li:not(.menu-item-has-children) { padding-bottom: 0.75rem; } -.entry-content .wp-block-archives li a, -.entry-content .wp-block-categories li a, -.entry-content .wp-block-latest-posts li a { +.entry .entry-content .wp-block-archives li.menu-item-has-children, .entry .entry-content .wp-block-archives li:last-child, +.entry .entry-content .wp-block-categories li.menu-item-has-children, +.entry .entry-content .wp-block-categories li:last-child, +.entry .entry-content .wp-block-latest-posts li.menu-item-has-children, +.entry .entry-content .wp-block-latest-posts li:last-child { + padding-bottom: 0; +} + +.entry .entry-content .wp-block-archives li a, +.entry .entry-content .wp-block-categories li a, +.entry .entry-content .wp-block-latest-posts li a { text-decoration: none; } -.entry-content .wp-block-archives li ul, -.entry-content .wp-block-categories li ul, -.entry-content .wp-block-latest-posts li ul { - padding-right: 1rem; +.entry .entry-content .wp-block-categories ul { + padding-top: 0.75rem; } -.entry-content .wp-block-latest-posts.is-grid li { +.entry .entry-content .wp-block-categories li ul { + list-style: none; + padding-right: 0; +} + +.entry .entry-content .wp-block-categories ul li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; +} + +.entry .entry-content .wp-block-categories ul > li > a:before { + content: "\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-latest-posts.is-grid li { border-top: 2px solid #ccc; padding-top: 1rem; margin-bottom: 2rem; } -.entry-content .wp-block-latest-posts.is-grid li a:after { +.entry .entry-content .wp-block-latest-posts.is-grid li a:after { content: ''; } -.entry-content .wp-block-latest-posts.is-grid li:last-child { +.entry .entry-content .wp-block-latest-posts.is-grid li:last-child { margin-bottom: auto; } -.entry-content .wp-block-latest-posts.is-grid li:last-child a:after { +.entry .entry-content .wp-block-latest-posts.is-grid li:last-child a:after { content: ''; } -.entry-content .wp-block-preformatted { +.entry .entry-content .wp-block-preformatted { font-size: 0.71111em; line-height: 1.8; padding: 1rem; } -.entry-content .wp-block-verse { +.entry .entry-content .wp-block-verse { font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; font-size: 22px; line-height: 1.8; } -.entry-content .has-drop-cap:not(:focus):first-letter { +.entry .entry-content .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; font-size: 3.375em; line-height: 1; @@ -3184,19 +3899,20 @@ body.page .main-navigation { margin: 0 0 0 0.25em; } -.entry-content .wp-block-pullquote { +.entry .entry-content .wp-block-pullquote { border: none; padding: 1rem; } -.entry-content .wp-block-pullquote blockquote { +.entry .entry-content .wp-block-pullquote blockquote { color: #111; border: none; - padding-bottom: calc(2 * 1rem); + margin-top: calc(4 * 1rem); + margin-bottom: calc(4.33 * 1rem); margin-left: 0; } -.entry-content .wp-block-pullquote p { +.entry .entry-content .wp-block-pullquote p { font-size: 1.6875em; font-style: italic; line-height: 1.3; @@ -3204,40 +3920,55 @@ body.page .main-navigation { margin-top: 0.5em; } -.entry-content .wp-block-pullquote p em { +.entry .entry-content .wp-block-pullquote p em { font-style: normal; } @media only screen and (min-width: 768px) { - .entry-content .wp-block-pullquote p { + .entry .entry-content .wp-block-pullquote p { font-size: 2.25em; } } -.entry-content .wp-block-pullquote cite { +.entry .entry-content .wp-block-pullquote cite { display: inline-block; 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; + color: #767676; + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * 1.125)); } -.entry-content .wp-block-pullquote.alignleft, .entry-content .wp-block-pullquote.alignright { +.entry .entry-content .wp-block-pullquote.alignleft, .entry .entry-content .wp-block-pullquote.alignright { + width: 100%; padding: 0; } -.entry-content .wp-block-pullquote.alignleft blockquote, .entry-content .wp-block-pullquote.alignright blockquote { +.entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote { margin-right: 0; padding: 0; text-align: right; max-width: 100%; } -.entry-content .wp-block-pullquote.is-style-solid-color { +.entry .entry-content .wp-block-pullquote.is-style-solid-color { background-color: #0073aa; + padding-right: 0; + padding-left: 0; } -.entry-content .wp-block-pullquote.is-style-solid-color p { +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-pullquote.is-style-solid-color { + padding-right: 10%; + padding-left: 10%; + } +} + +.entry .entry-content .wp-block-pullquote.is-style-solid-color p { font-size: 1.6875em; line-height: 1.3; margin-bottom: 0.5em; @@ -3245,152 +3976,161 @@ body.page .main-navigation { } @media only screen and (min-width: 768px) { - .entry-content .wp-block-pullquote.is-style-solid-color p { + .entry .entry-content .wp-block-pullquote.is-style-solid-color p { font-size: 2.25em; } } -.entry-content .wp-block-pullquote.is-style-solid-color a { +.entry .entry-content .wp-block-pullquote.is-style-solid-color a { color: #fff; } -.entry-content .wp-block-pullquote.is-style-solid-color blockquote { +.entry .entry-content .wp-block-pullquote.is-style-solid-color cite { + color: inherit; +} + +.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote { + max-width: calc(100% - (2 * 1rem)); color: #fff; - margin: 0 auto; -} - -.entry-content .wp-block-pullquote.is-style-solid-color .has-primary-background-color { - background-color: #0073aa; -} - -.entry-content .wp-block-pullquote.is-style-solid-color.alignleft, .entry-content .wp-block-pullquote.is-style-solid-color.alignright { - padding: 1rem 1rem 0; -} - -.entry-content .wp-block-pullquote.is-style-solid-color.alignleft blockquote, .entry-content .wp-block-pullquote.is-style-solid-color.alignright blockquote { - padding: 0 0 calc( 1.5 * 1rem); - margin-right: 0; - margin-top: 0; + padding-right: 0; + margin-right: 1rem; } @media only screen and (min-width: 768px) { - .entry-content .wp-block-pullquote.is-style-solid-color.alignleft, .entry-content .wp-block-pullquote.is-style-solid-color.alignright { - padding: calc( 2 * 1rem) calc( 2 * 1rem) 1rem; + .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote { + margin-right: 0; + margin-left: 0; } } -.entry-content .wp-block-quote:not(.is-large), .entry-content .wp-block-quote:not(.is-style-large) { +.entry .entry-content .wp-block-pullquote.is-style-solid-color .has-primary-background-color { + background-color: #0073aa; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignfull { + padding-right: calc(10% + 58px + (2 * 1rem)); + padding-left: calc(10% + 58px + (2 * 1rem)); + } +} + +.entry .entry-content .wp-block-quote:not(.is-large), .entry .entry-content .wp-block-quote:not(.is-style-large) { border-right: 2px solid #0073aa; padding-top: 0; padding-bottom: 0; } -.entry-content .wp-block-quote p { +.entry .entry-content .wp-block-quote p { font-size: 1em; font-style: normal; line-height: 1.8; } -.entry-content .wp-block-quote cite { - font-size: 0.71111em; +.entry .entry-content .wp-block-quote cite { + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * 1.125)); } -.entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large { - padding: 1rem 2rem 1rem 0; +.entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large { margin: 1rem 0; + padding: 0; border-right: none; } -.entry-content .wp-block-quote.is-large p, .entry-content .wp-block-quote.is-style-large p { +.entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p { font-size: 1.6875em; line-height: 1.4; font-style: italic; } -.entry-content .wp-block-quote.is-large cite, -.entry-content .wp-block-quote.is-large footer, .entry-content .wp-block-quote.is-style-large cite, -.entry-content .wp-block-quote.is-style-large footer { - font-size: 0.71111em; +.entry .entry-content .wp-block-quote.is-large cite, +.entry .entry-content .wp-block-quote.is-large footer, .entry .entry-content .wp-block-quote.is-style-large cite, +.entry .entry-content .wp-block-quote.is-style-large footer { + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * 1.125)); } @media only screen and (min-width: 768px) { - .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large { - margin: 1rem calc(2 * (100vw / 12)); - max-width: calc(6 * (100vw / 12)); + .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large { + margin: 1rem 0; + padding: 1rem 0; } - .entry-content .wp-block-quote.is-large p, .entry-content .wp-block-quote.is-style-large p { + .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p { font-size: 1.6875em; } } -.entry-content .wp-block-image img { +.entry .entry-content .wp-block-image img { display: block; } -.entry-content .wp-block-image.alignleft, .entry-content .wp-block-image.alignright { +.entry .entry-content .wp-block-image.alignleft, .entry .entry-content .wp-block-image.alignright { max-width: 100%; } -.entry-content .wp-block-image.alignfull img { +.entry .entry-content .wp-block-image.alignfull img { width: 100vw; - margin-right: auto; - margin-left: auto; -} - -.entry-content .wp-block-cover-image .wp-block-cover-image-text, -.entry-content .wp-block-cover-image .wp-block-cover-text, -.entry-content .wp-block-cover-image h2, -.entry-content .wp-block-cover .wp-block-cover-image-text, -.entry-content .wp-block-cover .wp-block-cover-text, -.entry-content .wp-block-cover h2 { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 1.6875em; - font-weight: bold; - width: calc(100vw - (2 * 1rem)); - max-width: calc(100vw - (2 * 1rem)); } @media only screen and (min-width: 768px) { - .entry-content .wp-block-cover-image .wp-block-cover-image-text, - .entry-content .wp-block-cover-image .wp-block-cover-text, - .entry-content .wp-block-cover-image h2, - .entry-content .wp-block-cover .wp-block-cover-image-text, - .entry-content .wp-block-cover .wp-block-cover-text, - .entry-content .wp-block-cover h2 { + .entry .entry-content .wp-block-image.alignfull img { + margin-right: auto; + margin-left: auto; + } +} + +.entry .entry-content .wp-block-cover-image, +.entry .entry-content .wp-block-cover { + position: relative; + min-height: 430px; + padding: 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image, + .entry .entry-content .wp-block-cover { + padding: 1rem 10%; + } +} + +.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text, +.entry .entry-content .wp-block-cover-image .wp-block-cover-text, +.entry .entry-content .wp-block-cover-image h2, +.entry .entry-content .wp-block-cover .wp-block-cover-image-text, +.entry .entry-content .wp-block-cover .wp-block-cover-text, +.entry .entry-content .wp-block-cover h2 { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-size: 1.6875em; + font-weight: bold; + line-height: 1.25; + padding: 0; + color: #fff; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover-image .wp-block-cover-text, + .entry .entry-content .wp-block-cover-image h2, + .entry .entry-content .wp-block-cover .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover .wp-block-cover-text, + .entry .entry-content .wp-block-cover h2 { font-size: 2.25em; - width: calc(8 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + max-width: 100%; } } -@media only screen and (min-width: 1168px) { - .entry-content .wp-block-cover-image .wp-block-cover-image-text, - .entry-content .wp-block-cover-image .wp-block-cover-text, - .entry-content .wp-block-cover-image h2, - .entry-content .wp-block-cover .wp-block-cover-image-text, - .entry-content .wp-block-cover .wp-block-cover-text, - .entry-content .wp-block-cover h2 { - width: calc(6 * (100vw / 12 )); - max-width: calc(6 * (100vw / 12 )); - } -} - -.entry-content .wp-block-cover-image.alignleft h2, -.entry-content .wp-block-cover-image.alignleft .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.alignleft .wp-block-cover-text, .entry-content .wp-block-cover-image.alignright h2, -.entry-content .wp-block-cover-image.alignright .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.alignright .wp-block-cover-text, .entry-content .wp-block-cover-image.aligncenter h2, -.entry-content .wp-block-cover-image.aligncenter .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.aligncenter .wp-block-cover-text, -.entry-content .wp-block-cover.alignleft h2, -.entry-content .wp-block-cover.alignleft .wp-block-cover-image-text, -.entry-content .wp-block-cover.alignleft .wp-block-cover-text, -.entry-content .wp-block-cover.alignright h2, -.entry-content .wp-block-cover.alignright .wp-block-cover-image-text, -.entry-content .wp-block-cover.alignright .wp-block-cover-text, -.entry-content .wp-block-cover.aligncenter h2, -.entry-content .wp-block-cover.aligncenter .wp-block-cover-image-text, -.entry-content .wp-block-cover.aligncenter .wp-block-cover-text { +.entry .entry-content .wp-block-cover-image.aligncenter h2, +.entry .entry-content .wp-block-cover-image.aligncenter .wp-block-cover-image-text, +.entry .entry-content .wp-block-cover-image.aligncenter .wp-block-cover-text, +.entry .entry-content .wp-block-cover.aligncenter h2, +.entry .entry-content .wp-block-cover.aligncenter .wp-block-cover-image-text, +.entry .entry-content .wp-block-cover.aligncenter .wp-block-cover-text { width: 100%; z-index: 1; right: 50%; @@ -3399,50 +4139,65 @@ 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 .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, +.entry .entry-content .wp-block-cover.alignleft, +.entry .entry-content .wp-block-cover.alignright { + width: 100%; } -.entry-content .wp-block-cover-image.has-left-content, -.entry-content .wp-block-cover.has-left-content { - justify-content: center; +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover-image.alignfull h2, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover.alignfull h2 { + max-width: calc(8 * (100vw / 12) - 28px); + } } -.entry-content .wp-block-cover-image.has-left-content h2, -.entry-content .wp-block-cover-image.has-left-content .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.has-left-content .wp-block-cover-text, -.entry-content .wp-block-cover.has-left-content h2, -.entry-content .wp-block-cover.has-left-content .wp-block-cover-image-text, -.entry-content .wp-block-cover.has-left-content .wp-block-cover-text { - padding: 1rem; +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover-image.alignfull h2, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover.alignfull h2 { + max-width: calc(6 * (100vw / 12) - 28px); + } } -.entry-content .wp-block-cover-image.has-right-content, -.entry-content .wp-block-cover.has-right-content { - justify-content: center; +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image.alignfull, + .entry .entry-content .wp-block-cover.alignfull { + padding-right: calc(10% + 58px + (2 * 1rem)); + padding-left: calc(10% + 58px + (2 * 1rem)); + } + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover-image.alignfull h2, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover.alignfull h2 { + padding: 0; + } } -.entry-content .wp-block-cover-image.has-right-content h2, -.entry-content .wp-block-cover-image.has-right-content .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.has-right-content .wp-block-cover-text, -.entry-content .wp-block-cover.has-right-content h2, -.entry-content .wp-block-cover.has-right-content .wp-block-cover-image-text, -.entry-content .wp-block-cover.has-right-content .wp-block-cover-text { - padding: 1rem; +.entry .entry-content .wp-block-gallery { + list-style-type: none; + padding-right: 0; } -.entry-content .wp-block-gallery .blocks-gallery-image:last-child, -.entry-content .wp-block-gallery .blocks-gallery-item:last-child { +.entry .entry-content .wp-block-gallery .blocks-gallery-image:last-child, +.entry .entry-content .wp-block-gallery .blocks-gallery-item:last-child { margin-bottom: 16px; } -.entry-content .wp-block-audio figcaption, -.entry-content .wp-block-video figcaption, -.entry-content .wp-block-image figcaption, -.entry-content .wp-block-gallery .blocks-gallery-image figcaption, -.entry-content .wp-block-gallery .blocks-gallery-item figcaption { +.entry .entry-content .wp-block-audio figcaption, +.entry .entry-content .wp-block-video figcaption, +.entry .entry-content .wp-block-image figcaption, +.entry .entry-content .wp-block-gallery .blocks-gallery-image figcaption, +.entry .entry-content .wp-block-gallery .blocks-gallery-item figcaption { 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; @@ -3451,75 +4206,90 @@ body.page .main-navigation { text-align: center; } -.entry-content .wp-block-separator, -.entry-content hr { +.entry .entry-content .wp-block-separator, +.entry .entry-content hr { + background-color: #767676; + border: 0; + height: 2px; margin-bottom: 2rem; margin-top: 2rem; + max-width: 2.25em; text-align: right; /* Remove duplicate rule-line when a separator * is followed by an H1, or H2 */ } -.entry-content .wp-block-separator:not(.is-style-dots), -.entry-content hr:not(.is-style-dots) { - background-color: #767676; - border: 0; - height: 2px; -} - -.entry-content .wp-block-separator:not(.is-style-wide):not(.is-style-dots), -.entry-content hr:not(.is-style-wide):not(.is-style-dots) { - max-width: 2.25em; -} - -.entry-content .wp-block-separator + h1:before, -.entry-content .wp-block-separator + h2:before, -.entry-content hr + h1:before, -.entry-content hr + h2:before { - 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; +.entry .entry-content .wp-block-separator.is-style-wide, +.entry .entry-content hr.is-style-wide { + max-width: 100%; } @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)); + .entry .entry-content .wp-block-separator.is-style-wide, + .entry .entry-content hr.is-style-wide { + max-width: calc(8 * (100vw / 12) - 28px); } } @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 .entry-content .wp-block-separator.is-style-wide, + .entry .entry-content hr.is-style-wide { + max-width: calc(6 * (100vw / 12) - 28px); } } -.entry-content .wp-block-separator.is-style-dots:before, -.entry-content hr.is-style-dots:before { +.entry .entry-content .wp-block-separator.is-style-dots, +.entry .entry-content hr.is-style-dots { + max-width: 100%; + background-color: inherit; + border: inherit; + height: inherit; + text-align: center; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-separator.is-style-dots, + .entry .entry-content hr.is-style-dots { + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-separator.is-style-dots, + .entry .entry-content hr.is-style-dots { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +.entry .entry-content .wp-block-separator.is-style-dots:before, +.entry .entry-content hr.is-style-dots:before { color: #767676; font-size: 1.6875em; letter-spacing: 0.88889em; padding-right: 0.88889em; } -.entry-content .wp-block-embed-twitter { +.entry .entry-content .wp-block-separator + h1:before, +.entry .entry-content .wp-block-separator + h2:before, +.entry .entry-content hr + h1:before, +.entry .entry-content hr + h2:before { + display: none; +} + +.entry .entry-content .wp-block-embed-twitter { overflow: hidden; } -.entry-content .wp-block-table td, .entry-content .wp-block-table th { +.entry .entry-content .wp-block-table th, +.entry .entry-content .wp-block-table td { border-color: #767676; } -.entry-content .wp-block-file { +.entry .entry-content .wp-block-file { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } -.entry-content .wp-block-file .wp-block-file__button { +.entry .entry-content .wp-block-file .wp-block-file__button { transition: background 150ms ease-in-out; border: none; border-radius: 5px; @@ -3527,87 +4297,90 @@ body.page .main-navigation { font-size: 22px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.2; + text-decoration: none; font-weight: bold; padding: 0.75rem 1rem; + color: #fff; } @media only screen and (min-width: 1168px) { - .entry-content .wp-block-file .wp-block-file__button { + .entry .entry-content .wp-block-file .wp-block-file__button { font-size: 22px; padding: 0.875rem 1.5rem; } } -.entry-content .wp-block-file .wp-block-file__button:hover { +.entry .entry-content .wp-block-file .wp-block-file__button:hover { + background: #111; cursor: pointer; } -.entry-content .wp-block-file .wp-block-file__button:hover, .entry-content .wp-block-file .wp-block-file__button:focus { +.entry .entry-content .wp-block-file .wp-block-file__button:focus { background: #111; -} - -.entry-content .wp-block-file .wp-block-file__button:focus { outline: thin dotted; outline-offset: -4px; } -.entry-content .wp-block-code { +.entry .entry-content .wp-block-file * + .wp-block-file__button { + margin-right: 0.75rem; +} + +.entry .entry-content .wp-block-code { border-radius: 0; } -.entry-content .wp-block-code code { +.entry .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 { - margin-top: 0; +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-columns .wp-block-column > *:first-child { + margin-top: 0; + } + .entry .entry-content .wp-block-columns .wp-block-column > *:last-child { + margin-bottom: 0; + } + .entry .entry-content .wp-block-columns[class*='has-'] > * { + margin-left: 1rem; + } + .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child { + margin-left: 0; + } } -.entry-content .wp-block-columns .wp-block-column > *:last-child { - margin-bottom: 0; -} - -.entry-content .wp-block-columns[class*='has-'] > * { - margin-left: 1rem; -} - -.entry-content .wp-block-columns[class*='has-'] > *:last-child { - margin-left: 0; -} - -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta { +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: bold; } -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta .wp-block-latest-comments__comment-date { +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta .wp-block-latest-comments__comment-date { font-weight: normal; } -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment, -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-date, -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment, +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-date, +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { font-size: inherit; } -.entry-content .wp-block-latest-comments.has-dates .wp-block-latest-comments__comment-date { +.entry .entry-content .wp-block-latest-comments.has-dates .wp-block-latest-comments__comment-date { font-size: 0.71111em; } -.entry-content .has-primary-background-color { +.entry .entry-content .has-primary-background-color { background-color: #0073aa; } -.entry-content .has-primary-background-color p, -.entry-content .has-primary-background-color h1, -.entry-content .has-primary-background-color h2, -.entry-content .has-primary-background-color h3, -.entry-content .has-primary-background-color h4, -.entry-content .has-primary-background-color h5, -.entry-content .has-primary-background-color h6, -.entry-content .has-primary-background-color a { +.entry .entry-content .has-primary-background-color p, +.entry .entry-content .has-primary-background-color h1, +.entry .entry-content .has-primary-background-color h2, +.entry .entry-content .has-primary-background-color h3, +.entry .entry-content .has-primary-background-color h4, +.entry .entry-content .has-primary-background-color h5, +.entry .entry-content .has-primary-background-color h6, +.entry .entry-content .has-primary-background-color a { color: #fff; } @@ -3651,6 +4424,20 @@ svg { margin-bottom: calc(1.5 * 1rem); } +@media only screen and (min-width: 768px) { + .wp-caption.aligncenter { + position: relative; + right: calc( calc(8 * (100vw / 12) - 28px) / 2); + transform: translateX(50%); + } +} + +@media only screen and (min-width: 1168px) { + .wp-caption.aligncenter { + right: calc( calc(6 * (100vw / 12) - 28px) / 2); + } +} + .wp-caption img[class*="wp-image-"] { display: block; margin-right: auto; @@ -3679,7 +4466,7 @@ svg { .gallery-item { display: inline-block; - padding-left: 1rem; + margin-left: 1rem; margin-bottom: 1rem; text-align: center; vertical-align: top; @@ -3687,35 +4474,67 @@ svg { } .gallery-columns-2 .gallery-item { - max-width: calc( ( 12 / 2 ) * (100% / 12)); + max-width: calc( ( 12 / 2 ) * (100% / 12) - ( 1rem * 0.5 )); +} + +.gallery-columns-2 .gallery-item:nth-of-type(2n+2) { + margin-left: 0; } .gallery-columns-3 .gallery-item { - max-width: calc( ( 12 / 3 ) * (100% / 12)); + max-width: calc( ( 12 / 3 ) * (100% / 12) - ( 1rem * 0.66667 )); +} + +.gallery-columns-3 .gallery-item:nth-of-type(3n+3) { + margin-left: 0; } .gallery-columns-4 .gallery-item { - max-width: calc( ( 12 / 4 ) * (100% / 12)); + max-width: calc( ( 12 / 4 ) * (100% / 12) - ( 1rem * 0.75 )); +} + +.gallery-columns-4 .gallery-item:nth-of-type(4n+4) { + margin-left: 0; } .gallery-columns-5 .gallery-item { - max-width: calc( ( 12 / 5 ) * (100% / 12)); + max-width: calc( ( 12 / 5 ) * (100% / 12) - ( 1rem * 0.8 )); +} + +.gallery-columns-5 .gallery-item:nth-of-type(5n+5) { + margin-left: 0; } .gallery-columns-6 .gallery-item { - max-width: calc( ( 12 / 6 ) * (100% / 12)); + max-width: calc( ( 12 / 6 ) * (100% / 12) - ( 1rem * 0.83333 )); +} + +.gallery-columns-6 .gallery-item:nth-of-type(6n+6) { + margin-left: 0; } .gallery-columns-7 .gallery-item { - max-width: calc( ( 12 / 7 ) * (100% / 12)); + max-width: calc( ( 12 / 7 ) * (100% / 12) - ( 1rem * 0.85714 )); +} + +.gallery-columns-7 .gallery-item:nth-of-type(7n+7) { + margin-left: 0; } .gallery-columns-8 .gallery-item { - max-width: calc( ( 12 / 8 ) * (100% / 12)); + max-width: calc( ( 12 / 8 ) * (100% / 12) - ( 1rem * 0.875 )); +} + +.gallery-columns-8 .gallery-item:nth-of-type(8n+8) { + margin-left: 0; } .gallery-columns-9 .gallery-item { - max-width: calc( ( 12 / 9 ) * (100% / 12)); + max-width: calc( ( 12 / 9 ) * (100% / 12) - ( 1rem * 0.88889 )); +} + +.gallery-columns-9 .gallery-item:nth-of-type(9n+9) { + margin-left: 0; } .gallery-item:last-of-type { diff --git a/src/wp-content/themes/twentynineteen/style.css b/src/wp-content/themes/twentynineteen/style.css index 725ba0f3a0..257452f95d 100644 --- a/src/wp-content/themes/twentynineteen/style.css +++ b/src/wp-content/themes/twentynineteen/style.css @@ -56,7 +56,9 @@ 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. */ +/* Fallback for non-latin fonts */ /* Calculates maximum width for post content */ +/* Nested sub-menu padding: 10 levels deep */ /* Normalize */ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document @@ -134,8 +136,7 @@ abbr[title] { /* 1 */ text-decoration: underline; /* 2 */ - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; /* 2 */ } @@ -420,9 +421,38 @@ textarea { text-rendering: optimizeLegibility; } +.author-description .author-link, +.comment-metadata, +.comment-reply-link, +.comments-title, +.comment-author .fn, +.discussion-meta-info, +.entry-meta, +.entry-footer, +.main-navigation, +.no-comments, +.not-found .page-title, +.error-404 .page-title, +.post-navigation .post-title, +.page-links, +.page-description, +.pagination .nav-links, +.sticky-post, +.site-title, +.site-info, +#cancel-comment-reply-link, +img:after, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +} + .main-navigation, .page-description, -h2.author-title, .author-description .author-link, .not-found .page-title, .error-404 .page-title, @@ -432,8 +462,12 @@ h2.author-title, .comment-author .fn, .no-comments, .site-title, -h1, h2, h3, h4, h5, h6 { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +h1, +h2, +h3, +h4, +h5, +h6 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; @@ -441,21 +475,6 @@ h1, h2, h3, h4, h5, h6 { -moz-osx-font-smoothing: grayscale; } -.site-info, -.page-description, -.post-navigation .post-title, -.comment-metadata, -.discussion-meta-info, -.entry-meta, -.entry-footer, -.comment-reply-link, -#cancel-comment-reply-link, -img:after, -.page-links, -.sticky-post { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -} - .page-title { font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; } @@ -558,18 +577,14 @@ h6 { .error-404 .page-title, .comments-title, blockquote { - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; + hyphens: auto; word-break: break-word; } /* Do not hyphenate entry title on tablet view and bigger. */ @media only screen and (min-width: 768px) { .entry-title { - -webkit-hyphens: none; - -ms-hyphens: none; - hyphens: none; + hyphens: none; } } @@ -578,7 +593,10 @@ p { -moz-osx-font-smoothing: grayscale; } -dfn, cite, em, i { +dfn, +cite, +em, +i { font-style: italic; } @@ -595,7 +613,10 @@ pre { overflow: auto; } -code, kbd, tt, var { +code, +kbd, +tt, +var { font-size: 0.88889em; font-family: Menlo, monaco, Consolas, Lucida Console, monospace; } @@ -605,7 +626,8 @@ abbr, acronym { cursor: help; } -mark, ins { +mark, +ins { background: #fff9c0; text-decoration: none; } @@ -626,17 +648,100 @@ a:focus { text-decoration: underline; } +/* Arabic */ +html[lang="ar"] .site *, +html[lang="ary"] .site *, +html[lang="azb"] .site *, +html[lang="ckb"] .site *, +html[lang="fa-IR"] .site *, +html[lang="haz"] .site *, +html[lang="ps"] .site * { + font-family: Tahoma, Arial, sans-serif !important; +} + +/* Cyrillic */ +html[lang="be"] .site *, +html[lang="bg-BG"] .site *, +html[lang="kk"] .site *, +html[lang="mk-MK"] .site *, +html[lang="mn"] .site *, +html[lang="ru-RU"] .site *, +html[lang="sah"] .site *, +html[lang="sr-RS"] .site *, +html[lang="tt-RU"] .site *, +html[lang="uk"] .site * { + font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif !important; +} + +/* Chinese (Hong Kong) */ +html[lang="zh-HK"] .site * { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; +} + +/* Chinese (Taiwan) */ +html[lang="zh-TW"] .site * { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; +} + +/* Chinese (China) */ +html[lang="zh-CN"] .site * { + font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; +} + +/* Devanagari */ +html[lang="bn-BD"] .site *, +html[lang="hi-IN"] .site *, +html[lang="mr"] .site *, +html[lang="ne-NP"] .site * { + font-family: Arial, sans-serif !important; +} + +/* Greek */ +html[lang="el"] .site * { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; +} + +/* Gujarati */ +html[lang="gu"] .site * { + font-family: Arial, sans-serif !important; +} + +/* Hebrew */ +html[lang="he-IL"] .site * { + font-family: 'Arial Hebrew', Arial, sans-serif !important; +} + +/* Japanese */ +html[lang="ja"] .site * { + font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important; +} + +/* Korean */ +html[lang="ko-KR"] .site * { + font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans-serif !important; +} + +/* Thai */ +html[lang="th"] .site * { + font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif !important; +} + +/* Vietnamese */ +html[lang="vi"] .site * { + font-family: 'Libre Franklin', sans-serif !important; +} + /* Elements */ html { box-sizing: border-box; } ::-moz-selection { - background: #bfdcea; + background-color: #bfdcea; } ::selection { - background: #bfdcea; + background-color: #bfdcea; } *, @@ -646,7 +751,7 @@ html { } body { - background: #fff; + background-color: #fff; } a { @@ -667,12 +772,18 @@ a:focus { text-decoration: underline; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { clear: both; margin: 1rem 0; } -h1:not(.site-title):before, h2:before { +h1:not(.site-title):before, +h2:before { background: #767676; content: "\020"; display: block; @@ -747,11 +858,15 @@ blockquote cite { table { margin: 0 0 1rem; + border-collapse: collapse; width: 100%; } -table td, table th { - border-color: #767676; +table td, +table th { + padding: 0.5em; + border: 1px solid #767676; + word-break: break-all; } /* Forms */ @@ -893,10 +1008,14 @@ a:focus { display: block; margin-top: 0.25rem; /* + * Sub-menu styles + * * :focus-within needs its own selector so other similar * selectors don’t get ignored if a browser doesn’t recognize it */ - /* Only show one submenu expand button at a time (desktop vs mobile) */ + /** + * Full-screen touch device styles + */ } body.page .main-navigation { @@ -908,7 +1027,7 @@ body.page .main-navigation { } .main-navigation .main-menu { - display: inline; + display: inline-block; margin: 0; padding: 0; } @@ -916,12 +1035,7 @@ body.page .main-navigation { .main-navigation .main-menu > li { color: #0073aa; display: inline; -} - -@media only screen and (min-width: 768px) { - .main-navigation .main-menu > li { - position: relative; - } + position: relative; } .main-navigation .main-menu > li > a { @@ -941,6 +1055,13 @@ body.page .main-navigation { .main-navigation .main-menu > li.menu-item-has-children { display: inline-block; + position: inherit; +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu > li.menu-item-has-children { + position: relative; + } } .main-navigation .main-menu > li.menu-item-has-children > a { @@ -953,28 +1074,48 @@ body.page .main-navigation { display: none; } -.main-navigation .main-menu > li.menu-item-has-children .mobile-submenu-expand svg, -.main-navigation .main-menu > li.menu-item-has-children .desktop-submenu-expand svg { +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand { + display: inline-block; + margin-right: 0.5rem; + /* Priority+ Menu */ +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand.main-menu-more-toggle { + position: relative; + height: 24px; + line-height: 1.2; + width: 24px; + padding: 0; + margin-left: 0.5rem; +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand.main-menu-more-toggle svg { + height: 24px; + width: 24px; + top: -0.125rem; + vertical-align: text-bottom; +} + +.main-navigation .main-menu > li.menu-item-has-children .submenu-expand svg { position: relative; top: 0.2rem; } -.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; -} - -.main-navigation .main-menu > li:last-child > a { +.main-navigation .main-menu > li:last-child > a, +.main-navigation .main-menu > li:last-child.menu-item-has-children .submenu-expand { margin-right: 0; } +.main-navigation .main-menu .is-hidden { + display: none; +} + .main-navigation .sub-menu { - background: #0073aa; + background-color: #0073aa; color: #fff; list-style: none; padding-left: 0; display: none; - float: left; position: absolute; opacity: 0; left: -999px; @@ -983,23 +1124,21 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .main-navigation .sub-menu { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - max-width: calc(3 * (100vw / 12)); + width: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; } } .main-navigation .sub-menu > li { - clear: both; display: block; float: none; position: relative; - word-break: break-word; } -.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand, -.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand { +.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand { + display: inline-block; position: absolute; width: calc( 24px + 1rem); right: 0; @@ -1010,13 +1149,11 @@ body.page .main-navigation { padding: calc( .5 * 1rem); } -.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand svg, -.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand svg { +.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand svg { top: 0; } -.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand, -.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand { +.main-navigation .sub-menu > li.menu-item-has-children .submenu-expand { margin-right: 0; } @@ -1026,18 +1163,24 @@ body.page .main-navigation { } } -.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand) { +.main-navigation .sub-menu > li > a, +.main-navigation .sub-menu > li > .menu-item-link-return { color: #fff; display: block; line-height: 1.2; padding: calc( .5 * 1rem) calc( 24px + 1rem) calc( .5 * 1rem) 1rem; + white-space: nowrap; } -.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):hover, .main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):focus { +.main-navigation .sub-menu > li > a:hover, .main-navigation .sub-menu > li > a:focus, +.main-navigation .sub-menu > li > .menu-item-link-return:hover, +.main-navigation .sub-menu > li > .menu-item-link-return:focus { background: #005177; } -.main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):hover:after, .main-navigation .sub-menu > li > a:not(.mobile-submenu-expand):focus:after { +.main-navigation .sub-menu > li > a:hover:after, .main-navigation .sub-menu > li > a:focus:after, +.main-navigation .sub-menu > li > .menu-item-link-return:hover:after, +.main-navigation .sub-menu > li > .menu-item-link-return:focus:after { background: #005177; } @@ -1053,45 +1196,31 @@ body.page .main-navigation { margin-right: calc( .25 * 1rem); } -.main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu { +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu { display: block; left: 0; margin-top: 0; opacity: 1; - width: calc( 100vw - 2rem); -} - -.main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu { - margin-top: inherit; - position: relative; - padding-left: 1rem; -} - -@media only screen and (min-width: 768px) { - .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu { - padding-left: 0; - position: absolute; - left: 100%; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - top: 0; - } -} - -.main-navigation .main-menu .menu-item-has-children:hover > .sub-menu, -.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 { + width: auto; + min-width: 100%; /* Non-mobile position */ + /* Nested sub-menu padding: 10 levels deep */ +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { + display: block; + left: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + /* Non-mobile position */ + /* Nested sub-menu padding: 10 levels deep */ } @media only screen and (min-width: 768px) { - .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu, - .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; + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu { + display: block; margin-top: 0; opacity: 1; position: absolute; @@ -1100,28 +1229,343 @@ body.page .main-navigation { top: auto; bottom: auto; height: auto; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; transform: none; - animation: fade_in 0.1s forwards; } + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { + display: block; + margin-top: 0; + opacity: 1; + position: absolute; + left: 0; + right: auto; + top: auto; + bottom: auto; + height: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + transform: none; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; } @media only screen and (min-width: 768px) { - .main-navigation .main-menu .menu-item-has-children:hover > .sub-menu .sub-menu, - .main-navigation .main-menu .menu-item-has-children:focus > .sub-menu .sub-menu, - .main-navigation .main-menu .menu-item-has-children .sub-menu:hover .sub-menu, - .main-navigation .main-menu .menu-item-has-children .sub-menu:focus .sub-menu { - margin-top: inherit; - padding-left: 0; - position: absolute; - left: 100%; - top: 0; + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links { + right: 0; + left: auto; + display: block; + width: max-content; + } + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links { + right: 0; + left: auto; + display: block; + width: max-content; } } -.main-navigation .main-menu .menu-item-has-children.focus .sub-menu.expanded-true { +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .submenu-expand { + display: none; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand { + display: none; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + /* Non-mobile position */ +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + /* Non-mobile position */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu { + float: none; + max-width: 100%; + } + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu { + float: none; + max-width: 100%; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu > li > a:before { + content: "\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a:before { + content: "\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { + display: block; + left: 0; + margin-top: 0; + opacity: 1; + width: auto; + min-width: 100%; + /* Non-mobile position */ + /* Nested sub-menu padding: 10 levels deep */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, + .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { + display: block; + float: none; + margin-top: 0; + opacity: 1; + position: absolute; + left: 0; + right: auto; + top: auto; + bottom: auto; + height: auto; + min-width: -moz-max-content; + min-width: -webkit-max-content; + min-width: max-content; + transform: none; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu.hidden-links, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu.hidden-links, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu.hidden-links { + left: 0; + width: 100%; + display: table; + position: absolute; +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu.hidden-links, + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu.hidden-links, + .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu.hidden-links { + right: 0; + left: auto; + display: table; + width: max-content; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .submenu-expand, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .submenu-expand, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .submenu-expand { + display: none; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu { + display: block; + margin-top: inherit; + position: relative; + width: 100%; + left: 0; + opacity: 1; + /* Non-mobile position */ +} + +@media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu, + .main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu, + .main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu { + float: none; + max-width: 100%; + } +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu > li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu > li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu > li > a:before { + content: "\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before, +.main-navigation .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu { + animation: fade_in 0.1s forwards; +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu .submenu-expand .svg-icon { + transform: rotate(270deg); +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu .sub-menu { + opacity: 0; + position: absolute; + z-index: 0; + transform: translateX(-100%); +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li:hover, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li:focus, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li > a:hover, +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu li > a:focus { + background-color: transparent; +} + +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true { display: table; margin-top: 0; opacity: 1; @@ -1134,37 +1578,39 @@ body.page .main-navigation { position: fixed; z-index: 100000; /* Make sure appears above mobile admin bar */ - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; + max-width: 100vw; transform: translateX(100%); animation: slide_in_right 0.3s forwards; + /* Prevent menu from being blocked by admin bar */ } -.main-navigation .main-menu .menu-item-has-children.focus .sub-menu.expanded-true > .mobile-parent-nav-menu-item { - display: inline-block; +.main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true > .mobile-parent-nav-menu-item { + display: block; } -.main-navigation .desktop-submenu-expand { - display: none; +.admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true { + top: 46px; + height: calc( 100vh - 46px); + /* WP core breakpoint */ } -@media only screen and (min-width: 768px) { - .main-navigation .desktop-submenu-expand { - display: inline-block; +.admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true .sub-menu.expanded-true { + top: 0; +} + +@media only screen and (min-width: 782px) { + .admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true { + top: 32px; + height: calc( 100vh - 32px); + } + .admin-bar .main-navigation .main-menu .menu-item-has-children.off-canvas .sub-menu.expanded-true .sub-menu.expanded-true { + top: 0; } } -.main-navigation .mobile-submenu-expand { - display: inline-block; -} - -@media only screen and (min-width: 768px) { - .main-navigation .mobile-submenu-expand { - display: none; - } -} - -/* Menu Animation */ +/* Menu animation */ @keyframes slide_in_right { 100% { transform: translateX(0%); @@ -1235,6 +1681,25 @@ body.page .main-navigation { transform: rotate(-45deg); } +/** === Footer menu === */ +.footer-navigation { + display: inline; +} + +.footer-navigation > div { + display: inline; +} + +.footer-navigation .footer-menu { + display: inline; + padding-left: 0; +} + +.footer-navigation .footer-menu li { + display: inline; + margin-right: 1rem; +} + /*-------------------------------------------------------------- ## Next / Previous --------------------------------------------------------------*/ @@ -1245,7 +1710,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .post-navigation { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); + margin: calc(3 * 1rem) calc(10% + 60px); max-width: calc(6 * (100vw / 12)); } } @@ -1273,17 +1738,14 @@ body.page .main-navigation { @media only screen and (min-width: 1168px) { .post-navigation .nav-links { flex-direction: row; - margin: 0 calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + margin: 0 calc(10% + 60px); + max-width: calc(6 * (100vw / 12) - 28px); } } .post-navigation .nav-links a .meta-nav { color: #767676; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + user-select: none; } .post-navigation .nav-links a .meta-nav:before, .post-navigation .nav-links a .meta-nav:after { @@ -1295,9 +1757,7 @@ body.page .main-navigation { } .post-navigation .nav-links a .post-title { - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; + hyphens: auto; } .post-navigation .nav-links a:hover { @@ -1362,6 +1822,21 @@ body.page .main-navigation { padding-right: 0; } +.pagination .nav-links a:focus { + text-decoration: underline; + outline-offset: -1px; +} + +.pagination .nav-links a:focus.prev, .pagination .nav-links a:focus.next { + text-decoration: none; +} + +.pagination .nav-links a:focus.prev .nav-prev-text, +.pagination .nav-links a:focus.prev .nav-next-text, .pagination .nav-links a:focus.next .nav-prev-text, +.pagination .nav-links a:focus.next .nav-next-text { + text-decoration: underline; +} + .pagination .nav-links .nav-next-text, .pagination .nav-links .nav-prev-text { display: none; @@ -1369,7 +1844,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .pagination .nav-links { - margin-left: calc(2 * (100vw / 12)); + margin-left: calc(10% + 60px); padding: 0; } .pagination .nav-links .prev > *, @@ -1385,14 +1860,6 @@ body.page .main-navigation { .comment-navigation .nav-links { display: flex; flex-direction: row; - margin: 0 1rem; -} - -@media only screen and (min-width: 1168px) { - .comment-navigation .nav-links { - margin: 0 calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); - } } .comment-navigation .nav-previous, @@ -1423,11 +1890,6 @@ body.page .main-navigation { top: -1px; } -.comment-navigation .nav-previous a:hover, -.comment-navigation .nav-next a:hover { - color: #0073aa; -} - .comment-navigation .nav-next { text-align: right; } @@ -1437,8 +1899,7 @@ body.page .main-navigation { .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); + clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; @@ -1454,8 +1915,7 @@ body.page .main-navigation { border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; - -webkit-clip-path: none; - clip-path: none; + clip-path: none; color: #21759b; display: block; font-size: 14px; @@ -1481,15 +1941,31 @@ body.page .main-navigation { .alignleft { /*rtl:ignore*/ float: left; + /*rtl:ignore*/ margin-right: 1rem; } +@media only screen and (min-width: 768px) { + .alignleft { + /*rtl:ignore*/ + margin-right: calc(2 * 1rem); + } +} + .alignright { /*rtl:ignore*/ float: right; + /*rtl:ignore*/ margin-left: 1rem; } +@media only screen and (min-width: 768px) { + .alignright { + /*rtl:ignore*/ + margin-left: calc(2 * 1rem); + } +} + .aligncenter { clear: both; display: block; @@ -1571,7 +2047,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .site-branding { - margin: 0 calc(2 * (100vw / 12)); + margin: 0 calc(10% + 60px); } } @@ -1585,7 +2061,7 @@ body.page .main-navigation { .site-logo { margin-bottom: 0; position: absolute; - right: calc(100% + (0.5 * 100vw / 12)); + right: calc(100% + (1.25 * 1rem)); top: 4px; z-index: 999; } @@ -1669,6 +2145,8 @@ body.page .main-navigation { } .site-header.featured-image { + /* Hide overflow for overflowing featured image */ + overflow: hidden; /* Need relative positioning to properly align layers. */ position: relative; /* Add text shadow to text, to increase readability. */ @@ -1680,12 +2158,11 @@ body.page .main-navigation { /* Make sure important elements are above pseudo elements used for effects. */ /* Set up image filter layer positioning */ /* Background & Effects */ - /* Shared background settings between pseudo elements. See .site-branding-container */ + /* Shared background settings between pseudo elements. */ background-position: center; background-repeat: no-repeat; background-size: cover; /* The intensity of each blend mode is controlled via layer opacity. */ - /* First layer: grayscale. */ /* Second layer: screen. */ /* Third layer: multiply. */ /* When image filters are inactive, a black overlay is added. */ @@ -1758,9 +2235,43 @@ body.page .main-navigation { .site-header.featured-image .social-navigation svg, .site-header.featured-image .site-featured-image svg { /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ + -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); } +.site-header.featured-image .site-featured-image { + /* First layer: grayscale. */ +} + +.site-header.featured-image .site-featured-image .post-thumbnail img { + height: auto; + left: 50%; + max-width: 1000%; + min-height: 100%; + min-width: 100vw; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%); + width: auto; + z-index: 1; + /* When image filters are active, make it grayscale to colorize it blue. */ +} + +@supports (object-fit: cover) { + .site-header.featured-image .site-featured-image .post-thumbnail img { + height: 100%; + left: 0; + object-fit: cover; + top: 0; + transform: none; + width: 100%; + } +} + +.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img { + filter: grayscale(100%); +} + .site-header.featured-image .site-featured-image .entry-header { margin-top: calc( 4 * 1rem); margin-bottom: 0; @@ -1771,8 +2282,8 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .site-header.featured-image .site-featured-image .entry-header { - margin-left: calc(2 * (100vw / 12)); - margin-right: calc(2 * (100vw / 12)); + margin-left: calc(10% + 60px); + margin-right: calc(10% + 60px); } } @@ -1851,7 +2362,6 @@ body.page .main-navigation { z-index: 9; } -.site-header.featured-image .site-branding-container:before, .site-header.featured-image .site-branding-container:after, .site-header.featured-image .site-featured-image:before, .site-header.featured-image .site-featured-image:after, .site-header.featured-image:after { @@ -1864,18 +2374,6 @@ body.page .main-navigation { height: 100%; } -.site-header.featured-image .site-branding-container:before { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - z-index: 1; - /* When image filters are active, make it grayscale to colorize it blue. */ -} - -.image-filters-enabled .site-header.featured-image .site-branding-container:before { - filter: grayscale(100%); -} - .image-filters-enabled .site-header.featured-image .site-featured-image:before { background: #0073aa; mix-blend-mode: screen; @@ -1991,7 +2489,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry .entry-header { - margin: calc(3 * 1rem) calc(2 * (100vw / 12 )) 1rem; + margin: calc(3 * 1rem) calc(10% + 60px) 1rem; } } @@ -2063,14 +2561,14 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry .entry-footer { - margin: 1rem calc(2 * (100vw / 12)) calc(3 * 1rem); - max-width: calc(8 * (100vw / 12)); + margin: 1rem calc(10% + 60px) calc(3 * 1rem); + max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 768px) { .entry .entry-footer { - max-width: calc(6 * (100vw / 12)); + max-width: calc(6 * (100vw / 12) - 28px); } } @@ -2080,7 +2578,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry .post-thumbnail { - margin: 1rem calc(2 * (100vw / 12)); + margin: 1rem calc(10% + 60px); } } @@ -2158,6 +2656,21 @@ body.page .main-navigation { } } +.entry .entry-content, +.entry .entry-summary { + max-width: calc(100% - (2 * 1rem)); + margin: 0 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content, + .entry .entry-summary { + max-width: 80%; + margin: 0 10%; + padding: 0 60px; + } +} + .entry .entry-content p { word-wrap: break-word; } @@ -2187,36 +2700,40 @@ body.page .main-navigation { } .entry .entry-content > iframe[style] { - margin: 32px 1rem !important; - max-width: calc(100vw - (2 * 1rem)) !important; + margin: 32px 0 !important; + max-width: 100% !important; } @media only screen and (min-width: 768px) { .entry .entry-content > iframe[style] { - margin: 32px calc(2 * (100vw / 12)) !important; - max-width: calc(8 * (100vw / 12)) !important; + max-width: calc(8 * (100vw / 12) - 28px) !important; } } @media only screen and (min-width: 1168px) { .entry .entry-content > iframe[style] { - max-width: calc(6 * (100vw / 12)) !important; + max-width: calc(6 * (100vw / 12) - 28px) !important; } } +.entry .entry-content .page-links a { + margin: calc(0.5 * 1rem); + text-decoration: none; +} + .entry .entry-content .wp-audio-shortcode { max-width: calc(100vw - (2 * 1rem)); } @media only screen and (min-width: 768px) { .entry .entry-content .wp-audio-shortcode { - max-width: calc(8 * (100vw / 12)); + max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 1168px) { .entry .entry-content .wp-audio-shortcode { - max-width: calc(6 * (100vw / 12)); + max-width: calc(6 * (100vw / 12) - 28px); } } @@ -2227,14 +2744,25 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .author-bio { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .author-bio { + max-width: calc(6 * (100vw / 12) - 28px); } } @media only screen and (min-width: 768px) { .author-bio { - max-width: calc(6 * (100vw / 12)); + margin: calc(3 * 1rem) calc(10% + 60px); + } +} + +@media only screen and (min-width: 1168px) { + .author-bio { + margin: calc(3 * 1rem) calc(10% + 60px); } } @@ -2279,36 +2807,44 @@ body.page .main-navigation { } .comments-area { + margin: calc(2 * 1rem) 1rem; /* Add extra margin when the comments section is located immediately after the * post itself (this happens on pages). */ } -.entry + .comments-area { - margin-top: calc(3 * 1rem); -} - -.comments-area .comment-list, -.comments-area .comment-navigation, -.comments-area > .comment-respond, -.comments-area .comment-form-flex, -.comments-area .no-comments { - margin: calc(2 * 1rem) 1rem; -} - @media only screen and (min-width: 768px) { - .comments-area .comment-list, - .comments-area .comment-navigation, - .comments-area > .comment-respond, - .comments-area .comment-form-flex, - .comments-area .no-comments { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); - max-width: calc(6 * (100vw / 12)); + .comments-area { + max-width: calc(8 * (100vw / 12) - 28px); } } -.comments-area .comments-title-wrap { - margin: calc(2 * 1rem) 1rem; +@media only screen and (min-width: 1168px) { + .comments-area { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 768px) { + .comments-area { + margin: calc(3 * 1rem) calc(10% + 60px); + } +} + +.comments-area > * { + margin-top: calc(2 * 1rem); + margin-bottom: calc(2 * 1rem); +} + +@media only screen and (min-width: 768px) { + .comments-area > * { + margin-top: calc(3 * 1rem); + margin-bottom: calc(3 * 1rem); + } +} + +.entry + .comments-area { + margin-top: calc(3 * 1rem); } @media only screen and (min-width: 768px) { @@ -2316,8 +2852,6 @@ body.page .main-navigation { align-items: baseline; display: flex; justify-content: space-between; - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); } } @@ -2410,15 +2944,18 @@ body.page .main-navigation { margin-top: 0; } -.comment-list .pingback .comment-body { +.comment-list .pingback .comment-body, +.comment-list .trackback .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-top: 1rem; margin-bottom: 1rem; } -.comment-list .pingback .comment-body a:not(.comment-edit-link) { +.comment-list .pingback .comment-body a:not(.comment-edit-link), +.comment-list .trackback .comment-body a:not(.comment-edit-link) { font-weight: bold; font-size: 19.55556px; line-height: 1.5; @@ -2426,18 +2963,13 @@ body.page .main-navigation { display: block; } -.comment-list .pingback .comment-body .comment-edit-link { +.comment-list .pingback .comment-body .comment-edit-link, +.comment-list .trackback .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; - position: absolute; -} - #respond + .comment-reply { display: none; } @@ -2455,32 +2987,23 @@ body.page .main-navigation { .comment { padding-left: calc(.5 * (1rem + calc(100vw / 12 ))); } + .comment.depth-1, .comment .children { padding-left: 0; } + .comment.depth-1 { + margin-left: calc(3.25 * 1rem); + } } .comment .comment-body { - margin: calc(2 * 1rem) 0; + margin: calc(2 * 1rem) 0 0; } .comment .comment-meta { position: relative; } -@media only screen and (min-width: 768px) { - .comment .comment-meta { - display: flex; - } -} - -@media only screen and (min-width: 768px) { - .comment .comment-author { - flex: 0 0 auto; - vertical-align: baseline; - } -} - .comment .comment-author .avatar { float: left; margin-right: 1rem; @@ -2502,13 +3025,6 @@ body.page .main-navigation { display: block; } -@media only screen and (min-width: 768px) { - .comment .comment-author .fn { - display: inline-block; - vertical-align: baseline; - } -} - .comment .comment-author .fn a { color: inherit; } @@ -2542,18 +3058,9 @@ body.page .main-navigation { transform: scale(0.875); } -@media only screen and (min-width: 768px) { - .comment .comment-metadata { - flex: 1 0 auto; - margin-left: 1rem; - position: relative; - vertical-align: baseline; - } -} - .comment .comment-metadata > a, .comment .comment-metadata .comment-edit-link { - display: inline-block; + display: inline; font-weight: 500; color: #767676; vertical-align: baseline; @@ -2566,7 +3073,7 @@ body.page .main-navigation { .comment .comment-metadata > a:hover, .comment .comment-metadata .comment-edit-link:hover { - color: #4a4a4a; + color: #005177; text-decoration: none; } @@ -2605,6 +3112,12 @@ body.page .main-navigation { margin: 1rem 0; } +@media only screen and (min-width: 1168px) { + .comment .comment-content { + padding-right: 1rem; + } +} + .comment .comment-content > *:first-child { margin-top: 0; } @@ -2613,6 +3126,10 @@ body.page .main-navigation { margin-bottom: 0; } +.comment .comment-content blockquote { + margin-left: 0; +} + .comment .comment-content a { text-decoration: underline; } @@ -2704,8 +3221,7 @@ body.page .main-navigation { .archive .page-header, .search .page-header, .error404 .page-header { - margin: 0 calc(2 * (100vw / 12)) calc(3 * 1rem); - max-width: calc(8 * (100vw / 12)); + margin: 0 calc(10% + 60px) calc(10% + 60px); } } @@ -2752,7 +3268,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .hfeed .entry .entry-header { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)) calc(1rem / 2); + margin: calc(3 * 1rem) calc(10% + 60px) calc(1rem / 2); } } @@ -2765,7 +3281,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .error-404.not-found .page-content, .no-results.not-found .page-content { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)) calc(1rem / 2); + margin: calc(3 * 1rem) calc(10% + 60px) calc(1rem / 2); } } @@ -2792,8 +3308,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { #colophon .widget-area, #colophon .site-info { - margin: calc(3 * 1rem) calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + margin: calc(3 * 1rem) calc(10% + 60px); } } @@ -2850,8 +3365,11 @@ body.page .main-navigation { } .widget_archive ul, -.widget_nav_menu ul, +.widget_categories ul, .widget_meta ul, +.widget_nav_menu ul, +.widget_pages ul, +.widget_recent_comments ul, .widget_recent_entries ul, .widget_rss ul { padding: 0; @@ -2859,39 +3377,136 @@ body.page .main-navigation { } .widget_archive ul li, -.widget_nav_menu ul li, +.widget_categories ul li, .widget_meta ul li, +.widget_nav_menu ul li, +.widget_pages ul li, +.widget_recent_comments ul li, .widget_recent_entries ul li, .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.125); - font-weight: bold; + font-weight: 700; line-height: 1.2; + margin-top: 0.5rem; + margin-bottom: 0.5rem; } -.widget_archive ul li:not(.menu-item-has-children), -.widget_nav_menu ul li:not(.menu-item-has-children), -.widget_meta ul li:not(.menu-item-has-children), -.widget_recent_entries ul li:not(.menu-item-has-children), -.widget_rss ul li:not(.menu-item-has-children) { - padding-bottom: 0.75rem; +.widget_archive ul ul li > a:before, +.widget_categories ul ul li > a:before, +.widget_meta ul ul li > a:before, +.widget_nav_menu ul ul li > a:before, +.widget_pages ul ul li > a:before, +.widget_recent_comments ul ul li > a:before, +.widget_recent_entries ul ul li > a:before, +.widget_rss ul ul li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; } -.widget_archive ul li ul, -.widget_nav_menu ul li ul, -.widget_meta ul li ul, -.widget_recent_entries ul li ul, -.widget_rss ul li ul { - padding-left: 1rem; +.widget_archive ul ul > li > a:before, +.widget_categories ul ul > li > a:before, +.widget_meta ul ul > li > a:before, +.widget_nav_menu ul ul > li > a:before, +.widget_pages ul ul > li > a:before, +.widget_recent_comments ul ul > li > a:before, +.widget_recent_entries ul ul > li > a:before, +.widget_rss ul ul > li > a:before { + content: "\2013\00a0"; } -.widget_archive ul.sub-menu, -.widget_nav_menu ul.sub-menu, -.widget_meta ul.sub-menu, -.widget_recent_entries ul.sub-menu, -.widget_rss ul.sub-menu { - padding-top: 0.75rem; +.widget_archive ul ul ul li > a:before, +.widget_categories ul ul ul li > a:before, +.widget_meta ul ul ul li > a:before, +.widget_nav_menu ul ul ul li > a:before, +.widget_pages ul ul ul li > a:before, +.widget_recent_comments ul ul ul li > a:before, +.widget_recent_entries ul ul ul li > a:before, +.widget_rss ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul li > a:before, +.widget_categories ul ul ul ul li > a:before, +.widget_meta ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul li > a:before, +.widget_pages ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul li > a:before, +.widget_rss ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_archive ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_categories ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_meta ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_nav_menu ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_pages ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_comments ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_recent_entries ul ul ul ul ul ul ul ul ul ul li > a:before, +.widget_rss ul ul ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.widget_tag_cloud .tagcloud { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-weight: 700; } .widget_search .search-submit { @@ -2899,175 +3514,240 @@ body.page .main-navigation { margin-top: 1rem; } +.widget_calendar .calendar_wrap { + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +} + +.widget_calendar .calendar_wrap table td, +.widget_calendar .calendar_wrap table th { + border: none; +} + +.widget_calendar .calendar_wrap a { + text-decoration: underline; +} + /* Blocks */ /* !Block styles */ -.entry-content > *, -.entry-summary > * { - max-width: calc(100vw - (2 * 1rem)); - margin: 32px 1rem; - /* - // Set top margins for headings - & + h1:before, - & + h2:before, - & + h3, - & + h4, - & + h5, - & + h6 { - margin-top: calc(4 * 1rem); - } -*/ +.entry .entry-content > *, +.entry .entry-summary > * { + margin: 32px 0; + max-width: 100%; } @media only screen and (min-width: 768px) { - .entry-content > *, - .entry-summary > * { - max-width: calc(8 * (100vw / 12)); + .entry .entry-content > *, + .entry .entry-summary > * { + max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 1168px) { - .entry-content > *, - .entry-summary > * { - max-width: calc(6 * (100vw / 12)); + .entry .entry-content > *, + .entry .entry-summary > * { + max-width: calc(6 * (100vw / 12) - 28px); } } @media only screen and (min-width: 768px) { - .entry-content > *, - .entry-summary > * { - margin: 32px calc(2 * (100vw / 12)); + .entry .entry-content > *, + .entry .entry-summary > * { + margin: 32px 0; } } -.entry-content > * > *:first-child, -.entry-summary > * > *:first-child { +.entry .entry-content > * > *:first-child, +.entry .entry-summary > * > *:first-child { margin-top: 0; } -.entry-content > * > *:last-child, -.entry-summary > * > *:last-child { +.entry .entry-content > * > *:last-child, +.entry .entry-summary > * > *:last-child { margin-bottom: 0; } -.entry-content > *.alignwide, -.entry-summary > *.alignwide { +.entry .entry-content > *.alignwide, +.entry .entry-summary > *.alignwide { margin-left: auto; margin-right: auto; + clear: both; } @media only screen and (min-width: 768px) { - .entry-content > *.alignwide, - .entry-summary > *.alignwide { - margin-left: calc(2 * (100vw / 12)); - margin-right: calc(2 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + .entry .entry-content > *.alignwide, + .entry .entry-summary > *.alignwide { + width: 100%; + max-width: 100%; } } -.entry-content > *.alignfull, -.entry-summary > *.alignfull { - margin-top: calc(2 * 1rem); - margin-right: 0; - margin-bottom: calc(2 * 1rem); - margin-left: 0; - max-width: 100%; -} - -.entry-content > *.alignleft, -.entry-summary > *.alignleft { - float: left; - max-width: calc(5 * (100vw / 12)); - margin-top: 0; +.entry .entry-content > *.alignfull, +.entry .entry-summary > *.alignfull { + position: relative; + left: -1rem; + width: calc( 100% + (2 * 1rem)); + max-width: calc( 100% + (2 * 1rem)); + clear: both; } @media only screen and (min-width: 768px) { - .entry-content > *.alignleft, - .entry-summary > *.alignleft { + .entry .entry-content > *.alignfull, + .entry .entry-summary > *.alignfull { + margin-top: calc(2 * 1rem); + margin-bottom: calc(2 * 1rem); + left: calc( -12.5% - 75px); + width: calc( 125% + 150px); + max-width: calc( 125% + 150px); + } +} + +.entry .entry-content > *.alignleft, +.entry .entry-summary > *.alignleft { + /*rtl:ignore*/ + float: left; + max-width: calc(5 * (100vw / 12)); + margin-top: 0; + margin-left: 0; + /*rtl:ignore*/ + margin-right: 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content > *.alignleft, + .entry .entry-summary > *.alignleft { max-width: calc(4 * (100vw / 12)); + /*rtl:ignore*/ margin-right: calc(2 * 1rem); } } @media only screen and (min-width: 1168px) { - .entry-content > *.alignleft, - .entry-summary > *.alignleft { + .entry .entry-content > *.alignleft, + .entry .entry-summary > *.alignleft { max-width: calc(3 * (100vw / 12)); } } -.entry-content > *.alignright, -.entry-summary > *.alignright { +.entry .entry-content > *.alignright, +.entry .entry-summary > *.alignright { + /*rtl:ignore*/ float: right; max-width: calc(5 * (100vw / 12)); margin-top: 0; + margin-right: 0; + /*rtl:ignore*/ margin-left: 1rem; - margin-right: 1rem; } @media only screen and (min-width: 768px) { - .entry-content > *.alignright, - .entry-summary > *.alignright { + .entry .entry-content > *.alignright, + .entry .entry-summary > *.alignright { max-width: calc(4 * (100vw / 12)); + margin-right: 0; + /*rtl:ignore*/ margin-left: calc(2 * 1rem); - margin-right: calc(2 * (100vw / 12)); } } -.entry-content > *.aligncenter, -.entry-summary > *.aligncenter { +.entry .entry-content > *.aligncenter, +.entry .entry-summary > *.aligncenter { margin-left: auto; margin-right: auto; } -@media only screen and (min-width: 1168px) { - .entry-content > *.aligncenter, - .entry-summary > *.aligncenter { - margin-left: calc(2 * (100vw / 12)); - margin-right: calc(2 * (100vw / 12)); - max-width: calc(10 * (100vw / 12)); - position: relative; - left: 25%; - transform: translate(-50%); +@media only screen and (min-width: 768px) { + .entry .entry-content > *.aligncenter, + .entry .entry-summary > *.aligncenter { + max-width: calc(8 * (100vw / 12) - 28px); } } -.entry-content .wp-block-audio { - width: 100%; -} - -.entry-content .wp-block-audio audio { - width: 100%; -} - -.entry-content .wp-block-audio.alignleft audio, -.entry-content .wp-block-audio.alignright audio { - max-width: 190px; +@media only screen and (min-width: 1168px) { + .entry .entry-content > *.aligncenter, + .entry .entry-summary > *.aligncenter { + max-width: calc(6 * (100vw / 12) - 28px); + } } @media only screen and (min-width: 768px) { - .entry-content .wp-block-audio.alignleft audio, - .entry-content .wp-block-audio.alignright audio { + .entry .entry-content > *.aligncenter, + .entry .entry-summary > *.aligncenter { + margin-left: 0; + margin-right: 0; + } +} + +/* + * Unset nested content selector styles + * - Prevents layout styles from cascading too deeply + * - helps with plugin compatibility + */ +.entry .entry-content .entry-content, +.entry .entry-content .entry-summary, +.entry .entry-content .entry, +.entry .entry-summary .entry-content, +.entry .entry-summary .entry-summary, +.entry .entry-summary .entry { + margin: inherit; + max-width: inherit; + padding: inherit; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .entry-content, + .entry .entry-content .entry-summary, + .entry .entry-content .entry, + .entry .entry-summary .entry-content, + .entry .entry-summary .entry-summary, + .entry .entry-summary .entry { + margin: inherit; + max-width: inherit; + padding: inherit; + } +} + +.entry .entry-content p.has-background { + padding: 20px 30px; +} + +.entry .entry-content .wp-block-audio { + width: 100%; +} + +.entry .entry-content .wp-block-audio audio { + width: 100%; +} + +.entry .entry-content .wp-block-audio.alignleft audio, +.entry .entry-content .wp-block-audio.alignright audio { + max-width: 198px; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-audio.alignleft audio, + .entry .entry-content .wp-block-audio.alignright audio { max-width: 384px; } } @media only screen and (min-width: 1379px) { - .entry-content .wp-block-audio.alignleft audio, - .entry-content .wp-block-audio.alignright audio { + .entry .entry-content .wp-block-audio.alignleft audio, + .entry .entry-content .wp-block-audio.alignright audio { max-width: 385.44px; } } -.entry-content .wp-block-audio.aligncenter { +.entry .entry-content .wp-block-audio.aligncenter { margin: 32px calc(2 * (100vw / 12)); max-width: calc(6 * (100vw / 12)); } -.entry-content .wp-block-video video { +.entry .entry-content .wp-block-video video { width: 100%; } -.entry-content .wp-block-button .wp-block-button__link { +.entry .entry-content .wp-block-button .wp-block-button__link { transition: background 150ms ease-in-out; border: none; background: #0073aa; @@ -3083,102 +3763,147 @@ body.page .main-navigation { outline: none; } -.entry-content .wp-block-button .wp-block-button__link:hover { +.entry .entry-content .wp-block-button .wp-block-button__link:hover { + background: #111; cursor: pointer; } -.entry-content .wp-block-button .wp-block-button__link:hover, .entry-content .wp-block-button .wp-block-button__link:focus { +.entry .entry-content .wp-block-button .wp-block-button__link:focus { background: #111; -} - -.entry-content .wp-block-button .wp-block-button__link:focus { outline: thin dotted; outline-offset: -4px; } -.entry-content .wp-block-button:not(.is-style-squared) .wp-block-button__link { +.entry .entry-content .wp-block-button:not(.is-style-squared) .wp-block-button__link { border-radius: 5px; } -.entry-content .wp-block-button.is-style-outline .wp-block-button__link, -.entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus, -.entry-content .wp-block-button.is-style-outline .wp-block-button__link:active { +.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link, +.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus, +.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:active { transition: all 150ms ease-in-out; background: transparent; border: 2px solid currentColor; color: #0073aa; } -.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { +.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { color: #111; } -.entry-content .wp-block-archives, -.entry-content .wp-block-categories, -.entry-content .wp-block-latest-posts { +.entry .entry-content .wp-block-archives, +.entry .entry-content .wp-block-categories, +.entry .entry-content .wp-block-latest-posts { padding: 0; list-style: none; } -.entry-content .wp-block-archives li, -.entry-content .wp-block-categories li, -.entry-content .wp-block-latest-posts li { +.entry .entry-content .wp-block-archives li, +.entry .entry-content .wp-block-categories li, +.entry .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.125); font-weight: bold; line-height: 1.2; -} - -.entry-content .wp-block-archives li:not(.menu-item-has-children), -.entry-content .wp-block-categories li:not(.menu-item-has-children), -.entry-content .wp-block-latest-posts li:not(.menu-item-has-children) { padding-bottom: 0.75rem; } -.entry-content .wp-block-archives li a, -.entry-content .wp-block-categories li a, -.entry-content .wp-block-latest-posts li a { +.entry .entry-content .wp-block-archives li.menu-item-has-children, .entry .entry-content .wp-block-archives li:last-child, +.entry .entry-content .wp-block-categories li.menu-item-has-children, +.entry .entry-content .wp-block-categories li:last-child, +.entry .entry-content .wp-block-latest-posts li.menu-item-has-children, +.entry .entry-content .wp-block-latest-posts li:last-child { + padding-bottom: 0; +} + +.entry .entry-content .wp-block-archives li a, +.entry .entry-content .wp-block-categories li a, +.entry .entry-content .wp-block-latest-posts li a { text-decoration: none; } -.entry-content .wp-block-archives li ul, -.entry-content .wp-block-categories li ul, -.entry-content .wp-block-latest-posts li ul { - padding-left: 1rem; +.entry .entry-content .wp-block-categories ul { + padding-top: 0.75rem; } -.entry-content .wp-block-latest-posts.is-grid li { +.entry .entry-content .wp-block-categories li ul { + list-style: none; + padding-left: 0; +} + +.entry .entry-content .wp-block-categories ul li > a:before { + font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; + font-weight: normal; +} + +.entry .entry-content .wp-block-categories ul > li > a:before { + content: "\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul li > a:before { + content: "\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-categories ul ul ul ul ul ul ul ul ul li > a:before { + content: "\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0\2013\00a0"; +} + +.entry .entry-content .wp-block-latest-posts.is-grid li { border-top: 2px solid #ccc; padding-top: 1rem; margin-bottom: 2rem; } -.entry-content .wp-block-latest-posts.is-grid li a:after { +.entry .entry-content .wp-block-latest-posts.is-grid li a:after { content: ''; } -.entry-content .wp-block-latest-posts.is-grid li:last-child { +.entry .entry-content .wp-block-latest-posts.is-grid li:last-child { margin-bottom: auto; } -.entry-content .wp-block-latest-posts.is-grid li:last-child a:after { +.entry .entry-content .wp-block-latest-posts.is-grid li:last-child a:after { content: ''; } -.entry-content .wp-block-preformatted { +.entry .entry-content .wp-block-preformatted { font-size: 0.71111em; line-height: 1.8; padding: 1rem; } -.entry-content .wp-block-verse { +.entry .entry-content .wp-block-verse { font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; font-size: 22px; line-height: 1.8; } -.entry-content .has-drop-cap:not(:focus):first-letter { +.entry .entry-content .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; font-size: 3.375em; line-height: 1; @@ -3186,19 +3911,20 @@ body.page .main-navigation { margin: 0 0.25em 0 0; } -.entry-content .wp-block-pullquote { +.entry .entry-content .wp-block-pullquote { border: none; padding: 1rem; } -.entry-content .wp-block-pullquote blockquote { +.entry .entry-content .wp-block-pullquote blockquote { color: #111; border: none; - padding-bottom: calc(2 * 1rem); + margin-top: calc(4 * 1rem); + margin-bottom: calc(4.33 * 1rem); margin-right: 0; } -.entry-content .wp-block-pullquote p { +.entry .entry-content .wp-block-pullquote p { font-size: 1.6875em; font-style: italic; line-height: 1.3; @@ -3206,40 +3932,55 @@ body.page .main-navigation { margin-top: 0.5em; } -.entry-content .wp-block-pullquote p em { +.entry .entry-content .wp-block-pullquote p em { font-style: normal; } @media only screen and (min-width: 768px) { - .entry-content .wp-block-pullquote p { + .entry .entry-content .wp-block-pullquote p { font-size: 2.25em; } } -.entry-content .wp-block-pullquote cite { +.entry .entry-content .wp-block-pullquote cite { display: inline-block; 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; + color: #767676; + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * 1.125)); } -.entry-content .wp-block-pullquote.alignleft, .entry-content .wp-block-pullquote.alignright { +.entry .entry-content .wp-block-pullquote.alignleft, .entry .entry-content .wp-block-pullquote.alignright { + width: 100%; padding: 0; } -.entry-content .wp-block-pullquote.alignleft blockquote, .entry-content .wp-block-pullquote.alignright blockquote { +.entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote { margin-left: 0; padding: 0; text-align: left; max-width: 100%; } -.entry-content .wp-block-pullquote.is-style-solid-color { +.entry .entry-content .wp-block-pullquote.is-style-solid-color { background-color: #0073aa; + padding-left: 0; + padding-right: 0; } -.entry-content .wp-block-pullquote.is-style-solid-color p { +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-pullquote.is-style-solid-color { + padding-left: 10%; + padding-right: 10%; + } +} + +.entry .entry-content .wp-block-pullquote.is-style-solid-color p { font-size: 1.6875em; line-height: 1.3; margin-bottom: 0.5em; @@ -3247,152 +3988,161 @@ body.page .main-navigation { } @media only screen and (min-width: 768px) { - .entry-content .wp-block-pullquote.is-style-solid-color p { + .entry .entry-content .wp-block-pullquote.is-style-solid-color p { font-size: 2.25em; } } -.entry-content .wp-block-pullquote.is-style-solid-color a { +.entry .entry-content .wp-block-pullquote.is-style-solid-color a { color: #fff; } -.entry-content .wp-block-pullquote.is-style-solid-color blockquote { +.entry .entry-content .wp-block-pullquote.is-style-solid-color cite { + color: inherit; +} + +.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote { + max-width: calc(100% - (2 * 1rem)); color: #fff; - margin: 0 auto; -} - -.entry-content .wp-block-pullquote.is-style-solid-color .has-primary-background-color { - background-color: #0073aa; -} - -.entry-content .wp-block-pullquote.is-style-solid-color.alignleft, .entry-content .wp-block-pullquote.is-style-solid-color.alignright { - padding: 1rem 1rem 0; -} - -.entry-content .wp-block-pullquote.is-style-solid-color.alignleft blockquote, .entry-content .wp-block-pullquote.is-style-solid-color.alignright blockquote { - padding: 0 0 calc( 1.5 * 1rem); - margin-left: 0; - margin-top: 0; + padding-left: 0; + margin-left: 1rem; } @media only screen and (min-width: 768px) { - .entry-content .wp-block-pullquote.is-style-solid-color.alignleft, .entry-content .wp-block-pullquote.is-style-solid-color.alignright { - padding: calc( 2 * 1rem) calc( 2 * 1rem) 1rem; + .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote { + margin-left: 0; + margin-right: 0; } } -.entry-content .wp-block-quote:not(.is-large), .entry-content .wp-block-quote:not(.is-style-large) { +.entry .entry-content .wp-block-pullquote.is-style-solid-color .has-primary-background-color { + background-color: #0073aa; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignfull { + padding-left: calc(10% + 58px + (2 * 1rem)); + padding-right: calc(10% + 58px + (2 * 1rem)); + } +} + +.entry .entry-content .wp-block-quote:not(.is-large), .entry .entry-content .wp-block-quote:not(.is-style-large) { border-left: 2px solid #0073aa; padding-top: 0; padding-bottom: 0; } -.entry-content .wp-block-quote p { +.entry .entry-content .wp-block-quote p { font-size: 1em; font-style: normal; line-height: 1.8; } -.entry-content .wp-block-quote cite { - font-size: 0.71111em; +.entry .entry-content .wp-block-quote cite { + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * 1.125)); } -.entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large { - padding: 1rem 0 1rem 2rem; +.entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large { margin: 1rem 0; + padding: 0; border-left: none; } -.entry-content .wp-block-quote.is-large p, .entry-content .wp-block-quote.is-style-large p { +.entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p { font-size: 1.6875em; line-height: 1.4; font-style: italic; } -.entry-content .wp-block-quote.is-large cite, -.entry-content .wp-block-quote.is-large footer, .entry-content .wp-block-quote.is-style-large cite, -.entry-content .wp-block-quote.is-style-large footer { - font-size: 0.71111em; +.entry .entry-content .wp-block-quote.is-large cite, +.entry .entry-content .wp-block-quote.is-large footer, .entry .entry-content .wp-block-quote.is-style-large cite, +.entry .entry-content .wp-block-quote.is-style-large footer { + /* + * This requires a rem-based font size calculation instead of our normal em-based one, + * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs. + */ + font-size: calc(1rem / (1.25 * 1.125)); } @media only screen and (min-width: 768px) { - .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large { - margin: 1rem calc(2 * (100vw / 12)); - max-width: calc(6 * (100vw / 12)); + .entry .entry-content .wp-block-quote.is-large, .entry .entry-content .wp-block-quote.is-style-large { + margin: 1rem 0; + padding: 1rem 0; } - .entry-content .wp-block-quote.is-large p, .entry-content .wp-block-quote.is-style-large p { + .entry .entry-content .wp-block-quote.is-large p, .entry .entry-content .wp-block-quote.is-style-large p { font-size: 1.6875em; } } -.entry-content .wp-block-image img { +.entry .entry-content .wp-block-image img { display: block; } -.entry-content .wp-block-image.alignleft, .entry-content .wp-block-image.alignright { +.entry .entry-content .wp-block-image.alignleft, .entry .entry-content .wp-block-image.alignright { max-width: 100%; } -.entry-content .wp-block-image.alignfull img { +.entry .entry-content .wp-block-image.alignfull img { width: 100vw; - margin-left: auto; - margin-right: auto; -} - -.entry-content .wp-block-cover-image .wp-block-cover-image-text, -.entry-content .wp-block-cover-image .wp-block-cover-text, -.entry-content .wp-block-cover-image h2, -.entry-content .wp-block-cover .wp-block-cover-image-text, -.entry-content .wp-block-cover .wp-block-cover-text, -.entry-content .wp-block-cover h2 { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 1.6875em; - font-weight: bold; - width: calc(100vw - (2 * 1rem)); - max-width: calc(100vw - (2 * 1rem)); } @media only screen and (min-width: 768px) { - .entry-content .wp-block-cover-image .wp-block-cover-image-text, - .entry-content .wp-block-cover-image .wp-block-cover-text, - .entry-content .wp-block-cover-image h2, - .entry-content .wp-block-cover .wp-block-cover-image-text, - .entry-content .wp-block-cover .wp-block-cover-text, - .entry-content .wp-block-cover h2 { + .entry .entry-content .wp-block-image.alignfull img { + margin-left: auto; + margin-right: auto; + } +} + +.entry .entry-content .wp-block-cover-image, +.entry .entry-content .wp-block-cover { + position: relative; + min-height: 430px; + padding: 1rem; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image, + .entry .entry-content .wp-block-cover { + padding: 1rem 10%; + } +} + +.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text, +.entry .entry-content .wp-block-cover-image .wp-block-cover-text, +.entry .entry-content .wp-block-cover-image h2, +.entry .entry-content .wp-block-cover .wp-block-cover-image-text, +.entry .entry-content .wp-block-cover .wp-block-cover-text, +.entry .entry-content .wp-block-cover h2 { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-size: 1.6875em; + font-weight: bold; + line-height: 1.25; + padding: 0; + color: #fff; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover-image .wp-block-cover-text, + .entry .entry-content .wp-block-cover-image h2, + .entry .entry-content .wp-block-cover .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover .wp-block-cover-text, + .entry .entry-content .wp-block-cover h2 { font-size: 2.25em; - width: calc(8 * (100vw / 12)); - max-width: calc(8 * (100vw / 12)); + max-width: 100%; } } -@media only screen and (min-width: 1168px) { - .entry-content .wp-block-cover-image .wp-block-cover-image-text, - .entry-content .wp-block-cover-image .wp-block-cover-text, - .entry-content .wp-block-cover-image h2, - .entry-content .wp-block-cover .wp-block-cover-image-text, - .entry-content .wp-block-cover .wp-block-cover-text, - .entry-content .wp-block-cover h2 { - width: calc(6 * (100vw / 12 )); - max-width: calc(6 * (100vw / 12 )); - } -} - -.entry-content .wp-block-cover-image.alignleft h2, -.entry-content .wp-block-cover-image.alignleft .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.alignleft .wp-block-cover-text, .entry-content .wp-block-cover-image.alignright h2, -.entry-content .wp-block-cover-image.alignright .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.alignright .wp-block-cover-text, .entry-content .wp-block-cover-image.aligncenter h2, -.entry-content .wp-block-cover-image.aligncenter .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.aligncenter .wp-block-cover-text, -.entry-content .wp-block-cover.alignleft h2, -.entry-content .wp-block-cover.alignleft .wp-block-cover-image-text, -.entry-content .wp-block-cover.alignleft .wp-block-cover-text, -.entry-content .wp-block-cover.alignright h2, -.entry-content .wp-block-cover.alignright .wp-block-cover-image-text, -.entry-content .wp-block-cover.alignright .wp-block-cover-text, -.entry-content .wp-block-cover.aligncenter h2, -.entry-content .wp-block-cover.aligncenter .wp-block-cover-image-text, -.entry-content .wp-block-cover.aligncenter .wp-block-cover-text { +.entry .entry-content .wp-block-cover-image.aligncenter h2, +.entry .entry-content .wp-block-cover-image.aligncenter .wp-block-cover-image-text, +.entry .entry-content .wp-block-cover-image.aligncenter .wp-block-cover-text, +.entry .entry-content .wp-block-cover.aligncenter h2, +.entry .entry-content .wp-block-cover.aligncenter .wp-block-cover-image-text, +.entry .entry-content .wp-block-cover.aligncenter .wp-block-cover-text { width: 100%; z-index: 1; left: 50%; @@ -3401,50 +4151,65 @@ 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 .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, +.entry .entry-content .wp-block-cover.alignleft, +.entry .entry-content .wp-block-cover.alignright { + width: 100%; } -.entry-content .wp-block-cover-image.has-left-content, -.entry-content .wp-block-cover.has-left-content { - justify-content: center; +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover-image.alignfull h2, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover.alignfull h2 { + max-width: calc(8 * (100vw / 12) - 28px); + } } -.entry-content .wp-block-cover-image.has-left-content h2, -.entry-content .wp-block-cover-image.has-left-content .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.has-left-content .wp-block-cover-text, -.entry-content .wp-block-cover.has-left-content h2, -.entry-content .wp-block-cover.has-left-content .wp-block-cover-image-text, -.entry-content .wp-block-cover.has-left-content .wp-block-cover-text { - padding: 1rem; +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover-image.alignfull h2, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover.alignfull h2 { + max-width: calc(6 * (100vw / 12) - 28px); + } } -.entry-content .wp-block-cover-image.has-right-content, -.entry-content .wp-block-cover.has-right-content { - justify-content: center; +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image.alignfull, + .entry .entry-content .wp-block-cover.alignfull { + padding-left: calc(10% + 58px + (2 * 1rem)); + padding-right: calc(10% + 58px + (2 * 1rem)); + } + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover-image.alignfull h2, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text, + .entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text, + .entry .entry-content .wp-block-cover.alignfull h2 { + padding: 0; + } } -.entry-content .wp-block-cover-image.has-right-content h2, -.entry-content .wp-block-cover-image.has-right-content .wp-block-cover-image-text, -.entry-content .wp-block-cover-image.has-right-content .wp-block-cover-text, -.entry-content .wp-block-cover.has-right-content h2, -.entry-content .wp-block-cover.has-right-content .wp-block-cover-image-text, -.entry-content .wp-block-cover.has-right-content .wp-block-cover-text { - padding: 1rem; +.entry .entry-content .wp-block-gallery { + list-style-type: none; + padding-left: 0; } -.entry-content .wp-block-gallery .blocks-gallery-image:last-child, -.entry-content .wp-block-gallery .blocks-gallery-item:last-child { +.entry .entry-content .wp-block-gallery .blocks-gallery-image:last-child, +.entry .entry-content .wp-block-gallery .blocks-gallery-item:last-child { margin-bottom: 16px; } -.entry-content .wp-block-audio figcaption, -.entry-content .wp-block-video figcaption, -.entry-content .wp-block-image figcaption, -.entry-content .wp-block-gallery .blocks-gallery-image figcaption, -.entry-content .wp-block-gallery .blocks-gallery-item figcaption { +.entry .entry-content .wp-block-audio figcaption, +.entry .entry-content .wp-block-video figcaption, +.entry .entry-content .wp-block-image figcaption, +.entry .entry-content .wp-block-gallery .blocks-gallery-image figcaption, +.entry .entry-content .wp-block-gallery .blocks-gallery-item figcaption { 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; @@ -3453,75 +4218,90 @@ body.page .main-navigation { text-align: center; } -.entry-content .wp-block-separator, -.entry-content hr { +.entry .entry-content .wp-block-separator, +.entry .entry-content hr { + background-color: #767676; + border: 0; + height: 2px; margin-bottom: 2rem; margin-top: 2rem; + max-width: 2.25em; text-align: left; /* Remove duplicate rule-line when a separator * is followed by an H1, or H2 */ } -.entry-content .wp-block-separator:not(.is-style-dots), -.entry-content hr:not(.is-style-dots) { - background-color: #767676; - border: 0; - height: 2px; -} - -.entry-content .wp-block-separator:not(.is-style-wide):not(.is-style-dots), -.entry-content hr:not(.is-style-wide):not(.is-style-dots) { - max-width: 2.25em; -} - -.entry-content .wp-block-separator + h1:before, -.entry-content .wp-block-separator + h2:before, -.entry-content hr + h1:before, -.entry-content hr + h2:before { - 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; +.entry .entry-content .wp-block-separator.is-style-wide, +.entry .entry-content hr.is-style-wide { + max-width: 100%; } @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)); + .entry .entry-content .wp-block-separator.is-style-wide, + .entry .entry-content hr.is-style-wide { + max-width: calc(8 * (100vw / 12) - 28px); } } @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 .entry-content .wp-block-separator.is-style-wide, + .entry .entry-content hr.is-style-wide { + max-width: calc(6 * (100vw / 12) - 28px); } } -.entry-content .wp-block-separator.is-style-dots:before, -.entry-content hr.is-style-dots:before { +.entry .entry-content .wp-block-separator.is-style-dots, +.entry .entry-content hr.is-style-dots { + max-width: 100%; + background-color: inherit; + border: inherit; + height: inherit; + text-align: center; +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-separator.is-style-dots, + .entry .entry-content hr.is-style-dots { + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-separator.is-style-dots, + .entry .entry-content hr.is-style-dots { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +.entry .entry-content .wp-block-separator.is-style-dots:before, +.entry .entry-content hr.is-style-dots:before { color: #767676; font-size: 1.6875em; letter-spacing: 0.88889em; padding-left: 0.88889em; } -.entry-content .wp-block-embed-twitter { +.entry .entry-content .wp-block-separator + h1:before, +.entry .entry-content .wp-block-separator + h2:before, +.entry .entry-content hr + h1:before, +.entry .entry-content hr + h2:before { + display: none; +} + +.entry .entry-content .wp-block-embed-twitter { overflow: hidden; } -.entry-content .wp-block-table td, .entry-content .wp-block-table th { +.entry .entry-content .wp-block-table th, +.entry .entry-content .wp-block-table td { border-color: #767676; } -.entry-content .wp-block-file { +.entry .entry-content .wp-block-file { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } -.entry-content .wp-block-file .wp-block-file__button { +.entry .entry-content .wp-block-file .wp-block-file__button { transition: background 150ms ease-in-out; border: none; border-radius: 5px; @@ -3529,87 +4309,90 @@ body.page .main-navigation { font-size: 22px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.2; + text-decoration: none; font-weight: bold; padding: 0.75rem 1rem; + color: #fff; } @media only screen and (min-width: 1168px) { - .entry-content .wp-block-file .wp-block-file__button { + .entry .entry-content .wp-block-file .wp-block-file__button { font-size: 22px; padding: 0.875rem 1.5rem; } } -.entry-content .wp-block-file .wp-block-file__button:hover { +.entry .entry-content .wp-block-file .wp-block-file__button:hover { + background: #111; cursor: pointer; } -.entry-content .wp-block-file .wp-block-file__button:hover, .entry-content .wp-block-file .wp-block-file__button:focus { +.entry .entry-content .wp-block-file .wp-block-file__button:focus { background: #111; -} - -.entry-content .wp-block-file .wp-block-file__button:focus { outline: thin dotted; outline-offset: -4px; } -.entry-content .wp-block-code { +.entry .entry-content .wp-block-file * + .wp-block-file__button { + margin-left: 0.75rem; +} + +.entry .entry-content .wp-block-code { border-radius: 0; } -.entry-content .wp-block-code code { +.entry .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 { - margin-top: 0; +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-columns .wp-block-column > *:first-child { + margin-top: 0; + } + .entry .entry-content .wp-block-columns .wp-block-column > *:last-child { + margin-bottom: 0; + } + .entry .entry-content .wp-block-columns[class*='has-'] > * { + margin-right: 1rem; + } + .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child { + margin-right: 0; + } } -.entry-content .wp-block-columns .wp-block-column > *:last-child { - margin-bottom: 0; -} - -.entry-content .wp-block-columns[class*='has-'] > * { - margin-right: 1rem; -} - -.entry-content .wp-block-columns[class*='has-'] > *:last-child { - margin-right: 0; -} - -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta { +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: bold; } -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta .wp-block-latest-comments__comment-date { +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta .wp-block-latest-comments__comment-date { font-weight: normal; } -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment, -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-date, -.entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment, +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-date, +.entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { font-size: inherit; } -.entry-content .wp-block-latest-comments.has-dates .wp-block-latest-comments__comment-date { +.entry .entry-content .wp-block-latest-comments.has-dates .wp-block-latest-comments__comment-date { font-size: 0.71111em; } -.entry-content .has-primary-background-color { +.entry .entry-content .has-primary-background-color { background-color: #0073aa; } -.entry-content .has-primary-background-color p, -.entry-content .has-primary-background-color h1, -.entry-content .has-primary-background-color h2, -.entry-content .has-primary-background-color h3, -.entry-content .has-primary-background-color h4, -.entry-content .has-primary-background-color h5, -.entry-content .has-primary-background-color h6, -.entry-content .has-primary-background-color a { +.entry .entry-content .has-primary-background-color p, +.entry .entry-content .has-primary-background-color h1, +.entry .entry-content .has-primary-background-color h2, +.entry .entry-content .has-primary-background-color h3, +.entry .entry-content .has-primary-background-color h4, +.entry .entry-content .has-primary-background-color h5, +.entry .entry-content .has-primary-background-color h6, +.entry .entry-content .has-primary-background-color a { color: #fff; } @@ -3653,6 +4436,20 @@ svg { margin-bottom: calc(1.5 * 1rem); } +@media only screen and (min-width: 768px) { + .wp-caption.aligncenter { + position: relative; + left: calc( calc(8 * (100vw / 12) - 28px) / 2); + transform: translateX(-50%); + } +} + +@media only screen and (min-width: 1168px) { + .wp-caption.aligncenter { + left: calc( calc(6 * (100vw / 12) - 28px) / 2); + } +} + .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; @@ -3681,7 +4478,7 @@ svg { .gallery-item { display: inline-block; - padding-right: 1rem; + margin-right: 1rem; margin-bottom: 1rem; text-align: center; vertical-align: top; @@ -3689,35 +4486,67 @@ svg { } .gallery-columns-2 .gallery-item { - max-width: calc( ( 12 / 2 ) * (100% / 12)); + max-width: calc( ( 12 / 2 ) * (100% / 12) - ( 1rem * 0.5 )); +} + +.gallery-columns-2 .gallery-item:nth-of-type(2n+2) { + margin-right: 0; } .gallery-columns-3 .gallery-item { - max-width: calc( ( 12 / 3 ) * (100% / 12)); + max-width: calc( ( 12 / 3 ) * (100% / 12) - ( 1rem * 0.66667 )); +} + +.gallery-columns-3 .gallery-item:nth-of-type(3n+3) { + margin-right: 0; } .gallery-columns-4 .gallery-item { - max-width: calc( ( 12 / 4 ) * (100% / 12)); + max-width: calc( ( 12 / 4 ) * (100% / 12) - ( 1rem * 0.75 )); +} + +.gallery-columns-4 .gallery-item:nth-of-type(4n+4) { + margin-right: 0; } .gallery-columns-5 .gallery-item { - max-width: calc( ( 12 / 5 ) * (100% / 12)); + max-width: calc( ( 12 / 5 ) * (100% / 12) - ( 1rem * 0.8 )); +} + +.gallery-columns-5 .gallery-item:nth-of-type(5n+5) { + margin-right: 0; } .gallery-columns-6 .gallery-item { - max-width: calc( ( 12 / 6 ) * (100% / 12)); + max-width: calc( ( 12 / 6 ) * (100% / 12) - ( 1rem * 0.83333 )); +} + +.gallery-columns-6 .gallery-item:nth-of-type(6n+6) { + margin-right: 0; } .gallery-columns-7 .gallery-item { - max-width: calc( ( 12 / 7 ) * (100% / 12)); + max-width: calc( ( 12 / 7 ) * (100% / 12) - ( 1rem * 0.85714 )); +} + +.gallery-columns-7 .gallery-item:nth-of-type(7n+7) { + margin-right: 0; } .gallery-columns-8 .gallery-item { - max-width: calc( ( 12 / 8 ) * (100% / 12)); + max-width: calc( ( 12 / 8 ) * (100% / 12) - ( 1rem * 0.875 )); +} + +.gallery-columns-8 .gallery-item:nth-of-type(8n+8) { + margin-right: 0; } .gallery-columns-9 .gallery-item { - max-width: calc( ( 12 / 9 ) * (100% / 12)); + max-width: calc( ( 12 / 9 ) * (100% / 12) - ( 1rem * 0.88889 )); +} + +.gallery-columns-9 .gallery-item:nth-of-type(9n+9) { + margin-right: 0; } .gallery-item:last-of-type { diff --git a/src/wp-content/themes/twentynineteen/template-parts/content/content-none.php b/src/wp-content/themes/twentynineteen/template-parts/content/content-none.php index 1f312093a1..332dd17bf6 100644 --- a/src/wp-content/themes/twentynineteen/template-parts/content/content-none.php +++ b/src/wp-content/themes/twentynineteen/template-parts/content/content-none.php @@ -13,7 +13,7 @@
-

+

@@ -36,14 +36,14 @@ elseif ( is_search() ) : ?> -

+

-

+

'
' . esc_html__( 'Pages:', 'twentynineteen' ), + 'before' => '
' . __( 'Pages:', 'twentynineteen' ), 'after' => '
', ) ); diff --git a/src/wp-content/themes/twentynineteen/template-parts/content/content-single.php b/src/wp-content/themes/twentynineteen/template-parts/content/content-single.php index 770344e8a0..b98854e44d 100644 --- a/src/wp-content/themes/twentynineteen/template-parts/content/content-single.php +++ b/src/wp-content/themes/twentynineteen/template-parts/content/content-single.php @@ -37,7 +37,7 @@ wp_link_pages( array( - 'before' => '
' . esc_html__( 'Pages:', 'twentynineteen' ), + 'before' => '
' . __( 'Pages:', 'twentynineteen' ), 'after' => '
', ) ); diff --git a/src/wp-content/themes/twentynineteen/template-parts/content/content.php b/src/wp-content/themes/twentynineteen/template-parts/content/content.php index 0b5d32bac3..85ec63287d 100644 --- a/src/wp-content/themes/twentynineteen/template-parts/content/content.php +++ b/src/wp-content/themes/twentynineteen/template-parts/content/content.php @@ -46,7 +46,7 @@ wp_link_pages( array( - 'before' => '
' . esc_html__( 'Pages:', 'twentynineteen' ), + 'before' => '
' . __( 'Pages:', 'twentynineteen' ), 'after' => '
', ) ); diff --git a/src/wp-content/themes/twentynineteen/template-parts/header/site-branding.php b/src/wp-content/themes/twentynineteen/template-parts/header/site-branding.php index 8ec94aec7c..e1a5b823d9 100644 --- a/src/wp-content/themes/twentynineteen/template-parts/header/site-branding.php +++ b/src/wp-content/themes/twentynineteen/template-parts/header/site-branding.php @@ -36,6 +36,7 @@ array( 'theme_location' => 'menu-1', 'menu_class' => 'main-menu', + 'items_wrap' => '
    %3$s
', ) ); ?> diff --git a/src/wp-content/themes/twentynineteen/template-parts/post/discussion-meta.php b/src/wp-content/themes/twentynineteen/template-parts/post/discussion-meta.php index 655c4b6993..b09ea0ff04 100644 --- a/src/wp-content/themes/twentynineteen/template-parts/post/discussion-meta.php +++ b/src/wp-content/themes/twentynineteen/template-parts/post/discussion-meta.php @@ -8,22 +8,12 @@ */ /* Get data from current discussion on post. */ -$discussion = twentynineteen_get_discussion_data(); - -$comments_number = get_comments_number(); -$has_responses = $discussion->responses > 0; +$discussion = twentynineteen_get_discussion_data(); +$has_responses = $discussion->responses > 0; if ( $has_responses ) { - /* translators: %1(X responses)$s from %2(X others)$s */ - $meta_label = sprintf( - '%1$s from %2$s.', - sprintf( _n( '%d response', '%d responses', $discussion->responses, 'twentynineteen' ), $discussion->responses ), - sprintf( _n( '%d other', '%d others', $discussion->commenters, 'twentynineteen' ), $discussion->commenters ) - ); -} elseif ( $comments_number > 0 ) { - /* Show comment count if not enough discussion information */ - - $meta_label = sprintf( _n( '%d Comment', '%d Comments', $comments_number, 'twentynineteen' ), $comments_number ); + /* translators: %1(X comments)$s */ + $meta_label = sprintf( _n( '%d Comment', '%d Comments', $discussion->responses, 'twentynineteen' ), $discussion->responses ); } else { $meta_label = __( 'No comments', 'twentynineteen' ); }