traxxx-web/components/footer/footer.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.content"
			:href="env.links.content"
			target="_blank"
			class="footer-segment footer-link"
		>Content Removal / 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(--glass);

	&:not(:first-child) {
		border-left: solid 1px var(--glass-weak-30);
	}
}

.footer-link:hover {
	color: var(--primary);

	.icon {
		fill: var(--primary);
	}
}

.discord .icon {
	height: 1.25rem;
	width: 3.5rem;
	fill: var(--glass-strong-10);
}
</style>