Use logo in header in larger viewports

Change header color to match the text of the logo itself. This changes the look a little but it's more in-line with the logo when changing viewport size while reading like changing a table from portrait to landscape.
benbjohnson · Dec 26, 2023 · 57174d0 · 57174d0
1 parent 04a5f3d
commit 57174d0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
@@ -39,7 +39,12 @@ h3 a {
 }
 
 .navbar-brand {
-  color: #0053fa !important;
+  color: rgb(12,13,95) !important;
+  letter-spacing: -1px;
+}
+
+.navbar-brand img {
+  height: 2rem;
 }
 
 body.home .navbar-brand {

diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -5,7 +5,8 @@
     <label class="menu-icon d-md-none" for="menu-btn"><span class="navicon"></span></label>
 
     <a class="navbar-brand order-1 order-md-0 mr-auto" href="{{ .Site.BaseURL | absURL }}">
-      {{ .Site.Params.Title }}
+      <img class="d-md-inline d-none" src="/images/logo.svg" />
+      <span class="d-sm-inline d-md-none">{{ .Site.Params.Title }}</span>
     </a>
 
     <ul class="navbar-nav social-nav order-3 order-md-5">