PK]bچ>NNpage.phpnu[ PK]O(template-parts/excerpt/excerpt-aside.phpnu[
PK]&B&template-parts/header/entry-header.phpnu[', '' ); PK]ؚ##(template-parts/header/excerpt-header.phpnu[
', esc_url( get_permalink() ) ), '' ); twenty_twenty_one_post_thumbnail(); ?>
PK]~"w"template-parts/header/site-nav.phpnu[ PK]{U'template-parts/header/site-branding.phpnu[

PK]iF||"template-parts/post/author-bio.phpnu[

%2$s', esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), sprintf( /* translators: %s: Author name. */ esc_html__( 'View all of %s\'s posts.', 'twentytwentyone' ), get_the_author() ) ); ?>
PK]Cyy)template-parts/content/content-single.phpnu[
>
', '' ); ?>
'', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?>
PK]>*template-parts/content/content-excerpt.phpnu[
>
PK]91"template-parts/content/content.phpnu[
>
', '' ); ?> ', esc_url( get_permalink() ) ), '' ); ?>
'', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?>
PK]m$$'template-parts/content/content-page.phpnu[
>
'', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?>
PK]73'template-parts/content/content-none.phpnu[

' . esc_html( get_search_query() ) . '' ); ?>

' . wp_kses( /* translators: %s: Link to WP admin new post page. */ __( 'Ready to publish your first post? Get started here.', 'twentytwentyone' ), array( 'a' => array( 'href' => array(), ), ) ) . '

', esc_url( admin_url( 'post-new.php' ) ) ); ?>

