<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>