Cian-H/am-d-model.eu
1
0
Fork 0
mirror of https://github.com/Cian-H/am-d-model.eu.git synced 2025-12-23 05:51:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated footer to include ESAFORM logo and link

Browse Source
This commit is contained in:
Cian Hughes
2025-02-05 18:38:59 +00:00
parent 246e66c0f9
commit 7e9d6dd6e5
2 changed files with 121 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/components/NavigationFooter.svelte
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"

195
src/lib/styles/NavigationFooter.scss
View File

@@ -1,142 +1,153 @@
.navigation-footer { .navigation-footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
background: #ffffff; background: #ffffff;
width: 100%; width: 100%;
height: 240px; height: 240px;
} }
.navigation-footer-column { .navigation-footer-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
height: 100%; height: 100%;
width: 33%; width: 33%;
padding: 32px; padding: 32px;
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;
} }
.navigation-footer-column-mid { .navigation-footer-column-mid {
@extend .navigation-footer-column; @extend .navigation-footer-column;
align-items: center; align-items: center;
} }
.navigation-footer-column-right { .navigation-footer-column-right {
@extend .navigation-footer-column; @extend .navigation-footer-column;
align-items: center; align-items: center;
} }
.navigation-footer-site-name { .navigation-footer-site-name {
color: #000000; color: #000000;
text-align: left; text-align: left;
font-family: "Assistant", sans-serif; font-family: "Assistant", sans-serif;
font-size: 24px; font-size: 24px;
position: relative; position: relative;
padding: 8px; padding: 8px;
} }
.navigation-footer-topic-column { .navigation-footer-topic-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
} }
.navigation-footer-topic { .navigation-footer-topic {
color: #000000; color: #000000;
font-family: "Assistant", sans-serif; font-family: "Assistant", sans-serif;
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;
position: relative; position: relative;
} }
.navigation-footer-link { .navigation-footer-link {
color: #454545; color: #454545;
font-family: "Assistant", sans-serif; font-family: "Assistant", sans-serif;
font-size: 24px; font-size: 24px;
text-decoration: underline; text-decoration: underline;
position: relative; position: relative;
} }
.navigation-footer-social-icon { .navigation-footer-social-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
position: relative; position: relative;
} }
.navigation-footer-social-media { .navigation-footer-social-media {
// display: flex; # temporarily disable // display: flex; # temporarily disable
display: none; display: none;
flex-direction: row; flex-direction: row;
gap: var(--spacing-xs, 8px); gap: var(--spacing-xs, 8px);
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
position: relative; position: relative;
} }
.navigation-footer-buttons-icon { .navigation-footer-buttons-icon {
border-radius: 4px; border-radius: 4px;
padding: 8px; padding: 8px;
width: 42px; width: 42px;
height: 42px; height: 42px;
position: relative; position: relative;
} }
.navigation-footer-return { .navigation-footer-return {
color: rgba(70, 70, 70, 0.5); color: rgba(70, 70, 70, 0.5);
font-family: "Assistant", sans-serif; font-family: "Assistant", sans-serif;
font-size: 16px; font-size: 16px;
position: relative; position: relative;
} }
@media (max-width: 820px) { @media (max-width: 820px) {
.navigation-footer { .navigation-footer {
height: 100%; height: 100%;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.navigation-footer-column { .navigation-footer-column {
width: 100%; width: 100%;
} }
.navigation-footer-column-left { .navigation-footer-column-left {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.navigation-footer-column-mid { .navigation-footer-column-mid {
align-items: center; align-items: center;
} }
.navigation-footer-column-right { .navigation-footer-column-right {
align-items: center; align-items: center;
} }
.navigation-footer-topic-column { .navigation-footer-topic-column {
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
} }
} }
@media (max-width: 620px) { @media (max-width: 620px) {
.navigation-footer-column-left { .navigation-footer-column-left {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.navigation-footer-topic-column { .navigation-footer-topic-column {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }