traxxx-web/components/footer/footer.vue

65 lines
1.1 KiB
Vue

<template>
<footer class="footer">
<span class="footer-segment">© traxxx</span>
<a
v-if="env.links.discord"
:href="env.links.discord"
target="_blank"
rel="noopener noreferrer"
class="footer-segment footer-link nolink discord"
><Icon icon="discord" /></a>
<a
v-if="env.links.dmca"
:href="env.links.dmca"
target="_blank"
class="footer-segment footer-link"
>dmca</a>
</footer>
</template>
<script setup>
import { inject } from 'vue';
const pageContext = inject('pageContext');
const { env } = pageContext;
</script>
<style scoped>
.footer {
display: flex;
justify-content: center;
align-items: stretch;
background: var(--background-base-20);
box-shadow: inset 0 0 3px var(--shadow-weak-30);
font-size: .8rem;
font-weight: bold;
}
.footer-segment {
display: inline-flex;
align-items: center;
padding: .5rem 1rem;
color: var(--shadow);
&:not(:first-child) {
border-left: solid 1px var(--shadow-weak-30);
}
}
.footer-link:hover {
color: var(--primary);
.icon {
fill: var(--primary);
}
}
.discord .icon {
height: 1.25rem;
width: 3.5rem;
fill: var(--shadow-strong-10);
}
</style>