Updated footer to include ESAFORM logo and link

This commit is contained in:
2025-02-05 18:38:59 +00:00
parent 246e66c0f9
commit 7e9d6dd6e5
2 changed files with 121 additions and 102 deletions

View File

@@ -3,17 +3,22 @@
import ScrollToTop from "$lib/components/ScrollToTop.svelte"; import ScrollToTop from "$lib/components/ScrollToTop.svelte";
import Link from "$lib/components/Link.svelte"; import Link from "$lib/components/Link.svelte";
import { CDN } from "$lib/constants";
import { navigation } from "$lib/navigation"; import { navigation } from "$lib/navigation";
</script> </script>
<div class="navigation-footer"> <div class="navigation-footer">
<div class="navigation-footer-column-left"> <div class="navigation-footer-column-left">
<Link <div class="navigation-footer-logo-link">
class="navigation-footer-site-name" <a href="https://esaform.org/">
text="AM-D-Model.eu" <img
hotkey="a" class="navigation-footer-logo"
redirectFunc={navigation.toHome} src="{CDN}/ESAFORM_logo.webp"
alt="ESAFORM Logo"
/> />
</a>
</div>
<div class="navigation-footer-social-media"> <div class="navigation-footer-social-media">
<div class="navigation-footer-buttons-icon"> <div class="navigation-footer-buttons-icon">
<img <img
@@ -46,14 +51,17 @@
</div> </div>
</div> </div>
<div class="navigation-footer-column-mid"> <div class="navigation-footer-column-mid">
<ScrollToTop <ScrollToTop class="navigation-footer-return" text="↥↥↥ Return to top ↥↥↥" />
class="navigation-footer-return"
text="↥↥↥ Return to top ↥↥↥"
/>
</div> </div>
<div class="navigation-footer-column-right"> <div class="navigation-footer-column-right">
<div class="navigation-footer-topic-column"> <div class="navigation-footer-topic-column">
<div class="navigation-footer-topic">Topic</div> <div class="navigation-footer-topic">Topic</div>
<Link
class="navigation-footer-link"
text="Home"
hotkey="d"
redirectFunc={navigation.toHome}
/>
<Link <Link
class="navigation-footer-link" class="navigation-footer-link"
text="Data Repository" text="Data Repository"

View File

@@ -19,6 +19,17 @@
justify-content: center; 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 { .navigation-footer-column-left {
@extend .navigation-footer-column; @extend .navigation-footer-column;
justify-content: space-between; justify-content: space-between;