[MNT] Add logo and favicon (#127)

* add logo and favicon

* add logo to landing page

docs/overrides/home.html

@@ -14,13 +14,9 @@
 <section class="bg-gradient-to-b from-[#7e56c2] to-transparent min-h-[calc(100vh-4.5rem)] xl:min-h-[calc(100vh-7rem)]">
     <div class="relative items-center w-full px-5 py-24 mx-auto md:px-12 lg:px-16 max-w-5xl">
         <div class="relative flex-col items-start m-auto align-middle">
-            <div class="px-55 grid grid-cols-1 gap-6 lg:grid-cols-1 lg:gap-24">
-            <!-- TODO: Replace with below line when logo is added back -->
-            <!-- <div class="px-55 grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-24"> -->
+            <div class="px-55 grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-24">
                 <div class="relative items-center gap-12 m-auto lg:inline-flex md:order-first">
-                    <div class="max-w-xl text-center lg:text-center">
-                    <!-- TODO: Replace with below line when logo is added back -->
-                    <!-- <div class="max-w-xl text-center lg:text-left"> -->
+                    <div class="max-w-xl text-center lg:text-left">
                         <div>
                             <p class="text-3xl font-bold tracking-tight text-slate-200 sm:text-3xl">
                                 An ecosystem for distributed dataset harmonization and search.<br>
@@ -30,9 +26,7 @@
                                 using linked data principles.
                             </p>
                         </div>
-                        <div class="flex flex-col items-center justify-center gap-3 mt-10 lg:flex-row lg:justify-center">
-                        <!-- TODO: Replace with below line when logo is added back -->
-                        <!-- <div class="flex flex-col items-center justify-center gap-3 mt-10 lg:flex-row lg:justify-start"> -->
+                        <div class="flex flex-col items-center justify-center gap-3 mt-10 lg:flex-row lg:justify-start">
                             <a href="/overview"
                                 class="items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full nline-flex hover:bg-transparent hover:border-black hover:text-black focus:outline-none lg:w-auto focus-visible:outline-black text-sm focus-visible:ring-black">
                                 Get started
@@ -42,9 +36,9 @@
                 </div>
                 <div class="relative px-20 items-center gap-12 m-auto lg:inline-flex md:order-first">
                     <!-- TODO: replace with new logo when ready. -->
-                    <!-- <img src="" alt="We are building a logo"
-                            class="mx-auto w-[24rem] my-2 rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[40rem]"
-                            width="400" height="400"> -->
+                    <img src="../imgs/logo/neurobagel_logo.png" alt="Neurobagel logo"
+                            class="mx-auto w-[24rem] my-2 sm:w-[40rem]"
+                            width="400" height="400">
                 </div>
             </div>
         </div>

mkdocs.yml

@@ -9,6 +9,8 @@ theme:
   - navigation.expand
   - content.tabs.link
   - content.code.copy  # allow user to copy a code block's contents to the clipboard
+  logo: "imgs/logo/neurobagel_logo.png"
+  favicon: "imgs/logo/neurobagel_favicon.png"
   palette:
     primary: deep purple
     accent: amber