embroidery-viewer/src/lib/components/Footer.svelte

96 lines
1.7 KiB
Svelte

<script>
import { t } from '$lib/translations';
import { appVersion } from '$lib/utils/env';
</script>
<footer>
<div class="footer-content">
<div class="footer-info">
<p>
{@html $t(
'footer.copyright',
/** @type {any} */ ({
year: new Date().getFullYear(),
website: 'https://leomurca.xyz',
}),
)}
</p>
<p>
{@html $t(
'footer.version',
/** @type {any} */ ({ version: appVersion() }),
)}
</p>
</div>
<nav class="footer-nav">
<a href="/about">{$t('footer.about')}</a>
<a href="/privacy-policy">{$t('footer.privacy.policy')}</a>
<a href="/terms-of-service">{$t('footer.terms.of.service')}</a>
</nav>
</div>
</footer>
<style>
footer {
background-color: #f8f9fa;
border-top: 1px solid #ddd;
padding: 20px;
width: 100%;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.footer-info {
flex: 1 1 100%;
margin-bottom: 10px;
}
.footer-info p {
margin: 4px 0;
font-size: 14px;
color: #333;
}
.footer-info p:first-child {
font-weight: bold;
}
.footer-nav {
flex: 1 1 100%;
}
.footer-nav a {
margin: 0 10px;
font-size: 14px;
}
@media (min-width: 600px) {
.footer-content {
flex-wrap: nowrap;
text-align: left;
}
.footer-info,
.footer-nav {
flex: 1 1 50%;
margin-bottom: 0;
}
.footer-info {
text-align: left;
}
.footer-nav {
text-align: right;
}
}
</style>