Replace header text logo with image logo

- Use logo.webp from assets/images
- Logo height: 50px
- Negative margin (-4px) to fit within existing header height

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
2025-11-30 20:01:59 -06:00
parent d7b0861d4e
commit b35731164d
3 changed files with 13 additions and 26 deletions
File diff suppressed because one or more lines are too long
@@ -11,13 +11,9 @@
<div class="header-inner"> <div class="header-inner">
<!-- Logo --> <!-- Logo -->
<div class="site-branding"> <div class="site-branding">
<?php if (has_custom_logo()) : ?> <a href="<?php echo esc_url(home_url('/')); ?>" class="site-logo-link">
<?php the_custom_logo(); ?> <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/logo.webp'); ?>" alt="<?php bloginfo('name'); ?>" class="site-logo">
<?php else : ?> </a>
<a href="<?php echo esc_url(home_url('/')); ?>" class="site-title-link">
<span class="site-title"><?php bloginfo('name'); ?></span>
</a>
<?php endif; ?>
</div> </div>
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
@@ -27,26 +27,17 @@
// Logo / Branding // Logo / Branding
.site-branding { .site-branding {
flex-shrink: 0; flex-shrink: 0;
}
.custom-logo-link { .site-logo-link {
display: block; display: block;
}
img { .site-logo {
max-height: 60px; height: 50px;
width: auto; width: auto;
} display: block;
} margin: -4px 0; // Negative margin to fit 50px logo without changing header height
.site-title-link {
text-decoration: none;
}
.site-title {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--color-text);
letter-spacing: 0.02em;
}
} }
// Desktop Navigation // Desktop Navigation