traxxx/assets/components/footer/footer.vue

61 lines
986 B
Vue
Executable File

<template>
<footer class="footer">
<span class="segment">© traxxx</span>
<router-link
:to="{ name: 'stats' }"
class="segment footer-link nolink"
>stats</router-link>
<a
v-if="config.discord"
:href="config.discord"
target="_blank"
rel="noopener noreferrer"
class="segment footer-link nolink discord"
><Icon icon="discord" /></a>
</footer>
</template>
<style lang="scss" scoped>
.footer {
display: flex;
justify-content: center;
align-items: center;
background: var(--background-dim);
color: var(--shadow);
font-size: .8rem;
font-weight: bold;
box-shadow: inset -3px 0 3px var(--shadow-hint);
}
.segment {
display: inline-flex;
align-items: center;
padding: .5rem;
&:not(:last-child) {
border-right: solid 1px var(--shadow-hint);
}
}
.footer-link {
text-decoration: underline;
&:hover {
color: var(--primary);
.icon {
fill: var(--primary);
}
}
}
.discord {
.icon {
fill: var(--shadow);
width: 4rem;
}
}
</style>