Update footer
This commit is contained in:
parent
4178ac505b
commit
d4692a9723
21
package-lock.json
generated
21
package-lock.json
generated
@ -9,6 +9,7 @@
|
||||
"version": "1.0.0-alpha",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/vue-fontawesome": "^2.0.2",
|
||||
"bootstrap": "^5.0.2",
|
||||
@ -1648,6 +1649,18 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-brands-svg-icons": {
|
||||
"version": "5.15.4",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
|
||||
"integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.36"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.15.4",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
|
||||
@ -19024,6 +19037,14 @@
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.36"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-brands-svg-icons": {
|
||||
"version": "5.15.4",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
|
||||
"integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.36"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.15.4",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/vue-fontawesome": "^2.0.2",
|
||||
"bootstrap": "^5.0.2",
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div id="app">
|
||||
<SiteHeader />
|
||||
<router-view />
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -15,12 +16,14 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import SiteHeader from '@/components/SiteHeader'
|
||||
import SiteHeader from './components/SiteHeader'
|
||||
import Footer from './components/Footer'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
SiteHeader
|
||||
SiteHeader,
|
||||
Footer
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
98
src/components/Footer.vue
Normal file
98
src/components/Footer.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="logo">Kamil<span class="logo-element">Craft</span></div>
|
||||
<ul class="social-media">
|
||||
<li class="social-link"
|
||||
v-for="link in socialLinks"
|
||||
:key="link.title.slug">
|
||||
<a class="link"
|
||||
:href="link.link"
|
||||
:title="link.title"
|
||||
target="_blank">
|
||||
<font-awesome-icon class="icon" :icon="['fab', link.icon]" />
|
||||
<span class="title">{{ link.title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
background-color: #323232;
|
||||
padding: 35px 0;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.logo {
|
||||
padding: 14px 20px 14px 40px;
|
||||
font-family: 'Thasadith', sans-serif;
|
||||
font-size: 2.5em;
|
||||
color: #D4D4D4;
|
||||
background-color: #5B5B5B;
|
||||
|
||||
.logo-element {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
|
||||
.social-media {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
.social-link {
|
||||
margin-right: 25px;
|
||||
font-size: 1.1em;
|
||||
|
||||
a {
|
||||
color: #A3A3A3;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 790px) {
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Footer',
|
||||
data () {
|
||||
return {
|
||||
socialLinks: [
|
||||
{ link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube' },
|
||||
{ link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -6,9 +6,11 @@ import store from './store'
|
||||
import '../scss/default.scss'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { fas } from '@fortawesome/free-solid-svg-icons'
|
||||
import { fab } from '@fortawesome/free-brands-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
|
||||
library.add(fas)
|
||||
library.add(fab)
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user