FitTrackee/fittrackee_client/src/components/Footer.vue

99 lines
1.9 KiB
Vue
Raw Normal View History

2021-07-25 17:10:55 +02:00
<template>
<div id="footer">
<div class="footer-items">
<div class="footer-item">
<strong>FitTrackee</strong>
v{{ version }}
</div>
2021-07-25 17:10:55 +02:00
<div class="footer-item bullet"></div>
<div class="footer-item">
<a
href="https://github.com/SamR1/FitTrackee"
target="_blank"
rel="noopener noreferrer"
>
source code
</a>
under
<a
2021-11-06 19:24:30 +01:00
href="https://choosealicense.com/licenses/agpl-3.0/"
2021-07-25 17:10:55 +02:00
target="_blank"
rel="noopener noreferrer"
>
2021-11-06 19:24:30 +01:00
AGPLv3 </a
2021-07-25 17:10:55 +02:00
>license
</div>
<div class="footer-item bullet"></div>
<div class="footer-item">
<a
href="https://samr1.github.io/FitTrackee/"
target="_blank"
rel="noopener noreferrer"
>
documentation
</a>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
interface Props {
version: string
}
const props = defineProps<Props>()
const { version } = toRefs(props)
</script>
2021-07-25 17:10:55 +02:00
<style scoped lang="scss">
2021-11-29 11:23:21 +01:00
@import '~@/scss/vars.scss';
2021-07-25 17:10:55 +02:00
#footer {
display: flex;
bottom: 0;
position: fixed;
2021-07-25 17:10:55 +02:00
width: 100%;
background: var(--footer-background-color);
color: var(--footer-color);
2021-07-25 17:10:55 +02:00
font-size: 0.9em;
a {
text-decoration: none;
}
.footer-items {
display: flex;
align-content: center;
justify-content: center;
width: 100%;
.footer-item {
padding: 10px 10px;
border-top: solid 1px var(--footer-border-color);
2021-07-25 17:10:55 +02:00
text-align: center;
}
}
2021-08-18 17:10:16 +02:00
@media screen and (max-width: $x-small-limit) {
2021-07-25 17:10:55 +02:00
.footer-items {
font-size: 0.85em;
.footer-item {
padding: 5px 5px;
}
.bullet {
padding: 5px 0;
}
}
}
}
</style>