PK]YW index.phpnu[

tag in the document head, * WordPress will provide it for us. */ add_theme_support( 'title-tag' ); /** * Add post-formats support. */ add_theme_support( 'post-formats', array( 'link', 'aside', 'gallery', 'image', 'quote', 'status', 'video', 'audio', 'chat', ) ); /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 1568, 9999 ); register_nav_menus( array( 'primary' => esc_html__( 'Primary menu', 'twentytwentyone' ), 'footer' => esc_html__( 'Secondary menu', 'twentytwentyone' ), ) ); /* * Switch default core markup for search form, comment form, and comments * to output valid HTML5. */ add_theme_support( 'html5', array( 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script', 'navigation-widgets', ) ); /* * Add support for core custom logo. * * @link https://codex.wordpress.org/Theme_Logo */ $logo_width = 300; $logo_height = 100; add_theme_support( 'custom-logo', array( 'height' => $logo_height, 'width' => $logo_width, 'flex-width' => true, 'flex-height' => true, 'unlink-homepage-logo' => true, ) ); // Add theme support for selective refresh for widgets. add_theme_support( 'customize-selective-refresh-widgets' ); // Add support for Block Styles. add_theme_support( 'wp-block-styles' ); // Add support for full and wide align images. add_theme_support( 'align-wide' ); // Add support for editor styles. add_theme_support( 'editor-styles' ); $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); if ( 127 > Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) { add_theme_support( 'dark-editor-style' ); } $editor_stylesheet_path = './assets/css/style-editor.css'; // Note, the is_IE global variable is defined by WordPress and is used // to detect if the current browser is internet explorer. global $is_IE; if ( $is_IE ) { $editor_stylesheet_path = './assets/css/ie-editor.css'; } // Enqueue editor styles. add_editor_style( $editor_stylesheet_path ); // Add custom editor font sizes. add_theme_support( 'editor-font-sizes', array( array( 'name' => esc_html__( 'Extra small', 'twentytwentyone' ), 'shortName' => esc_html_x( 'XS', 'Font size', 'twentytwentyone' ), 'size' => 16, 'slug' => 'extra-small', ), array( 'name' => esc_html__( 'Small', 'twentytwentyone' ), 'shortName' => esc_html_x( 'S', 'Font size', 'twentytwentyone' ), 'size' => 18, 'slug' => 'small', ), array( 'name' => esc_html__( 'Normal', 'twentytwentyone' ), 'shortName' => esc_html_x( 'M', 'Font size', 'twentytwentyone' ), 'size' => 20, 'slug' => 'normal', ), array( 'name' => esc_html__( 'Large', 'twentytwentyone' ), 'shortName' => esc_html_x( 'L', 'Font size', 'twentytwentyone' ), 'size' => 24, 'slug' => 'large', ), array( 'name' => esc_html__( 'Extra large', 'twentytwentyone' ), 'shortName' => esc_html_x( 'XL', 'Font size', 'twentytwentyone' ), 'size' => 40, 'slug' => 'extra-large', ), array( 'name' => esc_html__( 'Huge', 'twentytwentyone' ), 'shortName' => esc_html_x( 'XXL', 'Font size', 'twentytwentyone' ), 'size' => 96, 'slug' => 'huge', ), array( 'name' => esc_html__( 'Gigantic', 'twentytwentyone' ), 'shortName' => esc_html_x( 'XXXL', 'Font size', 'twentytwentyone' ), 'size' => 144, 'slug' => 'gigantic', ), ) ); // Custom background color. add_theme_support( 'custom-background', array( 'default-color' => 'd1e4dd', ) ); // Editor color palette. $black = '#000000'; $dark_gray = '#28303D'; $gray = '#39414D'; $green = '#D1E4DD'; $blue = '#D1DFE4'; $purple = '#D1D1E4'; $red = '#E4D1D1'; $orange = '#E4DAD1'; $yellow = '#EEEADD'; $white = '#FFFFFF'; add_theme_support( 'editor-color-palette', array( array( 'name' => esc_html__( 'Black', 'twentytwentyone' ), 'slug' => 'black', 'color' => $black, ), array( 'name' => esc_html__( 'Dark gray', 'twentytwentyone' ), 'slug' => 'dark-gray', 'color' => $dark_gray, ), array( 'name' => esc_html__( 'Gray', 'twentytwentyone' ), 'slug' => 'gray', 'color' => $gray, ), array( 'name' => esc_html__( 'Green', 'twentytwentyone' ), 'slug' => 'green', 'color' => $green, ), array( 'name' => esc_html__( 'Blue', 'twentytwentyone' ), 'slug' => 'blue', 'color' => $blue, ), array( 'name' => esc_html__( 'Purple', 'twentytwentyone' ), 'slug' => 'purple', 'color' => $purple, ), array( 'name' => esc_html__( 'Red', 'twentytwentyone' ), 'slug' => 'red', 'color' => $red, ), array( 'name' => esc_html__( 'Orange', 'twentytwentyone' ), 'slug' => 'orange', 'color' => $orange, ), array( 'name' => esc_html__( 'Yellow', 'twentytwentyone' ), 'slug' => 'yellow', 'color' => $yellow, ), array( 'name' => esc_html__( 'White', 'twentytwentyone' ), 'slug' => 'white', 'color' => $white, ), ) ); add_theme_support( 'editor-gradient-presets', array( array( 'name' => esc_html__( 'Purple to yellow', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $yellow . ' 100%)', 'slug' => 'purple-to-yellow', ), array( 'name' => esc_html__( 'Yellow to purple', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $purple . ' 100%)', 'slug' => 'yellow-to-purple', ), array( 'name' => esc_html__( 'Green to yellow', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $green . ' 0%, ' . $yellow . ' 100%)', 'slug' => 'green-to-yellow', ), array( 'name' => esc_html__( 'Yellow to green', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $green . ' 100%)', 'slug' => 'yellow-to-green', ), array( 'name' => esc_html__( 'Red to yellow', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $yellow . ' 100%)', 'slug' => 'red-to-yellow', ), array( 'name' => esc_html__( 'Yellow to red', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $red . ' 100%)', 'slug' => 'yellow-to-red', ), array( 'name' => esc_html__( 'Purple to red', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $red . ' 100%)', 'slug' => 'purple-to-red', ), array( 'name' => esc_html__( 'Red to purple', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $purple . ' 100%)', 'slug' => 'red-to-purple', ), ) ); /* * Adds starter content to highlight the theme on fresh sites. * This is done conditionally to avoid loading the starter content on every * page load, as it is a one-off operation only needed once in the customizer. */ if ( is_customize_preview() ) { require get_template_directory() . '/inc/starter-content.php'; add_theme_support( 'starter-content', twenty_twenty_one_get_starter_content() ); } // Add support for responsive embedded content. add_theme_support( 'responsive-embeds' ); // Add support for custom line height controls. add_theme_support( 'custom-line-height' ); // Add support for experimental link color control. add_theme_support( 'experimental-link-color' ); // Add support for experimental cover block spacing. add_theme_support( 'custom-spacing' ); // Add support for custom units. // This was removed in WordPress 5.6 but is still required to properly support WP 5.5. add_theme_support( 'custom-units' ); // Remove feed icon link from legacy RSS widget. add_filter( 'rss_widget_feed_link', '__return_false' ); } } add_action( 'after_setup_theme', 'twenty_twenty_one_setup' ); /** * Register widget area. * * @since Twenty Twenty-One 1.0 * * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar * * @return void */ function twenty_twenty_one_widgets_init() { register_sidebar( array( 'name' => esc_html__( 'Footer', 'twentytwentyone' ), 'id' => 'sidebar-1', 'description' => esc_html__( 'Add widgets here to appear in your footer.', 'twentytwentyone' ), 'before_widget' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', ) ); } add_action( 'widgets_init', 'twenty_twenty_one_widgets_init' ); /** * Set the content width in pixels, based on the theme's design and stylesheet. * * Priority 0 to make it available to lower priority callbacks. * * @since Twenty Twenty-One 1.0 * * @global int $content_width Content width. * * @return void */ function twenty_twenty_one_content_width() { // This variable is intended to be overruled from themes. // Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}. // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound $GLOBALS['content_width'] = apply_filters( 'twenty_twenty_one_content_width', 750 ); } add_action( 'after_setup_theme', 'twenty_twenty_one_content_width', 0 ); /** * Enqueue scripts and styles. * * @since Twenty Twenty-One 1.0 * * @return void */ function twenty_twenty_one_scripts() { // Note, the is_IE global variable is defined by WordPress and is used // to detect if the current browser is internet explorer. global $is_IE, $wp_scripts; if ( $is_IE ) { // If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables. wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) ); } else { // If not IE, use the standard stylesheet. wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) ); } // RTL styles. wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' ); // Print styles. wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' ); // Threaded comment reply styles. if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } // Register the IE11 polyfill file. wp_register_script( 'twenty-twenty-one-ie11-polyfills-asset', get_template_directory_uri() . '/assets/js/polyfills.js', array(), wp_get_theme()->get( 'Version' ), true ); // Register the IE11 polyfill loader. wp_register_script( 'twenty-twenty-one-ie11-polyfills', null, array(), wp_get_theme()->get( 'Version' ), true ); wp_add_inline_script( 'twenty-twenty-one-ie11-polyfills', wp_get_script_polyfill( $wp_scripts, array( 'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset', ) ) ); // Main navigation scripts. if ( has_nav_menu( 'primary' ) ) { wp_enqueue_script( 'twenty-twenty-one-primary-navigation-script', get_template_directory_uri() . '/assets/js/primary-navigation.js', array( 'twenty-twenty-one-ie11-polyfills' ), wp_get_theme()->get( 'Version' ), true ); } // Responsive embeds script. wp_enqueue_script( 'twenty-twenty-one-responsive-embeds-script', get_template_directory_uri() . '/assets/js/responsive-embeds.js', array( 'twenty-twenty-one-ie11-polyfills' ), wp_get_theme()->get( 'Version' ), true ); } add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' ); /** * Enqueue block editor script. * * @since Twenty Twenty-One 1.0 * * @return void */ function twentytwentyone_block_editor_script() { wp_enqueue_script( 'twentytwentyone-editor', get_theme_file_uri( '/assets/js/editor.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true ); } add_action( 'enqueue_block_editor_assets', 'twentytwentyone_block_editor_script' ); /** * Fix skip link focus in IE11. * * This does not enqueue the script because it is tiny and because it is only for IE11, * thus it does not warrant having an entire dedicated blocking script being loaded. * * @since Twenty Twenty-One 1.0 * * @link https://git.io/vWdr2 */ function twenty_twenty_one_skip_link_focus_fix() { // If SCRIPT_DEBUG is defined and true, print the unminified file. if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) { echo ''; } else { // The following is minified via `npx terser --compress --mangle -- assets/js/skip-link-focus-fix.js`. ?> get( 'Version' ), true ); wp_enqueue_script( 'twentytwentyone-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview', 'customize-selective-refresh', 'jquery', 'twentytwentyone-customize-helpers' ), wp_get_theme()->get( 'Version' ), true ); } add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' ); /** * Enqueue scripts for the customizer. * * @since Twenty Twenty-One 1.0 * * @return void */ function twentytwentyone_customize_controls_enqueue_scripts() { wp_enqueue_script( 'twentytwentyone-customize-helpers', get_theme_file_uri( '/assets/js/customize-helpers.js' ), array(), wp_get_theme()->get( 'Version' ), true ); } add_action( 'customize_controls_enqueue_scripts', 'twentytwentyone_customize_controls_enqueue_scripts' ); /** * Calculate classes for the main element. * * @since Twenty Twenty-One 1.0 * * @return void */ function twentytwentyone_the_html_classes() { /** * Filters the classes for the main element. * * @since Twenty Twenty-One 1.0 * * @param string The list of classes. Default empty string. */ $classes = apply_filters( 'twentytwentyone_html_classes', '' ); if ( ! $classes ) { return; } echo 'class="' . esc_attr( $classes ) . '"'; } /** * Add "is-IE" class to body if the user is on Internet Explorer. * * @since Twenty Twenty-One 1.0 * * @return void */ function twentytwentyone_add_ie_class() { ?> *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width { max-width: var(--responsive--aligndefault-width); margin-left: auto; margin-right: auto; } .widget-area, .pagination, .comments-pagination, .post-navigation, .site-footer, .site-header, .alignwide, .wide-max-width { max-width: var(--responsive--alignwide-width); margin-left: auto; margin-right: auto; } .alignfull, .wp-block-group .wp-block-group__inner-container > *.alignfull, .full-max-width { max-width: var(--responsive--alignfull-width); width: var(--responsive--alignfull-width); margin-left: auto; margin-right: auto; } @media only screen and (min-width: 482px) { .alignfull, .full-max-width { max-width: var(--responsive--alignfull-width); width: auto; margin-left: auto; margin-right: auto; } } .entry-header .post-thumbnail, .singular .post-thumbnail, .alignfull [class*=inner-container] > .alignwide, .alignwide [class*=inner-container] > .alignwide { margin-left: auto; margin-right: auto; width: var(--responsive--alignwide-width); max-width: var(--responsive--alignfull-width); } @media only screen and (min-width: 482px) { .entry-content > .alignleft { /*rtl:ignore*/ margin-left: var(--responsive--alignleft-margin); /*rtl:ignore*/ margin-right: var(--global--spacing-horizontal); } } @media only screen and (min-width: 482px) { .entry-content > .alignright { /*rtl:ignore*/ margin-left: var(--global--spacing-horizontal); /*rtl:ignore*/ margin-right: var(--responsive--alignright-margin); } } /** * Site Structure * * - Set vertical margins and responsive widths on * top-level wrappers and content wrappers * - `--global--width-content` is a responsive variable * - See: globals/_global-width-responsive.scss */ /** * Top Level Wrappers (header, main, footer) * - Set vertical padding and horizontal margins */ .site-header, .site-main, .widget-area, .site-footer { padding-top: var(--global--spacing-vertical); padding-bottom: var(--global--spacing-vertical); margin-left: auto; margin-right: auto; } .site-header { padding-top: calc(0.75 * var(--global--spacing-vertical)); padding-bottom: calc(2 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .site-header { padding-bottom: calc(3 * var(--global--spacing-vertical)); } } /** * Site-main children wrappers * - Add double vertical margins here for clearer hierarchy */ .site-main > * { margin-top: calc(3 * var(--global--spacing-vertical)); margin-bottom: calc(3 * var(--global--spacing-vertical)); } .site-main > *:first-child { margin-top: 0; } .site-main > *:last-child { margin-bottom: 0; } /** * Set the default maximum responsive content-width */ /** * Set the wide maximum responsive content-width */ /** * Set the full maximum responsive content-width */ /* * Block & non-gutenberg content wrappers * - Set margins */ .entry-header, .post-thumbnail, .entry-content, .entry-footer, .author-bio { margin-top: var(--global--spacing-vertical); margin-right: auto; margin-bottom: var(--global--spacing-vertical); margin-left: auto; } /* * Block & non-gutenberg content wrapper children * - Sets spacing-vertical margin logic */ .site-main > article > *, .site-main > .not-found > *, .entry-content > *, [class*=inner-container] > *, .wp-block-template-part > *, .wp-block-post-template :where(li > *) { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .site-main > article > *, .site-main > .not-found > *, .entry-content > *, [class*=inner-container] > *, .wp-block-template-part > *, .wp-block-post-template :where(li > *) { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } .site-main > article > *:first-child, .site-main > .not-found > *:first-child, .entry-content > *:first-child, [class*=inner-container] > *:first-child, .wp-block-template-part > *:first-child, .wp-block-post-template :where(li > *):first-child { margin-top: 0; } .site-main > article > *:last-child, .site-main > .not-found > *:last-child, .entry-content > *:last-child, [class*=inner-container] > *:last-child, .wp-block-template-part > *:last-child, .wp-block-post-template :where(li > *):last-child { margin-bottom: 0; } .site-footer > *, .widget-area > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .site-footer > *, .widget-area > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } /* * Block & non-gutenberg content wrapper children * - Sets spacing-unit margins */ .entry-header > *, .post-thumbnail > *, .page-content > *, .comment-content > *, .widget > * { margin-top: var(--global--spacing-unit); margin-bottom: var(--global--spacing-unit); } .entry-header > *:first-child, .post-thumbnail > *:first-child, .page-content > *:first-child, .comment-content > *:first-child, .widget > *:first-child { margin-top: 0; } .entry-header > *:last-child, .post-thumbnail > *:last-child, .page-content > *:last-child, .comment-content > *:last-child, .widget > *:last-child { margin-bottom: 0; } /* * .entry-content children specific controls * - Adds special margin overrides for alignment utility classes */ .entry-content > * { /* Reset alignleft and alignright margins after alignfull */ } .entry-content > *.alignleft, .entry-content > *.alignright, .entry-content > *.alignleft:first-child + *, .entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background { margin-top: 0; } .entry-content > *:last-child, .entry-content > *.alignfull.has-background { margin-bottom: 0; } .entry-content > *.alignfull + .alignleft, .entry-content > *.alignfull + .alignright { margin-top: var(--global--spacing-vertical); } /** * Reset specific elements to make them easier to style in other contexts. */ html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, form, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /** * Apply generic border-box to all elements. * See: * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { /* Apply border-box across the entire page. */ box-sizing: border-box; font-family: var(--global--font-secondary); line-height: var(--global--line-height-body); } /** * Relax the definition a bit, to allow components to override it manually. */ *, *::before, *::after { box-sizing: inherit; } body { font-size: var(--global--font-size-base); font-weight: normal; color: var(--global--color-primary); text-align: left; background-color: var(--global--color-background); } button { cursor: pointer; } .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */ blockquote { padding: 0; position: relative; margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); } blockquote > * { margin-top: var(--global--spacing-unit); margin-bottom: var(--global--spacing-unit); } blockquote > *:first-child { margin-top: 0; } blockquote > *:last-child { margin-bottom: 0; } blockquote p { letter-spacing: var(--heading--letter-spacing-h4); font-family: var(--quote--font-family); font-size: var(--quote--font-size); font-style: var(--quote--font-style); font-weight: var(--quote--font-weight); line-height: var(--quote--line-height); } blockquote cite, blockquote footer { font-weight: normal; color: var(--global--color-primary); font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } blockquote.alignleft, blockquote.alignright { padding-left: inherit; } blockquote.alignleft p, blockquote.alignright p { font-size: var(--heading--font-size-h5); max-width: inherit; width: inherit; } blockquote.alignleft cite, blockquote.alignleft footer, blockquote.alignright cite, blockquote.alignright footer { font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } blockquote strong { font-weight: var(--quote--font-weight-strong); } blockquote:before { content: "“"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); position: absolute; left: calc(-0.5 * var(--global--spacing-horizontal)); } blockquote .wp-block-quote__citation, blockquote cite, blockquote footer { color: var(--global--color-primary); font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); } @media only screen and (max-width: 481px) { blockquote { padding-left: calc(0.5 * var(--global--spacing-horizontal)); } blockquote:before { left: 0; } } input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], .site textarea { border: var(--form--border-width) solid var(--form--border-color); border-radius: var(--form--border-radius); color: var(--form--color-text); line-height: var(--global--line-height-body); padding: var(--form--spacing-unit); margin: 0 2px; max-width: 100%; } input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, .site textarea:focus { color: var(--form--color-text); outline-offset: 2px; outline: 2px dotted var(--form--border-color); } input[type=text]:disabled, input[type=email]:disabled, input[type=url]:disabled, input[type=password]:disabled, input[type=search]:disabled, input[type=number]:disabled, input[type=tel]:disabled, input[type=date]:disabled, input[type=month]:disabled, input[type=week]:disabled, input[type=time]:disabled, input[type=datetime]:disabled, input[type=datetime-local]:disabled, input[type=color]:disabled, .site textarea:disabled { opacity: 0.7; } .is-dark-theme input[type=text], .is-dark-theme input[type=email], .is-dark-theme input[type=url], .is-dark-theme input[type=password], .is-dark-theme input[type=search], .is-dark-theme input[type=number], .is-dark-theme input[type=tel], .is-dark-theme input[type=date], .is-dark-theme input[type=month], .is-dark-theme input[type=week], .is-dark-theme input[type=time], .is-dark-theme input[type=datetime], .is-dark-theme input[type=datetime-local], .is-dark-theme input[type=color], .is-dark-theme .site textarea { background: var(--global--color-white-90); } input[type=search]:focus { outline-offset: -7px; } .is-dark-theme input[type=search]:focus { outline-color: var(--global--color-background); } input[type=color] { padding: calc(var(--form--spacing-unit) / 2); height: calc(4 * var(--form--spacing-unit)); } input[type=email], input[type=url] { /*rtl:ignore*/ direction: ltr; } select { border: var(--form--border-width) solid var(--form--border-color); color: var(--form--color-text); -moz-appearance: none; -webkit-appearance: none; appearance: none; line-height: var(--global--line-height-body); padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit); background: var(--global--color-white) url("data:image/svg+xml;utf8,") no-repeat; background-position: right var(--form--spacing-unit) top 60%; } select:focus { outline-offset: 2px; outline: 2px dotted var(--form--border-color); } .is-dark-theme select { background: var(--global--color-white-90) url("data:image/svg+xml;utf8,") no-repeat; background-position: right var(--form--spacing-unit) top 60%; } textarea { width: 100%; } label { font-size: var(--form--font-size); font-weight: var(--form--label-weight); margin-bottom: calc(var(--global--spacing-vertical) / 3); } /** https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker. License: MIT. */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { input[type=checkbox], input[type=radio] { -webkit-appearance: none; -moz-appearance: none; position: relative; width: 25px; height: 25px; border: var(--form--border-width) solid var(--form--border-color); background: var(--global--color-white); } input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: 0.7; } .is-dark-theme input[type=checkbox], .is-dark-theme input[type=radio] { background: var(--global--color-white-90); } input[type=checkbox]:focus { outline-offset: 2px; outline: 2px dotted var(--form--border-color); } input[type=checkbox]:after { content: ""; opacity: 0; display: block; left: 5px; top: 2px; position: absolute; width: 7px; height: 13px; border: 3px solid var(--form--color-text); border-top: 0; border-left: 0; transform: rotate(30deg); } input[type=checkbox]:checked { color: var(--form--color-text); } input[type=checkbox]:checked:after { opacity: 1; } input[type=radio] { border-radius: 50%; } input[type=radio]:focus { outline-offset: 2px; outline: 2px dotted var(--form--border-color); } input[type=radio]:after { content: ""; opacity: 0; display: block; left: 3px; top: 3px; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--form--color-text); } input[type=radio]:checked { border: 4px solid var(--form--border-color); } input[type=radio]:checked:after { opacity: 1; } input[type=radio]:checked:focus { outline-offset: 4px; outline: 2px dotted var(--form--border-color); } } input[type=checkbox] + label, input[type=radio] + label { display: inline-block; padding-left: 10px; font-size: var(--global--font-size-xs); vertical-align: top; } /** * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ height: 6px; background: var(--form--color-ranged); border-radius: 6px; outline-offset: 10px; } input[type=range]:disabled { opacity: 0.7; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 3px solid var(--form--color-ranged); height: 44px; width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; } input[type=range]::-moz-range-thumb { border: 3px solid var(--form--color-ranged); height: 44px; width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; box-sizing: border-box; } } input[type=range]::-ms-track { width: 100%; height: 6px; border-radius: 6px; border-width: 19px 0; border-color: var(--global--color-background); background: transparent; color: transparent; cursor: pointer; } input[type=range]::-ms-fill-upper { background: var(--form--color-ranged); border-radius: 6px; } input[type=range]::-ms-fill-lower { background: var(--form--color-ranged); border-radius: 6px; } input[type=range]::-ms-thumb { border: 3px solid var(--form--color-ranged); height: 44px; width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; } fieldset { display: grid; border-color: var(--global--color-secondary); padding: var(--global--spacing-horizontal); } fieldset legend { font-size: var(--global--font-size-lg); } fieldset input[type=submit] { max-width: max-content; } fieldset input:not([type=submit]) { margin-bottom: var(--global--spacing-unit); } fieldset input[type=radio], fieldset input[type=checkbox] { margin-bottom: 0; } fieldset input[type=radio] + label, fieldset input[type=checkbox] + label { font-size: var(--form--font-size); padding-left: 0; margin-bottom: var(--global--spacing-unit); } ::-moz-placeholder { opacity: 1; } .post-password-message { font-size: var(--global--font-size-lg); } .post-password-form { display: flex; flex-wrap: wrap; } .post-password-form__label { width: 100%; margin-bottom: 0; } .post-password-form input[type=password] { flex-grow: 1; margin-top: calc(var(--global--spacing-vertical) / 3); margin-right: calc(0.66 * var(--global--spacing-horizontal)); } .post-password-form__submit { margin-top: calc(var(--global--spacing-vertical) / 3); } @media only screen and (min-width: 592px) { .post-password-form__submit { margin-left: calc(0.4 * var(--global--spacing-horizontal)); } } img { height: auto; max-width: 100%; vertical-align: middle; } /* Classic editor images */ .entry-content img { max-width: 100%; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object, video { max-width: 100%; } /* Media captions */ figcaption, .wp-caption, .wp-caption-text, .wp-block-embed figcaption { color: currentColor; font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); margin-top: calc(0.5 * var(--global--spacing-unit)); margin-bottom: var(--global--spacing-unit); text-align: center; } .alignleft figcaption, .alignright figcaption, .alignleft .wp-caption, .alignright .wp-caption, .alignleft .wp-caption-text, .alignright .wp-caption-text, .alignleft .wp-block-embed figcaption, .alignright .wp-block-embed figcaption { margin-bottom: 0; } /* WP Smiley */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Over here, place any elements that do not need to have their own file. */ b, strong { font-weight: 700; } dfn, cite, em, i { font-style: italic; } pre { white-space: pre; overflow-x: auto; } /* * text-underline-offset doesn't work in Chrome at all 👎 * But looks nice in Safari/Firefox, so let's keep it and * maybe Chrome will support it soon. */ a { cursor: pointer; color: var(--wp--style--color--link, var(--global--color-primary)); text-underline-offset: 3px; text-decoration-skip-ink: all; } a:hover { text-decoration-style: dotted; text-decoration-skip-ink: none; } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; text-decoration: underline 1px dotted currentColor; text-decoration-skip-ink: none; background: rgba(255, 255, 255, 0.9); } .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: var(--global--color-black); color: var(--global--color-white); text-decoration: none; } .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-white)); } .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: rgba(0, 0, 0, 0.9); color: var(--wp--style--color--link, var(--global--color-white)); } .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-white)); } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { color: #21759b; background-color: #f1f1f1; } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link { background: none; } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } .has-background .has-link-color a, .has-background.has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } /* Category 05 is all about adjusting the default block styles to the given layout. I only added three blocks as examples. */ .wp-block-audio audio:focus { outline-offset: 5px; outline: 2px solid var(--global--color-primary); } /** * Button */ .site .button, button, input[type=submit], input[type=reset], .wp-block-search .wp-block-search__button, .wp-block-button .wp-block-button__link, .wp-block-file a.wp-block-file__button { border: var(--button--border-width) solid transparent; border-radius: var(--button--border-radius); cursor: pointer; font-weight: var(--button--font-weight); font-family: var(--button--font-family); font-size: var(--button--font-size); line-height: var(--button--line-height); padding: var(--button--padding-vertical) var(--button--padding-horizontal); text-decoration: none; } .site .button:not(:hover):not(:active):not(.has-text-color), button:not(:hover):not(:active):not(.has-text-color), input[type=submit]:not(:hover):not(:active):not(.has-text-color), input[type=reset]:not(:hover):not(:active):not(.has-text-color), .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color), .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { color: var(--global--color-background); } .has-background .site .button:not(:hover):not(:active):not(.has-text-color), .has-background button:not(:hover):not(:active):not(.has-text-color), .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color), .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color), .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color), .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { color: var(--local--color-background, var(--global--color-primary)); } .has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background, .has-background button:not(:hover):not(:active):not(.has-text-color).has-background, .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background, .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background, .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background, .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background, .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background { color: var(--global--color-primary); } .site .button:not(:hover):not(:active):not(.has-background), button:not(:hover):not(:active):not(.has-background), input[type=submit]:not(:hover):not(:active):not(.has-background), input[type=reset]:not(:hover):not(:active):not(.has-background), .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background), .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background), .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) { background-color: var(--global--color-primary); } .has-background .site .button:not(:hover):not(:active):not(.has-background), .has-background button:not(:hover):not(:active):not(.has-background), .has-background input[type=submit]:not(:hover):not(:active):not(.has-background), .has-background input[type=reset]:not(:hover):not(:active):not(.has-background), .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background), .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background), .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) { background-color: var(--local--color-primary, var(--global--color-primary)); } .site .button:hover, .site .button:active, button:hover, button:active, input[type=submit]:hover, input[type=submit]:active, input[type=reset]:hover, input[type=reset]:active, .wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button:active, .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:active, .wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:active { background-color: transparent; border-color: currentColor; color: inherit; } .site .button:focus, button:focus, input[type=submit]:focus, input[type=reset]:focus, .wp-block-search .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus, .wp-block-file a.wp-block-file__button:focus { outline-offset: -6px; outline: 2px dotted currentColor; } .site .button:disabled, button:disabled, input[type=submit]:disabled, input[type=reset]:disabled, .wp-block-search .wp-block-search__button:disabled, .wp-block-button .wp-block-button__link:disabled, .wp-block-file a.wp-block-file__button:disabled { background-color: var(--global--color-white-50); border-color: var(--global--color-white-50); color: var(--button--color-text-active); } /** * Block Options */ .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { color: var(--global--color-background); } .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { color: var(--local--color-background, var(--global--color-background)); } .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background { color: var(--global--color-primary); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { background-color: var(--global--color-primary); } .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { background-color: var(--local--color-primary, var(--global--color-primary)); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:active { border-color: currentColor !important; background-color: transparent !important; color: inherit !important; } .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background), .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background { border-color: currentColor; } .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { color: var(--global--color-primary); } .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { color: var(--local--color-primary, var(--global--color-primary)); } .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) { color: inherit; } .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) { background-color: transparent; } .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:active { border-color: transparent !important; background-color: var(--global--color-primary) !important; color: var(--global--color-background) !important; } .has-background .wp-block-button.is-style-outline .wp-block-button__link:hover, .has-background .wp-block-button.is-style-outline .wp-block-button__link:active { background-color: var(--local--color-primary, var(--global--color-primary)) !important; color: var(--local--color-background, var(--global--color-background)) !important; } .has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover, .has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active { color: var(--local--color-background, var(--global--color-background)) !important; } .wp-block-button .is-style-squared .wp-block-button__link { border-radius: 0; } .is-style-outline .wp-block-button__link[style*=radius]:focus, .wp-block-button a.wp-block-button__link[style*=radius]:focus { outline-offset: 2px; outline: 2px dotted var(--button--color-background); } .wp-block-code { border-color: var(--global--color-border); border-radius: 0; border-style: solid; border-width: 0.1rem; padding: var(--global--spacing-unit); } .wp-block-code code { color: var(--global--color-primary); white-space: pre; overflow-x: auto; display: block; } .wp-block-columns:not(.alignwide):not(.alignfull) { clear: both; } .wp-block-columns .wp-block-column > * { margin-top: calc(0.66 * var(--global--spacing-vertical)); margin-bottom: calc(0.66 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-columns .wp-block-column > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } .wp-block-columns .wp-block-column > *:first-child { margin-top: 0; } .wp-block-columns .wp-block-column > *:last-child { margin-bottom: 0; } .wp-block-columns .wp-block-column:last-child { margin-bottom: 0; } .wp-block-columns .wp-block-column:not(:last-child) { margin-bottom: calc(0.66 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-columns .wp-block-column:not(:last-child) { margin-bottom: var(--global--spacing-vertical); } } @media only screen and (min-width: 822px) { .wp-block-columns .wp-block-column:not(:last-child) { margin-bottom: 0; } } .wp-block-columns.is-style-twentytwentyone-columns-overlap { justify-content: space-around; } @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { margin-left: calc(-2 * var(--global--spacing-horizontal)); margin-top: calc(2.5 * var(--global--spacing-horizontal)); z-index: 2; } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp