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-22 21:41: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 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"

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

@@ -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;
}
}