Merge pull request #105 from JaneliaSciComp/link-to-janelia-home-page…

…-from-logo-in-footer Footer includes link to Janelia homepage, wrapped around Janelia logo
JaneliaSciComp · Feb 5, 2024 · e7c86f1 · e7c86f1
2 parents 2f4915b + 527b921
commit e7c86f1
Showing 1 changed file with 48 additions and 40 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,23 +1,28 @@
 ---
 import { footerData } from "../data/navigation";
-import { Icon } from "astro-icon/components"
-import janeliaLogoBlack from "../assets/images/HHMI_Janelia_Logo-Black.png"
-import janeliaLogoWhite from "../assets/images/HHMI_Janelia_Logo-White.png"
-
-const baseUrl = import.meta.env.BASE_URL
+import { Icon } from "astro-icon/components";
+import janeliaLogoBlack from "../assets/images/HHMI_Janelia_Logo-Black.png";
+import janeliaLogoWhite from "../assets/images/HHMI_Janelia_Logo-White.png";
 
+const baseUrl = import.meta.env.BASE_URL;
 ---
 
-<footer class="relative border-t border-gray-200 dark:border-slate-800 not-prose">
-  <div class="dark:bg-dark absolute inset-0 pointer-events-none" aria-hidden="true"></div>
-
+<footer
+  class="relative border-t border-gray-200 dark:border-slate-800 not-prose"
+>
+  <div
+    class="dark:bg-dark absolute inset-0 pointer-events-none"
+    aria-hidden="true"
+  >
+  </div>
+
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300">
-
     <div class="flex justify-between items-start my-6">
-
       <div>
         <div class="mb-2">
-          <a class="inline-block font-bold text-xl" href={baseUrl}>🔬 OSSI@Janelia</a>
+          <a class="inline-block font-bold text-xl" href={baseUrl}
+            >🔬 OSSI@Janelia</a
+          >
         </div>
         <div class="flex flex-col gap-2 text-sm text-muted">
           {
@@ -33,36 +38,40 @@ const baseUrl = import.meta.env.BASE_URL
         </div>
       </div>
       <div class="w-24 min-[400px]:w-32 md:w-44">
-        <img
-          src={janeliaLogoBlack.src}
-          alt='Logo for the Howard Hughes Medical Institute Janelia Research Campus'
-          class="block dark:hidden"
-        />
-        <img
-          src={janeliaLogoWhite.src}
-          alt='Logo for the Howard Hughes Medical Institute Janelia Research Campus'
-          class="hidden dark:block"
-        />
-      </div>   
+        <a href="https://www.janelia.org/" target="_blank">
+          <img
+            src={janeliaLogoBlack.src}
+            alt="Logo for the Howard Hughes Medical Institute Janelia Research Campus"
+            class="block dark:hidden"
+          />
+          <img
+            src={janeliaLogoWhite.src}
+            alt="Logo for the Howard Hughes Medical Institute Janelia Research Campus"
+            class="hidden dark:block"
+          />
+        </a>
+      </div>
     </div>
     <div>
-      {footerData.links && footerData.links.length > 0 && (
-        <ul class="text-sm">
-          {footerData.links.map(({ text, href, ariaLabel }) => (
-            <li class="mb-2">
-              <a
-                class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
-                href={href}
-                aria-label={ariaLabel}
-              >
-                <Fragment set:html={text} />
-              </a>
-            </li>
-          ))}
-        </ul>
-      )}
+      {
+        footerData.links && footerData.links.length > 0 && (
+          <ul class="text-sm">
+            {footerData.links.map(({ text, href, ariaLabel }) => (
+              <li class="mb-2">
+                <a
+                  class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
+                  href={href}
+                  aria-label={ariaLabel}
+                >
+                  <Fragment set:html={text} />
+                </a>
+              </li>
+            ))}
+          </ul>
+        )
+      }
     </div>
-    
+
     <div class="md:flex md:items-center md:justify-between pb-6">
       {
         footerData.socialLinks.length ? (
@@ -81,14 +90,13 @@ const baseUrl = import.meta.env.BASE_URL
             ))}
           </ul>
         ) : (
-          ''
+          ""
         )
       }
 
       <div class="text-sm mr-4 dark:text-slate-400">
         <Fragment set:html={footerData.footNote} />
       </div>
     </div>
-
   </div>
 </footer>