Client - add footer

This commit is contained in:
Sam 2021-07-25 17:10:55 +02:00
parent fa8656f839
commit 799da84bc9
2 changed files with 84 additions and 0 deletions

View File

@ -1,15 +1,18 @@
<template>
<NavBar />
<router-view />
<Footer />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Footer from '@/components/Footer.vue'
import NavBar from '@/components/NavBar.vue'
export default defineComponent({
name: 'App',
components: {
Footer,
NavBar,
},
})

View File

@ -0,0 +1,81 @@
<template>
<div id="footer">
<div class="footer-items">
<div class="footer-item"><strong>FitTrackee</strong> vx.xx</div>
<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
href="https://choosealicense.com/licenses/gpl-3.0/"
target="_blank"
rel="noopener noreferrer"
>
GPLv3 </a
>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>
<style scoped lang="scss">
#footer {
display: flex;
bottom: 0;
position: absolute;
width: 100%;
background: white;
color: #8b8c8c;
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;
text-align: center;
}
}
@media screen and (max-width: 550px) {
.footer-items {
font-size: 0.85em;
.footer-item {
padding: 5px 5px;
}
.bullet {
padding: 5px 0;
}
}
}
}
</style>