Option for sticky footer

This commit is contained in:
Alicia Sykes
2023-04-22 21:02:59 +01:00
parent 281021fd12
commit 3ed36f61a6

View File

@@ -1,5 +1,7 @@
<script lang="ts"> <script lang="ts">
import Icon from '$lib/Icon.svelte'; import Icon from '$lib/Icon.svelte';
export let bottom = false;
let footerInfo = { let footerInfo = {
author: 'Alicia Sykes', author: 'Alicia Sykes',
authorSite: 'https://github.com/lissy93', authorSite: 'https://github.com/lissy93',
@@ -10,7 +12,7 @@
}; };
</script> </script>
<footer> <footer class:bottom>
<p> <p>
© <a href={footerInfo.authorSite} target="_blank" rel="noreferrer">{footerInfo.author}</a> © <a href={footerInfo.authorSite} target="_blank" rel="noreferrer">{footerInfo.author}</a>
{new Date().getFullYear()} - Licensed under {new Date().getFullYear()} - Licensed under
@@ -26,6 +28,10 @@
padding: 0.5rem 0; padding: 0.5rem 0;
width: 100%; width: 100%;
background: var(--card); background: var(--card);
&.bottom {
box-shadow: 0 -3px 4px 0 var(--background);
position: fixed;
}
p { p {
margin: 0; margin: 0;
text-align: center; text-align: center;