Improve site title and logo tags

This commit is contained in:
Tetrakern 2024-03-16 21:27:29 +01:00
parent a958c3d830
commit a350f37eab
4 changed files with 11 additions and 7 deletions

View File

@ -1 +1 @@
.top-header{background:var(--top-header-background);width:100%;contain:style layout}.top-header__content{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1rem .5rem;margin:0 auto;max-width:var(--site-width)}@media only screen and (min-width: 1024px){.top-header__content{justify-content:flex-start;padding-bottom:.25rem}}.top-header .custom-logo-link{flex:0 0 auto}.top-header .custom-logo{display:block;height:var(--header-logo-height);max-height:calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);width:auto;object-fit:contain}.top-header._no-tagline .custom-logo{max-height:calc(var(--site-title-font-size) + .75rem)}.top-header._no-title .custom-logo{max-height:unset}.top-header:not(._no-text-shadow) .top-header__title{text-shadow:var(--site-title-text-shadow)}.top-header__title{flex:0 1 auto}.top-header__heading{font:700 var(--site-title-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header__heading a{color:var(--site-title-heading-color)}.top-header__tagline{color:var(--site-title-tagline-color);font:400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header._no-logo{text-align:center}@media only screen and (min-width: 1024px){.top-header._no-logo{text-align:left}}
.top-header{background:var(--top-header-background);width:100%;contain:style layout}.top-header__content{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 1rem .5rem;margin:0 auto;max-width:var(--site-width)}@media only screen and (min-width: 1024px){.top-header__content{justify-content:flex-start;padding-bottom:.25rem}}.top-header__logo{flex:0 0 auto}.top-header .custom-logo{display:block;height:var(--header-logo-height);max-height:calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);width:auto;object-fit:contain}.top-header._no-tagline .custom-logo{max-height:calc(var(--site-title-font-size) + .75rem)}.top-header._no-title .custom-logo{max-height:unset}.top-header:not(._no-text-shadow) .top-header__title{text-shadow:var(--site-title-text-shadow)}.top-header__title{flex:0 1 auto}.top-header__heading{font:700 var(--site-title-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header__heading a{color:var(--site-title-heading-color)}.top-header__tagline{color:var(--site-title-tagline-color);font:400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);letter-spacing:0}.top-header._no-logo{text-align:center}@media only screen and (min-width: 1024px){.top-header._no-logo{text-align:left}}

View File

@ -24,6 +24,8 @@ defined( 'ABSPATH' ) OR exit;
$header_style = get_theme_mod( 'header_style', 'default' );
$show_title_shadow = get_theme_mod( 'title_text_shadow', false );
$tag = in_array( $header_style, ['default', 'overlay'] ) ? 'header' : 'div';
$title_tag = is_front_page() ? 'h1' : 'div';
$logo_tag = ( display_header_text() || ! is_front_page() ) ? 'div' : 'h1';
?>
@ -35,12 +37,12 @@ $tag = in_array( $header_style, ['default', 'overlay'] ) ? 'header' : 'div';
<div class="header__content">
<?php if ( has_custom_logo() ) : ?>
<div class="header__logo"><?php the_custom_logo(); ?></div>
<<?php echo $logo_tag; ?> class="header__logo"><?php the_custom_logo(); ?></<?php echo $logo_tag; ?>>
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<div class="header__title <?php if ( ! $show_title_shadow ) echo '_no-text-shadow'; ?>">
<h1 class="header__title-heading"><a href="<?php echo esc_url( home_url() ); ?>" class="header__title-link" rel="home"><?php echo get_bloginfo( 'name' ); ?></a></h1>
<<?php echo $title_tag; ?> class="header__title-heading"><a href="<?php echo esc_url( home_url() ); ?>" class="header__title-link" rel="home"><?php echo get_bloginfo( 'name' ); ?></a></<?php echo $title_tag; ?>>
<?php if ( ! empty( get_bloginfo( 'description' ) ) ) : ?>
<div class="header__title-tagline"><?php echo get_bloginfo( 'description' ); ?></div>
<?php endif; ?>

View File

@ -21,6 +21,8 @@
defined( 'ABSPATH' ) OR exit;
// Setup
$title_tag = is_front_page() ? 'h1' : 'div';
$logo_tag = ( display_header_text() || ! is_front_page() ) ? 'div' : 'h1';
$classes = [];
if ( ! display_header_text() ) {
@ -48,16 +50,16 @@ if ( ! get_theme_mod( 'title_text_shadow', false ) ) {
<div class="top-header__content">
<?php if ( has_custom_logo() ) : ?>
<?php the_custom_logo(); ?>
<<?php echo $logo_tag; ?> class="top-header__logo"><?php the_custom_logo(); ?></<?php echo $logo_tag; ?>>
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<div class="top-header__title">
<h1 class="top-header__heading">
<<?php echo $title_tag; ?> class="top-header__heading">
<a href="<?php echo esc_url( home_url() ); ?>" class="top-header__link" rel="home"><?php
echo get_bloginfo( 'name' );
?></a>
</h1>
</<?php echo $title_tag; ?>>
<?php if ( ! empty( get_bloginfo( 'description' ) ) ) : ?>
<div class="top-header__tagline"><?php echo get_bloginfo( 'description' ); ?></div>
<?php endif; ?>

View File

@ -21,7 +21,7 @@
}
}
.custom-logo-link {
&__logo {
flex: 0 0 auto;
}