Adrian Fennert
e299b91039
- add lucide svelte icon library - add footer section to data.json - add footer types - add css variables - update header position mobile
80 lines
1.5 KiB
Svelte
80 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { Footer } from '$lib/types/data';
|
|
import { Github, Linkedin } from '@lucide/svelte';
|
|
|
|
let { links, copyright }: Footer = $props();
|
|
</script>
|
|
|
|
<footer>
|
|
<ul>
|
|
{#if (links.linkedin)}
|
|
<li>
|
|
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
|
|
<a href={links.linkedin} target="_blank">
|
|
<Linkedin class="icon" />
|
|
</a>
|
|
</li>
|
|
{/if}
|
|
{#if (links.git)}
|
|
<li>
|
|
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
|
|
<a href={links.git} target="_blank">
|
|
<Github class="icon" />
|
|
</a>
|
|
</li>
|
|
{/if}
|
|
</ul>
|
|
<div>{copyright}</div>
|
|
</footer>
|
|
|
|
<style>
|
|
footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-top: 5rem;
|
|
padding: 2rem;
|
|
background-color: var(--color-footer-background);
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
|
|
margin: unset;
|
|
padding: unset;
|
|
list-style: none;
|
|
|
|
@media (min-width: 768px) {
|
|
gap: 2rem;
|
|
}
|
|
}
|
|
|
|
li {
|
|
display: contents;
|
|
}
|
|
|
|
a {
|
|
padding: 0.5rem;
|
|
text-decoration: none;
|
|
|
|
&:visited {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
div {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
text-align: center;
|
|
}
|
|
</style> |