Add HIDIVE logo to banner (#526)

hms-dbmi · Oct 15, 2024 · 3adf218 · 3adf218
1 parent 9979115
commit 3adf218
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 6 deletions.
diff --git a/_includes/components/header.html b/_includes/components/header.html
@@ -5,11 +5,10 @@
   {% if header %}
   <div class="usa-navbar">
     <button class="usa-menu-btn">Menu</button>
-    <div class="usa-logo site-logo" id="logo">
-      <em class="usa-logo-text">
-        {% assign header_link_text = header.title | default: site.title %}
-        <a href="/" accesskey="1" title="Home" aria-label="{{ header_link_text }}">{{ header_link_text }}</a>
-      </em>
+    <div class="site-logo">
+      <a href="/" accesskey="1" title="Home" aria-label="Home">
+        {% include logo.svg %}
+      </a>
     </div>
   </div>
 

diff --git a/_includes/logo.svg b/_includes/logo.svg
diff --git a/assets/main.scss b/assets/main.scss
@@ -13,7 +13,33 @@ $image-path: 'uswds/img';
 }
 
 .site-logo {
-  font-family: $font-sans;
+  display: inline-block;
+  margin: 1rem;
+}
+
+.site-logo a {
+  display: block;
+  text-decoration: none;
+}
+
+.site-logo svg {
+  width: 150px;
+  height: auto;
+  vertical-align: middle;
+}
+
+.site-logo a:hover svg {
+  opacity: 0.8;
+}
+
+@media screen and (min-width: 951px) {
+  .site-logo {
+    margin: 3rem 0;
+  }
+
+  .site-logo svg {
+    width: 250px;
+  }
 }
 
 .usa-logo {