@misterchad’s CSS didn’t quite work for my image size, but I figured out a variant with the help of @CurioHeart and also added a logo that displays on mobile.
/* Site Logo */
.search-view-container {
margin: 100px 0;
}
.site-body-left-column-site-name {
color: transparent;
line-height: 0;
padding: 0;
}
.site-body-left-column-site-name::before {
display: block;
content: url(https://daobase.github.io/daobase-assets/logo_obsidian_publish.png);
width: 100%;
transform: scale(0.085);
-webkit-transform-origin-x: left;
-webkit-transform-origin-y: top;
position: absolute;
}
/* Site Logo Mobile */
.site-header-text {
color: transparent;
}
.site-header {
background: url(https://daobase.github.io/daobase-assets/logo_obsidian_publish.png) no-repeat;
padding: 10px 10px 10px 10px;
background-position-x: center;
background-size: contain;
}
You’ll need to adjust transform: scale(0.085); and .search-view-container { margin: 100px 0; depending on the dimensions of your logo.
If you want the name of your site to be displayed, remove the transparent lines and adjust line-height/padding to make it play nicely with the logo.