Allow separate logo-href only for logo (use site root if none provided)

This improves the behavior for #1922, allowing the logo-href to only target the link around the logo (rather than overriding the link used for the title text as well).

Author: dragonstyle

src/resources/projects/website/navigation/quarto-nav.scss

@@ -59,20 +59,32 @@ header.headroom--unpinned {
 }
 
 .navbar-brand {
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.navbar-brand-container {
   max-width: calc(100% - 85px);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  margin-right: 1em;
+}
+
+.navbar-brand.navbar-brand-logo {
+  margin-right: 4px;
+  display: inline-flex;
 }
 
 .navbar-toggler {
   flex-basis: content;
   flex-shrink: 0;
 }
 
-.navbar-brand > img {
+.navbar-logo {
   max-height: 24px;
   width: auto;
-  padding-right: 6px;
+  padding-right: 4px;
 }
 
 nav .nav-item:not(.compact) {

src/resources/projects/website/templates/navbrand.ejs

@@ -1,10 +1,16 @@
 <% if (navbar.title || navbar.logo) { %>
-  <a class="navbar-brand" href="<%- navbar['logo-href'] || '/index.html' %>">
+  <div class="navbar-brand-container">
   <% if (navbar.logo) { %>
-    <img src="<%- navbar.logo %>" alt="<%- navbar['logo-alt'] || '' %>" />
+    <a href="<%- navbar['logo-href'] || '/index.html' %>" class="navbar-brand navbar-brand-logo">
+    <img src="<%- navbar.logo %>" alt="<%- navbar['logo-alt'] || '' %>" class="navbar-logo" />
+    </a>
   <% } %>
+
+  
   <% if (navbar.title) { %>
+    <a class="navbar-brand" href="/index.html">
     <span class="navbar-title"><%- navbar.title %></span>
+    </a>
   <% } %>
-  </a>
+  </div>
 <% } %>