Added logo to navbar (#277)

neurobagel · Nov 15, 2023 · 656e05a · 656e05a
1 parent f6cd9a5
commit 656e05a
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 49 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,45 +1,3 @@
-/* Navbar */
-.brand-styling {
-    font-size: 2em;
-    font-family: -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        "Helvetica Neue",
-        Arial,
-        "Noto Sans",
-        "Liberation Sans",
-        sans-serif,
-        "Apple Color Emoji",
-        "Segoe UI Emoji",
-        "Segoe UI Symbol",
-        "Noto Color Emoji";
-    font-weight: bold;
-    padding-left: 1em;
-
-}
-
-.navbar {
-    background-color: white !important;
-    margin-bottom: 0.5rem;
-}
-
-.navbar-nav .nav-link:hover {
-  color: #470A68;
-}
-
-#nav-text {
-  font-size: 16px;
-  text-decoration: none;
-  font-weight: normal;
-  color: #470A68;
-}
-
-#right-nav {
-    padding-right: 1em;
-    margin-left: auto !important;
-}
-
 /* Card */
 .btn-group {
   padding-right: 0.5em;

diff --git a/components/Navbar.vue b/components/Navbar.vue
@@ -11,21 +11,25 @@
         target="_blank"
         data-cy="brand"
       >
-        <b-row>
+        <img
+          src="https://raw.githubusercontent.com/neurobagel/documentation/main/docs/imgs/logo/neurobagel_logo.png"
+          alt="Neurobagel Logo"
+          class="nav-logo"
+        >
+        <div class="nav-title-and-subtitle">
           Neurobagel Query
-        </b-row>
-        <b-row id="nav-text">
-          Define and find cohorts at the subject level
-        </b-row>
+          <p class="nav-subtitle">
+            Define and find cohorts at the subject level
+          </p>
+        </div>
       </b-navbar-brand>
       <b-navbar-toggle target="nav-collapse" />
       <b-collapse
         id="nav-collapse"
         is-nav
       >
         <b-navbar-nav
-          id="right-nav"
-          class="ml-auto"
+          class="ml-auto right-nav"
         >
           <b-nav-item
             href="https://github.com/neurobagel/query-tool/releases/tag/v0.1.0/"
@@ -57,3 +61,57 @@
     </b-navbar>
   </div>
 </template>
+
+<style>
+  .brand-styling {
+    font-family: -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      "Liberation Sans",
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    font-size: 2em;
+    font-weight: 700;
+    padding-left: 1em;
+  }
+
+  .navbar {
+      background-color: white !important;
+      margin-bottom: 0.5rem;
+  }
+
+  .navbar-nav .nav-link:hover {
+    color: #470A68;
+  }
+
+  .nav-subtitle {
+    color: grey;
+    font-size: 16px;
+    font-weight: 700;
+    text-decoration: none;
+  }
+
+  .nav-title-and-subtitle {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10px;
+    margin-top: 10px;
+  }
+
+  .right-nav {
+    padding-right: 1em;
+    margin-left: auto !important;
+  }
+
+  .nav-logo {
+    height: 60px;
+    width: auto;
+  }
+</style>