From 7e9d6dd6e583af0c8d8ecd6aad44c68b80f6efb7 Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Wed, 5 Feb 2025 18:38:59 +0000
Subject: [PATCH] Updated footer to include ESAFORM logo and link

---
 src/lib/components/NavigationFooter.svelte |  28 +--
 src/lib/styles/NavigationFooter.scss       | 195 +++++++++++----------
 2 files changed, 121 insertions(+), 102 deletions(-)

diff --git a/src/lib/components/NavigationFooter.svelte b/src/lib/components/NavigationFooter.svelte
index 889d259..f484d4c 100644
--- a/src/lib/components/NavigationFooter.svelte
+++ b/src/lib/components/NavigationFooter.svelte
@@ -3,17 +3,22 @@
     import ScrollToTop from "$lib/components/ScrollToTop.svelte";
     import Link from "$lib/components/Link.svelte";
 
+    import { CDN } from "$lib/constants";
+
     import { navigation } from "$lib/navigation";
 </script>
 
 <div class="navigation-footer">
     <div class="navigation-footer-column-left">
-        <Link
-            class="navigation-footer-site-name"
-            text="AM-D-Model.eu"
-            hotkey="a"
-            redirectFunc={navigation.toHome}
-        />
+        <div class="navigation-footer-logo-link">
+            <a href="https://esaform.org/">
+                <img
+                    class="navigation-footer-logo"
+                    src="{CDN}/ESAFORM_logo.webp"
+                    alt="ESAFORM Logo"
+                />
+            </a>
+        </div>
         <div class="navigation-footer-social-media">
             <div class="navigation-footer-buttons-icon">
                 <img
@@ -46,14 +51,17 @@
         </div>
     </div>
     <div class="navigation-footer-column-mid">
-        <ScrollToTop
-            class="navigation-footer-return"
-            text="↥↥↥ Return to top ↥↥↥"
-        />
+        <ScrollToTop class="navigation-footer-return" text="↥↥↥ Return to top ↥↥↥" />
     </div>
     <div class="navigation-footer-column-right">
         <div class="navigation-footer-topic-column">
             <div class="navigation-footer-topic">Topic</div>
+            <Link
+                class="navigation-footer-link"
+                text="Home"
+                hotkey="d"
+                redirectFunc={navigation.toHome}
+            />
             <Link
                 class="navigation-footer-link"
                 text="Data Repository"
diff --git a/src/lib/styles/NavigationFooter.scss b/src/lib/styles/NavigationFooter.scss
index edfa13a..633d6db 100644
--- a/src/lib/styles/NavigationFooter.scss
+++ b/src/lib/styles/NavigationFooter.scss
@@ -1,142 +1,153 @@
 .navigation-footer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    background: #ffffff;
-    width: 100%;
-    height: 240px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  background: #ffffff;
+  width: 100%;
+  height: 240px;
 }
 
 .navigation-footer-column {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    position: relative;
-    height: 100%;
-    width: 33%;
-    padding: 32px;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  position: relative;
+  height: 100%;
+  width: 33%;
+  padding: 32px;
+  justify-content: center;
+}
+
+.navigation-footer-logo-link {
+  max-width: 180px;
+  padding-left: 24px;
+}
+
+.navigation-footer-logo {
+  height: 180px;
+  max-width: 180px;
+  width: auto;
 }
 
 .navigation-footer-column-left {
-    @extend .navigation-footer-column;
-    justify-content: space-between;
+  @extend .navigation-footer-column;
+  justify-content: space-between;
 }
 
 .navigation-footer-column-mid {
-    @extend .navigation-footer-column;
-    align-items: center;
+  @extend .navigation-footer-column;
+  align-items: center;
 }
 
 .navigation-footer-column-right {
-    @extend .navigation-footer-column;
-    align-items: center;
+  @extend .navigation-footer-column;
+  align-items: center;
 }
 
 .navigation-footer-site-name {
-    color: #000000;
-    text-align: left;
-    font-family: "Assistant", sans-serif;
-    font-size: 24px;
-    position: relative;
-    padding: 8px;
+  color: #000000;
+  text-align: left;
+  font-family: "Assistant", sans-serif;
+  font-size: 24px;
+  position: relative;
+  padding: 8px;
 }
 
 .navigation-footer-topic-column {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  position: relative;
 }
 
 .navigation-footer-topic {
-    color: #000000;
-    font-family: "Assistant", sans-serif;
-    font-size: 28px;
-    font-weight: 600;
-    position: relative;
+  color: #000000;
+  font-family: "Assistant", sans-serif;
+  font-size: 28px;
+  font-weight: 600;
+  position: relative;
 }
 
 .navigation-footer-link {
-    color: #454545;
-    font-family: "Assistant", sans-serif;
-    font-size: 24px;
-    text-decoration: underline;
-    position: relative;
+  color: #454545;
+  font-family: "Assistant", sans-serif;
+  font-size: 24px;
+  text-decoration: underline;
+  position: relative;
 }
 
 .navigation-footer-social-icon {
-    width: 24px;
-    height: 24px;
-    position: relative;
+  width: 24px;
+  height: 24px;
+  position: relative;
 }
 
 .navigation-footer-social-media {
-    // display: flex; # temporarily disable
-    display: none;
-    flex-direction: row;
-    gap: var(--spacing-xs, 8px);
-    align-items: flex-start;
-    justify-content: flex-start;
-    position: relative;
+  // display: flex; # temporarily disable
+  display: none;
+  flex-direction: row;
+  gap: var(--spacing-xs, 8px);
+  align-items: flex-start;
+  justify-content: flex-start;
+  position: relative;
 }
 
 .navigation-footer-buttons-icon {
-    border-radius: 4px;
-    padding: 8px;
-    width: 42px;
-    height: 42px;
-    position: relative;
+  border-radius: 4px;
+  padding: 8px;
+  width: 42px;
+  height: 42px;
+  position: relative;
 }
 
 .navigation-footer-return {
-    color: rgba(70, 70, 70, 0.5);
-    font-family: "Assistant", sans-serif;
-    font-size: 16px;
-    position: relative;
+  color: rgba(70, 70, 70, 0.5);
+  font-family: "Assistant", sans-serif;
+  font-size: 16px;
+  position: relative;
 }
 
 @media (max-width: 820px) {
-    .navigation-footer {
-        height: 100%;
-        flex-direction: column-reverse;
-    }
+  .navigation-footer {
+    height: 100%;
+    flex-direction: column-reverse;
+  }
 
-    .navigation-footer-column {
-        width: 100%;
-    }
+  .navigation-footer-column {
+    width: 100%;
+  }
 
-    .navigation-footer-column-left {
-        flex-direction: row;
-        justify-content: space-between;
-    }
+  .navigation-footer-column-left {
+    flex-direction: row;
+    justify-content: space-between;
+  }
 
-    .navigation-footer-column-mid {
-        align-items: center;
-    }
+  .navigation-footer-column-mid {
+    align-items: center;
+  }
 
-    .navigation-footer-column-right {
-        align-items: center;
-    }
+  .navigation-footer-column-right {
+    align-items: center;
+  }
 
-    .navigation-footer-topic-column {
-        flex-direction: row;
-        width: 100%;
-        justify-content: space-between;
-    }
+  .navigation-footer-topic-column {
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+  }
 }
 
 @media (max-width: 620px) {
-    .navigation-footer-column-left {
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
+  .navigation-footer-column-left {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 
-    .navigation-footer-topic-column {
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
+  .navigation-footer-topic-column {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 }