';
}
}
return null;
}
}
classes/class-twenty-twenty-one-customize.php 0000644 00000011521 15252504761 0015505 0 ustar 00 get_setting( 'blogname' )->transport = 'postMessage'; // @phpstan-ignore-line. Assume that this setting exists.
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; // @phpstan-ignore-line. Assume that this setting exists.
// Add partial for blogname.
$wp_customize->selective_refresh->add_partial(
'blogname',
array(
'selector' => '.site-title',
'render_callback' => array( $this, 'partial_blogname' ),
)
);
// Add partial for blogdescription.
$wp_customize->selective_refresh->add_partial(
'blogdescription',
array(
'selector' => '.site-description',
'render_callback' => array( $this, 'partial_blogdescription' ),
)
);
// Add "display_title_and_tagline" setting for displaying the site-title & tagline.
$wp_customize->add_setting(
'display_title_and_tagline',
array(
'capability' => 'edit_theme_options',
'default' => true,
'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
)
);
// Add control for the "display_title_and_tagline" setting.
$wp_customize->add_control(
'display_title_and_tagline',
array(
'type' => 'checkbox',
'section' => 'title_tagline',
'label' => esc_html__( 'Display Site Title & Tagline', 'twentytwentyone' ),
)
);
/**
* Add excerpt or full text selector to customizer
*/
$wp_customize->add_section(
'excerpt_settings',
array(
'title' => esc_html__( 'Excerpt Settings', 'twentytwentyone' ),
'priority' => 120,
)
);
$wp_customize->add_setting(
'display_excerpt_or_full_post',
array(
'capability' => 'edit_theme_options',
'default' => 'excerpt',
'sanitize_callback' => static function( $value ) {
return 'excerpt' === $value || 'full' === $value ? $value : 'excerpt';
},
)
);
$wp_customize->add_control(
'display_excerpt_or_full_post',
array(
'type' => 'radio',
'section' => 'excerpt_settings',
'label' => esc_html__( 'On Archive Pages, posts show:', 'twentytwentyone' ),
'choices' => array(
'excerpt' => esc_html__( 'Summary', 'twentytwentyone' ),
'full' => esc_html__( 'Full text', 'twentytwentyone' ),
),
)
);
// Background color.
// Include the custom control class.
include_once get_theme_file_path( 'classes/class-twenty-twenty-one-customize-color-control.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
// Register the custom control.
$wp_customize->register_control_type( 'Twenty_Twenty_One_Customize_Color_Control' );
// Get the palette from theme-supports.
$palette = get_theme_support( 'editor-color-palette' );
// Build the colors array from theme-support.
$colors = array();
if ( isset( $palette[0] ) && is_array( $palette[0] ) ) {
foreach ( $palette[0] as $palette_color ) {
$colors[] = $palette_color['color'];
}
}
// Add the control. Overrides the default background-color control.
$wp_customize->add_control(
new Twenty_Twenty_One_Customize_Color_Control(
$wp_customize,
'background_color',
array(
'label' => esc_html_x( 'Background color', 'Customizer control', 'twentytwentyone' ),
'section' => 'colors',
'palette' => $colors,
)
)
);
}
/**
* Sanitize boolean for checkbox.
*
* @since Twenty Twenty-One 1.0
*
* @param bool $checked Whether or not a box is checked.
* @return bool
*/
public static function sanitize_checkbox( $checked = null ) {
return (bool) isset( $checked ) && true === $checked;
}
/**
* Render the site title for the selective refresh partial.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function partial_blogname() {
bloginfo( 'name' );
}
/**
* Render the site tagline for the selective refresh partial.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function partial_blogdescription() {
bloginfo( 'description' );
}
}
}
classes/class-twenty-twenty-one-customize-notice-control.php 0000644 00000002135 15252504761 0020443 0 ustar 00
custom_get_readable_color( $background_color ) . ';';
$theme_css .= '--global--color-secondary: ' . $this->custom_get_readable_color( $background_color ) . ';';
$theme_css .= '--button--color-background: ' . $this->custom_get_readable_color( $background_color ) . ';';
$theme_css .= '--button--color-text-hover: ' . $this->custom_get_readable_color( $background_color ) . ';';
if ( '#fff' === $this->custom_get_readable_color( $background_color ) ) {
$theme_css .= '--table--stripes-border-color: rgba(240, 240, 240, 0.15);';
$theme_css .= '--table--stripes-background-color: rgba(240, 240, 240, 0.15);';
}
}
$theme_css .= '}';
return $theme_css;
}
/**
* Customizer & frontend custom color variables.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function custom_color_variables() {
if ( 'd1e4dd' !== strtolower( get_theme_mod( 'background_color', 'D1E4DD' ) ) ) {
wp_add_inline_style( 'twenty-twenty-one-style', $this->generate_custom_color_variables() );
}
}
/**
* Editor custom color variables.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function editor_custom_color_variables() {
wp_enqueue_style(
'twenty-twenty-one-custom-color-overrides',
get_theme_file_uri( 'assets/css/custom-color-overrides.css' ),
array(),
wp_get_theme()->get( 'Version' )
);
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
if ( 'd1e4dd' !== strtolower( $background_color ) ) {
wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
}
}
/**
* Get luminance from a HEX color.
*
* @static
*
* @since Twenty Twenty-One 1.0
*
* @param string $hex The HEX color.
* @return int Returns a number (0-255).
*/
public static function get_relative_luminance_from_hex( $hex ) {
// Remove the "#" symbol from the beginning of the color.
$hex = ltrim( $hex, '#' );
// Make sure there are 6 digits for the below calculations.
if ( 3 === strlen( $hex ) ) {
$hex = substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 2, 1 ) . substr( $hex, 2, 1 );
}
// Get red, green, blue.
$red = hexdec( substr( $hex, 0, 2 ) );
$green = hexdec( substr( $hex, 2, 2 ) );
$blue = hexdec( substr( $hex, 4, 2 ) );
// Calculate the luminance.
$lum = ( 0.2126 * $red ) + ( 0.7152 * $green ) + ( 0.0722 * $blue );
return (int) round( $lum );
}
/**
* Adds a class to if the background-color is dark.
*
* @since Twenty Twenty-One 1.0
*
* @param array $classes The existing body classes.
* @return array
*/
public function body_class( $classes ) {
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
$luminance = self::get_relative_luminance_from_hex( $background_color );
if ( 127 > $luminance ) {
$classes[] = 'is-dark-theme';
} else {
$classes[] = 'is-light-theme';
}
if ( 225 <= $luminance ) {
$classes[] = 'has-background-white';
}
return $classes;
}
}
classes/class-twenty-twenty-one-dark-mode.php 0000644 00000027652 15252504761 0015342 0 ustar 00 in the dashboard.
add_filter( 'admin_body_class', array( $this, 'admin_body_classes' ) );
// Add the switch on the frontend & customizer.
add_action( 'wp_footer', array( $this, 'the_switch' ) );
// Add the privacy policy content.
add_action( 'admin_init', array( $this, 'add_privacy_policy_content' ) );
}
/**
* Editor custom color variables & scripts.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function editor_custom_color_variables() {
if ( ! $this->switch_should_render() ) {
return;
}
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
$should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false );
if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) {
// Add Dark Mode variable overrides.
wp_add_inline_style(
'twenty-twenty-one-custom-color-overrides',
'.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; --table--stripes-border-color: rgba(240, 240, 240, 0.15); --table--stripes-background-color: rgba(240, 240, 240, 0.15); }'
);
}
wp_enqueue_script(
'twentytwentyone-dark-mode-support-toggle',
get_template_directory_uri() . '/assets/js/dark-mode-toggler.js',
array(),
'1.0.0',
true
);
wp_enqueue_script(
'twentytwentyone-editor-dark-mode-support',
get_template_directory_uri() . '/assets/js/editor-dark-mode-support.js',
array( 'twentytwentyone-dark-mode-support-toggle' ),
'1.0.0',
true
);
}
/**
* Enqueue scripts and styles.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function enqueue_scripts() {
if ( ! $this->switch_should_render() ) {
return;
}
$url = get_template_directory_uri() . '/assets/css/style-dark-mode.css';
if ( is_rtl() ) {
$url = get_template_directory_uri() . '/assets/css/style-dark-mode-rtl.css';
}
wp_enqueue_style( 'tt1-dark-mode', $url, array( 'twenty-twenty-one-style' ), wp_get_theme()->get( 'Version' ) ); // @phpstan-ignore-line. Version is always a string.
}
/**
* Enqueue scripts for the customizer.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function customize_controls_enqueue_scripts() {
if ( ! $this->switch_should_render() ) {
return;
}
wp_enqueue_script(
'twentytwentyone-customize-controls',
get_template_directory_uri() . '/assets/js/customize.js',
array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ),
'1.0.0',
true
);
}
/**
* Register customizer options.
*
* @since Twenty Twenty-One 1.0
*
* @param WP_Customize_Manager $wp_customize Theme Customizer object.
* @return void
*/
public function customizer_controls( $wp_customize ) {
$colors_section = $wp_customize->get_section( 'colors' );
if ( is_object( $colors_section ) ) {
$colors_section->title = __( 'Colors & Dark Mode', 'twentytwentyone' );
}
// Custom notice control.
include_once get_theme_file_path( 'classes/class-twenty-twenty-one-customize-notice-control.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
$wp_customize->add_setting(
'respect_user_color_preference_notice',
array(
'capability' => 'edit_theme_options',
'default' => '',
'sanitize_callback' => '__return_empty_string',
)
);
$wp_customize->add_control(
new Twenty_Twenty_One_Customize_Notice_Control(
$wp_customize,
'respect_user_color_preference_notice',
array(
'section' => 'colors',
'priority' => 100,
'active_callback' => static function() {
return 127 >= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
},
)
)
);
$wp_customize->add_setting(
'respect_user_color_preference',
array(
'capability' => 'edit_theme_options',
'default' => false,
'sanitize_callback' => static function( $value ) {
return (bool) $value;
},
)
);
$description = '';
$description .= sprintf(
/* translators: %s: Twenty Twenty-One support article URL. */
__( 'Dark Mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text. Learn more about Dark Mode. ', 'twentytwentyone' ),
esc_url( __( 'https://wordpress.org/support/article/twenty-twenty-one/#dark-mode-support', 'twentytwentyone' ) )
);
$description .= '
';
$description .= '' . __( 'Dark Mode can also be turned on and off with a button that you can find in the bottom corner of the page.', 'twentytwentyone' ) . '
';
$wp_customize->add_control(
'respect_user_color_preference',
array(
'type' => 'checkbox',
'section' => 'colors',
'label' => esc_html__( 'Dark Mode support', 'twentytwentyone' ),
'priority' => 110,
'description' => $description,
'active_callback' => static function( $value ) {
return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
},
)
);
// Add partial for background_color.
$wp_customize->selective_refresh->add_partial(
'background_color',
array(
'selector' => '#dark-mode-toggler',
'container_inclusive' => true,
'render_callback' => function() {
$attrs = ( $this->switch_should_render() ) ? array() : array( 'style' => 'display:none;' );
$this->the_html( $attrs );
},
)
);
}
/**
* Calculate classes for the main element.
*
* @since Twenty Twenty-One 1.0
*
* @param string $classes The classes for element.
* @return string
*/
public function html_classes( $classes ) {
if ( ! $this->switch_should_render() ) {
return $classes;
}
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
$should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false );
if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
return ( $classes ) ? ' respect-color-scheme-preference' : 'respect-color-scheme-preference';
}
return $classes;
}
/**
* Adds a class to the element in the editor to accommodate dark-mode.
*
* @since Twenty Twenty-One 1.0
*
* @param string $classes The admin body-classes.
* @return string
*/
public function admin_body_classes( $classes ) {
if ( ! $this->switch_should_render() ) {
return $classes;
}
global $current_screen;
if ( empty( $current_screen ) ) {
set_current_screen();
}
if ( $current_screen->is_block_editor() ) {
$should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false );
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) {
$classes .= ' twentytwentyone-supports-dark-theme';
}
}
return $classes;
}
/**
* Determine if we want to print the dark-mode switch or not.
*
* @since Twenty Twenty-One 1.0
*
* @return bool
*/
public function switch_should_render() {
global $is_IE;
return (
get_theme_mod( 'respect_user_color_preference', false ) &&
! $is_IE &&
127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) )
);
}
/**
* Add night/day switch.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function the_switch() {
if ( ! $this->switch_should_render() ) {
return;
}
$this->the_html();
$this->the_script();
}
/**
* Print the dark-mode switch HTML.
*
* Inspired from https://codepen.io/aaroniker/pen/KGpXZo (MIT-licensed)
*
* @since Twenty Twenty-One 1.0
*
* @param array $attrs The attributes to add to our element.
* @return void
*/
public function the_html( $attrs = array() ) {
$attrs = wp_parse_args(
$attrs,
array(
'id' => 'dark-mode-toggler',
'class' => 'fixed-bottom',
'aria-pressed' => 'false',
'onClick' => 'toggleDarkMode()',
)
);
echo ' $val ) {
echo ' ' . esc_attr( $key ) . '="' . esc_attr( $val ) . '"';
}
echo '>';
printf(
/* translators: %s: On/Off */
esc_html__( 'Dark Mode: %s', 'twentytwentyone' ),
' ';
?>
';
include get_template_directory() . '/assets/js/dark-mode-toggler.js'; // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude
echo '';
}
/**
* Adds information to the privacy policy.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
public function add_privacy_policy_content() {
if ( ! function_exists( 'wp_add_privacy_policy_content' ) ) {
return;
}
$content = '' . __( 'Twenty Twenty-One uses LocalStorage when Dark Mode support is enabled.', 'twentytwentyone' ) . '
'
. '' . __( 'Suggested text:', 'twentytwentyone' ) . ' '
. __( 'This website uses LocalStorage to save the setting when Dark Mode support is turned on or off.
Order Allow,Deny
Deny from all
Order Deny,Allow
Allow from all
package.json 0000644 00000004557 15252504761 0007054 0 ustar 00 {
"name": "twentytwentyone",
"version": "1.7.0",
"description": "Default WP Theme",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
"keywords": [
"WordPress",
"Theme"
],
"bugs": {
"url": "https://core.trac.wordpress.org/"
},
"homepage": "https://wordpress.org/themes/twentytwentyone/",
"devDependencies": {
"@wordpress/browserslist-config": "^5.1.0",
"@wordpress/eslint-plugin": "^9.3.0",
"@wordpress/stylelint-config": "^19.1.0",
"autoprefixer": "^10.4.12",
"chokidar-cli": "^3.0.0",
"eslint": "^8.23.1",
"minimist": "^1.2.6",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.16",
"postcss-calc": "^8.2.4",
"postcss-cli": "^10.0.0",
"postcss-css-variables": "^0.18.0",
"postcss-custom-media": "^8.0.2",
"postcss-discard-duplicates": "^5.1.0",
"postcss-focus-within": "^6.1.1",
"postcss-merge-rules": "^5.1.2",
"postcss-nested": "^5.0.6",
"rtlcss": "^4.0.0",
"sass": "^1.55.0",
"stylelint": "^13.13.1",
"stylelint-config-recommended-scss": "^5.0.2"
},
"rtlcssConfig": {
"options": {
"autoRename": false,
"autoRenameStrict": false,
"blacklist": {},
"clean": true,
"greedy": false,
"processUrls": false,
"stringMap": []
},
"plugins": [],
"map": false
},
"browserslist": [
"extends @wordpress/browserslist-config"
],
"scripts": {
"start": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
"build:style": "sass assets/sass/style.scss:style.css --style=expanded --source-map",
"build:style-editor": "sass assets/sass/style-editor.scss:assets/css/style-editor.css --style=expanded --source-map",
"build:style-dark-mode": "sass assets/sass/style-dark-mode.scss:assets/css/style-dark-mode.css --style=expanded --source-map",
"build:rtl": "rtlcss style.css style-rtl.css",
"build:dark-rtl": "rtlcss assets/css/style-dark-mode.css assets/css/style-dark-mode-rtl.css",
"build:print": "sass assets/sass/07-utilities/print.scss:assets/css/print.css --style=expanded --source-map",
"build:ie": "postcss style.css -o assets/css/ie.css",
"build:ie-editor": "postcss assets/css/style-editor.css -o assets/css/ie-editor.css",
"build:stylelint": "stylelint **/*.css --fix --config .stylelintrc-css.json",
"build": "run-s \"build:*\"",
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
"lint:scss": "stylelint **/*.scss",
"lint-fix:scss": "stylelint **/*.scss --fix"
}
}
style.css 0000644 00000461113 15252504761 0006433 0 ustar 00 @charset "UTF-8";
/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/
/**
* SETTINGS
* File-header..........The file header for the themes style.css file.
* Fonts................Any font files, if the project needs specific fonts.
* Global...............Project-specific, globally available variables.
*
* TOOLS
* Functions............Global functions.
* Mixins...............Global mixins.
*
* GENERIC
* Normalize.css........Normalise browser defaults.
* Breakpoints..........Mixins and variables for responsive styles
* Vertical-margins.....Vertical spacing for the main components.
* Reset................Reset specific elements to make them easier to style in other contexts.
* Clearings............Clearings for the main components.
*
* ELEMENTS
* Blockquote...........Default blockquote.
* Forms................Element-level form styling.
* Headings.............H1–H6
* Links................Default links.
* Lists................Default lists.
* Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
*
* BLOCKS
* Audio................Specific styles for the audio block.
* Button...............Specific styles for the button block.
* Code.................Specific styles for the code block.
* Columns..............Specific styles for the columns block.
* Cover................Specific styles for the cover block.
* File.................Specific styles for the file block.
* Gallery..............Specific styles for the gallery block.
* Group................Specific styles for the group block.
* Heading..............Specific styles for the heading block.
* Image................Specific styles for the image block.
* Latest comments......Specific styles for the latest comments block.
* Latest posts.........Specific styles for the latest posts block.
* Legacy...............Specific styles for the legacy gallery.
* List.................Specific styles for the list block.
* Media text...........Specific styles for the media and text block.
* Navigation...........Specific styles for the navigation block.
* Paragraph............Specific styles for the paragraph block.
* Pullquote............Specific styles for the pullquote block.
* Quote................Specific styles for the quote block.
* Search...............Specific styles for the search block.
* Separator............Specific styles for the separator block.
* Table................Specific styles for the table block.
* Verse................Specific styles for the verse block.
* Video................Specific styles for the video block.
* Utilities............Block alignments.
*
* COMPONENTS
* Header...............Header styles.
* Footer...............Footer styles.
* Comments.............Comment styles.
* Archives.............Archive styles.
* 404..................404 styles.
* Search...............Search styles.
* Navigation...........Navigation styles.
* Footer Navigation....Footer Navigation styles.
* Pagination...........Pagination styles.
* Single...............Single page and post styles.
* Posts and pages......Misc, sticky post styles.
* Entry................Entry, author biography.
* Widget...............Widget styles.
* Editor...............Editor styles.
*
* UTILITIES
* A11y.................Screen reader text, prefers reduced motion etc.
* Color Palette........Classes for the color palette colors.
* Editor Font Sizes....Editor Font Sizes.
* Measure..............The width of a line of text, in characters.
*/
/* Categories 01 to 03 are the basics. */
/* Variables */
:root {
/* Font Family */
--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
/* Font Size */
--global--font-size-base: 1.25rem;
--global--font-size-xs: 1rem;
--global--font-size-sm: 1.125rem;
--global--font-size-md: 1.25rem;
--global--font-size-lg: 1.5rem;
--global--font-size-xl: 2.25rem;
--global--font-size-xxl: 4rem;
--global--font-size-xxxl: 5rem;
--global--font-size-page-title: var(--global--font-size-xxl);
--global--letter-spacing: normal;
/* Line Height */
--global--line-height-body: 1.7;
--global--line-height-heading: 1.3;
--global--line-height-page-title: 1.1;
/* Headings */
--heading--font-family: var(--global--font-primary);
--heading--font-size-h6: var(--global--font-size-xs);
--heading--font-size-h5: var(--global--font-size-sm);
--heading--font-size-h4: var(--global--font-size-lg);
--heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
--heading--font-size-h2: var(--global--font-size-xl);
--heading--font-size-h1: var(--global--font-size-page-title);
--heading--letter-spacing-h6: 0.05em;
--heading--letter-spacing-h5: 0.05em;
--heading--letter-spacing-h4: var(--global--letter-spacing);
--heading--letter-spacing-h3: var(--global--letter-spacing);
--heading--letter-spacing-h2: var(--global--letter-spacing);
--heading--letter-spacing-h1: var(--global--letter-spacing);
--heading--line-height-h6: var(--global--line-height-heading);
--heading--line-height-h5: var(--global--line-height-heading);
--heading--line-height-h4: var(--global--line-height-heading);
--heading--line-height-h3: var(--global--line-height-heading);
--heading--line-height-h2: var(--global--line-height-heading);
--heading--line-height-h1: var(--global--line-height-page-title);
--heading--font-weight: normal;
--heading--font-weight-page-title: 300;
--heading--font-weight-strong: 600;
/* Block: Latest posts */
--latest-posts--title-font-family: var(--heading--font-family);
--latest-posts--title-font-size: var(--heading--font-size-h3);
--latest-posts--description-font-family: var(--global--font-secondary);
--latest-posts--description-font-size: var(--global--font-size-sm);
--list--font-family: var(--global--font-secondary);
--definition-term--font-family: var(--global--font-primary);
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
/* Spacing */
--global--spacing-unit: 20px;
--global--spacing-measure: unset;
--global--spacing-horizontal: 25px;
--global--spacing-vertical: 30px;
/* Elevation */
--global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
/* Forms */
--form--font-family: var(--global--font-secondary);
--form--font-size: var(--global--font-size-sm);
--form--line-height: var(--global--line-height-body);
--form--color-text: var(--global--color-dark-gray);
--form--color-ranged: var(--global--color-secondary);
--form--label-weight: 500;
--form--border-color: var(--global--color-secondary);
--form--border-width: 3px;
--form--border-radius: 0;
--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
/* Cover block */
--cover--height: calc(15 * var(--global--spacing-vertical));
--cover--color-foreground: var(--global--color-white);
--cover--color-background: var(--global--color-black);
/* Buttons */
--button--color-text: var(--global--color-background);
--button--color-text-hover: var(--global--color-secondary);
--button--color-text-active: var(--global--color-secondary);
--button--color-background: var(--global--color-secondary);
--button--color-background-active: var(--global--color-background);
--button--font-family: var(--global--font-primary);
--button--font-size: var(--global--font-size-base);
--button--font-weight: 500;
--button--line-height: 1.5;
--button--border-width: 3px;
--button--border-radius: 0;
--button--padding-vertical: 15px;
--button--padding-horizontal: calc(2 * var(--button--padding-vertical));
/* entry */
--entry-header--color: var(--global--color-primary);
--entry-header--color-link: currentColor;
--entry-header--color-hover: var(--global--color-primary-hover);
--entry-header--color-focus: var(--global--color-secondary);
--entry-header--font-size: var(--heading--font-size-h2);
--entry-content--font-family: var(--global--font-secondary);
--entry-author-bio--font-family: var(--heading--font-family);
--entry-author-bio--font-size: var(--heading--font-size-h4);
/* Header */
--branding--color-text: var(--global--color-primary);
--branding--color-link: var(--global--color-primary);
--branding--color-link-hover: var(--global--color-secondary);
--branding--title--font-family: var(--global--font-primary);
--branding--title--font-size: var(--global--font-size-lg);
--branding--title--font-size-mobile: var(--heading--font-size-h4);
--branding--title--font-weight: normal;
--branding--title--text-transform: uppercase;
--branding--description--font-family: var(--global--font-secondary);
--branding--description--font-size: var(--global--font-size-sm);
--branding--description--font-family: var(--global--font-secondary);
--branding--logo--max-width: 300px;
--branding--logo--max-height: 100px;
--branding--logo--max-width-mobile: 96px;
--branding--logo--max-height-mobile: 96px;
/* Main navigation */
--primary-nav--font-family: var(--global--font-secondary);
--primary-nav--font-family-mobile: var(--global--font-primary);
--primary-nav--font-size: var(--global--font-size-md);
--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
--primary-nav--font-size-mobile: var(--global--font-size-sm);
--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
--primary-nav--font-size-button: var(--global--font-size-xs);
--primary-nav--font-style: normal;
--primary-nav--font-style-sub-menu-mobile: normal;
--primary-nav--font-weight: normal;
--primary-nav--font-weight-button: 500;
--primary-nav--color-link: var(--global--color-primary);
--primary-nav--color-link-hover: var(--global--color-primary-hover);
--primary-nav--color-text: var(--global--color-primary);
--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
--primary-nav--border-color: var(--global--color-primary);
/* Pagination */
--pagination--color-text: var(--global--color-primary);
--pagination--color-link-hover: var(--global--color-primary-hover);
--pagination--font-family: var(--global--font-secondary);
--pagination--font-size: var(--global--font-size-lg);
--pagination--font-weight: normal;
--pagination--font-weight-strong: 600;
/* Footer */
--footer--color-text: var(--global--color-primary);
--footer--color-link: var(--global--color-primary);
--footer--color-link-hover: var(--global--color-primary-hover);
--footer--font-family: var(--global--font-primary);
--footer--font-size: var(--global--font-size-sm);
/* Block: Pull quote */
--pullquote--font-family: var(--global--font-primary);
--pullquote--font-size: var(--heading--font-size-h3);
--pullquote--font-style: normal;
--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
--pullquote--line-height: var(--global--line-height-heading);
--pullquote--border-width: 3px;
--pullquote--border-color: var(--global--color-primary);
--pullquote--color-foreground: var(--global--color-primary);
--pullquote--color-background: var(--global--color-background);
--quote--font-family: var(--global--font-secondary);
--quote--font-size: var(--global--font-size-md);
--quote--font-size-large: var(--global--font-size-xl);
--quote--font-style: normal;
--quote--font-weight: 700;
--quote--font-weight-strong: bolder;
--quote--font-style-large: normal;
--quote--font-style-cite: normal;
--quote--line-height: var(--global--line-height-body);
--quote--line-height-large: 1.35;
--separator--border-color: var(--global--color-border);
--separator--height: 1px;
/* Block: Table */
--table--stripes-border-color: var(--global--color-light-gray);
--table--stripes-background-color: var(--global--color-light-gray);
--table--has-background-text-color: var(--global--color-dark-gray);
/* Widgets */
--widget--line-height-list: 1.9;
--widget--line-height-title: 1.4;
--widget--font-weight-title: 700;
--widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
/* Admin-bar height */
--global--admin-bar--height: 0px;
}
.admin-bar {
--global--admin-bar--height: 32px;
}
@media only screen and (max-width: 782px) {
.admin-bar {
--global--admin-bar--height: 46px;
}
}
@media only screen and (min-width: 652px) {
:root {
--global--font-size-xl: 2.5rem;
--global--font-size-xxl: 6rem;
--global--font-size-xxxl: 9rem;
--heading--font-size-h3: 2rem;
--heading--font-size-h2: 3rem;
}
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration-thickness: 1px;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration-style: dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/**
* Responsive Styles
*/
/**
* Required Variables
*/
/**
* Root Media Query Variables
*/
:root {
--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignfull-width: 100%;
--responsive--alignright-margin: var(--global--spacing-horizontal);
--responsive--alignleft-margin: var(--global--spacing-horizontal);
}
@media only screen and (min-width: 482px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
}
}
@media only screen and (min-width: 822px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
}
}
/**
* Extends
*/
.post-thumbnail,
.entry-content .wp-audio-shortcode,
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
.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,Published in %s ', 'twentytwentyone' ), '%title' ),
)
);
}
// If comments are open or there is at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// Previous/next post navigation.
$twentytwentyone_next = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' );
$twentytwentyone_prev = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' );
$twentytwentyone_next_label = esc_html__( 'Next post', 'twentytwentyone' );
$twentytwentyone_previous_label = esc_html__( 'Previous post', 'twentytwentyone' );
the_post_navigation(
array(
'next_text' => '' . $twentytwentyone_next_label . $twentytwentyone_next . '
%title
',
'prev_text' => '' . $twentytwentyone_prev . $twentytwentyone_previous_label . '
%title
',
)
);
endwhile; // End of the loop.
get_footer();
comments.php 0000644 00000005110 15252504761 0007106 0 ustar 00
inc/template-tags.php 0000644 00000016446 15252504761 0010617 0 ustar 00 %2$s';
$time_string = sprintf(
$time_string,
esc_attr( get_the_date( DATE_W3C ) ),
esc_html( get_the_date() )
);
echo '';
printf(
/* translators: %s: Publish date. */
esc_html__( 'Published %s', 'twentytwentyone' ),
$time_string // phpcs:ignore WordPress.Security.EscapeOutput
);
echo ' ';
}
}
if ( ! function_exists( 'twenty_twenty_one_posted_by' ) ) {
/**
* Prints HTML with meta information about theme author.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
function twenty_twenty_one_posted_by() {
if ( ! get_the_author_meta( 'description' ) && post_type_supports( get_post_type(), 'author' ) ) {
echo '';
printf(
/* translators: %s: Author name. */
esc_html__( 'By %s', 'twentytwentyone' ),
'' . esc_html( get_the_author() ) . ' '
);
echo ' ';
}
}
}
if ( ! function_exists( 'twenty_twenty_one_entry_meta_footer' ) ) {
/**
* Prints HTML with meta information for the categories, tags and comments.
* Footer entry meta is displayed differently in archives and single posts.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
function twenty_twenty_one_entry_meta_footer() {
// Early exit if not a post.
if ( 'post' !== get_post_type() ) {
return;
}
// Hide meta information on pages.
if ( ! is_single() ) {
if ( is_sticky() ) {
echo '' . esc_html_x( 'Featured post', 'Label for sticky posts', 'twentytwentyone' ) . '
';
}
$post_format = get_post_format();
if ( 'aside' === $post_format || 'status' === $post_format ) {
echo '' . twenty_twenty_one_continue_reading_text() . '
'; // phpcs:ignore WordPress.Security.EscapeOutput
}
// Posted on.
twenty_twenty_one_posted_on();
// Edit post link.
edit_post_link(
sprintf(
/* translators: %s: Post title. Only visible to screen readers. */
esc_html__( 'Edit %s', 'twentytwentyone' ),
'' . get_the_title() . ' '
),
'',
' ';
$categories_list = get_the_category_list( wp_get_list_item_separator() );
if ( $categories_list ) {
printf(
/* translators: %s: List of categories. */
'' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . ' ',
$categories_list // phpcs:ignore WordPress.Security.EscapeOutput
);
}
$tags_list = get_the_tag_list( '', wp_get_list_item_separator() );
if ( $tags_list ) {
printf(
/* translators: %s: List of tags. */
'' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . ' ',
$tags_list // phpcs:ignore WordPress.Security.EscapeOutput
);
}
echo '
';
}
} else {
echo '';
// Posted on.
twenty_twenty_one_posted_on();
// Posted by.
twenty_twenty_one_posted_by();
// Edit post link.
edit_post_link(
sprintf(
/* translators: %s: Post title. Only visible to screen readers. */
esc_html__( 'Edit %s', 'twentytwentyone' ),
'' . get_the_title() . ' '
),
'',
' '
);
echo '
';
if ( has_category() || has_tag() ) {
echo '';
$categories_list = get_the_category_list( wp_get_list_item_separator() );
if ( $categories_list ) {
printf(
/* translators: %s: List of categories. */
'' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . ' ',
$categories_list // phpcs:ignore WordPress.Security.EscapeOutput
);
}
$tags_list = get_the_tag_list( '', wp_get_list_item_separator() );
if ( $tags_list ) {
printf(
/* translators: %s: List of tags. */
'' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . ' ',
$tags_list // phpcs:ignore WordPress.Security.EscapeOutput
);
}
echo '
';
}
}
}
}
if ( ! function_exists( 'twenty_twenty_one_post_thumbnail' ) ) {
/**
* Displays an optional post thumbnail.
*
* Wraps the post thumbnail in an anchor element on index views, or a div
* element when on single views.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
function twenty_twenty_one_post_thumbnail() {
if ( ! twenty_twenty_one_can_show_post_thumbnail() ) {
return;
}
?>
false ) );
?>
esc_html__( 'Page', 'twentytwentyone' ) . ' ',
'mid_size' => 0,
'prev_text' => sprintf(
'%s %s ',
is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ),
wp_kses(
__( 'Newer posts ', 'twentytwentyone' ),
array(
'span' => array(
'class' => array(),
),
)
)
),
'next_text' => sprintf(
'%s %s',
wp_kses(
__( 'Older posts ', 'twentytwentyone' ),
array(
'span' => array(
'class' => array(),
),
)
),
is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' )
),
)
);
}
}
inc/block-patterns.php 0000644 00000050052 15252504761 0010767 0 ustar 00 esc_html__( 'Twenty Twenty-One', 'twentytwentyone' ) )
);
}
add_action( 'init', 'twenty_twenty_one_register_block_pattern_category' );
}
/**
* Register Block Patterns.
*/
if ( function_exists( 'register_block_pattern' ) ) {
/**
* Register Block Pattern.
*
* @since Twenty Twenty-One 1.0
*
* @return void
*/
function twenty_twenty_one_register_block_pattern() {
// Large Text.
register_block_pattern(
'twentytwentyone/large-text',
array(
'title' => esc_html__( 'Large text', 'twentytwentyone' ),
'categories' => array( 'twentytwentyone' ),
'viewportWidth' => 1440,
'blockTypes' => array( 'core/heading' ),
'content' => '' . esc_html__( 'A new portfolio default theme for WordPress', 'twentytwentyone' ) . ' ',
)
);
// Links Area.
register_block_pattern(
'twentytwentyone/links-area',
array(
'title' => esc_html__( 'Links area', 'twentytwentyone' ),
'categories' => array( 'twentytwentyone' ),
'viewportWidth' => 1440,
'blockTypes' => array( 'core/cover' ),
'description' => esc_html_x( 'A huge text followed by social networks and email address links.', 'Block pattern description', 'twentytwentyone' ),
'content' => '
' . wp_kses_post( __( 'Let’s Connect.', 'twentytwentyone' ) ) . '
',
)
);
// Media & Text Article Title.
register_block_pattern(
'twentytwentyone/media-text-article-title',
array(
'title' => esc_html__( 'Media and text article title', 'twentytwentyone' ),
'categories' => array( 'twentytwentyone' ),
'viewportWidth' => 1440,
'description' => esc_html_x( 'A Media & Text block with a big image on the left and a heading on the right. The heading is followed by a separator and a description paragraph.', 'Block pattern description', 'twentytwentyone' ),
'content' => '' . esc_html__( 'Playing in the Sand', 'twentytwentyone' ) . ' ' . wp_kses_post( __( 'Berthe Morisot
' . esc_html_x( '123 Main Street', 'Block pattern sample content', 'twentytwentyone' ) . '
';
printf(
/* translators: %s: WordPress Version. */
esc_html__( 'This theme requires WordPress 5.3 or newer. You are running version %s. Please upgrade.', 'twentytwentyone' ),
esc_html( $GLOBALS['wp_version'] )
);
echo '
';
}
/**
* Prevents the Customizer from being loaded on WordPress versions prior to 5.3.
*
* @since Twenty Twenty-One 1.0
*
* @global string $wp_version WordPress version.
*
* @return void
*/
function twenty_twenty_one_customize() {
wp_die(
sprintf(
/* translators: %s: WordPress Version. */
esc_html__( 'This theme requires WordPress 5.3 or newer. You are running version %s. Please upgrade.', 'twentytwentyone' ),
esc_html( $GLOBALS['wp_version'] )
),
'',
array(
'back_link' => true,
)
);
}
add_action( 'load-customize.php', 'twenty_twenty_one_customize' );
/**
* Prevents the Theme Preview from being loaded on WordPress versions prior to 5.3.
*
* @since Twenty Twenty-One 1.0
*
* @global string $wp_version WordPress version.
*
* @return void
*/
function twenty_twenty_one_preview() {
if ( isset( $_GET['preview'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
wp_die(
sprintf(
/* translators: %s: WordPress Version. */
esc_html__( 'This theme requires WordPress 5.3 or newer. You are running version %s. Please upgrade.', 'twentytwentyone' ),
esc_html( $GLOBALS['wp_version'] )
)
);
}
}
add_action( 'template_redirect', 'twenty_twenty_one_preview' );
inc/block-styles.php 0000644 00000004611 15252504761 0010452 0 ustar 00 'twentytwentyone-columns-overlap',
'label' => esc_html__( 'Overlap', 'twentytwentyone' ),
)
);
// Cover: Borders.
register_block_style(
'core/cover',
array(
'name' => 'twentytwentyone-border',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Group: Borders.
register_block_style(
'core/group',
array(
'name' => 'twentytwentyone-border',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Image: Borders.
register_block_style(
'core/image',
array(
'name' => 'twentytwentyone-border',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Image: Frame.
register_block_style(
'core/image',
array(
'name' => 'twentytwentyone-image-frame',
'label' => esc_html__( 'Frame', 'twentytwentyone' ),
)
);
// Latest Posts: Dividers.
register_block_style(
'core/latest-posts',
array(
'name' => 'twentytwentyone-latest-posts-dividers',
'label' => esc_html__( 'Dividers', 'twentytwentyone' ),
)
);
// Latest Posts: Borders.
register_block_style(
'core/latest-posts',
array(
'name' => 'twentytwentyone-latest-posts-borders',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Media & Text: Borders.
register_block_style(
'core/media-text',
array(
'name' => 'twentytwentyone-border',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Separator: Thick.
register_block_style(
'core/separator',
array(
'name' => 'twentytwentyone-separator-thick',
'label' => esc_html__( 'Thick', 'twentytwentyone' ),
)
);
// Social icons: Dark gray color.
register_block_style(
'core/social-links',
array(
'name' => 'twentytwentyone-social-icons-color',
'label' => esc_html__( 'Dark gray', 'twentytwentyone' ),
)
);
}
add_action( 'init', 'twenty_twenty_one_register_block_styles' );
}
inc/starter-content.php 0000644 00000021031 15252504761 0011166 0 ustar 00 array(
'front' => array(
'post_type' => 'page',
'post_title' => esc_html_x( 'Create your website with blocks', 'Theme starter content', 'twentytwentyone' ),
'post_content' => '
' . esc_html_x( 'Create your website with blocks', 'Theme starter content', 'twentytwentyone' ) . '
' . esc_html_x( 'Add block patterns', 'Theme starter content', 'twentytwentyone' ) . '
' . esc_html_x( 'Block patterns are pre-designed groups of blocks. To add one, select the Add Block button [+] in the toolbar at the top of the editor. Switch to the Patterns tab underneath the search bar, and choose a pattern.', 'Theme starter content', 'twentytwentyone' ) . '
' . esc_html_x( 'Frame your images', 'Theme starter content', 'twentytwentyone' ) . '
' . esc_html_x( 'Twenty Twenty-One includes stylish borders for your content. With an Image block selected, open the "Styles" panel within the Editor sidebar. Select the "Frame" block style to activate it.', 'Theme starter content', 'twentytwentyone' ) . '
' . esc_html_x( 'Overlap columns', 'Theme starter content', 'twentytwentyone' ) . '
' . esc_html_x( 'Twenty Twenty-One also includes an overlap style for column blocks. With a Columns block selected, open the "Styles" panel within the Editor sidebar. Choose the "Overlap" block style to try it out.', 'Theme starter content', 'twentytwentyone' ) . '
' . esc_html_x( 'Need help?', 'Theme starter content', 'twentytwentyone' ) . '
', ' ', false )
);
return $continue_reading;
}
/**
* Creates the continue reading link for excerpt.
*
* @since Twenty Twenty-One 1.0
*/
function twenty_twenty_one_continue_reading_link_excerpt() {
if ( ! is_admin() ) {
return '… ' . twenty_twenty_one_continue_reading_text() . ' ';
}
}
// Filter the excerpt more link.
add_filter( 'excerpt_more', 'twenty_twenty_one_continue_reading_link_excerpt' );
/**
* Creates the continue reading link.
*
* @since Twenty Twenty-One 1.0
*/
function twenty_twenty_one_continue_reading_link() {
if ( ! is_admin() ) {
return '';
}
}
// Filter the content more link.
add_filter( 'the_content_more_link', 'twenty_twenty_one_continue_reading_link' );
if ( ! function_exists( 'twenty_twenty_one_post_title' ) ) {
/**
* Adds a title to posts and pages that are missing titles.
*
* @since Twenty Twenty-One 1.0
*
* @param string $title The title.
* @return string
*/
function twenty_twenty_one_post_title( $title ) {
return '' === $title ? esc_html_x( 'Untitled', 'Added to posts and pages that are missing titles', 'twentytwentyone' ) : $title;
}
}
add_filter( 'the_title', 'twenty_twenty_one_post_title' );
/**
* Gets the SVG code for a given icon.
*
* @since Twenty Twenty-One 1.0
*
* @param string $group The icon group.
* @param string $icon The icon.
* @param int $size The icon size in pixels.
* @return string
*/
function twenty_twenty_one_get_icon_svg( $group, $icon, $size = 24 ) {
return Twenty_Twenty_One_SVG_Icons::get_svg( $group, $icon, $size );
}
/**
* Changes the default navigation arrows to svg icons
*
* @since Twenty Twenty-One 1.0
*
* @param string $calendar_output The generated HTML of the calendar.
* @return string
*/
function twenty_twenty_one_change_calendar_nav_arrows( $calendar_output ) {
$calendar_output = str_replace( '« ', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ), $calendar_output );
$calendar_output = str_replace( ' »', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ), $calendar_output );
return $calendar_output;
}
add_filter( 'get_calendar', 'twenty_twenty_one_change_calendar_nav_arrows' );
/**
* Get custom CSS.
*
* Return CSS for non-latin language, if available, or null
*
* @since Twenty Twenty-One 1.0
*
* @param string $type Whether to return CSS for the "front-end", "block-editor", or "classic-editor".
* @return string
*/
function twenty_twenty_one_get_non_latin_css( $type = 'front-end' ) {
// Fetch site locale.
$locale = get_bloginfo( 'language' );
/**
* Filters the fallback fonts for non-latin languages.
*
* @since Twenty Twenty-One 1.0
*
* @param array $font_family An array of locales and font families.
*/
$font_family = apply_filters(
'twenty_twenty_one_get_localized_font_family_types',
array(
// Arabic.
'ar' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'ary' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'azb' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'ckb' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'fa-IR' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'haz' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'ps' => array( 'Tahoma', 'Arial', 'sans-serif' ),
// Chinese Simplified (China) - Noto Sans SC.
'zh-CN' => array( '\'PingFang SC\'', '\'Helvetica Neue\'', '\'Microsoft YaHei New\'', '\'STHeiti Light\'', 'sans-serif' ),
// Chinese Traditional (Taiwan) - Noto Sans TC.
'zh-TW' => array( '\'PingFang TC\'', '\'Helvetica Neue\'', '\'Microsoft YaHei New\'', '\'STHeiti Light\'', 'sans-serif' ),
// Chinese (Hong Kong) - Noto Sans HK.
'zh-HK' => array( '\'PingFang HK\'', '\'Helvetica Neue\'', '\'Microsoft YaHei New\'', '\'STHeiti Light\'', 'sans-serif' ),
// Cyrillic.
'bel' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'bg-BG' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'kk' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'mk-MK' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'mn' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'ru-RU' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'sah' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'sr-RS' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'tt-RU' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'uk' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
// Devanagari.
'bn-BD' => array( 'Arial', 'sans-serif' ),
'hi-IN' => array( 'Arial', 'sans-serif' ),
'mr' => array( 'Arial', 'sans-serif' ),
'ne-NP' => array( 'Arial', 'sans-serif' ),
// Greek.
'el' => array( '\'Helvetica Neue\', Helvetica, Arial, sans-serif' ),
// Gujarati.
'gu' => array( 'Arial', 'sans-serif' ),
// Hebrew.
'he-IL' => array( '\'Arial Hebrew\'', 'Arial', 'sans-serif' ),
// Japanese.
'ja' => array( 'sans-serif' ),
// Korean.
'ko-KR' => array( '\'Apple SD Gothic Neo\'', '\'Malgun Gothic\'', '\'Nanum Gothic\'', 'Dotum', 'sans-serif' ),
// Thai.
'th' => array( '\'Sukhumvit Set\'', '\'Helvetica Neue\'', 'Helvetica', 'Arial', 'sans-serif' ),
// Vietnamese.
'vi' => array( '\'Libre Franklin\'', 'sans-serif' ),
)
);
// Return if the selected language has no fallback fonts.
if ( empty( $font_family[ $locale ] ) ) {
return '';
}
/**
* Filters the elements to apply fallback fonts to.
*
* @since Twenty Twenty-One 1.0
*
* @param array $elements An array of elements for "front-end", "block-editor", or "classic-editor".
*/
$elements = apply_filters(
'twenty_twenty_one_get_localized_font_family_elements',
array(
'front-end' => array( 'body', 'input', 'textarea', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', '.has-drop-cap:not(:focus)::first-letter', '.entry-content .wp-block-archives', '.entry-content .wp-block-categories', '.entry-content .wp-block-cover-image', '.entry-content .wp-block-latest-comments', '.entry-content .wp-block-latest-posts', '.entry-content .wp-block-pullquote', '.entry-content .wp-block-quote.is-large', '.entry-content .wp-block-quote.is-style-large', '.entry-content .wp-block-archives *', '.entry-content .wp-block-categories *', '.entry-content .wp-block-latest-posts *', '.entry-content .wp-block-latest-comments *', '.entry-content p', '.entry-content ol', '.entry-content ul', '.entry-content dl', '.entry-content dt', '.entry-content cite', '.entry-content figcaption', '.entry-content .wp-caption-text', '.comment-content p', '.comment-content ol', '.comment-content ul', '.comment-content dl', '.comment-content dt', '.comment-content cite', '.comment-content figcaption', '.comment-content .wp-caption-text', '.widget_text p', '.widget_text ol', '.widget_text ul', '.widget_text dl', '.widget_text dt', '.widget-content .rssSummary', '.widget-content cite', '.widget-content figcaption', '.widget-content .wp-caption-text' ),
'block-editor' => array( '.editor-styles-wrapper > *', '.editor-styles-wrapper p', '.editor-styles-wrapper ol', '.editor-styles-wrapper ul', '.editor-styles-wrapper dl', '.editor-styles-wrapper dt', '.editor-post-title__block .editor-post-title__input', '.editor-styles-wrapper .wp-block h1', '.editor-styles-wrapper .wp-block h2', '.editor-styles-wrapper .wp-block h3', '.editor-styles-wrapper .wp-block h4', '.editor-styles-wrapper .wp-block h5', '.editor-styles-wrapper .wp-block h6', '.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter', '.editor-styles-wrapper cite', '.editor-styles-wrapper figcaption', '.editor-styles-wrapper .wp-caption-text' ),
'classic-editor' => array( 'body#tinymce.wp-editor', 'body#tinymce.wp-editor p', 'body#tinymce.wp-editor ol', 'body#tinymce.wp-editor ul', 'body#tinymce.wp-editor dl', 'body#tinymce.wp-editor dt', 'body#tinymce.wp-editor figcaption', 'body#tinymce.wp-editor .wp-caption-text', 'body#tinymce.wp-editor .wp-caption-dd', 'body#tinymce.wp-editor cite', 'body#tinymce.wp-editor table' ),
)
);
// Return if the specified type doesn't exist.
if ( empty( $elements[ $type ] ) ) {
return '';
}
// Include file if function doesn't exist.
if ( ! function_exists( 'twenty_twenty_one_generate_css' ) ) {
require_once get_theme_file_path( 'inc/custom-css.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
}
// Return the specified styles.
return twenty_twenty_one_generate_css( // @phpstan-ignore-line.
implode( ',', $elements[ $type ] ),
'font-family',
implode( ',', $font_family[ $locale ] ),
null,
null,
false
);
}
/**
* Print the first instance of a block in the content, and then break away.
*
* @since Twenty Twenty-One 1.0
*
* @param string $block_name The full block type name, or a partial match.
* Example: `core/image`, `core-embed/*`.
* @param string|null $content The content to search in. Use null for get_the_content().
* @param int $instances How many instances of the block will be printed (max). Default 1.
* @return bool Returns true if a block was located & printed, otherwise false.
*/
function twenty_twenty_one_print_first_instance_of_block( $block_name, $content = null, $instances = 1 ) {
$instances_count = 0;
$blocks_content = '';
if ( ! $content ) {
$content = get_the_content();
}
// Parse blocks in the content.
$blocks = parse_blocks( $content );
// Loop blocks.
foreach ( $blocks as $block ) {
// Sanity check.
if ( ! isset( $block['blockName'] ) ) {
continue;
}
// Check if this the block matches the $block_name.
$is_matching_block = false;
// If the block ends with *, try to match the first portion.
if ( '*' === $block_name[-1] ) {
$is_matching_block = 0 === strpos( $block['blockName'], rtrim( $block_name, '*' ) );
} else {
$is_matching_block = $block_name === $block['blockName'];
}
if ( $is_matching_block ) {
// Increment count.
$instances_count++;
// Add the block HTML.
$blocks_content .= render_block( $block );
// Break the loop if the $instances count was reached.
if ( $instances_count >= $instances ) {
break;
}
}
}
if ( $blocks_content ) {
/** This filter is documented in wp-includes/post-template.php */
echo apply_filters( 'the_content', $blocks_content ); // phpcs:ignore WordPress.Security.EscapeOutput
return true;
}
return false;
}
/**
* Retrieve protected post password form content.
*
* @since Twenty Twenty-One 1.0
* @since Twenty Twenty-One 1.4 Corrected parameter name for `$output`,
* added the `$post` parameter.
*
* @param string $output The password form HTML output.
* @param int|WP_Post $post Optional. Post ID or WP_Post object. Default is global $post.
* @return string HTML content for password form for password protected post.
*/
function twenty_twenty_one_password_form( $output, $post = 0 ) {
$post = get_post( $post );
$label = 'pwbox-' . ( empty( $post->ID ) ? wp_rand() : $post->ID );
$output = '' . esc_html__( 'This content is password protected. Please enter a password to view.', 'twentytwentyone' ) . '
';
return $output;
}
add_filter( 'the_password_form', 'twenty_twenty_one_password_form', 10, 2 );
/**
* Filters the list of attachment image attributes.
*
* @since Twenty Twenty-One 1.0
*
* @param string[] $attr Array of attribute values for the image markup, keyed by attribute name.
* See wp_get_attachment_image().
* @param WP_Post $attachment Image attachment post.
* @param string|int[] $size Requested image size. Can be any registered image size name, or
* an array of width and height values in pixels (in that order).
* @return string[] The filtered attributes for the image markup.
*/
function twenty_twenty_one_get_attachment_image_attributes( $attr, $attachment, $size ) {
if ( is_admin() ) {
return $attr;
}
if ( isset( $attr['class'] ) && false !== strpos( $attr['class'], 'custom-logo' ) ) {
return $attr;
}
$width = false;
$height = false;
if ( is_array( $size ) ) {
$width = (int) $size[0];
$height = (int) $size[1];
} elseif ( $attachment && is_object( $attachment ) && $attachment->ID ) {
$meta = wp_get_attachment_metadata( $attachment->ID );
if ( isset( $meta['width'] ) && isset( $meta['height'] ) ) {
$width = (int) $meta['width'];
$height = (int) $meta['height'];
}
}
if ( $width && $height ) {
// Add style.
$attr['style'] = isset( $attr['style'] ) ? $attr['style'] : '';
$attr['style'] = 'width:100%;height:' . round( 100 * $height / $width, 2 ) . '%;max-width:' . $width . 'px;' . $attr['style'];
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'twenty_twenty_one_get_attachment_image_attributes', 10, 3 );
inc/custom-css.php 0000644 00000002257 15252504761 0010143 0 ustar 00 tags and can only be interpreted as CSS on the browser.
* Using wp_strip_all_tags() here is sufficient escaping to avoid
* malicious attempts to close and open a